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.
Related
I'm working on a responsive website and I'm so frustrated with finding a solution for this one.
this is the basic structure:
I used 'vh' sizes and when ever the URL bar slides up - the page changes the sizes of the elements and kinda "jumps", which makes a bad user experience especially when reading.
I changed the size of the second part (orange) to 'em's because I thought maybe it will not "jump" so at least where there are texts this will not happen - and I was wrong. it's still happening.
What I'm trying to get to is to make the first part (in baby-blue) opened on all of the screen no matter what screen size is displaying the page (but without making it "jump").
I'm very frustrated finding a solution to responsive pages, can you please help me solve this, or help me with some reading material that will help me solve this ?
Note: I found some codes to add that should remove the URL bars from iPhones and it didn't work :I
Since you've tagged Javascript/jQuery I'd suggest assigning the height by getting the height the specific element (eg: window, document or viewport) you want. A good comparison can be found here. From the looks of it, you might want window.outerHeight which may account for what's "under" the URL bar. On my desktop, it's the only value that's different from the rest but on mobile other values may be different as well.
document.querySelectorAll(".whatever").style.height=window.outerHeight;
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!
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!
I'm new to the HTML\CSS\Javascript thing, so please excuse my incompetence. I know for some bits (mainly class modification) I'm not using jQuery, but only because I couldn't get it to work, so I went old-skool.
I have a web page (here: http://dashboards.kantarhealthspain.com/uk/segmentation/Segmentation_v0.4.html) that works just fine in Chrome (and Safari) on my desktop. You click on the massive squares in the middle of the page, and then click on the >> to go to the next 'page'. Eventually you get to the point where it hides\unhides one of 4 segments based on what you've chosen. It's a bit clunky, but it works, which right now is a win...
When I view the same page on an iPad, the layout isn't quite as good, but that's not my problem. When you get to the final question to show\hide the segments, it seems to change the way the whole page is rendered - every element seems to take up so much room.
Debugging on an iPad is very difficult, as I'm using a Windows machine to develop, and the Safari emulator doesn't actually emulate what's going on, as it doesn't break on desktop Safari (for Windows).
I don't even know where to start looking on this - any hints would be much appreciated.
EDIT: Now I've fixed the evil HTML, it looks like when the divs at the bottom are shown\hidden, the height of each div above doubles(?) I've made the background of NavDiv and Breaker fuschia and maroon so they show up, and the double in size. The height is a percentage of the size of the page (I presume) - what's going on there?! Does the percentage recalculate when areas are unhidden?
Thanks
Tom
I did a lot of research about this topic and didn't yet find a satisfying answer:
How can I make a scrollable list (iPhone SDK Dashboard List) inside some other html content? If I create a list inside a html body and I try to scroll the whole page is scrolled. I know there is this "double finger" scrolling, but that's not what i want.
Is there some way to prevent the whole iPhone Safari Webpage from scrolling and instead letting other lists inside scroll? Like redirecting java script events?
Background: the idea is to mimic a real native application behavior with tabs at the bottom and a selection list in the body.
Appreciate any hints!
Thanks,
Patrick
there is yet another possibility, with slightly nicer scrolling simulation:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
Ok, after consulting some friends, I found the answer to this question:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
have fun.
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
this is a really great script!! It's smaller than the doctyper version and easier to work with since it doesn't have so many elements being repositioned. It also allows contained elements to be touched easier by the user. and even cooler, when you touch into a text field and the close the type panel the divs being positioned by this script snap right back into place (where as the doctyper version just has them floating out of place after the type screen retracts).
A very nice script.
A new scrolling library to keep an eye on: Scrollability.