Skip to main content
B
BigG2009
Participating Frequently
December 21, 2010
Question

J Query Question - but could be CSS and its IE 7

  • December 21, 2010
  • 3 replies
  • 1011 views

Ok so I know this is not Adobe specific but in my experience there are lots and lots of clever people about on this forum so I am hoping someone can help me out.

Basically I have built a photo gallery using JQuery (which is outside of my comfort zone - so have basically just robbed something from the net - legally I might add lol).

In IE 7 the last image in the thumbnail strip is wrapping itself around to the bottom of the strip and looks out of sequence.

Anyway here is the code.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome to The White Lion Alvanley</title>
<link href="style/screen.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="jquery.ad-gallery.1.2.4/jquery.ad-gallery.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.ad-gallery.1.2.4/jquery.ad-gallery.js"></script>
  <script type="text/javascript">
  $(function() {
    $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
    $('img.image1').data('ad-title', 'Title through $.data');
    $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
    $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
    var galleries = $('.ad-gallery').adGallery();
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
      }
    );
    $('#toggle-slideshow').click(
      function() {
        galleries[0].slideshow.toggle();
        return false;
      }
    );
    $('#toggle-description').click(
      function() {
        if(!galleries[0].settings.description_wrapper) {
          galleries[0].settings.description_wrapper = $('#descriptions');
        } else {
          galleries[0].settings.description_wrapper = false;
        }
        return false;
      }
    );
  });
  </script>

  <style type="text/css">
  
  select, input, textarea {
    font-size: 1em;
  }
  h2 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px dotted #dedede;
  }
  h3 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
  }
  .example {
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
  }
  ul {
    list-style-image:url(list-style.gif);
  }
  pre {
    font-family: "Lucida Console", "Courier New", Verdana;
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
  }
  code {
    font-family: "Lucida Console", "Courier New", Verdana;
    margin: 0;
    padding: 0;
  }

  #gallery {
    padding: 30px;
    background: #502100;
  }
  #descriptions {
    position: relative;
    height: 50px;
    background: #EEE;
    margin-top: 10px;
    width: 640px;
    padding: 10px;
    overflow: hidden;
  }
    #descriptions .ad-image-description {
      position: absolute;
    }Ï
      #descriptions .ad-image-description .ad-description-title {
        display: block;
      }
  </style>

</head>

<body>
<div id="wrapper">
     
    <div id="header">
    
         <h1>The White Lion at Alvanley - Village Pub & Dining</h1>
    
    </div>
    
    
    <div id="navigation">
    
         <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="history.html">HISTORY</a></li>
            <li><a href="foodanddrink.html">FOOD & DRINK</a></li>
            <li><a href="garden.html">GARDEN</a></li>
            <li><a href="events.html">EVENTS</a></li>
            <li><a href="gallery.html">GALLERY</a></li>
            <li><a href="coal_business.html">COAL BUSINESS</a></li>
            <li><a href="location.html">LOCATION</a></li>
        </ul>
    
    </div>
    
    
    <div id="mainarea">
    <div id="container">


    <div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
                  <li>
              <a href="images/1.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE01.jpg"  width="92" height="62" class="image2" >
              </a>
            </li>
            <li>
              <a href="images/2.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE02.jpg"  width="92" height="62" class="image2" >
              </a>
            </li>
            <li>
              <a href="images/3.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE03.jpg"  width="92" height="62" class="image2">
              </a>
            </li>
            
            <li>
              <a href="images/4.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE04.jpg" width="92" height="62" class="image2">
              </a>
            </li>
            
            <li>
              <a href="images/5.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE05.jpg"  width="92" height="62" class="image2" >
              </a>
            </li>
            <li>
              <a href="images/6.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE06.jpg" width="92" height="62" class="image2">
              </a>
            </li>
            <li>
              <a href="images/7.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE07.jpg"  width="92" height="62" class="image2" >
              </a>
            </li>
            <li>
              <a href="images/8.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE08.jpg"  width="92" height="62" class="image2">
              </a>
            </li>
            <li>
              <a href="images/9.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE09.jpg" width="92" height="62" class="image2" >
              </a>
            </li>
            <li>
              <a href="images/10.jpg">
               <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE10.jpg" width="92" height="62" class="image2">
              </a>
            </li>
            <li>
              <a href="images/11.jpg">
                <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE11.jpg" width="92" height="62" class="image2" >
              </a>
            </li>
            <li>
              <a href="images/12.jpg">
               <img src="Gallery%20Little%20Pics/White%20Lion%20Alvanley.Master_LITTLE12.jpg" width="92" height="62" class="image2" >
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

   
   
        </div>
    
    
    

    
    
    

    
            <div id="footer">
            
            <p id="contact">White Lion, Manley Road, Alvanley, Cheshire WA6 9DD<br>Tel: 01928 722 949</p>
            <form action="newslettersignup.php" method="post" id="signupfooter">
            <h4>Sign up for our Newsletter</h4>
            <input name="" type="text" value="Your name">
            <input name="" type="text" value="Email Address"> 
            <input name="submittastic" type="submit" id="submittastic" value="Submit">           
            </form>
             </div>
            </div>
            <div id="clear"></div>
            </div>
          





