0 Replies - 370 Views - Last Post: 14 May 2012 - 11:08 AM

#1 trinicherub  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 28-March 09

Mouse over/ Mouse out Event not working in menu list tab

Posted 14 May 2012 - 11:08 AM

Hello the site can be viewed at http://mrattigan.com...jects/index.php
The three tabs at the bottom for families, for volunteers etc are currently popping up with mouse over. I'm trying to get it to not popup but for the list to fade in and out in the respective tabs. At one point all the lists will show but not fade out and at another the head tabs fade in and out but not the lists, any suggestions will help. The code is below together with the style sheets attachedAttached File  popup.css (1.29K)
Number of downloads: 22 Attached File  tabnav.css (2.02K)
Number of downloads: 21

<!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>Good Grief</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="css/style2.css" rel="stylesheet" type="text/css" />
	<link href="css/tabnav.css" rel="stylesheet" type="text/css" />
	<link href="css/popup.css" rel="stylesheet" type="text/css" />
	
	<link href="css/navi.css" rel="stylesheet" type="text/css" />
	<link href="css/leftnavigation.css" rel="stylesheet" type="text/css" />
	<link href="css/breadcrumbs.css" rel="stylesheet" type="text/css" />
	<link rel="icon" href="images/favicon.ico" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/fadeslideshow.js"></script>
	<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
	<script type="text/javascript">	
   
   var mygallery=new fadeSlideShow({
       wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
       dimensions: [298, 381], //width/height of gallery in pixels. Should reflect dimensions of largest image
       imagearray: [
           ["images/7.png", "", "", ""],
           ["images/8.png", "", "", ""],
           ["images/9.png", "", "", ""] //<--no trailing comma after very last image element!
       ],
       displaymode: {type:'auto', pause:8500, cycles:5, wraparound:false},
       persist: false, //remember last viewed slide and recall within same session?
       fadeduration: 800, //transition duration (milliseconds)
       descreveal: "ondemand",
       togglerid: ""
   })
   
   
   var mygallery=new fadeSlideShow({
       wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
       dimensions: [298, 381], //width/height of gallery in pixels. Should reflect dimensions of largest image
       imagearray: [
           ["images/4.png", "", "", ""],
           ["images/5.png", "", "", ""],
           ["images/6.png", "", "", ""] //<--no trailing comma after very last image element!
       ],
       displaymode: {type:'auto', pause:8500, cycles:5, wraparound:false},
       persist: false, //remember last viewed slide and recall within same session?
       fadeduration: 800, //transition duration (milliseconds)
       descreveal: "ondemand",
       togglerid: ""
   })
	</script>
	<script src="js/superfish.js" type="text/javascript"></script>
	<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
	
	<script type="text/javascript" src="js/simplegallery.js"></script>
	<script type="text/javascript">
