Treehouse: 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.