IE problem and some on window change advice
Hello to all. I'm very new to jQuery (but not on js) and i've started using it when i want to create an index page for a site i'm making.
I wanted to change some css settings according to user's innerWindow size.Here is my code.
-
$(document).ready(function() {
var screen_width = window.innerWidth;
var screen_height = window.innerHeight;
if(screen_width>=1024 && screen_width<1280){
$("img#backGround").attr({
src: "Images/main/1024x768.jpg"
});
$("img#whats_new_img").css({
'width':350,
'height':405
});
$("div#whats_new").css({
'top':'9em',
'left':'19%'
});
$("div#fashion").css({'top':'9em'});
$("div#beauty").css({'top':'9em'});
$("div#life_and_health").css({'top':'9em'});
$("div#house_and_deco").css({'top':'17em'});
$("div#relationships").css({'top':'17em'});
$("div#shoping").css({'top':'17em'});
$("div#cooking").css({'top':'25em'});
$("div#mariage").css({'top':'25em'});
$("div#moms_and_kids").css({'top':'25em'});
$("img.small_img").css({
'width':119,
'height':130
});
$("img.small_img_on").css({
'width':136,
'height':146
});
$("img#logo_img").css({
'width':380,
'height':115
});
}else{
if(screen_width>=1280 && screen_width<1440 && screen_height < 1024){
$("img#backGround").attr({
src: "Images/main/1280x1024.jpg"
});
$("img#whats_new_img").css({
'width':469,
'height':541
});
$("img.small_img").css({
'width':147,
'height':175
});
$("img.small_img_on").css({
'width':165,
'height':195
});
}else{
if(screen_width>=1280 && screen_width<1440 && screen_height == 1024){
$("img#backGround").attr({
src: "Images/main/1280x1024.jpg"
});
$("img#whats_new_img").css({
'width':469,
'height':541
});
$("img.small_img").css({
'width':147,
'height':175
});
$("img.small_img_on").css({
'width':165,
'height':195
});
}else{
if(screen_width>=1440 && screen_width<1600){
$("img#backGround").attr({
src: "Images/main/1440x900.jpg"
});
$("img#whats_new_img").css({
'width':508,
'height':596
});
$("img.small_img").css({
'width':147,
'height':175
});
$("img.small_img_on").css({
'width':165,
'height':195
});
}else{
if(screen_width>=1600 && screen_width<1680){
$("img#backGround").attr({
src: "Images/main/1600x1024.jpg"
});
$("img#whats_new_img").css({
'width':573,
'height':677
});
$("img.small_img").css({
'width':147,
'height':175
});
$("img.small_img_on").css({
'width':165,
'height':195
});
}else{
if(screen_width>=1680){
$("img#backGround").attr({
src: "Images/main/1680x1050.jpg"
});
$("img#whats_new_img").css({
'width':573,
'height':677
});
$("img.small_img").css({
'width':147,
'height':175
});
$("img.small_img_on").css({
'width':165,
'height':195
});
}else{
$("img#backGround").attr({
src: "Images/main/1680x1050.jpg"
});
$("img#whats_new_img").css({
'width':350,
'height':405
});
$("img.small_img").css({
'width':119,
'height':130
});
$("img.small_img_on").css({
'width':136,
'height':146
});
}
}
}
}
}
}
});
1st: Everything's working fine and quick in FF but IE refuses to change the css values i'm giving with jQuery, without throwing any error.
2nd: How can i run this code again when user resize the browser window?
here is html code:
-
<body>
<img id="backGround" src="" alt="" />
<div id="container">
<div id="logo">
<img id="logo_img" src="Images/main/main_logo.png" alt="Tell A Woman" />
</div>
<div id="whats_new">
<a href="http://www.tell-a-woman.com/tellawoman/main.php">
<img id="whats_new_img" src="Images/main/main_what_is_new.png" alt="What's new" />
</a>
</div>
<div id="fashion">
<a href="">
<img class="small_img" src="Images/main/main_moda.png" alt="Μόδα" />
</a>
<span>
<a href="">
<img class="small_img_on" src="Images/main/main_moda_on.png" alt="" />
</a>
</span>
</div>
<div id="beauty">
<a href="">
<img class="small_img" src="Images/main/main_beauty.png" alt="Ομορφιά" />
</a>
<span>
<a href="">
<img class="small_img_on" src="Images/main/main_beauty_on.png" alt="" />
</a>
</span>
</div>
<div id="life_and_health">
<a href="">
<img class="small_img" src="Images/main/main_life_and_health.png" alt="Ζωή & Υγεία" />
</a>
<span>
<a href="">
<img class="small_img_on" src="Images/main/main_life_and_health_on.png" alt="" />
</a>
</span>
</div>
<div id="house_and_deco">
<a href="">
<img class="small_img" src="Images/main/main_house_and_deco.png" alt="Σπίτι & Διακόσμηση" />
</a>
<span>
<a href="">
<img class="small_img_on" src="Images/main/main_house_and_deco_on.png" alt="" />
</a>
</span>
</div>
<div id="relationships">
<a href="">
<img class="small_img" src="Images/main/main_relationships.png" alt="Σχέσεις" />
</a>
<span>
<a href="">
<img class="small_img_on" src="Images/main/main_relationships_on.png" alt="" />
</a>
</span>
</div>
<div id="shoping">
<a>
<img class="small_img" src="Images/main/shoping.png" alt="Shopping" />
</a>
<span>
<a>
<img class="small_img_on" src="Images/main/shoping_on.png" alt="" />
</a>
</span>
</div>
<div id="cooking">
<a href="">
<img class="small_img" src="Images/main/main_cooking.png" alt="Μαγειρική" />
</a>
<span>
<a href="">
<img class="small_img_on" src="Images/main/main_cooking_on.png" alt="" />
</a>
</span>
</div>
<div id="mariage">
<a href="">
<img class="small_img" src="Images/main/main_mariage.png" alt="Γάμος & βάφτιση" />
</a>
<span>
<a href="">
<img class="small_img_on" src="Images/main/main_mariage_on.png" alt="" />
</a>
</span>
</div>
<div id="moms_and_kids">
<a href="">
<img class="small_img" src="Images/main/main_moms_and_kids.png" alt="Μαμάδες & Παιδιά" />
</a>
<span>
<a href="">
<img class="small_img_on" src="Images/main/main_moms_and_kids_on.png" alt="" />
</a>
</span>
</div>
</div>
</body>