I have a Lightbox, and inside a centered child with content. The child also has a close button. I only want to hide the Lightbox, when the Lightbox is clicked or the close button. At the moment it also gets closed, if the child is clicked.
js fiddle
HTML
<div class="lightbox">
<div class="child">
<a class="close" href="#"><span>x</span></a>
<header>
<h4>content</h4>
</header>
</div>
</div>
JS
$('.lightbox, .close').on('click', function(){
$('.lightbox').fadeOut();
});
Try to play with e.target like,
$('.close,.lightbox').on('click', function (e) {
if ($(e.target).parents(".lightbox").length && !$(e.target).is(".close,.close > span"))
return;
$('.lightbox').fadeOut();
});
DEMO
Related
Expected logic:
On mouse over main-navigation button, show - "advantage" Div container.
If user mouse over on "advantage" Div container, still show this container and allow user to click.
On mouse out of "Button" & "advantage" container - hide "advantage" Div container.
Present Behaviour:
On mouse over main-navigation button, show - "advantage" Div container.
If user mouse out of "Button", "advantage" container fade out & fade in. User cant able to click.
Not sure, which logic is missed out. If user on "advantage" container, it should not hide or fadeout.
HTML:
<div class="main-navigation">
Button
</div>
<div class="advantage">
<div class="content">
<p>demo content to load test</p>
</div>
</div>
JS:
$('.main-navigation .button').on('mouseover', function(){
$('.advantage).fadeIn(400);
});
$('.main-navigation .button').on('mouseleave', function(){
$('.advantage).fadeOut(800);
}).find("button, a").on("click", function (e) {
e.stopPropagation();
});
<div class="fadebox">
<div class="main-navigation">
Button
</div>
<div class="advantage" style="display: none;">
<div class="content">
<p>demo content to load test</p>
</div>
</div>
</div>
$('.main-navigation .button').on('mouseover', function (e) {
$('.advantage').fadeIn();
$('.advantage').find("button, a").on("click", function (e) {
e.stopPropagation();
});`enter code here`
});
$('.fadebox').on('mouseleave', function () {
$('.advantage').fadeOut();
})
Check this solution.it will work fine as per your request.
The main problem is that your html button style class is given with missing double quotes (").
HTML
<div class="main-navigation">
Button
</div>
<div class="advantage">
<div class="content">
<p>demo content to load test</p>
</div>
</div>
You can also use jquery for mouse actions (.mouseover() and .mouseleave()) as shown below:
JS:
$(".main-navigation .button").mouseover(function(){
$('.advantage').fadeIn(400);
});
$(".main-navigation .button").mouseleave(function(){
$('.advantage').fadeOut(800);
}).find("button, a").on("click", function (e) {
e.stopPropagation();
});
I have created a script that when a button is clicked it displays all of the content beneath it and hides the other buttons content. The only problem I'm having is that I want to refactor the script so it only works if you hit the button, instead of the entire div the button sits in as it's causing some confusion. What would be the best way about this?
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
jQuery:
(function($) {
$(".signup-button").on('click', function() {
$(".signup-button").not(this).find(".signup-form").hide();
$(this).find(".signup-form").toggle("slow");
});
})(jQuery);
JSFiddle: https://jsfiddle.net/v6bmphct/3/
One option would be to attach the event listener directly to the descendant button element. In doing so, the click event isn't triggered when clicking on the other content. You would also have to change instances of $(this) to $(this).parent() or $(this).closest('.signup-button').
Updated Example
$(".signup-button .btn").on('click', function(e) {
$(this).parent().find(".signup-form").toggle("slow");
$(".signup-button").not($(this).parent()).find(".signup-form").hide();
});
Alternatively, since event.target is a reference to the clicked element, you could also just check to see if event.target is the button element by using the .is() method:
Updated Example
$(".signup-button").on('click', function(e) {
if ($(e.target).is('.btn')) {
$(this).find(".signup-form").toggle("slow");
$(".signup-button").not(this).find(".signup-form").hide();
}
});
Check this out:
(function($) {
$(".signup-button").find('button').on('click', function() {
$(this).siblings(".signup-form").toggle("slow");
$(".signup-button").not(this.closest(".signup-button")).find(".signup-form").hide();
});
})(jQuery);
I've put this jQuery together, when the document is ready the div with a class of bio.read_more is hidden.
The default behaviour for the a tag is removed with e.preventDefault
When btn.expand_bio is clicked bio.read_more is displayed.
The only problem is all the bio.read_more divs are displayed? I only want the one that's related to expand. Can anyone help?
$(document).ready(function(){
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e){
e.preventDefault();
$(".bio.read_more").toggle();
});
});
(update) Added HTML
<div class="bio intro">
<p>Intro paragraph</p>
<a class="btn expand_bio" href="#">Read more</a>
</div>
<div class="bio read_more">
<p>Expanded text here</p>
</div>
</div>
Use this as reference to the element being clicked.
$(document).ready(function() {
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e) {
e.preventDefault();
$(this).closest('.bio.intro').next('.read_more').toggle();
});
});
I have a small problem with jQuery.
The situation:
I have a piece of jQuery code, where I toggle results.
JS Code:
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return true; //Prevent the browser jump to the link anchor
});
Now I want to open - toggle an item on anchor position from the URL like (http://x.com/page.php#toggleItem2)
Question:
How read toggleItem2 from URL and open exactly this section?
Additional:
HTML Code:
<div class="container">
<h2 class="acc_trigger">Item1</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
<h2 class="acc_trigger">Item2</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 2
</div>
</div>
<h2 class="acc_trigger">Item3</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 3
</div>
</div>
</div>
I hope the problem is clearly defined.
You should give your divs IDs according to the anchors, e.g.
<h2 class="acc_trigger">Item1</h2>
<div id="toggle1" class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
You can get the document fragment from the location object:
document.location.hash
Then it is simply (assuming the other containers are all hidden):
$(document.location.hash).slideDown().prev().addClass('active');
Try jquery toggle itself
http://api.jquery.com/toggle/
This is held within the window.location.hash variable.
You can do something like this:
http://jsfiddle.net/b6Znw/
Javascript:
$().ready(function(){
$('.acc_trigger a').click(function(){
$(this).closest('.acc_trigger').next('.acc_container').toggle()
return false;
})
})
UPDATE:
$('#menu1').bind('accordionchangestart', function(e, ui)
{
console.log( 'accordionchangestart event triggered' );
e.preventDefault();
});
I tried the code above, I do get the console message, but the accordion still slides down. Is there a way to stop the accordion from sliding down at the event?
I've tried return false and e.stopImmediatePropagation(). None of them appear to prevent the accordion from sliding down.
The following is my accordion HTML:
<div id="menu1">
<div>
<h3>Item 1</h3>
<div>
Item 1.1<br>
Item 1.2<br>
Item 1.3<br>
Item 1.4<br>
</div>
</div>
<div>
<h3>Item 2</h3>
<div></div>
</div>
<div>
<h3>Item 3</h3>
<div>
Item 3.1<br>
Item 3.2<br>
Item 3.3<br>
Item 3.4<br>
</div>
</div>
</div>
I want the accordion to work normally except when the header link is not #. For example, Item 2's href is item2.html. In that case, I want it to function as a normal link, and open the page.
That's what you can do:
The HTML:
<div id="menu1">
<div>
<h3>Item 1</h3>
<div>
Item 1.1<br>
Item 1.2<br>
Item 1.3<br>
Item 1.4<br>
</div>
</div>
<div>
<h3>Item 2</h3>
<div></div>
</div>
<div>
<h3>Item 3</h3>
<div>
Item 3.1<br>
Item 3.2<br>
Item 3.3<br>
Item 3.4<br>
</div>
</div>
</div>
The Javscript:
$(document).ready(function(){
$("#menu1 div div").hide();
$("#menu1 div h3 a").click(function(e){
if($(this).attr("href") == "#"){
e.preventDefault();
$("#menu1 div div").slideUp();
$(this).parent().next().slideDown();
}
});
});
The jsfiddle
change your click event to include something like this:
if ($(this).attr("href") != "#") {
window.location = $(this).attr("href");
return;
}
Can you show us the plugin you are using? Or is it homemade?
If it's a plugin, you could go to the event and say:
if href different than # then go to link.
for Example
$('h3').click(function(){
if($(this).attr('href') != '#'){ return true; }
});
Or something like that. Hard to say without the javascript script.