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

JavaScript
1

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? :slight_smile:

Many thanks.


<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-->




#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

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.

<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…

3

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…

4

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.

5

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.