Hi
I am having some trouble with jquery and css
I have two stylesheets, one for 1024px wide screens and one for 1280px size screens
I have used the following coding to that I got from the following link to use the stylesheet relevant to the screen width
Works fine on the 1280px screen but on the 1024px screen size, it is using the 1280px css stylesheet
Any ideas please, not too sure where I am going wrong with it, the coding is below
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="./css/style.css" />
<!--<link rel="stylesheet" type="text/css" href="./css/ie10.css" />-->
<!--<link rel="stylesheet" media="screen and (min-device-width: 1280px)" href="./css/mediacss.css" />-->
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="./css/wide.css" />
<script>
function adjustStyle(width) {
width = parseInt(width);
if (width < 1024) {
$("#size-stylesheet").attr("href", "./css/style.css");
} else if ((width > 1100)) {
$("#size-stylesheet").attr("href", "./css/wide.css");
/*} else {
$("#size-stylesheet").attr("href", "./css/style.css");*/
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
</script>
The link below is the project I am trying to get it working on
www.irhwebsites.co.uk/sites/essexponyparties/packages.php
Thanks in advance
Ian