August 29, 200817 yr I have a small problem, I have a menu, tab style going across the top of my content. What I want is, using the jQuery accordion effect, to have each tab slide up to reveal a picture. At the moment everything is positioned perfectly, the tabs slide up when you hover over them but instead of staying up whilst hovering over them they kind of bounce and do funny things. It would be great if they would stay up onMouseOver and go down onMouseOut. This is a link to a *working* example on the internet http://udwebdesign.co.uk/index2.html ----HERE IS THE CSS--- body {color:black; width:100%; height:auto; padding:0; margin-top: 75px; font:75%/120% 'lucida grande',tahoma,trebuchet; text-align:center;} .header {background:; width:800px; height:25px; margin:auto; z-index:0; color: #777777;} div.title {position:relative; height:100%; width: 200px; left:-10px;} div.menu {position:relative; height:105px; width: 300px; top:-93px; left:480px; vertical-align:bottom;} .footer {width:900px; height:35px; margin:auto; z-index:0; color:orange; text-align:right;} #panel {position:relative; background:url('images/default/contentbg.png') 0 0 no-repeat; width:800px; height:600px; margin:auto;} .tab {position:relative; width:75px; height:105px; margin:auto; display:table-cell; text-align:center; vertical-align:bottom;} .ptab {background:url(images/default/menutab.png) 0 100% no-repeat; position:relative; height:30px; vertical-align:top; margin:auto;} a {text-decoration:none; color:inherit;} .slide {position:relative; height:75px; width:75px; bottom:0; margin:0; background:url('images/default/menuslide.png') 0 0 no-repeat;} #one {display:none;} #two {display:none;} #three {display:none;} #four {display:none;} -----AND HERE IS THE HTML----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Untethered Dog web design. A new age in website construction. Unleashed soon."> <meta name="keywords" content="website design, website construction, website building, web design, web, design, construction, building, html, css, javascript, flash, php, asp, ftp, server, domain, domain name, build websites, web site, site"> <link rel="stylesheet" href="ud2.css" /> <link rel="shortcut icon" href="http://udwebdesign.co.uk/favicon.ico"'>http://udwebdesign.co.uk/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="icon" href="http://udwebdesign.co.uk/favicon.ico" type="image/x-icon" /> <title>untethered:dog</title> <script type="text/javascript" src="javascript/jquery.js"></script> <script type="text/javascript" src="javascript/secure.js"></script> <script type="text/javascript" language="javascript"> function slide(x){ $(x).slideToggle("slow"); $(this).toggleClass("active"); return false; } </script> </head> <body> <!--Preload images--> <!--End preload images--> <div class="header"> <div class="title"><img src="images/udtitle.png" alt="image" width="200" height="40" /></div> <!--Nav--> <div class="menu"> <div class="tab" onMouseOver="slide('#one')" onMouseOut="slide('#one')"><a href="portfolio.html"><p class="ptab">portfolio</p></a><div class="slide" id="one"></div></div> <div class="tab" onMouseOver="slide('#two')" onMouseOut="slide('#two')"><a href="index.html"><p class="ptab">homepage</p></a><div class="slide" id="two"></div></div> <div class="tab" onMouseOver="slide('#three')" onMouseOut="slide('#three')"><a href="geekery.html"><p class="ptab">geekery</p></a><div class="slide" id="three"></div></div> <div class="tab" onMouseOver="slide('#four')" onMouseOut="slide('#four')"><a href="about.html"><p class="ptab">about</p></a><div class="slide" id="four"></div></div> </div> <!--Nav--> </div> <div id="panel"> <!--Main Page Content (within slide box) Goes Below Here--> <p class="test"> HOME </p> <!--Main Page Content (within slide box) Goes Above Here--> </div> <div class="footer"> <div>All rights reserved.</div> </div> </body> </html>
August 29, 200817 yr I'm just getting in jQuery now, so I might be quite ignorant. But your onMouseOver and onMouseOut are set to do the same thing - the repeating slide animation. I'm not quite sure what beahviour you want - is it to slide out once and stop? If so isn't that something like SlideIn or SlideInUp in your function ?
August 29, 200817 yr Author I'm just getting in jQuery now, so I might be quite ignorant. But your onMouseOver and onMouseOut are set to do the same thing - the repeating slide animation. I'm not quite sure what beahviour you want - is it to slide out once and stop? If so isn't that something like SlideIn or SlideInUp in your function ? Thanks fatrabbit, yea well what is supposed to happen is onMouseOver, slide up, then onMouseOut, slide down again, however I thought that the setting for slide was to toggle, I'm not sure of the specific function names built into jQuery. I will try it with slideIn and Out. Thanks again, Jamie P.S. Just tried setting up two functions, slideIn and slideOut, both calling the same jQuery function "slideToggle". No joy.
Create an account or sign in to comment