Kind of getting ahead of myself with the discovery of the javascript auto-refresh script..
//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});
I was stoked to have it be used as a way for my site to auto-adjust it's nav bar no matter what size the screen is. My goal was mainly to have the nav bar's menu icon "float on right" but still be visible on the screen, even on small screens. And I know there's a better way going about this, but for the moment this method seemed to work best via my limited javascript knowledge. No judgement! :-P
Anyway here's my problem. Although the nav bar re-sizes itself upon refresh, on small screens and mobile browsers it will REFRESH the page anytime the user swipes down on the site. The same happens for most tablets and smartphones.
To see what I'm talking about here is an alternate link to my website (Updating my database atm so I apologize for the horrid address numbers)
http://69.194.231.142 <---Please copy/paste this address into major/mobile browsers for diagnosis
it works great on laptops and large screens, but when viewing this site on a phone or tablet it will either refresh for infinity or refresh whenever you scroll.
If there's any way to solve this little riddle of nuisance code please let me know. Or at least, a better way to go about coding it so it only refreshes ONCE and not indefinitely. I don't know if this is possible though so any alternative solutions are welcome.
Maybe there's a way for just the CSS that makes up the nav to refresh and not the entire page? Either that or something that lets the page refresh just one time would be superb :-D
Thanks!
I found a solution!
Seems that my browser was using a cdn. So I had to flush the cache on the server to see the changes. Removed the JS refresh script and fixed the navbar to be set to "relative" when in mobile view. This way I don't have to worry about the spacing! It was originally being crossed out from this other javascript that makes the nav bar sticky, but the script also made the navbar stick on mobile view, which was messing up my layout and causing a lot of lag upon scrolling.
Fixing these little things made a big difference in my website usability. Now theres no refresh to worry about and the page stays centered on multiple screens.
Thanks all who suggested removal of the JS, Using CSS only worked like a charm!
Related
This is a rather odd question, particularly hard to search, as I'm not quite sure what's happening. I've designed a page with bootstrap and prepared it to scale accross many devices using the lg, md and sm prefixes and all that jazz.
The issue happens when I try to scale it in small screen sizes. The buttons, usually are list items, links and buttons. I have a section of tabs as well.
When they scale to a smaller screen they simply stop working, the tabs won't change... etc...
I figured it out, turns out I had the footer covering the rest of the page... that's why I couldn't click anywhere except the nav...
When in doubt alway use the inspect element... I guess that's the lesson to take away from this.
I'm building a mobile site for a great magazine with a lot of content that is partly heavily. The problem now is that I have to hide the entire right column on the mobile site (yes, I need it in this case).
I've done a great research on mobile design, read a lot of articles, but can't find a solution that addresses this problem. It's usual to hide the right column with CSS or JS. But then everything still loaded. In this case the right column is so big, with a lot of content, it seems worthwhile to not load it for the page to load faster.
What should I do?
You should be able to detect the user's browser on the backend (I assume you're using PHP) and then make a simple control structure where you decide whether to load or not load that right-hand column on your site.
Here are some libraries that you may find useful (obviously you shouldn't have to reinvent the wheel for such a trivial task):
http://mobiledetect.net/
https://github.com/serbanghita/Mobile-Detect
http://detectmobilebrowsers.com/ (uses regex)
If you think that it is not a problem that mobile users wont be able to see that content, then you should not load it. There are php classes to check for mobile devices and based on that you can decide to not load some part of content. There is one problem - php class can only base on user agent settings, not browser size, so in theory someone with high resolution mobile device wont be able to see that content anyway.
One more idea on my mind - you can not load content in php, but after general content is loaded, check in js viewport width and eventually load part of content by ajax if there is enough place.
In summary, as we dont know your site content, it is up to you to decide if you can afford to not show part of content at all (for mobile devices). In this case when resolution change, users still wont be able to see it (i.e. changing device position horizontal to vertical). Of course in this case page will load faster, which also migh be crucial for mobile internet connections.
I just found out about this really cool plugin (new for me, old for some of you maybe) and it works like a charm upon implementation, but only in regular computer browsers. When I try it on my android phone, the css3 animation of the dropdown moves really really choppy, just like its dropping frames. How can I fix this problem?
Here is the plugin I am reffering to:
http://responsive-nav.com/
They seem to have done a really nice job with the plugin, I would say the largest cause of the drop of frame rate may be because you are repainting the entire screen. If you would like, roll your own side navigation but make it go over the existing web page rather than move all the elements on the screen.
EXAMPLES OF SIMPLER MOBILE NAV without repainting
http://fringewebdevelopment.com/
http://www.sony.com/index.shtml
As a further step you can also get rid of the javascript and just do plain CSS and see how that works for you, an example of using checkboxes and labels to control the side nav can be found on my site (just inspect the code) - www.aktof.ca . Hope this helps!
This isn't a specific JS code issue, but more the way iOS deals with JS that is causing more problems on my site than most others.
On iOS only (it doesn't happen on Android) if I'm natively scrolling (up/down) and then try to activate some JS just before the scroll has finished (very quickly) then it completely ignores the JS.
I believe that Apple do this so that the UX always remains priority (don't let any crappy JS slow down the user), but in this case it's just a very simple piece of JS that I want to allow to run.
As an example, if a user is scrolling and then quickly presses a tab at the top of the screen that opens a fixed navigation panel then it won't register if the native scroll is still happening. If they press it again (the scroll has finished) then it works.
I'm also using a JS slider to scroll horizontally through images and if I try to scroll left/right just before the native up/down scroll has finished it sort of jumps and isn't good UX. I think it's prioritising the native scroll but still activating the horizontal scroll with some sort of delay.
It's not a massive problem, but not perfect. If everybody slowly navigated the site and waited for the native scroll to come to a complete stop, it would be great. But of course people won't do this.
I don't think preventing the default behaviour will do anything. I have tried to take over the native scroll before on iOS and I just don't think you can.
I think this may actually happen on many sites. I've just tried to find a good example by visiting stackoverflow.com on an iPhone and if you scroll quickly and then quickly hit a link before the scroll has finished it won't register. I don't think text links are as big a UX issue though, but a horizontal slider and big 'open menu' button at the top are much more likely to be hit quickly before the native scroll has ended (as you don't need to read something before you press it, like with text links).
I have various JS scripts on a site that would benefit from this being improved in iOS, so if I can understand a way around it, why it happens, what is going on, then I can apply individual fixes to each of those scripts.
Thanks.
The problem is not that iOS ignores javascript while scrolling (more precisely, while the scroll momentum is active). The problem is that, while that happens, iOS does not really register the position change of elements on the screen. In fact, if you have a handler attached to the scroll event, it will stop firing the moment you stop touching the screen, and then will fire just once when the scrolling stops.
Consequence? You think you're touching a link, but you aren't. The image on the screen has moved up or down, but, to the broswer, everything is on the same position, so, actually, you aren't touching anything (or are touching something different). I got very annoyed when I found this behaviour because, in my case, my page is full of images that are links to a gallery ... and if you touch them while scrolling, the gallery opens showing you not the image you touched, but another (The one that really was on that position when your fingers stopped touching the screen).
Is there a workaround? The only one that I know of is disabling the scroll momentum, but you lose scrolling performance.
I have a web page with a fixed-size layout, it's fine in its current implementation even if it's far from "state of art", but a little too high for a mobile device screen.
Since the "header" part doesn't really matter to anyone, everyone wants to immediately pan / scroll down a little when viewing the page on a mobile device (or, broadly speaking, on a viewport shorter than the page fixed height).
Is there some HTML or JS magic I can do to tell the browser to start displaying the page already-scrolled-down X pixels?
You can try something like links and anchors.
http://www.yourdomain.com/main.html#bottom
If you're using jQuery, you could try scrollTo. You'll need to work out where on the page your target is, though...
Anchors is one solution, but the way I find really nice is to use http://archive.plugins.jquery.com/project/LocalScroll. So use can detect User Agent in Javascript and scroll down in proper place using this plugin.
Cheers!
Not sure anchors would work if you are trying to implement this on the homepage.
If the header is completely pointless in mobile browser this you could use html to detect that a mobile browser is being used then from this load CSS with the header hidden, or load it at the bottom perhaps. If this sounds like a viable option I can post examples.