Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Post Merging Two Scripts on onInterval infinite loop

    Greetings All,

    I've been having trouble combining 2 scripts and to have them automatically preform them both at the same time.

    I have one script that is a simple slideshow that loads dynamic text into a DIV every 5 seconds.

    The next script edits the SPAN of the text to resize according to the character amount. The text it pulls can be any length and it simply edits the font size to force the post to fill the entire static box.

    How can I get this resizing script to run in parallel right after the slide switches? Should I combine them into one script? Or should I just also set it to an interval of 5 seconds (and how would I do that?)

    Script 1 - Slideshow:


    [CODE]
    <script>
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() {
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
    }, 5000);
    </script>
    [CODE]

    Script 2 - Resize Text

    [CODE]
    <script>
    $(function resize() {
    $('#slideshow span').css('font-size', '4em');

    while( $('#slideshow span').height() > $('#slideshow').height() ) {
    $('#slideshow span').css('font-size', (parseInt($('#slideshow span').css('font-size')) - 1) + "px" );
    }
    });
    </script>
    [CODE]

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    If you want them both to update one immediately after the other then it would be best to place them inside the same setInterval:

    Code:
    $("#slideshow > div:gt(0)").hide();
    
    setInterval(function() {
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
    
    $(function resize() {
    $('#slideshow span').css('font-size', '4em');
    
    while( $('#slideshow span').height() > $('#slideshow').height() ) {
    $('#slideshow span').css('font-size', (parseInt($('#slideshow span').css('font-size')) - 1) + "px" );
    }
    });
    }, 5000);
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    THANK YOU! That worked beautifully.

    The only thing it seemed to break is loading on page.

    I'm trying to do my research but I'm having trouble.

    How could I call it to go immediately on page load AND interval every 5 seconds?

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Sorry, let me clarify.

    It doesn't load "onLoad" of the webpage and takes 5 seconds to put itself into effect.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    To run the code immediately as well as every 5 seconds we'll need to pull the function out of the setInterval so we can call it immediately as well as from inside the setInterval - like this:

    Code:
    $("#slideshow > div:gt(0)").hide();
    
    var sld = function() {
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
    
    $(function resize() {
    $('#slideshow span').css('font-size', '4em');
    
    while( $('#slideshow span').height() > $('#slideshow').height() ) {
    $('#slideshow span').css('font-size', (parseInt($('#slideshow span').css('font-size')) - 1) + "px" );
    }
    });
    }
    setInterval(sld, 5000);
    sld();
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    sinsysonline (12-06-2012)

  • #6
    New Coder
    Join Date
    Dec 2012
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks so much for the help! I tried that but figured there may be an easier way.

    Amazingly fast response time! I really appreciate everything you've done.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •