I have the following script in my page to close out a dropdown submenu when the close button is clicked:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".closebutton").click(function() {
clearTimeout();
var c = $(this).closest("li");
c.find(".dropdown").css("left", "-9999px")
});
});
</script>
Once the "close button" is pressed, the dropdown no longer appears again when I hover over the parent li since the css has been changed to "left: -9999px". What script should I add that returns the css to "left: 0px;" again when I hover once more on the parent li without reloading the page?
Thanks!
This finds the closest li to the close button, and when its hovered finds the .dropdown element and sets the .dropdown to left: 0.
$('.closebutton').closest('li').hover(function() {
$(this).find('.dropdown').css('left', '0px');
});
You could use the $.mouseover() event and change the left property back to 0px. It would look something like this:
'<script type="text/javascript">
$(function() {
$(".closebutton").mouseover(function() {
var d = $(this).closest("li");
d.find(".dropdown").css("left", "0px");
});
});
</script>'
Hope that helps!
Try using the .show() and .hide() events in jQuery rather than changing the css and the .hover() to execute the .show().
c.find(".dropdown").hide();
Related
What I'm trying to accomplish is make a div visible when hovering over another using the .hover() method, addClass and removeClass. But what happens is that when I hover over the added div, it reads that I'm no longer hovering over the div specified (or at least that's what I assume) in the .hover() method. This causes the div to flash on and off the screen repeatedly. How can I fix this so this problem doesn't happen? Here is the code:
JS
$(document).ready(function(){
$('.building').hover(
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).addClass('active');
},
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).removeClass('active');
}
);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function abc() {
document.getElementById("Div2").style.display="";
}
</script>
</head>
<body>
<div onmouseover="abc()">Div1</div>
<div id="Div2" style="display:none">Div2</div>
</body>
</html>
If the balloon overlaps the Div, it captures the event “onmouseover”.
If you don’t have to deal with it, you could use css rule to prevent any action
.balloon {
pointer-events: none;
}
This rule allows the event to pass through the balloon, as if it didn’t exist.
I have a dropdown menu that shows with the following jQuery script:
jQuery(document).ready(function($) {
$('#block-mln-main-menu li').click(function(){
$(this).find('.test').toggle();
});
});
What I want to achieve is when the user clicks anywhere else on the page, it slides up or hides. I am literally at a loss on how to achieve this.
Any help is greatly appreciated.
added a fiddle : http://jsfiddle.net/aL7Xe/999/
Yoy can try stop propagation event.
CSS:
.showup{width:100px;height:100px; background:red; display:none;}
.click{cursor:pointer;}
HTML
<div class="click">click me</div>
<div class="showup">Click somewhere else!</div>
JQUERY
$(document).ready(function(){
$('.click').click(function(event){
event.stopPropagation();
$(".showup").slideToggle("fast");
});
$(".showup").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".showup").hide();
});
Toggle will only work it user click on the same object it you want to hide it when click elsewhere try
jQuery(document).ready(function($) {
$(this).not('#block-mln-main-menu li').click(function(){
$(this).find('.test').hide();
});
});
What I understand is that you want to show dropdown menu when an user clicks on it. If the user again clicks on it or anywhere on the page it should close.
CSS
.hide {
display: none;
}
JS
$('.menu-label').on('click', function() {
$('.drop-down-menu').toggleClass('hide');
});
To hide the menu when user click anywhere on page
$('body').on('click', function() {
$('.drop-down-menu').addClass('hide');
});
<script>
$(document).ready(function({$("#more").click(function()$(".dropdown").fadeToggle("slow")});});
</script>
This is my script for more option. I want to show the dropdown list when I clicked and hide it when I clicked again. Whit this code, all I can get is hiding when I clicked and showing when I clicked again. I want to make it reverse.
How can I change the default display?
Your code works, it just has some typo's.
And to define the default state, change the display property of .dropdown to none
$(document).ready(function() {
$("#more").click( function() {
$(".dropdown").fadeToggle("slow")
});
});
.dropdown {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="more">click for more</div>
<div class="dropdown">Droppie down</div>
you can use CSS display:none property to hide the div on page load.
eg:
#more{
display:none;
}
$("#more" ).on('click', function() {
$( ".dropdown" ).fadeToggle( "slow", "linear" );
});
Here I have a code that I open in modal window:
contentStr += '<div>Lorem Ispum</div><button>Add to timeline</button></div>';
$(contentStr).dialog({
modal:true
});
Now I want when I click on button Add to timeline to add: '<div id="new">place.name</div>'
into div ID bottom but with margin left var "N"
How I can do that with jquery?
assuming you meant you have a var N somwhere you want to apply it to margin left:
$('button').click(function(){
$('#bottom').append($('<div id="new">place.name</div>').css('marginLeft',N+'px'));
});
Some word of advise, this jquery is really basic, next time do some research please and show here what you found and where you struggle.
http://api.jquery.com/css/
http://api.jquery.com/append/
<style>
.marginLeft {
margin-left: Npx;
}
</style>
<script>
$.('button').click(function(){
$('div#buttom').html( $('div#buttom').html+'<div class="marginLeft" id="new">place.name</div>');
});
<script>
Currently, clicking on the h2 tag toggles the div with slideToggle. However, I'm trying to also fade in and out the .hint_text_heading that exists within the h2 tag. So, originally, what I tried to do at least, I am adding an .active class to the h2 tag thats open, then fading in the .hint_text_heading. However, I can't get .hint_text_heading to fade out when I close the div.
Any suggestions? Thanks!
html
<h2 class="collapsible_head">This is a title.<span class="hint_text_heading">This is a hint.</span></h2>
<div>
This is the toggled content.
</div>
jquery
$(document).ready(function(){
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
}).next().hide();
});
UPDATE/
Here's an example in jsFiddle. As you can see, the div toggles, and the hint text fades in, however, when the div is hidden, the hint text remains. I am trying to get that to fade out:
http://jsfiddle.net/UGHgx/
I think this is what you are wanting:
CSS:
span.hint_text_heading { display: none; }
jQuery:
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
//$(this).toggleClass('active');
$('span.hint_text_heading', this).fadeToggle();
}).next().hide();
How about this:
$(function(){ /* shorthand for $(document).ready(function(){ */
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
$('h2:not(.active) span.hint_text_heading').fadeOut();
}).next().hide();
});
Edit:
I would also recommend removing $('span.hint_text_heading').hide(); and just putting display:none; as a style, this is extra javascript where it isn't needed.
Do you want this;
$(document).ready(function(){
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).children('.hint_text_heading').fadeOut().end().next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
}).next().hide();
});
If not, please comment me and I'll try to give you solution.
Well, the quick and dirty solution:
http://jsfiddle.net/CpVSC/12/
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
if($(this).hasClass('active')){
$('.hint_text_heading').fadeOut();
}else{
$('span.hint_text_heading',this).fadeIn();
}
$(this).toggleClass('active');
}).next().hide();
Working code (tested):
$(document).ready(function() {
$('h2.collapsible_head').click(function() {
$('h2.active span.hint_text_heading').hide();
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
}).children().hide().end().next().hide();
});
Here's the fiddle:
http://jsfiddle.net/UGHgx/3/
I will go with animation callbacks.
Example: http://jsfiddle.net/X99Z6/