SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Slide-show: Displaying partial images when scrolling

    I'm putting together a scrolling slide-show for a client. I've avoided use of a sprite image by animating an Unordered List. See:http://webadit.co.uk/cakelady/?page=wedding My reasoning is that this will make it much easier to change the images subsequently (no need for a new sprite).

    When the list scrolls the movement per 'click' is not a multiple of the thumbnail image size, so the space available for the next image on the right is often less than the full width of the image. I find that if the space is less than about 80% of the image width, the image doesn't display at all, leaving a blank space. I don't think this has anything to do with pre-loading, because in fact my development images are repeated several times (just to make up the numbers), so they will already be loaded. I suspect it has to do with the way the browser handles overflow. I've not made the movement a multiple of image size because in practice image size may vary.

    So far only tested in Firefox 8.

    Is there a way of forcing display of the partial image ?
    Tim Dawson
    Isle of Mull, Scotland

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ramasaig View Post
    Is there a way of forcing display of the partial image ?
    You've floated the list item images within the containing UL element, so from what I see here, a CSS solution is what you're after.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul,

    Thanks for your reply. I'm after any reasonable solution, be it JS or CSS. The LIs are floated because that's the best way I know of getting them to close up with minimal gap between. I tried 'display:inline-block' but it left a gap where the UL background showed through. However, I don't think it's either of those producing this effect (and I recognise that this is a JS forum).
    Tim Dawson
    Isle of Mull, Scotland


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
  •