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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts

    Rollover activate on "hover" state"?

    Hello.
    I am using using some javascript code (I am just getting familiar with javascript). I have a page at http://sample.cnjwebsolutions.com/garb.php

    I am hoping that there is a way to have my divs slide up on
    "HOVER", rather than having to actually "click" on the rollover. Can it be done, or would I use a different approach? I would greatly appreciate any help. Sincerely, Buffmin.
    I have attached my code (Created in Dreamweaver as you will see).
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>garb</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
        <link rel="stylesheet" type="text/css" href="css/featuredcontentglider.css" />  
    <script type="text/javascript" src="Scripts/featuredcontentglider.js">
    
    /***********************************************
    * Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    </script>
    <script type="text/javascript">
    featuredcontentglider.init({
    	gliderid: "canadaprovinces", //ID of main glider container
    	contentclass: "glidecontent", //Shared CSS class name of each glider content
    	togglerid: "p-select", //ID of toggler container
    	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
    	selected: 0, //Default selected content index (0=1st)
    	persiststate: false, //Remember last content shown within browser session (true/false)?
    	speed: 500, //Glide animation duration (in milliseconds)
    	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
    	autorotate: false, //Auto rotate contents (true/false)?
    	autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
    })
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    <style type="text/css">
    <!--
    #man_big_but_wrap{width:940px;overflow:auto; padding-left:20px; margin:auto;}
    .manifold_lb{width:230px; height:180px; text-align:center; float:left; color:#D5272C;}
    -->
    </style></head>
    <body onload="MM_preloadImages('images/manifolds/button_hdsv_dn2.png')">
    
    
    <!--------------- Glide Navigation ------>
    <!--<div id="wrappp"> -->
    <div id="p-select" class="glidecontenttoggler">
    <div id="man_big_but_wrap">
    
    <div class="manifold_lb">
    <h2>Div1 </h2>
    <div align="center"><a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/manifolds/button_hdsv_dn2.png',1)"><img src="images/manifolds/button_hdsv_up.png" name="Image3" width="220" height="110" border="0" id="Image3" /></a></div>
    </div>
    
    <div class="manifold_lb">
    <h2>Div 2</h2>
    <div align="center"><a href="#" class="toc"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/manifolds/button_hdsv_dn2.png',1)"><img src="images/manifolds/button_hdsv_up.png" name="Image4" width="220" height="110" border="0" id="Image4" /></a></div>
    </div>
    
    <div class="manifold_lb">
    <h2>Div 3</h2>
    <div align="center"><a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/manifolds/button_hdsv_dn2.png',1)"><img src="images/manifolds/button_hdsv_up.png" name="Image5" width="220" height="110" border="0" id="Image5" /></a></div>
    </div>
    
    <div class="manifold_lb">
    <h2>Last Div</h2>
    <div align="center"><a href="#" class="toc" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/manifolds/button_hdsv_dn2.png',1)"><img src="images/manifolds/button_hdsv_up.png" name="Image6" width="220" height="110" border="0" id="Image6" /></a></div>
    </div>
    
    <!-- end of man_big_but_wrap -->
    
    </div><!------------------ End of Glide Navigation ------->
    
    <!------ Beginning of Glide Divs -------------->
    <div id="canadaprovinces" class="glidecontentwrapper">
    <!-------------------------------------------------------------------------->
      <!---------------- Glide div 1-------------------->
      <div class="glidecontent"  align="justify"> <img src="images/wood/wood_stove_frame.jpg" style="float: right; padding: 35px"/>
          <p></p>
        <h4><em>Div 1</em><br/>
        </h4>
        <p></p>
        <p style="line-height:1.7em;"> &nbsp;&nbsp;&nbsp;&nbsp; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<p></p>
          
          **** It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
      </div>
      <!------------------Next Glide div ------------------>
      <div class="glidecontent" align="justify"> <img src="images/wood/wood_insert.jpg" style="float: right; padding: 35px"/>
          <p></p>
    <h4><em>Div 2</em><br/>
        </h4>
        <p></p>
        <p style="line-height:1.7em;"> &nbsp;&nbsp;&nbsp;&nbsp; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<p></p>
          
          **** It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
      </div>
      <!------------------Next Glide div ------------------>
      <div class="glidecontent" align="justify"> <img src="images/wood/wood_fire.jpg" style="float: right; padding: 35px"/>
          <p></p>
    <h4><em>Div 3</em><br/>
        </h4>
        <p></p>
        <p style="line-height:1.7em;"> &nbsp;&nbsp;&nbsp;&nbsp; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<p></p>
          
          **** It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
      </div>
      <!------------------Next Glide div ------------------>
      <div class="glidecontent"  align="justify"> <img src="images/wood/why_wood.jpg" style="float: right; padding: 35px"/>
          <p></p>
    <h4><em>Last Div</em><br/>
        </h4>
        <p></p>
        <p style="line-height:1.7em;"> &nbsp;&nbsp;&nbsp;&nbsp; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<p></p>
          
          **** It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
      </div>
      </div><!-- End of canadaprovinces div ------------>
    <!------------------------------------------------------------------>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    	setuptoggler:function($, config){
    		this.aligncontents($, config)
    		config.$togglerdiv.hide()
    		config.$toc.each(function(index){
    				$(this).attr('pagenumber', index+'pg')
    				if (index > (config.$contentdivs.length-1))
    					$(this).css({display: 'none'}) //hide redundant "toc" links
    		})
    		var $nextandprev=$("#"+config.togglerid+" .next, #"+config.togglerid+" .prev")
    		$nextandprev.mouseover(function(event){ //Assign click behavior to 'next' and 'prev' links
    			featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype'))
    			event.preventDefault() //cancel default link action
    		})
    		config.$toc.click(function(event){ //Assign click behavior to 'toc' links
    			featuredcontentglider.glide(config, this.getAttribute('pagenumber'))
    			event.preventDefault()
    		})
    		config.$togglerdiv.fadeIn(1000, function(){
    			featuredcontentglider.glide(config, config.selected)
    			if (config.autorotate==true){ //auto rotate contents?
    				config.stepcount=0 //set steps taken
    				config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles)
    				featuredcontentglider.autorotate(config)
    			}
    		})
    		config.$togglerdiv.click(function(){
    			featuredcontentglider.cancelautorotate(config.togglerid)
    		})
    		if (this.leftrightkeys.length==2){
    			$(document).bind('keydown', function(e){
    				featuredcontentglider.keyboardnav(config, e.keyCode)
    			})
    		}
    	},
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Buffmin (03-06-2012)

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Thank you very much, but I replaced my js code with your (with the mouseover statement), and it still does not change divs on mouseover.?
    It still works the same on click, though.

    http://sample.cnjwebsolutions.com/garb.php


  •  

    Posting Permissions

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