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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pausing on mouseover in a text rotator

    I have some code that rotates quotes using jQuery fadein and fadeout. I would like to pause the rotation if a user mouses over the text and resume on mouse out. Any guidance or code snippets wuld be appreciated. Here is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        
        <head>
            <title>jQuery Text Rotator - by Vijay Joshi | vijayjoshi.org</title>
            <style type="text/css">
                body {
                    background-color:#BCDFDB;
                    color: #000000;
                    font-family: Times New Roman, Times, serif;
                }
                #quotes {
                    margin:0;
                    padding:100px;
                    font-size:18px;
                    position:relative;
                }
                .textItem {
                    position:absolute;
                    text-align: center;
                    display:none;
                }
                a {
                    color:#000;
                    font-size:15px;
                }
            </style>
        </head>
        
        <body>
            <div id="quotes">
                <div class="textItem">Before turning to those moral and mental aspects of the matter which present
                    the greatest difficulties, let the inquirer begin by mastering more elementary
                    problems.</div>
                <div class="textItem">How often have I said to you that when you have eliminated the impossible,
                    whatever remains, however improbable, must be the truth?</div>
                <div class="textItem">It is a capital mistake to theorize before one has data. Insensibly one
                    begins to twist facts to suit theories, instead of theories to suit facts.</div>
                <div
                class="textItem">We must fall back upon the old axiom that when all other contingencies
                    fail, whatever remains, however improbable, must be the truth.</div>
            </div>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    setupRotator();
                });
    
                function setupRotator() {
                    if ($('.textItem').length > 1) {
                        $('.textItem:first').addClass('current').fadeIn(1000);
                        intervalId = setInterval('textRotate()', 3000);
                    }
    
                }
    
                function textRotate() {
                    var current = $('#quotes > .current');
                    if (current.next().length == 0) {
                        current.removeClass('current').fadeOut(1000);
                        $('.textItem:first').addClass('current').fadeIn(1000);
                    } else {
                        current.removeClass('current').fadeOut(1000);
                        current.next().addClass('current').fadeIn(1000);
                    }
                }
            </script>
        </body>
    
    </html>
    Last edited by VIPStephan; 09-10-2012 at 01:01 PM. Reason: added code BB tags

  • #2
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solution found

    To activate a function when a mouseenters or leaves the text area just set a .mouseenter and .mouseleave function on the text class. Here is the revised ready function.
    Code:
                $(document).ready(function () {
       
                    $('.textItem').mouseenter(function () {
                        clearInterval(intervalId);
                    });
                    $('.textItem').mouseleave(function () {
                         $(this).fadeOut(1000);
    	             textRotate();
                         intervalId = setInterval('textRotate()', 3000);
                    });
    	        setupRotator();
                });


  •  

    Tags for this Thread

    Posting Permissions

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