Guys this is a jQuery accordion, where the previous accordion(tab) closes off when you open a new one. For example, when you open the first tab, and then you open the second tab, the first one closes off. Basically, when you open a tab, the other one closes off. How do i prevent the previous one from closing off? The tab should close only when the user clicks on it again.
Here's the jQuery -
jQuery(document).ready(function ($) {
var open = $('.openx'),
a = $('ul').find('a');
console.log(a.hasClass('active'));
open.click(function (e) {
e.preventDefault();
var $this = $(this),
speed = 500;
if ($this.hasClass('active') === true) {
$this.removeClass('active').next('.inneraccordionbox').slideUp(speed);
}
else if (a.hasClass('active') === false) {
$this.addClass('active').next('.inneraccordionbox').slideDown(speed);
} else {
a.removeClass('active').next('.inneraccordionbox').slideUp(speed);
$this.addClass('active').next('.inneraccordionbox').delay(speed).slideDown(speed);
}
});
});
The accordion is in ul li format, with a tag having the class openx
Simply commenting out the below line will work. as it is the one which closes all items.
a.removeClass('active').next('.inneraccordionbox').slideUp(speed);
Related
I have the following
function subNavToggle() {
var subNav = document.getElementById("subnav-section");
if (subNav.className === "navigation-subnav") {
subNav.className += " responsive";
} else {
subNav.className = "navigation-subnav";
}
}
I am trying to get the expanded menu to close when clicking outside of menu.
I have this, which will close the menu, but it also closes the hamburger menu - preventing the user to be able to open again.
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.closest('.sub_nav_links').length &&
$('.sub_nav_links').is(":visible")) {
$('.sub_nav_links').hide();
}
});
Also thought I could get away with the following, but it actually does the opposite. Opening outside menu item.
window.onclick = subNav;
$('html').on('click, touchend', function (e) {
// Close hamburger menu when tapping outside
if ($(e.target).closest('#subnav-section').length == 0) {
var opened = $('.navigation-subnav').hasClass('responsive');
if (opened === true) {
$('.navigation-subnav').collapse('hide');
}
}
});
// to hide
$(document).click(function(){
$("#submenu").hide();
});
// you could possibly prevent to hide menu while using navigation
$("#menu").click(function(e){
e.stopPropagation();
});
I currently have an Overlay on my page which fades in when I click certain Navigation elements such as search/dropdown.
My problem is that if I click the dropdown, then click the Search menu item it fades out the overlay and breaks by showing the overlay and no search bar.
If the overlay is already open, you don't need to fade
it in, just fade it out when you click something else.
I've added a Variable to check if it's already open, but obviously this gets troublesome with 'FadeToggle'. I've tried a lot of combinations with this but can't seem to get it to the above.
var overlay = false;
$('#myDropdown').on('show.bs.dropdown', function () {
if(overlay == false) {
$(".overlay").fadeIn(150);
overlay = true;
}
})
$('#myDropdown').on('hide.bs.dropdown', function () {
if(overlay == true) {
$(".overlay").fadeOut(150);
overlay = false;
}
})
$( "#searchToggle, #mobileSearchToggle" ).click(function() {
$('.search-bar').toggleClass( "open" );
$('body').toggleClass("noScroll");
$('.dropdown-menu').removeClass('show');
if(overlay == false) {
$(".overlay").fadeToggle(150);
}
});
I'm using a simple jQuery content panel switcher that I am trying to add a close button to. The close button is working but then after using the close button I can't re-open a panel again. The code for the panel switcher plugin is below:
jcps.fader = function(speed, target, panel) {
jcps.show(target, panel);
if (panel == null) {panel = ''};
$('.switcher' + panel).click(function() {
var _contentId = '#' + $(this).attr('id') + '-content';
var _content = $(_contentId).html();
if (speed == 0) {
$(target).html(_content);
}
else {
$(target).fadeToggle(speed, function(){$(this).html(_content);}).fadeToggle(speed);
}
});
};
And here is the call in my HTML page that I have added the click event to:
$(document).ready(function() {
jcps.fader(300, '#switcher-panel');
$(".close").live('click',function(){
$(".content").fadeOut("slow");
});
});
This all works fine for closing the content panel but I am unable to open a panel again after clicking close.
Create a variable outside the scope of both of these functions.
Set it to false by default. Set it to true on close
Create an If condition for true/false (inside your onClick code), and have it operate close/open code in each of these branches
Does this apply/make sense?
edit--
$(document).ready(function() {
jcps.fader(300, '#switcher-panel');
$(".close").live('click',function(){
if (Clicked == true){
//run jquery code to hide
} else {
//run jquery code to show
}
});
Imagine that I have many div in display: none; and just the first one is in visible.
In the view, you can navigate through each one pressing a ENTER or GO (in an iPad). So when you want to advance, change the current div to none, and the next one change it to visible. But right now I wanna also set the focus in an input element where has a focusable class. But it does not set the focus.
Here is my code:
var setFocus = function () {
$("#question-container2").find("#question:visible").find('.focusable')[0].focus();
$("#question-container2").find("#question:visible").find('.focusable')[0].setSelectionRange(0, 0);
};
var nextPage = function () {
if ($currentPage < $totalPages) {
$currentPage++;
$("#question-container2").find("#question:visible").hide().next().show();
}
};
$(".input-area").keypress(function (e) {
if (e.keyCode == 13) {
// Do something
nextPage();
setFocus();
return false;
}
});
Specify a tab index in your elements. This is a browser accessibility attribute which will tell the browser where to navigate to next when you are done with the current field.
See: http://reference.sitepoint.com/html/a/tabindex
I am trying to add an event handler to a div that has an image inside of the div. My problem is that the event only works if you double click outside the div right next to it. When you double click the picture inside the div it doesnt not trigger the event. How do I make it so that the event works both ways?
html
<div id="placeholder">
<a href="http://google.com" target="_blank">
<img src="http://www.fat-animals.com/wp-content/uploads/2009/03/11.jpg" alt="" />
</a>
</div>
javascript
var pic;
pic = document.getElementById("placeholder");
pic.ondblclick = function() {
pic.innerHTML = "blocked!";
}
demo
http://jsfiddle.net/9DWrN/
check this fiddle
http://jsfiddle.net/unloco/9DWrN/3/
var pic = document.getElementById("placeholder");
var clicked = false;
pic.onclick = function() {
if(clicked) {
pic.innerHTML = "blocked!";
} else {
clicked = true;
}
setTimeout(function(){
clicked = false
}, 333); //detect fast clicks (333ms)
}
Your current solution actually works, it just doesn't seem like it, since you are redirected to a new page.
If you have Chrome (Firefox too probably, maybe even IE 8+), double middle click on the image (opens in new tab/window). Your event will still get fired. You can then proceed to preventDefault on these events.
Using a double click event is not the best idea to prevent malicious clicks though, as the double click event will only get thrown every two clicks. While a client side validation is bad to prevent malicious clicks anyways, its best to use a click event and check with a timer (i.e. throttle the event to a maxmimum of once every 200 milliseconds, or only allow it if there was not a previous click within the previous 200 milliseconds.
And what about changing pic.innerHTML at onclick?
See http://jsfiddle.net/4Kecd/
var = document.getElementById("placeholder");
pic.onclick = function() {
pic.innerHTML = "blocked!";
alert('The link has been blocked');
}
Even if you delete the link, it will be followed that time.
See http://jsfiddle.net/4Kecd/1/ too.
You can do...
var pic1 = document.getElementById("placeholder1"),
clicked1=false;
pic1.onclick = function() {
if(clicked1){
alert("The link has been deleted. You can't follow the link twice!");
}else{
pic1.innerHTML = pic2.getElementsByTagName('a')[0].innerHTML;
alert('The link has been deleted.\nHowever, the new tab will be opened when you accept this alert.');
clicked1=true;
}
}
...if you want to delete the link but you want the image.
Or you can just disable the link:
var pic2 = document.getElementById("placeholder2"),
clicked2=false;
pic2.onclick = function(e) {
var a=pic2.getElementsByTagName('a')[0];
if(clicked2){
alert("The link has been disabled. You can't follow the link twice!");
a.href="#";/* Nonsense since we have disabled the link,
but we want to ensure that the link isn't followed*/
}else{
clicked2=true;
a.onclick=function(){return false;}
alert('The link has been disabled.\nHowever, the new tab will be opened when you accept this alert.');
}
}
Note: UnLoCo's solution is good but its problem is that it doesn't prevent us from following the link.
Instead, you can disable the link at first click and enable it after some seconds:
var pic = document.getElementById("placeholder"),
clicked=false;
pic.onclick = function(e) {
var a=pic.getElementsByTagName('a')[0];
if(clicked){
alert("The link has been disabled. You can't follow the link twice!");
a.href="#";
}else{
clicked=true;
a.onclick=function(){return false;}
if(!a.getAttribute('data-href')){
a.setAttribute('data-href',a.href);
}
alert('The link has been disabled.\nHowever, the new tab will be opened when you accept this alert.');
setTimeout(function(){enableLink(a);},5000);
}
}
function enableLink(a){
a.href=a.getAttribute('data-href');
a.onclick=function(){return true;}
clicked=false;
}
See it here: http://jsfiddle.net/4Kecd/2/