slider active state in jquery - javascript

i have a slider whose code is
var jq = jQuery.noConflict();
jq(document).ready(function(){
jq("a.zootoggle").click(function () {
jq(this).parent().next('div.zoocontent').slideToggle('slow', function() {
jq("a.zootoggle").parent().toggleClass('active', jq(this).is(':visible'));
});
return false;
});
})
the html
<h3><a class="zootoggle">openme</a></h3>
<div class="zoocontent>content here</div>
<h3><a class="zootoggle">openme</a></h3>
<div class="zoocontent>content here</div>
this works in that it opens the correct box when clicked (the next sib of the clicked h3 containing a) but it then applies the active class to all the h3's not just the one clicked. i would like the active class to only apply to the current h3.

Would this work?
jq("a.zootoggle").click(function () {
jq(this).parent().toggleClass('active').next('div.zoocontent').slideToggle('slow');
// Note, there's no callback in the slideToggle function anymore.
return false;
});​

Related

Slide down div on click event

I have simple slide down script that shows div on click event. The problem i have is, that onclick event doesn't work if i have it wrapped in another div. If clickable div doesn't have any parent div it works fine.
I'm using this for multiple div's, where only one is opened at once.
I need open 1 to work
Here's Fiddle
HTML
<div>
<div class="clickMore">open 1</div>
</div>
<div class="clickMore">open 2</div>
<div class="showMore" style="display:none;">
<div>text</div>
</div>
JS
$(function() {
$('.clickMore').on('click', function() {
$('.showMore').not($(this).next('.showMore')).slideUp('fast');
$(this).next('.showMore').slideToggle('fast');
});
});
Working fiddle.
The problem happen since you've two cases and the selector $(this).next('.showMore') will not return always the desired result, since when you've the .clickMore element inside a div the .next() function will not find the element because it's outside of the current div?
My suggestion id to add a condition to make sure if the related .showMore element is directly next to the clicked div or it should be targeted by adding the parent :
$(function() {
$('.clickMore').on('click', function() {
if ($(this).next('.showMore').length) {
var show_more = $(this).next('.showMore');
} else {
var show_more = $(this).parent().next('.showMore');
}
$('.showMore').not(show_more).slideUp('fast');
show_more.slideToggle('fast');
});
});
Short version of condition could be :
$(function() {
$('.clickMore').on('click', function() {
var show_more = $(this).next('.showMore');
show_more = show_more.length > 0 ? show_more : $(this).parent().next('.showMore');
$('.showMore').not(show_more).slideUp('fast');
show_more.slideToggle('fast');
});
});
Try this
$(function() {
$('.clickMore').on('click', function() {
$('.showMore').slideToggle('fast');
});
});
Working Fiddle
$(function() {
$('.clickMore').on('click', function() {
$('.showMore').hide();
var el = $(".showMore");
$(".showMore").remove();
$(this).append(el);
$('.showMore').slideToggle();
});
});
You are able to change the text content dynamically

Click outside menu to close it

