SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Infinate Carousel cloning issues(clone of a clone)

    I have built an infinite carousel which works on on the following concept.when initialised in this example, it clones the 3rd element to the first position and removes the original 3rd element.



    This is working as expected, however if "clone of element 3" gets cloned again as the user continuously clicks on the scoller buttons, even with clone(true), it seems to lose all events attached to any of "clone of element 3" descendants.

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Clone it on startup and leave it in place, NOT whenever they click on scrolling.

    Another approach might be to use CSS to change the elements position to before the other elements rather than cloning it....

    Though we'd have to see your code to say for certain... question like that without the code that's being used is pretty much gibberish.

  3. #3
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two options that might work out better:
    1. On click, move the elements that are outside of the viewport to the right position before continuing with the animation
    2. Clone the entire carousel once only, and move the two item groups to the correct position as soon as they move out of the viewport.

  4. #4
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    see code snippets below

    list_holder = "ul"

    dimension variable is equal to the list item's width.


    first snippet does the initialising by cloning the last element and prepending it so that it becomes first in the list.

    Code JavaScript:
    function horizontal_scroll(dimension) {
    /*    The below 3 lines will set the list of banners up so the 
    last banner is first, and the list starts at the second position (-980px)
     e.g.
    On load, the list is like:
    {[1]} [2] [3] [4] - marginLeft = 0, so [1] is in the visible area
    But  after the below 3 lines, the list is like:
    [4] {[1]} [2] [3] - marginLeft = -980, so [1] is in the visible area*/
          list_holder.addClass("horizontal");
          var indent = parseInt(list_holder.css('left')) - dimension;
          var lastLi = list_holder.find("li.list:last");
          list_holder.prepend(lastLi.clone(true)).css("marginLeft", -dimension);
     //... clone it and add it to the beginning of the list. 
    reset the position of the list so that the original first image is visible
          lastLi.remove(); // remove the last LI                    
     
                    }



    second snippet manipulates the items depending on whether the user has clicked the left or the right arrow
    the arrow variable is used to determine the direction i.e left or right.
    this is extracted from its class attribute e.g
    Code:
    <span class="alt_scroll_right scroll_button">&nbsp;</span>
    Code JavaScript:
     
     
       function scrollElements(arrow) {
     
        if (direction === "right") { // if it's the right arrow...
            animateBy = -(item_dimension * 2); //... animate by double the negative width of the banners to bring the banner in the 3rd position into view
        } else {
            animateBy = 0; // if it's the left arrow, animate to 0, which will bring the banner in the first position into view
        }
        arrow.data("active", true);
     
        $(list_holder).animate({
            "marginLeft": animateBy
        }, 1000, function () { // animate the UL by the set amount, and after it's finished animating...
            //list_holder.css({"marginLeft":animateBy}); // animate the UL by the set amount, and after it's finished animating...
            if (direction === "right") { //... if it's the right arrow...
                var firstLi = list_holder.find("li.list:first"); //... find the first LI in the list...
                list_holder.append(firstLi.clone(true)); //... clone it and add it to the end of the list
                firstLi.remove(); // remove the first LI
            } else { //... if it's the left arrow...
                var lastLi = list_holder.find("li.list:last"); //... find the last LI in the list...
                list_holder.prepend(lastLi.clone(true)); //... clone it and add it to the beginning of the list
                lastLi.remove(); // remove the last LI
            }
            list_holder.css("marginLeft", -item_dimension); // reset the position of the list so that the original first image is visible
            arrow.data("active", false);
     
        });
     
     
     
    }


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
  •