November 14, 201213 yr Hi, I really need some advice please. I have created a really simple scrolling image gallery using overflow:hidden, however, in Firefox it shows the whole div width so there is loads of white space after the last image, but in Safari it fits the content fine. I cant figure out what to do about this, so am hoping one of you guys could offer some advice. Thanks in advance Mark link: http://www.markzawila.com/test site/food2.php css: #photos{ height:520px; width:870px; padding:0; background-color:#fafafa; overflow:hide; overflow:scroll; overflow-y:hidden; overflow-x:auto; } #photos div { width:30000px; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; } img.photo{ border:5px solid #fff; float:left; display:inline; margin-right:10px; } html: <div id="photos"> <div> <img src="images/food/img1intro.jpg" class="photo" alt=""> <img src="images/food/img1.jpg" class="photo" alt=""> <img src="images/food/img2.jpg" class="photo" alt=""> <img src="images/food/img3.jpg" class="photo" alt=""> <img src="images/food/img4.jpg" class="photo" alt=""> <img src="images/food/img5.jpg" class="photo" alt=""> <img src="images/food/img6.jpg" class="photo" alt=""> <img src="images/food/img7.jpg" class="photo" alt=""> <img src="images/food/img8.jpg" class="photo" alt=""> <img src="images/food/img9.jpg" class="photo" alt=""> <img src="images/food/img10.jpg" class="photo" alt=""> <img src="images/food/img11.jpg" class="photo" alt=""> <img src="images/food/img12.jpg" class="photo" alt=""> <img src="images/food/img13.jpg" class="photo" alt=""> <img src="images/food/img14.jpg" class="photo" alt=""> <img src="images/food/img15.jpg" class="photo" alt=""> <img src="images/food/img17.jpg" class="photo" alt=""> <img src="images/food/img18.jpg" class="photo" alt=""> <img src="images/food/img19.jpg" class="photo" alt=""> <img src="images/food/img20.jpg" class="photo" alt=""> </div> </div>
November 14, 201213 yr Author yeah i know, i tried width 100% but didn't work, i don't really know what else to do, other than working out total width of all the images and creating a separate div container for each gallery with the exact width? thanks again
November 14, 201213 yr just letting you know you have 2 </head> tags </head> <body> <div id="content_wrap"> <div id="logo"> <div id="contact"><a href=""><img src="images/block2.png" width="41" height="40" border"0"/></a><a href=""><img src="images/block3.png" width="41" height="40" border="0"/></a><a href="mailto:info@imarkzawila.com?subject=email me"><img src="images/block1.png" width="41" height="40" border"0"/></a></div><!--contact end--> <img src="images/banner.png" width="535" height="46" /> <h1>creative advertising photography</h1> </div> <!--end logo--> <div id="sidebar"> <ul> <li><a href="http://www.markzawila.com/test site/index.php">home</a></li> <li><a href="http://www.markzawila.com/about.php">about</a></li> <li><a href="http://www.markzawila.com/clients.php">clients</a></li> <li><a href="#nogo">blog</a></li> <li><a href="http://www.markzawila.com/contact.php">contact</a></li> </ul> <div id = "blog"> <ul id="css_vertical_menu"> <li><a href="http://www.markzawila.com/test site/food.php">food</a></li> <li><a href="http://www.markzawila.com/test site/drinks_and_liquids.php">drinks/liquids</a></li> <li><a href="http://www.markzawila.com/test site/products.php">products</a></li> <li><a href="http://www.markzawila.com/test site/people.php">people</a></li> </ul> </div> <!--blog end--> </div> <!--end sidebar--> </head>
November 14, 201213 yr How is your jquery you can use jquery width you can calculate the width of all the images in the div and use jquery css or jquery addClass to change the size of the div without working out the size when you change images http://api.jquery.com/width/ http://api.jquery.com/css/ http://api.jquery.com/addClass/
November 14, 201213 yr Here you go working example with 3 of you images <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Image Scroll</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> #photos{ height:520px; width:870px; padding:0; background-color:#fafafa; overflow:scroll; overflow-y:hidden; overflow-x:auto; } #photos div { width:30000px; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; } img.photo{ border:5px solid #fff; float:left; display:inline; margin-right:10px; } </style> </head> <body> <script type="text/javascript"> $(document).ready(function () { width = 0; $.each(jQuery('.photo'), function(i, e) { width += $(e).width() width+=20 //this is allowing for margin of 20 px on each image change this to suit }); $("#photos div").css("width", width+"px"); $("#width").text(width); }); </script> <div id="width"></div><!-- display width for resting--> <div id="photos"> <div> <img src="img1intro.jpg" width="840" class="photo"> <img src="img2.jpg" width="731" class="photo"> <img src="img4.jpg" width="660" class="photo"> </div> </div> </body> </html>
November 14, 201213 yr Thanks for letting me know may want make a few changes to Jquery to validate <script type="text/javascript"> $(document).ready(function () { var width = 0; $.each($('.photo'), function(i, e) { width += $(e).width() width+=20; //this is allowing for margin of 20 px on each image change this to suit }); $("#photos div").css("width", width+"px"); $("#width").text(width); }); </script>
November 14, 201213 yr Author just one last question please, how do I prevent the number for the total width appearing as text in the top left hand corner
November 14, 201213 yr remove $("#width").text(width); and <div id="width"></div><!-- display width for resting--> that should have said testing
November 14, 201213 yr Author thanks elite, that works great. I really appreciate all your help with this
Create an account or sign in to comment