Here's my function,
$(document).ready(function () {
$('.a').click(function () {
var here = $(this).next('.b');
if (here.is(":visible")) {
here.hide();
} else {
here.show();
}
return false;
});
});
So, whenever I click the button it opens a small tab on same webpage & whenever I click it again it closes it. But once I open the tab I can't close it by just clicking somewhere on webpage apart from tab. I have to click the button again to close it.
How can I close tab just by clicking somewhere on webpage also by on the button?
I end up searching for this on almost every project, so I made this plugin:
jQuery.fn.clickOutside = function(callback){
var $me = this;
$(document).mouseup(function(e) {
if ( !$me.is(e.target) && $me.has(e.target).length === 0 ) {
callback.apply($me);
}
});
};
It takes a callback function and passes your original selector, so you can do this:
$('[selector]').clickOutside(function(){
$(this).removeClass('active'); // or `$(this).hide()`, if you must
});
Nice, chainable, elegant code.
On document click, the closest helps to check whether the tab has been clicked or not:
$(document).click(function (e) {
if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
$('.b').hide();
}
});
You want to check for a click on the body :
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
menu would be the id of the menu.
If the body is clicked and the id of the div clicked doesn't equal that of the menu, then it closes.
Check this implementation
jQuery(document).ready(function() {
$(document).on('click','body, #btn',function(ev){
ev.stopPropagation()
if(ev.target.id== "btn"){
if($('#modal').is(':visible')) {
$('#modal').fadeOut();
} else{
$('#modal').fadeIn();
}
} else {
$('#modal').fadeOut();
}
});
});
html, body {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">
Click Me!
</button>
<div id="modal" style="background-color:red;display:none;">
BLA BLA BLA
</div>
To check if the clicked element is outside of a given container, i.e. a menu, we can simply check if the event target is a child of the container. Using JQuery -
$('body').click(function(e) {
if ( 0 === $(e.target).parents('#container-id').length ) {
/// clicked outside -> do action
}
})
you have to add a click listener to the parent element, like here:
$('.parent-div').click(function() {
//Hide the menus if visible
});
Also because click events bubbled up from child to the parent,
you can exclude the click on the child element to get bubbled up and count as the parent click too. you can achieve this like below:
//disable click event on child element
$('.child-div').click(function(event){
event.stopPropagation();
});

Multiple select divs with CTRL pressed

I have 10 divs
<div id="div_1" class="myDivs"></div>
<div id="div_2" class="myDivs"></div>
<div id="div_3" class="myDivs"></div>
...
O want to select 5 of them with a click handler using jQuery.
$(".myDivs").on("click", function() {
console.log('all clicked DIVs IDs...');
}
Is there a functionality to do this with jQuery? I would like to click them and get all IDs of the clicked divs. Thanks for your help!
This does the trick:
$(".markDIV").on("click", function (evt) {
if (evt.ctrlKey)
$(this).toggleClass("marked");
});
Toggle a class on each clicked div, then get an array of the ids of the divs with the class. The clicking of CTRL is a little redundant when using div elements. Try this:
$(".myDivs").on("click", function() {
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
return this.id;
}).get();
console.log(selectedIds);
});
Example fiddle

jQuery Adding / Removing classes on a button to hide elements

