PDA

View Full Version : Show/hide element



chabuya
Feb 20th, 2010, 07:20 PM
Hey there,
I want a div element only to show when you hover over an anchor of the main menu.
The problem is: This div is not a child of the menu, so i can't do it through simple hover and display css functions.

http://imgur.com/RNvsG.png
That's the menu.

http://imgur.com/r2KYQ.png
This is what should appear when you're hovering one of the items.
Also, I want a different div for the different menu anchors, because I dont think wordpress can read the category by a hover. And, if this wasn't enough, I have no idea how to build this so you can actually from the menu anchor to the subnav without it disappearing when you're not above the anchor.

Here's the website:www.chabuya.net

I already tried hundreds of show/hide scripts, solving this via css but nothing works for me.
I'd be grateful for any suggestions.

Thanks in advance,
Kevin

F00Baron
Feb 20th, 2010, 09:57 PM
If you can manage to give the elements in the two sections similar id's you can use the id of the hovered element to get the id of the element you need to show. I did something similar but with clicks instead of hovers:

in one part of the page:

<ul>
<li><a href="#" class="my_links" id="A_1">alpha</a></li>
<li><a href="#" class="my_links" id="A_2">beta</a></li>
<li><a href="#" class="my_links" id="A_4">delta</a></li>
<li><a href="#" class="my_links" id="A_5">epsilon</a></li>
<li><a href="#" class="my_links" id="A_3">gamma</a></li>
</ul>

in some other part of the page:

<div class="my_descriptions" id="B_1">Lorem ipsum dolor sit amet, consectetur adipiscing ...</div>
<div class="my_descriptions" id="B_2">Sed malesuada, neque ac pulvinar interdum, leo lect...</div>
<div class="my_descriptions" id="B_4">Praesent ullamcorper dictum imperdiet.</div>
<div class="my_descriptions" id="B_5">Etiam feugiat cursus ipsum, vel dictum ligula eleife...</div>
<div class="my_descriptions" id="B_3">Suspendisse potenti. Sed vestibulum enim at dui p...</div>



<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {

// Initally hide all but show the first
$(".my_descriptions").hide();
$(".my_descriptions:first").show();

// Mark the first link as 'current'
$(".my_links:first").addClass('current');

// Hook up the links to the descriptions
$('.my_links').click(function(){

// This is the id of the link just clicked (A_ prefix)
var link_id = $(this).attr('id');

// This is the id of the description (B_ prefix)
var description_id = 'B_' + link_id.substr(2);

// Hide all descriptions and show the new current one
$(".my_descriptions").hide();
$('#' + description_id).show();

// Un-highlight all links and highlight the current one
$('.my_links').removeClass('current');
$('#' + link_id).addClass('current');

return false; // stop browser adding # to the URL
});
});

</script>
The key really is getting the ids named similarly which is easy in the framework I use.

Dormilich
Feb 20th, 2010, 10:06 PM
you could also try the next element operator (+) though I don’t know, whether IE has already implemented that.

<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
<div id="bar">sams performances</div>

#bar {
visibility: hidden;
}
ul {
float: right;
list-style-type: none;
}
ul:hover + #bar {
visibility: visible;
}

chabuya
Feb 21st, 2010, 01:31 AM
Wow thank you, I tried the javascript one and it worked after some adjustments. But is there a way to hide the subnav after a second or so?

Cheers,
Kevin

MrEnder
Feb 21st, 2010, 03:16 AM
You can also enable and disable stylesheets using

document.styleSheets[3].disabled = true;

and you can remove stuff and input stuff with the

document.getElementById("Id").innerHTML = "HTML here";

use a div with an ID and use absolute positioning.

declare how many stylesheets u have at the begining of your javascript

document.styleSheets[12];

This says there are 13 stylsheets as 0 is the first stylesheet. Works as an array.

u can use the .disable to enable and disable stylsheets to make lots of amazing CSS effects and CSS is what controls all styles on a web site ^.^

You can completely move the site as if it were windows with those small code lines ^.^ some of the most powerful codes I've come across for dynamic coding ^.^

chabuya
Feb 23rd, 2010, 10:36 PM
ive gone with foobarons javascript and everything works out great, thanks!
but is there any way to add a timeout? say, when the user doesn't hover the menu nor the subnav, the subnav hides after some time?
i tried adding it myself, but i got confused cause of all the brackets :d