I don't want to use the toggle, what would I need to use to get the following nav structure to stay put when main link is hovered over?
Current js:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
Sample page
(Notice that when the submenu pops up, I cannot click on the links, as the submenu fades away)
If you aren't fussed about animation, and you wish to use JQuery you can toggle the CSS visibility rule on the class.
$(document).ready(function()
// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");
{
$(".downservices").hover(function()
{
$(".servicesdropped").css("visibility", "display");
},
function()
{
$(".servicesdropped").css("visibility", "hidden");
});
});
Using visiblity means the element will still consume the space it does in the DOM but does not display making sure the structure and positioning of other elements surrounding it are left in tact. The downside is that animations such as fadeIn() and fadeOut() will not work.
Your html markup architecture of menu should like this:
<ul>
<li class="downservices">GUYS
<div class="servicesdropped" style="display: none;">
<ul class="middle">
<h3>Shirts & Tanks:</h3>
<li>MuSkull</li>
<li>Bamboo Athletic Tank</li>
<li>Thin Strap Tank</li>
</ul>
<ul class="right">
<h3>Other Stuff:</h3>
<li>Shorties</li>
<li>Hoodies</li>
<li>Socks</li>
<li>Hats</li>
</ul>
</div>
</li>
<li>products</li>
<li>portfolio</li>
<li>contact</li>
</ul>
And in the script use this:
$(document).ready(function(){
$("li.downservices").hover(function()
{
$(this).find(".servicesdropped").slideDown("fast");
},
function()
{
$(this).find(".servicesdropped").slideUp("fast");
});
});
use like this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>
for hover out the menu disappear use this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>
Related
I'm trying to get one of my links to dynamically show when an anchor href link gets clicked on.
The JavaScript code to show the cats link but it's not showing the cats link as follows:
$(".button").click(function() {
$("#cat").show();
});
ul > li > #cat {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Dogs</li>
<li><a id="cat" href="javascript:void(0);">Cats</a></li>
</ul>
<p>Cool cats are stored here</p>
Press here to enable Cats
you'll need display:hidden as default CSS for #cat, then $("#cat").show() will have effect. If you want the button to toggle the show state then use $("#cat").toggle()
You can hide the link on page load by default using $("#cat").hide();in the $(document).ready(function(){}
Check the snippet. Hope this helps
$(document).ready(function(){
$("#cat").hide();
$(".button").click(function() {
$("#cat").show();
});
});
<ul>
<li>Dogs</li>
<li><a id="cat" href="javascript:void(0);">Cats</a></li>
</ul>
<p>Cool cats are stored here</p>
Press here to enable Cats
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Giving this a quick demo in codepen, the following code (and codepen example) would be how I'd set up what you're trying to do.
The HTML:
<ul>
<li>
<a href="dogs.html">
Dogs
</a>
</li>
<!-- you want to hide the LI, because if you hide the <a>, then
there will be an empty <li> that you'll need to deal with in
the layout of your page / screen reader users may end up
wondering why there is an empty list item
-->
<li id="cats_item" class="display-none">
<a href="cats.html">
Cats
</a>
</li>
</ul>
<p id="reveal_message">
Reveal a link to cats via the following button:
<!--
Use a button here since you're triggering an action
on the page, and not actually linking anywhere.
-->
<button type="button" id="reveal_button">
Reveal Cats
</button>
</p>
The CSS
/* this is all you need to hide any element */
.display-none {
display: none;
}
The jQuery
$('#reveal_button').on('click', function () {
// reveal the LI that contains the cats link
$('#cats_item').show();
/* hide the reveal message, since cats is shown,
this no longer has any usefulness (or change the message
and action to a 'toggle' to show/hide the cat link
*/
$('#reveal_message').hide();
/*
move keyboard focus to the cats link, otherwise
keyboard users would have to traverse back up the
DOM to get to the newly revealed link
*/
$('#cats_item a').focus();
});
Here is a codepen that reveals the cat link on button click:
http://codepen.io/scottohara/pen/VbYyGr
Try the following code
CSS
ul > li > #cat {
display: none;
}
JQUERY
$(".button").click(function() {
$("#cat").toggle();
});
Here is the working code: https://jsfiddle.net/u0ajrpw0/2/
Did you add the jQuery Cdn in the html file?
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Or you can use this to hide as well.
$('#cat').hide();
Your code should work if isn't dynamically generated, if so you should use event delegation on() :
$("body").on("click", ".button", function() {
$("#cat").show();
});
NOTE: Make sure that your code is wrapped by ready function.
Hope this helps.
$(function(){
$(".button").click(function() {
$("#cat").show();
});
});
ul > li > #cat {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Dogs</li>
<li><a id="cat" href="javascript:void(0);">Cats</a></li>
</ul>
<p>Cool cats are stored here</p>
Press here to enable Cats
I have my template file for home page, Home-template.php, and in it I have a sliding menu html.
This is my script for sliding menu:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("fast");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("fast");
});
$(".toggle a").click(function () {
$(".toggle a").toggle();
});
e.preventDefault();
});
and both jquery and this script are loaded on the page but the slide effect doesnt work, its only poping up and down without effect.
Any help?
here is html code:
<div id="panel">
<nav id="main-menu">
<ul>
<li>Home</li>
<li>About me</li>
</ul>
</nav>
</div>
<div class="toggle"><a id="close" style="display: none;position: absolute;right:5px;top:5px;" class="close" href="#"></a></div>
<div class="toggle" style="position: absolute;right:10px;top:10px;"><a id="open" class="open" href="#"></a></div>
here is a link of a page:
http://pavlovic.com/about-me/
Well for one the e is not defined and secondly I'm not sure how you are including your js so
you should read this: http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/
try the following code which works for me
$(this).effect('slide', { direction: 'down'}, 500);
for the slide effect to work in wordpress along with jquery file the jquery-effects-core and jquery-effects-slide has to be also loaded.
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-effects-slide');
this code also works:
$('#test').effect( "slide", "right" );
I have set up a jquery hover show and hide function click here for site however it doesn't work the way i want it to. When you hover over the link "store" it reveals the hidden div, which is a submenu, once the mouse cursor has been moved from the link "store" the hidden div slides.
I want the submenu to stay activate unless one the links in the submenu have been click on or the mouse cursor is have been moved outside of the submenu area.
below is a snippet of my code...
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').hover(function(){
$(".slidingDiv").slideToggle();
});
$('.slidingDiv').mouseout(function(){
$(".slidingDiv").slideUp();
});
});
<div id="menu_store" class="slidingDiv transparent">
<div class="menu">
<h3>clothing</h3>
<ul class="navigation">
<li>sweats / knitwear</li>
<li>shirts</li>
<li>denim</li>
<li>outwear</li>
<li>footwear</li>
</ul>
</div>
<div class="menu">
<h3>lifestyle</h3>
<ul class="navigation">
<li>books</li>
<li>art</li>
<li>objects</li>
</ul>
<div id="menu">
<ul class="cl">
<li><a class="show_hide" href="#">store</a></li>
<li>daily</li>
<li>featured</li>
<li>contact</li>
</ul>
Does anyone have a solution for this...?
I figured it out. http://jsfiddle.net/vtFfv/
Relevant documentation: http://api.jquery.com/mouseleave/
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').mouseenter(function () {
$(".slidingDiv").slideDown();
$(".slidingDiv").mouseleave(function () {
$(".slidingDiv").slideUp();
});
$('.slidingDiv a').each(function () {
$(this).click(function () {
$(".slidingDiv").slideUp();
});
});
});
});
When you hide slidingDiv, mouse events aren't registered. So the solution is to attach a mouseleave event to it once you decide to show it (that is, on mouseenter). And then registering clicking on the links is easy.
I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>
Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers
You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.
How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>
jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();
$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})
So I'm just trying to do a simple jquery effect but am having issues with the second part of the .hover function. Here's the code:
<div id="toprightboxes">
<ul>
<li><div id="login"><img src="img/login.png"/></div></li>
<li>info</li>
</ul>
</div>
<script>
$("#login").hover(
function () {
$(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
},
function () {
$(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
}
);
</script>
The first part of the hover works and the highlight image shows up but when I move off of the image nothing happens.
Ehm, its the same IMAGE you replace back...
Secondly why use jQuery for such a hover effect? You can easily do this with a:hover {} and pure CSS.
I think you have a typo — your event for mouseleave is the same as the one for mouseenter. Is this what you meant?
<div id="toprightboxes">
<ul>
<li><div id="login"><img src="img/login.png"/></div></li>
<li>info</li>
</ul>
</div>
<script>
$("#login").hover(
function () {
$(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
},
function () {
$(this).replaceWith('<div id="login"><img src="img/login.png"/></div>');
}
);
</script>
If all you're doing is changing the image, though, you might want to consider using CSS instead.