Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Hi,

    I'm a javascript/jquery novice. I know how to manipulate packaged plugins (pretty Photo, slides JS, lightbox), but I can't really decipher the whole thing or make stuff myself.

    For a website I am making, I decided to use s3slider. I changed it so that the container holds both a textbox and picture and the effects are changed to fade, instead of scroll.

    The "time" is set to 4000 (short so I can test slides), so including effects,there should be 4 seconds per side. However, sometimes, the slide time seems to be cut to less than a second -- it is speed ramping at random times. My only guess is that I may be using an old version of jQuery library and it causes things to get freaky? Not sure. Could you take a look?

    **************ON PAGE CODE:

    <script type="text/javascript">
    $(document).ready(function() {
    $('#slider1').s3Slider({
    timeOut: 4000
    });
    });
    </script>

    *************JAVASCRIPT FOR S3 SLIDER:
    /* ------------------------------------------------------------------------
    s3Slider

    Developped By: Boban Karišik -> http://www.serie3.info/
    CSS Help: Mészáros Róbert -> http://www.perspectived.com/
    Version: 1.0

    Copyright: Feel free to redistribute the script/modify it, as
    long as you leave my infos at the top.
    ------------------------------------------------------------------------- */


    (function($){

    $.fn.s3Slider = function(vars) {

    var element = this;
    var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
    var current = null;
    var timeOutFn = null;
    var faderStat = true;
    var mOver = false;
    var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
    var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

    items.each(function(i) {

    $(items).mouseover(function() {
    mOver = true;
    });

    $(items).mouseout(function() {
    mOver = false;
    fadeElement(true);
    });

    });

    var fadeElement = function(isMouseOut) {
    var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
    thisTimeOut = (faderStat) ? 10 : thisTimeOut;
    if(items.length > 0) {
    timeOutFn = setTimeout(makeSlider, thisTimeOut);
    } else {
    console.log("Poof..");
    }
    }

    var makeSlider = function() {
    current = (current != null) ? current : items[(items.length-1)];
    var currNo = jQuery.inArray(current, items) + 1
    currNo = (currNo == items.length) ? 0 : (currNo - 1);
    var newMargin = $(element).width() * currNo;
    if(faderStat == true) {
    if(!mOver) {
    $(items[currNo]).fadeIn((timeOut/8), function() {
    if($(itemsSpan[currNo]).css('bottom') == 0) {
    $(itemsSpan[currNo]).slideUp((timeOut/20), function() {
    faderStat = false;
    current = items[currNo];
    if(!mOver) {
    fadeElement(false);
    }
    });
    } else {
    $(itemsSpan[currNo]).fadeIn((timeOut/20), function() {
    faderStat = false;
    current = items[currNo];
    if(!mOver) {
    fadeElement(false);
    }
    });
    }
    });
    }
    } else {
    if(!mOver) {
    if($(itemsSpan[currNo]).css('bottom') == 0) {
    $(itemsSpan[currNo]).fadeOut((timeOut/15), function() {
    $(items[currNo]).fadeOut((timeOut/8), function() {
    faderStat = true;
    current = items[(currNo+1)];
    if(!mOver) {
    fadeElement(false);
    }
    });
    });
    } else {
    $(itemsSpan[currNo]).fadeOut((timeOut/15), function() {
    $(items[currNo]).fadeOut((timeOut/8), function() {
    faderStat = true;
    current = items[(currNo+1)];
    if(!mOver) {
    fadeElement(false);
    }
    });
    });
    }
    }
    }
    }

    makeSlider();

    };

    })(jQuery);

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I don't think it's anything you did wrong. I think this line is your problem:
    Code:
    var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
    Looks like when the mouse is off your fader, it cuts the timeout in half. Just for the sake of simplicity, change it to this (make sure you back up any files first, so that you've got a restore point if something goes flaky):
    Code:
    var thisTimeOut = timeOut;
    There is a more efficient way to handle this if I'm right, but you'd have to edit quite a bit of code and it probably isn't worth the time.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Game,

    You're right: it's freaking out after a mouseOut action. So, it's nice for me to know that if people don't mouse over, it'll be fine.

    I tried

    Code:
    var thisTimeOut = timeOut;
    but it didn't fix the problem.

    Is the

    Code:
    var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
    the only thing that affects time after a mouseOut? I think I will try and play with it then. thanks.

    -R

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    It would be in this case, but other things can affect time. The things that will do it will be where the timeOut has some form of arithmetic function applied to it (e.g. timeOut/2, timeOut/15, etc.) Those are the lines you'll want to edit.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:39 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com