Trying to get a mobile footer menu (#mobile-menu) to hide / show when the floating button is clicked or tapped. I'm able to add the click event handler to the button (#mobile-footer-btn) which in turns applies a class to the menu and animates it off screen.
<footer id="mobile-footer">
<div id="mobile-menu">
<div id="mobile-footer-container">
<div class="mobile-link">
My Account
</div>
<div class="mobile-link">
Reviews
</div>
<div class="mobile-link">
Contact Us
</div>
</div>
</div>
<div id="mobile-footer-close">
<button id="mobile-footer-btn">
<div class="mobile-btn-close">
<span></span>
</div>
</button>
</div>
</footer>
For whatever reason, I'm not able to remove that class and add a new class to the same ID, which would add a class to show the menu again.
jQuery(document).ready(function($){
// Store menu container
var mobileMenu = '#mobile-menu';
// Store Trigger
var mobileBtn = '#mobile-footer-btn';
//Trigger closing the footer menu
$(mobileBtn).on("click", function() {
$(mobileMenu).addClass('mobile-menu-hide');
});
$('.mobile-btn-close').click(function() {
$(this).addClass('is-rotating');
});
if($(mobileMenu).hasClass('mobile-menu-hide')) {
$(mobileBtn).on("click", function(e) {
e.stopPropagation();
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
});
}
});
Any help would be much appreciated!
You only need one on click event! Your if condition never gets evaluated to true, therefor your onclick event is never triggered. It's better to house it in one onclick event. Here's the code:
jQuery(document).ready(function($){
// Store menu container
var mobileMenu = '#mobile-menu';
// Store Trigger
var mobileBtn = '#mobile-footer-btn';
$('.mobile-btn-close').click(function() {
$(this).addClass('is-rotating');
});
$(mobileBtn).on("click", function(e) {
e.stopPropagation();
if($(mobileMenu).hasClass('mobile-menu-hide')) {
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
} else {
$(mobileMenu).removeClass("mobile-menu-show").addClass("mobile-menu-hide");
}
});
});
Here's the plunker: https://plnkr.co/edit/SG8eFns91wV4adxapFDB
Even better now that I think about it: just toggle the one class that hides the menu and just use jQuery's toggleClass function. Something like this:
$(mobileBtn).on("click", function(e) {
e.stopPropagation();
$(mobileMenu).toggleClass('mobile-menu-hide');
});
The problem is that your if condition in the block only executes once. However, you need it to be called on every click. Hence, you need to update your code to following
jQuery(document).ready(function($){
// Store menu container
var mobileMenu = '#mobile-menu';
// Store Trigger
var mobileBtn = '#mobile-footer-btn';
//Trigger closing the footer menu
$(mobileBtn).on("click", function() {
// moved your if block inside the click handler
if($(mobileMenu).hasClass('mobile-menu-hide')) {
e.stopPropagation();
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
} else {
$(mobileMenu).addClass('mobile-menu-hide');
}
});
$('.mobile-btn-close').click(function() {
$(this).addClass('is-rotating');
});
});
Your $(mobileBtn).on("click", function(e) { ... code never executes and, therefore, never adds the click event handler because the menu doesn't start out as .mobile-menu-hide Try this
$(mobileBtn).on("click", function(e) {
if($(mobileMenu).hasClass('mobile-menu-hide')) {
e.stopPropagation();
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
}
});

Read id with jquery and apply action to corresponding div

I want a certain button to show a certain div. Now I need to update my javascript for every new button & div. As this will be connected to a cms, for every post it needs to work automatically. How can I read the id/class from the button dynamically to apply an action to the corresponding div?
Way of thinking:
button_xxx opens div with id xxx
button_xxx_close closes it
Here's the html:
Button 001
Button 002
...
Button 099
<div id="001">
<p>CLOSE</p>
<p>Content</p>
</div>
<div id="002">
<p>CLOSE</p>
<p>Content</p>
</div>
<div id="099">
<p>CLOSE</p>
<p>Content</p>
</div>
And the javascript:
$(document).ready(function() {
// SHOWS DIV
$('#button_001').on('click', function(){
$('#001').removeClass('movedown');
$('#001').addClass('moveup');
});
$('#button_002').on('click', function(){
$('#002').removeClass('movedown');
$('#002').addClass('moveup');
});
$('#button_099').on('click', function(){
$('#099').removeClass('movedown');
$('#099').addClass('moveup');
});
// HIDES DIV
$('.button_001_close').on('click', function(){
$('#001').removeClass('moveup');
$('#001').addClass('movedown');
});
$('.button_002_close').on('click', function(){
$('#002').removeClass('moveup');
$('#002').addClass('movedown');
});
$('.button_099_close').on('click', function(){
$('#099').removeClass('moveup');
$('#099').addClass('movedown');
});
});
You can reduce your code using startswith attribute selector in jquery
$("a[id^=button_]").click(function () {
var id = this.id.split("_")[1];
$("#" + id).removeClass("movedown").addClass("mouseup");
});
$('[class^=button_]').on('click', function () {
var id = $(this).attr("class").split("_")[1];
$("#" + id).removeClass("mouseup").addClass("movedown");
});
First snippet will select all anchor elemets with id starts with button_ and bind click event to them.
Second snippet will select all elemets with class starts with button_ and bind click event to them.
Note
If your elements are created dynamically, use the below code
$(document).on("click", "a[id^=button_]", function () {
var id = this.id.split("_")[1];
$("#" + id).removeClass("movedown").addClass("mouseup");
});
$(document).on('click', '[class^=button_]', function () {
var id = $(this).attr("class").split("_")[1];
$("#" + id).removeClass("mouseup").addClass("movedown");
});
Edit
$('[class^=button_]').on('click', function () {
// var id = this.id.split("_")[1]; <-- changedd this line
var id = $(this).attr("class").split("_")[1];
$("#" + id).removeClass("mouseup").addClass("movedown");
});
I changed the line, Because that element doesnt have id. So you should pick the classname instead.
You can use $(this).attr("class") to get the current element's class name. Then split the classname to extract the div id
Simply with toggleClass
$("a[id^=button_] , [class^=button_]").click(function () {
var id = this.id.split("_")[1];
$("#" + id).toggleClass("movedown mouseup");
});
Try with this:
$(document).ready(function() {
// SHOWS DIV
var elem = '';
$('a[id*="button_"]').on('click', function(){
elem = this.id.split('_')[1];
$('#'+elem).toggleClass('movedown moveup');
});
// HIDES DIV
$('.button_'+elem+'_close').on('click', function(){
$('#'+elem).toggleClass('movedown moveup');
});
});
You could do this without the need for regular expressions with a small change to your html
Button 001
<div id="001">
<p>CLOSE</p>
<p>Content</p>
</div>
and then add click handlers for both
$('.button_open_div').on('click', function(ev){
$('#'+$(this).data('divid')).removeClass('movedown').addClass('moveup');
});
$('.button_close_div').on('click', function(){
$('#'+$(this).data('divid')).removeClass('moveup').addClass('movedown');
});
or a toggle function
$('.button_open_div, .button_close_div').on('click', function(ev){
$('#'+$(this).data('divid')).toggleClass('movedown moveup');
});
example: http://jsfiddle.net/XXE2R/

Categories