Script to use depending on screen width

JavaScript
1

I have a click and show option on my website, basically 4 thumbnails and a main image, you click the thumb and it swaps with the main image, pretty standard stuff and all was well until I tried to integrate it into a responsive site.

This is my code -

<div id="imgHolder" style="z-index:10">

<div id="hotel_Pic_Area_Middle_M" style="z-index:30;">
<div style="position:relative; width:300px; height:200px; margin-left:auto; margin-right:auto; z-index:50;">
<?php
if ($f['Award'] == '1'){ ?>
<div style="position:absolute;z-index:100;width:70px; height:70px; padding:10px;"><?php
$award = "<img src='http://www.checksafetyfirst.com/site_images/hotel_Page_Awards/general_hotel_award.png' width='70' height='70' alt='CSF Award Winner, View All' />";
} else {
$award = "";    
}?>
<?php if ($award=="") {    
} else { ?>
<?php echo $award ?>
</div>
<?php } ?>
<span><img class="HomeFeaturedImages3" src="http://www.checksafetyfirst.com<?php echo $f['Foto1_Hot']?>" alt="" border="0" width="300" itemprop="image" /></span>
</div>
</div>

<div id="hotel_Pic_Area_Middle" style="z-index:30;">
<div style="position:relative; width:430px; height:285px; z-index:50;">
<?php
if ($f['Award'] == '1'){ ?>
 <div style="position:absolute;z-index:100;width:70px; height:70px; padding:10px;">
<?php
 $award = "<img src='http://www.checksafetyfirst.com/site_images/hotel_Page_Awards/general_hotel_award.png' width='70' height='70' alt='CSF Award Winner, View All' />";
 } else {
 $award = "";    
 }?>
<?php if ($award=="") {    
 } else { ?>
<?php echo $award ?>
</div>
<?php } ?>
<span><img class="HomeFeaturedImages3" src="http://www.checksafetyfirst.com<?php echo $f['Foto1_Hot']?>" alt="" border="0" height="338" width="520" itemprop="image" /></span>
</div>
</div>
</div>

So Im trying to control that by using this below -

<script>
$(window).resize(function() {
if ($(window).width() < 660) {
var mainImage = $("#imgHolder hotel_Pic_Area_Middle_M span img");
$("a.showImg").click(function(e){
e.preventDefault();
var currImage = $(this).children('img');
var oldMainImageSrc = mainImage[0].src;
mainImage[0].src = currImage[0].src;
currImage[0].src = oldMainImageSrc;
//mainImage.src = $(this).children('img')[0].src;
});
}
else {
var mainImage = $("#imgHolder hotel_Pic_Area_Middle span img");
$("a.showImg").click(function(e){
e.preventDefault();
var currImage = $(this).children('img');
var oldMainImageSrc = mainImage[0].src;
mainImage[0].src = currImage[0].src;
currImage[0].src = oldMainImageSrc;
})}});
</script>

https://www.checksafetyfirst.com/mobile/hotel.php?hotel_ID=246328&Type=3&Resort=252

The reason for doing it like this is because when the page was viewed on a ipad it didnt work, but on a mobile it did, and I think its because this part of the code is first and when its in tablet view the other part of the code doesnt get executed -

<div id="hotel_Pic_Area_Middle_M" style="z-index:30;">
2

Fixed widths and heights and inline CSS aren’t the way to go to create a respnsive website…

2 Likes
3

the fixed widths are a must on this page unfortunatly as the images i am working with have been there for a long time, and are not big enough to scale, and there no way of going back and collecting thousands of new images to fit a scalable design. The inline css is for me at the moment, so I dont have to keep flicking between pages, once its sorted i will take the inline css out and replaces it with id’s

4

That isn’t how RWD works. Elements should be fluid. Use max-width to limit the size of a fluid image.
Media queries should take care of layout changes for different sizes, but they won’t work with in-line styles.

Be careful not to over use IDs, classes may be more appropriate.

1 Like
5

OK I can do that, cheers and yes I meant classes sorry.

But the problem here isnt fluidity, its that the script doesnt seem to recognise the second div that is only for mobiles when in mobile view, so when you click the thumn to change the main image until I tried to cure it with the resize script it was still looking at the first div even though the media query had made that div hidden, the idea being that as that first div is hidden it should just work with the second div for table view

This is how it was -

<script>
$(document).ready(function(){
var mainImage = $("#imgHolder span img");
$("a.showImg").click(function(e){
e.preventDefault();
var currImage = $(this).children('img');
var oldMainImageSrc = mainImage[0].src;
mainImage[0].src = currImage[0].src;
currImage[0].src = oldMainImageSrc;
});
});
</script>
6

No, it’s a lack of fluidity.
There should be no need to swap the image divs, a fluid image will scale to fit smaller sizes.

7

OK i get you guys, umm, am trying to get this to work the fluidity way

8

Thank you all, that helped a lot.

It’s much easier on the code too, and less stressful, can take a look and let me know what you think if you got time.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.