2

I want to put a bar on the bottom of my page containing a varying number of pictures, which (if wider than the page) can be scrolled left and right.

The page width is varying, and I want the pane to be 100% in width.

I was trying to do a trick by letting the middle div overflow and animate it's position with jquery.animate().

Like this:

The supposed layout

Here is a fiddle without the js: http://jsfiddle.net/SoonDead/DdPtv/7/

The problems are:

  1. without declaring a large width to the items holder it will not overflow horizontally but vertically. Is this a good hack? (see the width: 9000px in the fiddle)

  2. I only want to scroll the middle pane if it makes sense. For this I need to calculate the width of the overflowing items box (which should be the sum of the items' width inside), and the container of it with the overflow: hidden attribute. (this should be the width of the browser window minus the left and right buttons).

Is there a way to calculate the length of something in js without counting all of it's childrens length manually and sum it up?

Is there a way to get the width of the browser window? Is there a way to get a callback when the window is resized? I need to correct the panes position if the window suddenly widens (and the items are in a position that should not be allowed)

Since the window's width can vary I need to calculate on the fly if I can scroll left or right.

Can you help me with the javascript?

UPDATE: I have a followup question for this one: Scroll a div vertically to a desired position using jQuery Please help me solve that one too.

1
  • That's a lot of question marks for a single question.
    – Phrogz
    Nov 3, 2011 at 18:18

3 Answers 3

3

Use white-space:nowrap on the item container and display:inline or display:inline-block to prevent the items from wrapping and to not need to calculate or set an explicit width.

Edit:: Here's a live working demo: http://jsfiddle.net/vhvzq/2/

HTML

<div class="hscroll">
  <ol>
    <li>...</li>
    <li>...</li>
  </ol>
  <button class="left">&lt;</button>
  <button class="right">&gt;</button>
</div>

CSS

.hscroll { white-space:nowrap; position:relative }
.hscroll ol { overflow:hidden; margin:0; padding:0 }
.hscroll li { list-style-type:none; display:inline-block; vertical-align:middle }
.hscroll button { position:absolute; height:100%; top:0; width:2em }
.hscroll .left { left:0 }
.hscroll .right { right:0 }

JavaScript (using jQuery)

$('.hscroll').each(function(){
  var $this = $(this);
  var scroller = $this.find('ol')[0];
  var timer,offset=15;
  function scrollLeft(){  scroller.scrollLeft -= offset; }
  function scrollRight(){ scroller.scrollLeft += offset; }
  function clearTimer(){ clearInterval(timer); }
  $this.find('.left').click(scrollLeft).mousedown(function(){
    timer = setInterval(scrollLeft,20);
  }).mouseup(clearTimer);
  $this.find('.right').click(scrollRight).mousedown(function(){
    timer = setInterval(scrollRight,20);
  }).mouseup(clearTimer);
});
3
  • nice I didn't even think about that
    – CBRRacer
    Nov 3, 2011 at 18:27
  • I ended up using this solution on one of my other projects, so big thanks for this! Dec 20, 2011 at 12:09
  • Also I just noticed that this solution works especially well with responsive layouts. May 14, 2012 at 8:32
2

Thanks Phrogz for this part -- give the image container the white-space: nowrap; and display: inline-block;.

You can calculate the width without having to calculate the width of the children every time but you will need to calculate the width of the children once.

//global variables
var currentWidth = 0;
var slideDistance = 0;
var totalSize = 0;
var dispWidth = (winWidth / 2); //this should get you the middle of the page -- see below
var spacing = 6; //padding or margins around the image element

$(Document).Ready(function() {
$("#Gallery li").each(function () {
    totalSize = totalSize + parseFloat($(this).children().attr("width"));// my images are wrapped in a list so I parse each li and get it's child
});

totalSpacing = (($("#Gallery li").siblings().length - 1) * spacing); //handles the margins between pictures
currentWidth = (parseFloat($("#Gallery li.pictureSelected").children().attr("width")) + spacing);
maxLeftScroll = (dispWidth - (totalSize + totalSpacing)); //determines how far left you can scroll
});

function NextImage() {
 currentWidth = currentWidth + (parseFloat($("#Gallery li.pictureSelected").next().children().attr("width")) + spacing); //gets the current width plus the width of the next image plus spacing.
 slideDistance = (dispWidth - currentWidth)
 $("#Gallery").animate({ left: slideDistance }, 700);
}

There is a way to get the browser window with in javascript (jQuery example). and there is a way to catch the resize event.

var winWidth = $(window).width()
if (winWidth == null) {
winWidth = 50;
}

$(window).resize(function () {
    var winNewWidth = $(window).width();
    if (winWidth != winNewWidth) {
        window.clearTimeout(timerID);
        timerID = window.setInterval(function () { resizeWindow(false); }, 100);
    }
    winWidth = winNewWidth;
});

On my gallery there's actually quite a bit more but this should get you pointed in the right direction.

0

You need to change your #items from

#items
{
    float: left;
    background: yellow;
    width: 9000px;
} 

to

#items {
    background: yellow;
} 

Then calculate the width very easily with jQuery

// #items width is calculated as the number of child .item elements multiplied by their outerWidth (width+padding+border)
$("#items").width(
    $(".item").length * $(".item").outerWidth()
);

and simply declare click events for the #left and #right elements

$("#left").click(function() {
    $("#middle").animate({
        scrollLeft: "-=50px"
    }, 'fast');
});

$("#right").click(function() {
    $("#middle").animate({
        scrollLeft: "+=50px"
    }, 'fast');
});

jsFiddle link here

EDIT

I overlooked that detail about the varying image widths. Here is the correct way to calculate the total width

var totalWidth = 0;
$(".item").each(function(index, value) {
    totalWidth += $(value).outerWidth();
});

$("#items").width(totalWidth); 
4
  • This doesn't take into account variable width images
    – CBRRacer
    Nov 3, 2011 at 18:31
  • @CBRRacer Thanks for pointing that out. I overlooked that detail and made an update to my answer and to jsFiddle Nov 3, 2011 at 18:39
  • This was the solution I chose as I created something similar myself. Nov 3, 2011 at 19:22
  • Hey I have a followup question for this: stackoverflow.com/questions/8069099/… can you help me there? Nov 9, 2011 at 17:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.