So I have two ways things are altered upon window resize;
Via Jquery
$(window).resize(function () {
var PageWidth = $('body').innerWidth();
if (PageWidth > 979) {
$('#TopNavList').show();
} else {
$('#TopNavList').hide();
}
$('#TopNavList').children("li").removeClass("active");
});
This is used because the person may expand content then resize, it needs to reset the top navigation.
Via CSS
@media screen and (max-width: 979px) {
/** THE CSS STYLES **/
}
@media screen and (min-width: 980px) {
/** THE CSS STYLES **/
}
My friend is testing my website progress on his Blackberry z10 and on upon page flip, there has been many problems of which I believe is due to the above methods where on some browsers in my methods they include the scrollbar and some do not.
if (PageWidth > 979) {
If I reduce this by 20px making it 959 it works but breaks other devices such as my computers Google Chrome.
I’m at a bit of a loss and I am unsure what to do.
This is one of the problems with chasing devices and a simpler approach would be to adjust the design at the point the menu needs adjusting. However if instead you reversed the logic and targeted your resize at less than 980px then you would automatically collect 979px and 959px.
I don’t however see the need for the javascript resize as you can control the menu through css and let the css media queries do the work. The javascript should do the opening and closing of the menu as required but no need to to do a resize if you have code it correctly.
Here’s a basic example I just pulled from a page of mine. The mobile nav appears at the smaller width as required at the point the nav needs to change. The js just handles the menu opening and closing but the media queries handle the styling at the different sizes.
Because JQuery’s slide and fade functions implement inline css and therefore upon resize, I need this to reset to default.
I’m having a particularly difficult bug where on my friends Blackberry z10 loading in portrait he sees the mobile version, however clicking on it shows the none mobile version of which he should only see in landscape mode.
Yes if you look at my code in my example the !important over-ride in the media query takes care of any inline styles.
I’m having a particularly difficult bug where on my friends Blackberry z10 loading in portrait he sees the mobile version, however clicking on it shows the none mobile version of which he should only see in landscape mode.
If you can send me the link to the page (or PM it to me if you want it private) then I’l take a look and see if I can recommend a different approach. Almost always these device chasing set ups fail at some stage or in particular devices which is why I advise not coding for devices but coding the design to fit all window sizes instead. The breakpoints are controlled by the design and not the device.
Without the meta tag mobile devices will just scale pages to fit and you will not get what you expect. The meta tag tells mobile devices not to ‘scale layouts to fit’ and that you will be controlling the design for smaller screens instead. If you omit the meta tag them mobile devices assume that the design is 980px width and will scale 980px to fit in the smaller viewports which is a very hit and miss affair and you end up with layouts too small to read.
The 100% is redundant and stops you applying padding to the body unless you change the box model and also no one wants a 2000px vertical scroll when they don’t need one.
The only rules you really want on the html element is to negate margin,padding and maybe height:100% for certain layouts.
If you apply a background image to the html element then the body shrinks to content height so the benefit you may think you are getting from using a spare element is lost. These days you can use multiple images on the body element for modern browsers and the body will paint full height without any special rules as they automatically propogate to html.
Close It should be !important (you had as typo which would invalidate the rule). Of course where you apply it will refer to your code and structure but as you can see in my demo I applied it inside the media query for large screens to make sure that any inline css was over-ruled. There is no need for the js resize at all and indeed will complicate the issue with both js and media queries to accommodate.
Upon having it on the mobile version expanded and then resizing, this does remove what I was doing using JQuery, however this makes it so that you can no longer drop the menu.