</body>
</html>

 
and for extra goodies here is the CSS
.ad-gallery {
  width: 850px;
}
.ad-gallery, .ad-gallery * {
  margin: 0;
  padding: 0;
}
  .ad-gallery .ad-image-wrapper {
    width: 100%;
    height: 400px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
  }
    .ad-gallery .ad-image-wrapper .ad-loader {
      position: absolute;
      z-index: 10;
      top: 48%;
      left: 48%;
      border: 1px solid #CCC;
    }
    .ad-gallery .ad-image-wrapper .ad-next {
      position: absolute;
      right: 0;
      top: 0;
      width: 25%;
      height: 100%;
      cursor: pointer;
      display: block;
      z-index: 100;
    }
    .ad-gallery .ad-image-wrapper .ad-prev {
      position: absolute;
      left: 0;
      top: 0;
      width: 25%;
      height: 100%;
      cursor: pointer;
      display: block;
      z-index: 100;
    }
    .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
      /* Or else IE will hide it */
      background: url(non-existing.jpg)\9
    }
      .ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
        background: url(ad_prev.png);
        width: 30px;
        height: 30px;
        display: none;
        position: absolute;
        top: 47%;
        left: 0;
        z-index: 101;
      }
      .ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
        background: url(ad_next.png);
        width: 30px;
        height: 30px;
        right: 0;
        left: auto;
      }
    .ad-gallery .ad-image-wrapper .ad-image {
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
      z-index: 9;
    }
      .ad-gallery .ad-image-wrapper .ad-image a img {
        border: 0;
      }
      .ad-gallery .ad-image-wrapper .ad-image .ad-image-description {
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding: 7px;
        text-align: left;
        width: 100%;
        z-index: 2;
        background: url(opa75.png);
        color: #000;
      }
      * html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description {
        background: none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='opa75.png');
      }
        .ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title {
          display: block;
        }
  .ad-gallery .ad-controls {
    height: 20px;
  }
    .ad-gallery .ad-info {
      float: left;
    }
    .ad-gallery .ad-slideshow-controls {
      float: right;
    }
      .ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop {
        padding-left: 5px;
        cursor: pointer;
      }
      .ad-gallery .ad-slideshow-controls .ad-slideshow-countdown {
        padding-left: 5px;
        font-size: 0.9em;
      }
    .ad-gallery .ad-slideshow-running .ad-slideshow-start {
      cursor: default;
      font-style: italic;
    }
  .ad-gallery .ad-nav {
    width: 100%;
    position: relative;
  }
    .ad-gallery .ad-forward, .ad-gallery .ad-back {
      position: absolute;
      top: 0;
      height: 100%;
      z-index: 10;
    }
    /* IE 6 doesn't like height: 100% */
    * html .ad-gallery .ad-forward, .ad-gallery .ad-back {
      height: 100px;
    }
    .ad-gallery .ad-back {
      cursor: pointer;
      left: -20px;
      width: 13px;
      display: block;
      background: url(ad_scroll_back.png) 0px 22px no-repeat;
    }
    .ad-gallery .ad-forward {
      cursor: pointer;
      display: block;
      right: -20px;
      width: 13px;
      background: url(ad_scroll_forward.png) 0px 22px no-repeat;
    }
    .ad-gallery .ad-nav .ad-thumbs {
      overflow: hidden;
      width: 100%;
    }
      .ad-gallery .ad-thumbs .ad-thumb-list {
        float: left;
        width: 9000px;
        list-style: none;
      }
        .ad-gallery .ad-thumbs li {
          float: left;
          padding-right: 5px;
        }
          .ad-gallery .ad-thumbs li a {
            display: block;
          }
            .ad-gallery .ad-thumbs li a img {
     display: block;
            }
            .ad-gallery .ad-thumbs li a.ad-active img {
              border: 3px solid #a7907f;;
            }
/* Can't do display none, since Opera won't load the images then */
.ad-preloads {
  position: absolute;
  left: -9000px;
  top: -9000px;
}

 
However after a bit of validation action on the CSS it appears there are a couple of errors although not sure if this is what is effecting the page.
Any thoughts.
G
This topic has been closed for replies.
3 replies
A
Anonymous
December 21, 2010
Persist.
I don't regret one bit taking the time to learn jQuery. Also, I generally find that errors I get with jQuery are usually just errors in the way browsers execute CSS or Javascript (mostly IE6 & 7!). jQuery is a brilliantly written resource.
I got an error the other day when I had blocks that appeared on click, but identified them with ids ( $("#someidhere").click() ). On older versions of internet explorer, it refuses to handle more than one element with an ID, so it would only let me show/hide one of my blocks. Don't be fooled though, that's a javascript error rather than a jQuery error (although it is seriouly bad practice to have more than one element with the same ID!).
B
BigG2009Author
Participating Frequently
December 22, 2010
Hi Thanks for that.
I am doing some Java script training first and then moving to JQuery.  

Do you know of any good tutorials online for the above.
I am currently subscribed to Think Vitamin which am finding useful but seems to jump from very basic to very advanced with not much in between.

G
A
Anonymous
December 21, 2010
I fixed it on firefox by changing the width of the div with class="ad-thumb-list" to 1170px.
Also, something to keep you busy: the large picture doesn't even seem to appear on firefox, and the overflowing little picture seems to still be there on IE8 for me. Good luck!
I edited to add the other things I spotted after posting
B
BigG2009Author
Participating Frequently
December 21, 2010
Do you know sometimes when you wish you had never started with JQuery - although am learning it as a side thing anyway.  Thanks for your help it was helpful lol
G
B
BigG2009Author
Participating Frequently
December 21, 2010
here is the link as well as the HTML went in the post not as code.
http://www.plusonetesting.co.uk/white_lion_alvaney/gallery.html

        
                                                

        

    


            

                                        

            
                        

                                                                                                            
            







        

                    

    
    





    


                                        

                                                        

            
        
    






                                    
Terms & ConditionsAccessibility statement

            
        



        
            
    
        
    
        



        
        
        


        


        
        
        
        
                                                        

                            
    

                    

  

    

      
        
      
    

    

      
        Using the community
      
      
        Terms of use
      
      
        Privacy
      
      
        Cookie preferences
      
      
        Do not sell or share my personal information
      
      
        ad choicesAdChoices