Page 1 of 1

Need to pause ad rotator using onMouseOver

Posted: Thu Dec 03, 2009 10:01 am
by dcparham
[the asp below simply scripts the html, please forgive the asp; the modified code would be converted into php]:

my ad rotator works fine using mootools; the js is below. first, all the divs are created dynamically, #0-12. then the js takes over and creates a new instance of displaying a div with specified delay, then calls the next div to display, which calls the new instance again, which calls the next, over and over. an index test resets it to 0 if it has reached # <=12, so it can start over at 'div0'. well, i want to mouseOver the div and make it PAUSE. ideally, i would like also a Previous, and Next button in case someone missed the div they want to check out, and need to Previous back to the one they missed. but at the very least i really need a Pause when they mouseOver so they don't have to wait for the divs to sequence before they see it again [it WAS displaying randomly, so it would make it even more confusing for them to wait on the div they saw before.] i hope this is not too much info. the js code below, then some of the HTML that creates all the divs, which are subsequently displayed on the page. thx in advance!!

[first, some incidental includes aiding in the smooth transition between slides]

Code: Select all

 
<script type="text/javascript" src="js/mootools-1.2-core-yc.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
 
[now the main js]

Code: Select all

 
<script language="javascript">
 
    var current_UR_div = null;  // placeholder for whatever the previous DIV was so that we can fade it out
    var UR_div_delay = 5000;
    var x=0;
    window.addEvent('domready', function() { // this will execute as soon as the DOM is ready
    current_UR_div = $('div' + x).setStyles({'display': 'block', 'opacity': 1});
        setTimeout("new_UR_div()",UR_div_delay);
    });
    // 
    // display a new DIV in the upper right
    //
    function new_UR_div()
    {
        current_UR_div.fade('out');  // fade out the previous one
        x++;
        if(x>12)
        {
        x=0;
        }
        var new_div;
        new_div = $('div' + x).setStyles({'display': 'block', 'opacity': 1});
        setTimeout("current_UR_div",UR_div_delay);
        current_UR_div = new_div;
        current_UR_div.setStyles({
                display:'block',
                opacity: 0
        });
        //}//while END
        current_UR_div.fade('in');  // fade in the new one  
        setTimeout("new_UR_div()",UR_div_delay);
    }
 
</script>
 
[this is ASP but only incidental at this point - onMouseOver would work the same in the HTML]
[when the js solution is resolved, the script below will be converted to PHP]:

Code: Select all

 
<div id="att_named_box">
<form name="form1" method="post">
<%
x=0
Do While NOT recordCollection.EOF 'it appears this creates all the div's needed
Response.Write("<div id='div" & x & "' style='display:none; position:absolute; width:233px;' onMouseOver='javascript&#058;slideshow.pausePlay();'>")
'Response.Write("<div id='div" & x & "' style='display:none; position:absolute; width:233px;'>")
Response.Write("<a href='attorney-detail.asp?pageTitle=AttorneyName&id=" & recordCollection("attyID") & "'>")
Response.Write("<img src='images/indexAd/" & recordCollection("attyPhoto") & ".Ad1.jpg' alt='" & recordCollection("attyAlt") & "' width='82' height='101' border='0' align='left' style='z-index:99;' /></a>")
Response.Write("<p class='att_caption' style='margin-bottom:0px;'><font style='font-family:Garamond, Georgia, serif; font-size: 14px;'>" & recordCollection("attyCaption") & "</font></p><hr />")
Response.Write("<span class='att_name' style='margin-top:0px;'><font style='font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 22px;'><a href='attorney-detail.asp?pageTitle=AttorneyName&id=" & recordCollection("attyID") & "'>" & recordCollection("attyName") & "</a></font></span><br />")
'Response.Write("<span class='att_spec' style='line-height:1.3em;'>" & recordCollection("attyPracticeArea") & "</span>")
Response.Write("</div>")
x=x+1
recordCollection.MoveNext
Loop
'Response.Write("<script language='javascript'>var recCount=" & x & ";</script>") THIS CAUSES js ERROR expecting object when recCount used.
Response.Write("<input type='hidden' name='recCount' value='" & x & "'>")
'Response.Write "recCount = " & x
'so now x = # of items in slideshow
conn.Close
Set conn=Nothing
%>
</form>
</div>