SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Browser Side Scroll With No Set Width & No Anchors...?

    I have the following html and css.

    A list populates with images and sits horizontally expanding the width depending on the content, this could be any width hence the css in site-content...

    Is there any way that some JS with jquery can read the list items and scroll to each individual one without the use of anchors...?

    As there could be 5 items or could be 10 depending on the page?

    This without a set width for the holding container?

    The navigation would sit over the top fixed with content scrolling behind..

    Seems impossible to me but thought i would ask?

    Many thanks.


    Code HTML4Strict:
    <div id="site-content">
     
    <div class="content-float">
     
    <ul>
    <li><img class="alignnone size-full wp-image-345" title="01_abetrd" src="01_abetrd.jpg" alt="" width="746" height="500" /></li>
    <li><img class="alignnone size-full wp-image-345" title="01_abetrd" src="01_abetrd.jpg" alt="" width="746" height="500" /></li>
    <li><img class="alignnone size-full wp-image-345" title="01_abetrd" src="01_abetrd.jpg" alt="" width="746" height="500" /></li>
    <li><img class="alignnone size-full wp-image-345" title="01_abetrd" src="01_abetrd.jpg" alt="" width="746" height="500" /></li>
    </ul>
     
    </div><!--END.content-float-->
    </div><!--END.site-content-->
    Code CSS:
     
    #site-content  {
    background-color:#FFFFFF;
    clear:both;
    float:left;
    height:500px;
    margin:110px -9999em 0 20px;
    padding:0;
    position:relative;
     
    .content-float{float:left;}

  2. #2
    SitePoint Enthusiast nimpkish-media's Avatar
    Join Date
    Jun 2010
    Location
    Victoria BC, Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I might not be understanding your issue correctly, but I think you can use the jQuery .index().

    Maybe take a look at the .index() on the jquery site and see it that's any help. Plus you'll have to use some trickery with absolute and relative positioning.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what you have said, it sounds like you are wanting the list of items to scroll horizontally at a set interval of time.

    If this is the case, and depending on how good your JS is, you can setup a timer with an interval which moves the container horizontally (positioned relative/absolute, or using margins).

    Otherwise you can use one of the many content scrollers available.

    e.g.

    http://ekallevig.com/jshowoff/

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for your help guys.

    SlickAU i'm not sure if that will work, as the images are never a set width.

    They are always the same height however, one might be 200px wide whilst another might be 800px wide, hence the auto width container..

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've found this tutorial, which is what i'm after but only scrolls down...

    Is there anyway to change this to scroll horizontally when the content is indeed going that way and each 'post' is next to each other on a horizontal scroll.
    Code JavaScript:
    <script type="text/javascript">
    $(function() {
     
        function scroll(direction) {
     
            var scroll, i,
                    positions = [],
                    here = $(window).scrollTop(),
                    collection = $('.post');
     
            collection.each(function() {
                positions.push(parseInt($(this).offset()['top'],10));
            });
     
            for(i = 0; i < positions.length; i++) {
                if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
                if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
            }
     
            if (scroll) {
                $.scrollTo(scroll, {
                    duration: 750       
                });
            }
     
            return false;
        }
     
        $("#next,#prev").click(function() {        
            return scroll($(this).attr('id'));        
        });
     
        $(".scrolltoanchor").click(function() {
            $.scrollTo($($(this).attr("href")), {
                duration: 750
            });
            return false;
        });
     
    });
    </script>

    Hope so....


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
  •