Grow your CSS skills. Land your dream job.

Please help me ! Moving Box jquery plugin

  • # August 21, 2009 at 3:26 am

    I have download the Moving Box jquery plugin, It was really good and fun to work with, im new to jquery, I need autoplay for it. How to create an autoplay function inside the slider.js

    Code:
    $(function() {

    var totalPanels = $(“.scrollContainer”).children().size();

    var regWidth = $(“.panel”).css(“width”);
    var regImgWidth = $(“.panel img”).css(“width”);
    var regTitleSize = $(“.panel h2″).css(“font-size”);
    var regParSize = $(“.panel p”).css(“font-size”);

    var movingDistance = 240;

    var curWidth = 210;
    var curImgWidth = 120;
    var curTitleSize = “15px”;
    var curParSize = “15px”;

    var $panels = $(‘#slider .scrollContainer > div’);
    var $container = $(‘#slider .scrollContainer’);

    $panels.css({‘float’ : ‘left’,’position’ : ‘relative’});

    $(“#slider”).data(“currentlyMoving”, false);

    $container
    .css(‘width’, ($panels[0].offsetWidth * $panels.length) + 120 )
    .css(‘left’, “-230px”);

    var scroll = $(‘#slider .scroll’).css(‘overflow’, ‘hidden’);

    function returnToNormal(element) {
    $(element)
    .animate({ width: regWidth })
    .find(“img”)
    .animate({ width: regImgWidth })
    .end()
    .find(“h2″)
    .animate({ fontSize: regTitleSize })
    .end()
    .find(“p”)
    .animate({ fontSize: regParSize });
    };

    function growBigger(element) {
    $(element)
    .animate({ width: curWidth })
    .find(“img”)
    .animate({ width: curImgWidth })
    .end()
    .find(“h2″)
    .animate({ fontSize: curTitleSize })
    .end()
    .find(“p”)
    .animate({ fontSize: curParSize });
    }

    //direction true = right, false = left
    function change(direction) {

    //if not at the first or last panel
    if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }

    //if not currently moving
    if (($("#slider").data("currentlyMoving") == false)) {

    $("#slider").data("currentlyMoving", true);

    var next = direction ? curPanel + 1 : curPanel - 1;
    var leftValue = $(".scrollContainer").css("left");
    var movement = direction ? parseFloat(leftValue, 100) - movingDistance : parseFloat(leftValue, 100) + movingDistance;

    $(".scrollContainer")
    .stop()
    .animate({
    "left": movement
    }, function() {
    $("#slider").data("currentlyMoving", false);
    });

    returnToNormal("#panel_"+curPanel);
    growBigger("#panel_"+next);

    curPanel = next;

    //remove all previous bound functions
    $("#panel_"+(curPanel+1)).unbind();

    //go forward
    $("#panel_"+(curPanel+1)).click(function(){ change(true); });

    //remove all previous bound functions
    $("#panel_"+(curPanel-1)).unbind();

    //go back
    $("#panel_"+(curPanel-1)).click(function(){ change(false); });

    //remove all previous bound functions
    $("#panel_"+curPanel).unbind();
    }
    }

    // Set up "Current" panel and next and prev
    growBigger("#panel_3");
    var curPanel = 3;

    $("#panel_"+(curPanel+1)).click(function(){ change(true); });
    $("#panel_"+(curPanel-1)).click(function(){ change(true); });

    //when the left/right arrows are clicked
    $(".right").click(function(){ change(true); });
    $(".left").click(function(){ change(false); });

    $(window).keydown(function(event){
    switch (event.keyCode) {
    case 13: //enter
    $(".right").click();
    break;
    case 32: //space
    $(".right").click();
    break;
    case 37: //left arrow
    $(".left").click();
    break;
    case 39: //right arrow
    $(".right").click();
    break;
    }
    });

    });

    Help me on this!

# August 22, 2009 at 6:17 am
Code:
setInterval(“$(‘.right’).click()”, 2000);
# August 23, 2009 at 7:19 am

i couldn’t help you cause i don’t know too.
is you solved plz infor me.

# August 23, 2009 at 2:15 pm
"sarabon008" wrote:
i couldn’t help you cause i don’t know too.
is you solved plz infor me.

The solution is to add the following… anywhere….

Code:
setInterval(“$(‘.right’).click()”, 2000);

Every 2 seconds javascript will click anything with the class of "right" making the functionality automatic

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".