SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can i get div with scroller to work on ie7. like how it works on other browsers?

    HTML Code:
    Hi i have this div which uses an horizontal scroller the only problem i am having is with ie7 the images doesnt stay inside the scroller div it just runs a straight line
    does anyone know how can i achive the same effect to work like how it work on other browsers to work on ie7
    
    css
    [HTML].test{ color:white; display:inline; margin-right:-70px; z-index:0;}
    .picture { position: relative; z-index:-1;}
    HTML Code:
    <div class="example-display">
    	<div style="border:1px solid black;width:830px; height:108px ;overflow-y:hidden; overflow-x:scroll;">
    		<div style="white-space:nowrap;">
            	<p class="test">gfvhgvk</p>
    				<img class="picture" src="images/itv_logo.gif" width="160"  height="90" />
                    <p class="test">gfvhgvk</p>
                    <img class="picture" src="images/itv_logo.gif" width="160"  height="90" />
                    <p class="test">gfvhgvk</p>
                    <img class="picture" src="images/itv_logo.gif" width="160"  height="90" />
                    <p class="test">gfvhgvk</p>
                    <img class="picture" src="images/itv_logo.gif" width="160"  height="90" />
                    <p class="test">gfvhgvk</p>
                    <img class="picture" src="images/itv_logo.gif" width="160"  height="90" />
                    <p class="test">gfvhgvk</p>
                    <img class="picture" src="images/itv_logo.gif" width="160"  height="90" />
                    <p class="test">gfvhgvk</p>
                    <img class="picture" src="images/itv_logo.gif" width="160"  height="90" />
                    <p class="test">gfvhgvk</p>
                    <img class="picture" src="images/itv_logo.gif" width="160"  height="90" />
                    <p class="test">gfvhgvk</p>
                    <img class="picture" src="images/itv_logo.gif" width="160"  height="90" />
    		</div>        
    	</div>
    </div>
    thanks in advance[/HTML]

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Why are the images relatively positioned?

    Here's what I did for a cross-browser scroller of available homes:

    Code:
    <div id="toppers">
      <ul>
        <li><a href="tothehouse"><img src="houseimage.jpg" width="100" height="100" alt=""><span>Some house in Spain</span></a></li>
        <li><a href="tothehouse"><img src="houseimage2.jpg" width="100" height="100" alt=""><span>Some house also in Spain</span></a></li>
        <li><a href="tothehouse"><img src="houseimage3.jpg" width="100" height="100" alt=""><span>Some house in Russia</span></a></li>
        <li><a href="tothehouse"><img src="houseimage4.jpg" width="100" height="100" alt=""><span>Some house in Greece</span></a></li>
        <li><a href="tothehouse"><img src="houseimage5.jpg" width="100" height="100" alt=""><span>Dracula's Castle</span></a></li>
      </ul>
    </div>
    Code:
    /*overflow box*/
    #toppers {
      width: 80%; /*of the page it was on*/
      min-height: 150px;/*something taller than the anchors so no vert scrollbar appears*/
      margin: 5px auto 1em; /*centered*/
      overflow: auto; /*scrollbar*/
      overflow-y: hidden; /*if you still want, but I like to make sure people with large text can still access everything*/
      border: 1px solid #000;
    }
    
    /*inner container who is much, much wider... using a negative right margin to do this so we don't have to set an explicit width on it*/
    #toppers ul {
      position: relative;/*I totally don't remember why I used this, but jQuery was involved at the time*/
      float: left;
      width: auto; /*just in case, but this should be default anyways*/
      margin: 0 -999em 0 0;
    }
    
    #topper ul li {
      display: inline; /*IE usually wants you to explicitly set the state for li's if you float children*/
    }
    #toppers a {
      float: left;
      width: 100px; /*width of image*/
      margin: 0 5px; /*10px margin between anchors*/
      padding: 5px; /*total width 110px*/
    }
    #toppers a img, #toppers a span {
      display: block; 
      margin-bottom: 5px;
      text-align: center; /*text in the span centered within block span box, alt text in image centered within 100px-wide box*/
    }
    #toppers a span {
      margin-bottom: 0;
    }
    Something like that, scrolls everywhere. But I'm going to guess IE7 is confuzled by relatively positioned images in the scrollbox. Or maybe IE7 doesn't know overflow-x? But I thought IE invented that so not sure. For now, you could take your code and remove the relative positioning of the images and change overflow-x: scroll to overflow: auto just to see if IE7 then scrolls.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I cant guarantee this is a fix.. but I do know IE 7 ( and bellow) can (but not always) razzled by relative positioning. Hair of the dog, sometimes it helps to RP the parent as well.

    IE DEFINITELY doesnt like negative z-indexes!!! I was going to suggest wrapping the text and making the span come FRONT rather than the image back... which is essentially Stomme's solution...

  4. #4
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for trying to help me but none of them worked i tried the html and css the list one it just displayed the images horizontal.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    My code is supposed to display the images horizontal. What are you trying to do?

    Screenshot?

    I'll show you mine: http://stommepoes.nl/Homeselling/new...econdhome.html scroll down to "Toppers of the Week" on the right side. If you have Javascript on you'll see crap scrolling. Turn Javascript off or block it. That's what I built: a scroll-box, horizontal, and then if Javascript is available I use an extra container to use someone else's jQuery widgit. So there's on more container than I had posted above, since what I posted above is a basic, non-JS scrollbox.

    I figured you were looking for horizontal scrolling because you set all your p's to display: inline.

    Show us an image of what you've got in the other browsers.

  6. #6
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ohh yes they i am trying to achieve the same with mine this how mine look on explorer 7 take a look if you can under the scroller there two on explorer the images float outside the div
    http://www.homeonfilm.com/indextest.php

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Bleh, IE7 box is at home right now, but IE8 on the work machine here is showing a v-e-r-y slow slider (very hard to move anything, whole page is slow) that is only as wide as the number of images. On SRWare Iron (which is Chromium) it's also the same. But in Opera and Firefox7 the slider is much much much wider than the number of images. I can slide to nothing.

    Why do the images take so long to load? You're taking very large images (600 px wide) and making the browser squeeze them down to thumbnails. Also, the autoplaying video is driving me insane so I'm not using Windows to look at the page anymore. Are these images dynamically called? If they're not, I'd have a back-end script go download the image from the sites you're pulling them from, run ImageMagick or something similar on them to resize them, then put the resized versions on the page. That would make the images in the slider look better AND save user bandwidth.

    I'm going to take the slider I can see (no the commented out one which is the code in your first post) and rewrite it and when I get home I can check IE7. If it works I'll post it here.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie7 likes the parent to have position:relative or it won't hide the overflow. I'ts a long standing bug.

    Add position:relative here:

    Code:
    		<div style="width:830px; height:110px; overflow:scroll; overflow-y: scroll; overflow-y: hidden;position:relative">
    				<div style="width:3000px;">
    						<div style="width:100%">
    Tested and working in ie7

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    W00t. Like so:
    (of course there should be an external javascript with a config object and the onclicks shouldn't be in the HTML but assigned by Javascript, but...)

    #container represents the page, and is not necessary for the actual slider part.
    Code:
    <!doctype html>
    <head>
      <meta charset="utf-8">
      <title>Slider</title>
      <style>
    
    body {
      font: 100%/130% helvetica, arial, sans-serif;
    }
    
    #container {
      width: 900px;
      padding-top: 50px;
      margin: 0 auto;
    }
    
    #slider {
      position: relative;
      width: 830px;
      margin: 0 auto;
      min-height: 130px;
      background-color: #222;
      overflow: auto;
      overflow-y: hidden;
      border: 1px solid #000;
    }
    
    #slider ul {
      list-style: none;
      float: left;
      width: auto;
      margin: 0 -999em 0 0;
      padding: 0;
    }
    
    #slider li {
      display: inline; /*IE*/
    }
    
    #slider a {
      float: left;
      width: 160px;
      margin-right: 1px;
      color: #fff;
      font-size: .8em;
      line-height: 1.1;
      text-decoration: none;
      text-align: center;
    }
    
    #slider a img, #slider a span {
      display: block;
    }
    
    #slider a span {
      padding: 2px;
      font-size: .8em;
      white-space: nowrap; /*careful with this one*/
      background: #000;
      background: rgba(0,0,0,0.8);
    }
    	#slider a span span {
    	  padding: 0;
    	  font-size: .8em;
    	}
      </style>
    </head>
    <body>
      <div id="container"> 
        <div id="slider">
          <ul>
            <li><a href="#" onclick="jwplayer().load({file:'http://www.estateagentsonfilm.co.uk/cms/admin/news/images/43/NewBuyers_Seddon_360.mp4'});jwplayer().play(true);"><img src="http://www.estateagentsonfilm.co.uk/cms/admin/news/images/43/Stillimage.jpg" width="160"  height="90" alt=""><span>Seddon Testimonial <span>New Buyers</span></span></a></li>
            <li><a href="#" onclick="jwplayer().load({file:'http://www.estateagentsonfilm.co.uk/cms/admin/news/images/42/laurels640.mp4'});jwplayer().play(true);"><img src="http://www.estateagentsonfilm.co.uk/cms/admin/news/images/42/hofsedd30738_640.jpg" width="160"  height="90" alt=""><span>The Laurels Film <span>From Seddon Homes</span></span></a></li>
            <li><a href="#" onclick="jwplayer().load({file:'http://www.estateagentsonfilm.co.uk/cms/admin/news/images/41/webpresentation.mp4'});jwplayer().play(true);"><img src="http://www.estateagentsonfilm.co.uk/cms/admin/news/images/41/macintyre.jpg" width="160"  height="90" alt=""><span>MacIntyre - Looters <span>Newsnight Special</span></span></a></li>
            <li><a href="#" onclick="jwplayer().load({file:'http://www.estateagentsonfilm.co.uk/cms/admin/news/images/40/solar640.mp4'});jwplayer().play(true);"><img src="http://www.estateagentsonfilm.co.uk/cms/admin/news/images/40/solar.jpg" width="160"  height="90" alt=""><span>GMI Renewable Leeds <span>Solar Panels</span></span></a></li>
            <li><a href="#" onclick="jwplayer().load({file:'http://www.estateagentsonfilm.co.uk/cms/admin/news/images/39/Dreampad4_SD.mp4'});jwplayer().play(true);"><img src="http://www.estateagentsonfilm.co.uk/cms/admin/news/images/39/dreampadnews.jpg" width="160"  height="90" alt=""><span>Dreampad Property <span>Stunning Home</span></span></a></li>
            <li><a href="#" onclick="jwplayer().load({file:'http://www.estateagentsonfilm.co.uk/cms/admin/news/images/38/springboard1920.mp4'});jwplayer().play(true);"><img src="http://www.estateagentsonfilm.co.uk/cms/admin/news/images/38/springboard.jpg" width="160"  height="90" alt=""><span>Seddon Homes <span>Springboard Scheme</span></span></a></li>
            <li><a href="#" onclick="jwplayer().load({file:'http://www.estateagentsonfilm.co.uk/cms/admin/news/images/37/showreel.mp4'});jwplayer().play(true);"><img src="http://www.estateagentsonfilm.co.uk/cms/admin/news/images/37/donal.jpg" width="160"  height="90" alt=""><span>MacIntyre joins WTVP <span>New Presenter</span></span></a></li>
            <li><a href="#" onclick="jwplayer().load({file:'http://www.estateagentsonfilm.co.uk/cms/admin/news/images/36/hofrent30745.mp4'});jwplayer().play(true);"><img src="http://www.estateagentsonfilm.co.uk/cms/admin/news/images/36/renton.jpg" width="160"  height="90" alt=""><span>Renton and Parr <span>New Property</span></span></a></li>        
          </ul>
        </div>
      </div>
    </body>
    </html>
    I had removed the position: relative in my code above because I thought I had added it into the demo page for the jQuery only.

  10. #10
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you everyone for the help especially (Stomme poes) it worked perfectly on both explorer7 and other browsers thank you very much!!!

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I'll show you mine: http://stommepoes.nl/Homeselling/new...econdhome.html scroll down to "Toppers of the Week" on the right side. If you have Javascript on you'll see crap scrolling. Turn Javascript off or block it. That's what I built: a scroll-box, horizontal, and then if Javascript is available I use an extra container to use someone else's jQuery widgit. So there's on more container than I had posted above, since what I posted above is a basic, non-JS scrollbox.
    Hello Stomme,
    I has been a while since I started digging for something like what you did in this url.
    It is as brilliant as it is simple.
    Can I have the code of that "Toppers"?
    Did you added a hover to it?

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I also added a :focus. Show people that they are on something (because they were links to house pages).

    Tomorrow I will post that code (since it's mixed in with other code). Also, the jQuery widget did some bad things originally, so I have CSS tweaks for just the jQuery slider so that the code works if jQuery doesn't load.

  13. #13
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I am not a jquery person and a clean cut code will be fine with me.

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Server was down :( LeaseWeb should rename themselves to LeaseFail.

    HTML (but with non-validating comments):
    Code:
            <div id="toppers">
    	  <h2>Toppers van de week</h2>
              <div id="scrollcontainer">
    	    <a class="leftS"></a>
    	    <a class="rightS"></a>
    	    <div id="scrollWrapper">
                  <div class="scrollableArea">
    	        <a href="huis/1/gegevens"><img src="images/vakantiehuis1.jpg" width="146" height="110" alt="" /></a>
    	        <a href="huis/2/gegevens"><img src="images/vakantiehuis2.jpg" width="146" height="110" alt="" /></a>
    	        <a href="huis/3/gegevens"><img src="images/vakantiehuis3.jpg" width="146" height="110" alt="" /></a>
    	        <a href="huis/4/gegevens"><img src="images/vakantiehuis4.jpg" width="146" height="110" alt="" /></a>
    	        <a href="huis/1/gegevens"><img src="images/vakantiehuis1.jpg" width="146" height="110" alt="" /></a>
    	        <a href="huis/2/gegevens"><img src="images/vakantiehuis2.jpg" width="146" height="110" alt="" /></a>
    	        <a href="huis/3/gegevens"><img src="images/vakantiehuis3.jpg" width="146" height="110" alt="" /></a>
    	        <a href="huis/4/gegevens"><img src="images/vakantiehuis4.jpg" width="146" height="110" alt="" /></a>
    	      </div>//scrollablecontainer
                </div> //scrollwrapper
              </div> //scrollcontainer
           </div> //toppers
    Neither #toppers nor the h2 are necessary for the scroll, but they are there for you to see how the CSS relates.
    The empty alts means this is a Mystery Menu to some. An anchor without anchor text. You have no idea where the link goes. I tried to get the name of the house (most had names) in the alt but the back-end never got around to it. If you have total control, do not leave the alts empty if they are links.

    CSS:
    Code:
    /*jQuery bleh bleh blaaaarg*/
    #scrollcontainer {
      position: relative;
      width: 626px;
      height: 136px; 
      margin: 0 auto .3em;
      overflow: auto;
    }
            #scrollcontainer.jqScroll { <--jQuery adds this class!
              width: 620px;
              height: 116px;
              overflow: hidden;
            }
    
    /*buttons*/
    .leftS, .rightS {
      position: absolute;
      min-width: 75px;
      width: 10%;
      height: 100%;
      background-image: url(#);/*IE*/
      z-index: 100;
    }
    
    .leftS {
      left: 0;
    }
            .leftButton {
    	  background: url(images/arrow_left.png) center center no-repeat;
            }
    
    .rightS {
      right: 0;
    }
            .rightButton {
              background: url(images/arrow_right.png) center center no-repeat;
            }
    
    #scrollWrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }
            #scrollWrapper.hideOverflow {
              overflow: hidden;
            }
    
    .scrollableArea {
      position: relative;
      float: left;
      width: auto;
      margin: 0 -999em 0 0;
    }
            .scrollableArea a img {
              float: left;
            }
    
            #toppers div a img {
              width: 146px;
              height: 110px;
              padding: 3px;
              border: 0;
    	}
    
    	#toppers div a:visited img {
      	  padding: 0;
      	  border: 3px solid #fdb302;
    	}
    	#toppers div a:hover img, 
            #toppers div a:focus img, 
            #toppers div a:active img {
      	  padding: 0;
      	  border: 3px solid #b000f9;
    	}
    Notice the jqScroll class. The new height you see is reflecting now the absence of the horizontal scrollbar that we started with. It is based on likely Firefox 3.0 and may not be correct on a range of scrollbar heights.
    Then overflow: hidden is added. The heights and widths are careful to prevent a vertical scrollbar on the right, since the container should always be at least as tall as the images. Mine get padding or border so that had to be reckoned with.

    .hideOverflow I think is also mine. The original scroller has CSS that does that out of the box, meaning the scroller was broken without JS.

    The CSS is old. The new me would be more awesome and would write lines like
    #toppers img { instead.


    JS:
    Code:
    (in the <head>...)
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="js/jquery.smoothDivScroll-1.0.js"></script>
        <script type="text/javascript">
            $(function() {
                $('div#scrollcontainer').smoothDivScroll({ autoScroll: 'onstart', 
                    autoScrollDirection: 'endlessloopright',
                    autoScrollStep: 1,
                    autoScrollInterval: 15,
                    startAtElementId: '',
                    visibleHotSpots: 'always' });
                $('div#scrollcontainer').addClass('jqScroll');
              // let jQuery change dimensions of scrollcontainer
                });
        </script>
    Way too much JS (and the many HTML containers you see is needed by the JS. Otherwise you only need two boxes). Were I to write this today, it would be a single div with a un-ordered list inside.

    It needs first the jQuery library, then the widget-UI stuff, then the scroller. Ideally you'd squish all these into a single request (also the start and params code listed... and the adding of the class).

  15. #15
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your effort.

    Just a stupid question, what is ithe meaning of,
    background-image: url(#);/*IE*/
    in the 'buttons' in the CSS?

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    A stupid IE thing. And your question isn't stupid; this is hitting an uncommon bug.

    Lemme see if I can remember it... it's not a Haslayout trigger, but one of those other, lesser IE rendering triggers, where the trigger in this case was discovered to be a background colour or image. Which, with a semi-trans pic of a button, we don't want.

    Actually, someone (Chris Coyier?) thought it still really was related to Haslayout, or that anyway you could fix the bug by triggering Haslayout somehow *before* doing the absolute positioning (which so far as I know should itself be a trigger).

    Without it, the empty-but-absolutely-positioned-anchor has its height and width CSS settings ignored. With it, it magically works. Trident: a rendering engine filled with magic.

    It is not needed by IE8 if I recall correctly, so if you don't support 6/7 you can leave it out.

  17. #17
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thaks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •