Recently I have bought INSPINIA - Responsive Admin Theme, but I found I can't even get the same output for the side navigation... Anyone could help? Please...
The is the expected result...
I have no idea what else I miss out, until the whole side navigation bar got it hide once I trigger the button.
And some times I got the worst if I refresh the page...
try
<body class=" mini-navbar">
This is used for minibar
Related
My website flickers out of control when scrolling on iOS mobile. Have't run into any issues on Android at all.
https://s3-us-west-1.amazonaws.com/stage.coefficientlabs.com/index.html
I've read through some similar forums discussing
-webkit-overflow-scrolling: touch;
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
But none of my attempts seem to have worked. I think part of it is because I can't tell which specific element is causing the flicker. It just appears to me like the entire website is flickering.
I've used
-webkit-overflow-scrolling: touch;
in the past before, but now when I inspect the code, it says it has an invalid property value. Some others are experiencing the same thing; I think the feature got discontinued or something.
I just want simple, normal mobile scrolling that we're all used to expecting.
Thanks so much in advance!
EDIT
I've found out that once I click the "Click to get started" button, and close the popup, the flicker stops. This doesnt happen with any other buttons, just this one. I've been working on integrating this popup with the rest of the website, so it looks like this is the culprit.
Still dont have any strong leads to pursue...not sure why opening and closing this popup causes the website to respond properly.
EDIT 2
Okay so I removed one CSS sheet and now the scroll works. Trying to isolate what in this CSS file is causing this scrolling issue. Here is the link. Any idea whats going on here?
Okay turns out that the popup wrapper's css property "display: none" was interfering with some of the other css properties(?). I changed this to "display:block" and just coded another way to hide the popup wrapper with z-index. No more flicker!
I implemented this css dropdown menu system a few years ago and I am just realizing now that it does not work on my iPhone, yet it works fine on my bosses android phone. I was under the impression that since IOS5, i-devices do register a touch event as a hover automatically but I guess I was wrong.
The structure of this menu is a little weird in that the main tabs (other than Home and Contact) are not meant to take the user anywhere, only the submenu items actually go to another page. I have a feeling this is where the issue may lie, but I can't figure it out.
Here is a JS Fiddle.
The :hover is on <li> to cause the dropdown. Maybe this is the issue? or maybe its the way my boss coded the button so it would look like a link but not do anything on a click:
<li id="aboutus" class="blogbutton"><a><span>About Us</span></a>
I tried removing the anchor tags and the whole button goes away. I removed the span tags and the original problem still remains.
Is there a fix without having to rewrite the whole menu system?
Try adding an onclick="return True;" attribute to the base menu that triggers the drop-down. Safari will trigger the hover attributes, but only if it thinks that the element does something when it's tapped, and for a static element like a li, this is the easiest way to achieve that.
I have spent a lot of time trying jquery/javscript "fix" to get this worked. Since the last update of chrome mobile for IOS, the address bar of the browser behaves differently. I'm sure you guys are aware of what I'm talking about: You scroll down your page, the bar hides up, but once you scroll up, it appears. Yes, it is a good user experience, I can tell.
The problem is that I do have fixed element on top of my web app (header), and every time I scroll up, the address bar goes over my fixed element.
I've lookup other web apps (twitter, gmail), and they seems to have found a way to avoid this. I would like to read your ideas of how they achieved it. There is no need to tell me not to use fixed element.
So my question is : is there a way to avoid this? What's your idea of the situation.
example: https://mobile.twitter.com/EmWatson (must see on iphone preferably)
FYI : I use Jquery mobile framework for my web app.
thanks.
Well, I found a way to work.
<body style="overflow:hidden;">
<header style="width:auto;display:block;padding:12px;text-align:center;background-color:#1276c7;color:white;position:fixed;top:0;left:0;right:0;opacity:1;">FIXED HEADER</header>
<div role="main" style="height:100%;overflow-y:scroll;padding:60px 0;box-sizing:border-box;-webkit-overflow-scrolling: touch;">
<article>
...(content)...
</article>
</div>
</body>
It appears that we need an inner scrollable element and remove overflow on body. I overthought it, it seems. Hope this helps someone.
I'm French web developer, i have 2 bugs to fix for my website, i hope you can help...
I have like button, send button, and comment on my website.
The two problems are :
in IE7 the facebook like ans send buttons are not displayed correctly, it's buttons of 15px width.
On IPad, when I click on the button, the button disappears.
I tried all the codes you propose but nothing is working.
Thank you for your attention and help,
The given example code works for me. As long as you add // becore connect.facebook
Test page:
http://jsbin.com/igikap/1/edit
Result in IE7:
http://www.webpagetest.org/result/120920_11_JAR/
I´m using jquery mobile for an iPad app, and I wanted to have the typical splitview layout so I used the splitview plugin which is working fine until now, but I would still have some minor questions:
Can my first page be a normal page, meaning non-split and then when for example I click on a button go to the second page which would be split?
How do I do to enlarge the left panel if I find it a bit narrow?
Thank you for your help.
I am having the same issue.
I am able to workaround this by providing rel="external" on the link in my navigation menu. This however reloads the entire page, and the ajax effect is gone.
<li>Some Text</li>
I will be spending some time on it this weekend to get it working through ajax, will let you know if I find a solution.