var mygallery=new simpleGallery({
		wrapperid: "simplegallery", //ID of main gallery container,
		dimensions: [380, 381], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
		imagearray: [
			["images/centerimages/center-img1.png", "#", "", ""],
			["images/centerimages/center-img2.png", "#", "", ""],
			["images/centerimages/center-img3.png", "#", "", ""]
		],
		autoplay: [true, 5000, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
		persist: true,
		fadeduration: 500, //transition duration (milliseconds)
		onslide:function(curslide, i){ //event that fires after each slide is shown
			//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
			//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
		}
	})
</script>

<!--<script>
		$(function(){
			$('.box4').hover(function(){
				$(this).find(".m1").stop().animate({top:-143}, "normal")
			}, function(){
				$(this).find(".m1").stop().animate({top:0}, "normal")
			});
		});
	</script>  --> 
    
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>   
<script type="text/javascript" charset="utf-8">
    $(function () {
        if ($.browser.msie && $.browser.version < 7) return;
        
        $('#navigation li')
            .removeClass('highlight')
            .find('a')
            .append('<span class="hover" />').each(function () {
                    var $span = $('> span.hover', this).css('opacity', 0);
                    $(this).hover(function () {
                        // on hover
                        $span.stop().fadeTo(500, 1);
                    }, function () {
                        // off hover
                        $span.stop().fadeTo(500, 0);
                    });
                });
                
    });
</script>
      

<script type="text/javascript" src="js/cufon-yui.js"></script>
</head>
<body>
	<div class="main-index">
		<div class="container">
			<?php include("includes/header-n-navi.inc"); echo "\n"; ?>
			<div class="clr"></div>
			<div class="body_resize-inx">
				<div id="polaroids">
					<div class="goodGreif-left-frame"><div id="fadeshow1"></div></div>
					<div class="goodGreif-center-frame" align="center">
						<div id="simplegallery"></div>
						<a href="javascript:mygallery.navigate('prev')"><img src="images/centerimages/button-previous.png" alt="Previous Slide" width="27" height="26" align="bottom" title="Previous Slide" /></a><a href="javascript:mygallery.navigate('playpause')"><img src="images/centerimages/button-playpause.png" alt="Play/Pause Gallery" width="27" height="26" align="bottom" title="Play/Pause Gallery" /></a><a href="javascript:mygallery.navigate('next')"><img src="images/centerimages/button-next.png" alt="Next Slide" width="27" height="26" align="bottom" title="Next Slide" /></a>
					</div>
				  <div class="goodGreif-right-frame"><div id="fadeshow3"></div></div></div>
  		<div class="clr"></div>
  		<div class="body-inx">
  			<div id="driller">
  				<div style="margin:0 0 15px 15px"><a href="donate.php"><img name="" src="images/donate.jpg" border="0" alt="Image" /></a></div>
  				<div class="shadowbox">
  					<div class="naviclr1"><a href="abo-overview.php"><img name="" src="images/about-l.png" border="0" width="222" height="46" alt="Image" /></a></div>
  				</div>
  				<div class="shadowbox">
  					<div class="naviclr5"><a href="calendar.php"><img name="" src="images/calendar-l.png" border="0" width="222" height="46" alt="Image" /></a></div>
  				</div>
  				<div class="shadowbox">
  					<div class="naviclr6"><a href="tou-overview.php"><img name="" src="images/tour-l.png" border="0" width="222" height="46" alt="Image" /></a></div>
  				</div>
  				<div class="shadowbox">
  					<div class="naviclr7"><a href="con-overview.php"><img name="" src="images/connected-l.png" border="0" width="222" height="46" alt="Image" /></a></div>
  				</div>
  				<div style="margin:15px 0 0 0"><a href="memorypage.php"><img name="" src="images/memory.jpg" border="0" alt="Image" /></a></div>
  			</div>
  			<div class="body_big">
  				<img src="images/welcome.jpg" style="margin:0 0 10px 60px" alt="image" />
  			</div>
  			<div class="tabs">
			  <div class="first">
						<div class="box4" >
						  <div class="m1" >
                            <div class="text7">for <span>families</span></div>
                             <ul class="list5" id="navigation">
                              <li class="highlight"><a href="fam-family-orientation.php" class="tabs.first" >Family Orientation</a></li>
						      <li class="highlight"><a href="fam-night-support.php" class="tabs.first">Night Support Schedule</a></li>
						      <li class="highlight"><a href="fam-family-policies.php" class="tabs.first">Family Policies</a></li>
						      <li class="highlight"><a href="fam-family-events.php" class="tabs.first">Family Events Update</a></li>
						      <li class="highlight"><a href="fam-bear-makin-ladies-project.php" class="tabs.first">Bear Makin' Ladies Project</a></li>
					        </ul>
                            </div>
				  </div>
<div class="box" id="color1">
							<p class="pointer" >Bore officius dolo di di doluptatius Mil ium et, sitatium etur, ulloriat. dolo.
  							<a href="fam-overview.php"><img src="images/more_green.png" border="0" width="69" height="25" alt="Click for Resources" /></a>  						</p>
			    </div>
			  </div>
  			</div>
  			<div class="tabs">
<div class="second">
						<div class="box4">
      				<div class="m1 color1" >
   					  <div class="text7">for <span>volunteers</span></div>
      					<ul class="list5">
      						<li><a href="vol-took-kit.php">Volunteer Took Kit</a></li>
									<li><a href="vol-facilitator.php">Become A Group Facilitator</a></li>
									<li><a href="vol-upcoming-training.php">Upcoming Training</a></li>
									<li><a href="vol-faq.php">FAQ</a></li>
									<li><a href="http://content.delivra.com/etapcontent/GoodGriefInc/Facilitator Registration Form.pdf" target="_blank">Sign/Up Register</a></li>
      					</ul>
      				</div>
   			</div>
  					<div class="box" id="color2">

  						<p class="pointer">Bore officius dolo di di doluptatius Mil ium et, sitatium etur, ulloriat. dolo.
  							<a href="vol-overview.php"><img src="images/more_yellow.png" border="0" width="69" height="25" alt="Click for Volunteers" /></a>
  						</p>
						</div>	
  				</div>
  			</div>
<div class="tabs">
  				<div class="third">
  					<div class="box4">
      				<div class="m1 color2">
      					<div class="text7">for <span>resources</span></div>
      					<ul class="list5">
      						<li><a href="res-national-organizations.php">Local/National Organizations</a></li>
									<li><a href="res-support-sites.php">Grief Support Websites</a></li>
									<li><a href="res-books.php">Recommended Books</a></li>
									<li><a href="res-direct-services.php">Direct Services</a></li>
      					</ul>
      				</div>
      			</div>
  					<div class="box" id="color3">
							<p class="pointer">Bore officius dolo di di doluptatius Mil ium et, sitatium etur, ulloriat. dolo.
  							<a href="res-overview.php"><img src="images/more_orange.png" border="0" width="69" height="25" alt="Click for Resources" /></a>
  						</p>
						</div>
  				</div>
  			</div>
  			<div class="clr"></div>
  		</div>
  		<!-- start of body section -->
  		<div class="clr"></div>
  		<!-- start of footer section -->
  		<?php include("includes/footer-sub.inc"); echo "\n"; ?>
  		<!-- end of footer section -->
			</div>
			<!-- end of body_resize-inx -->
		</div>
		<!-- end of container -->
	</div>
	<!-- end of main -->
</body>
</html>






Is This A Good Question/Topic? 0
  • +

Page 1 of 1