Active link not being removed from - javascript

I am using a 3 tab menu when active tag being on form 1 when page loads. When each tab is clicked the active tag should be removed and applied to the new selected form. form1 form2 form3
This works fine when I do not add the forms to each tab. But when I do add the forms the problem persist.
I am making the forms with contact 7 the wordpress plugin. Would my javascript be conflicting with something existing?
This is my javascript? Is there a way I could change it to make it work better with contact 7 plugin?
<script>
$('#myForm a').click(function (e) {
var tab = $(this);
if(tab.parent('li').hasClass('active')){
window.setTimeout(function(){
$(".tab-pane").removeClass('active');
tab.parent('li').removeClass('active');
},1);
}
});
</script>
You can see the site im working on Click Here
The forms on the home page in the tabs.

You can simplify your logic by removing the active class on all of it's sibling li elements and then add the active class to the one that was clicked.
$('#myForm a').click(function (e) {
var tab = $(this);
tab.parent('li').siblings('li').removeClass('active');
tab.parent('li').addClass('active');
});

Related

Show/hide an element after page load in a dynamic page

I have a server side web application that shows a listing with some filters. I would like to add a "Reset" button when a filter item is clicked and then I want the Reset button to disappear when the Reset button is clicked. I thought I can accomplish it with this:
$('.sort-by-agency ul li a').click(function() {
$('.sort-by-agency ul').after(viewAllBtn);
});
$('.sort-by-agency .view-all').click(function(){
$(this).hide();
});
But this doesn't work and it makes the Reset button to only appear for a second once a filter is clicked. The filter click makes the page to reload, and that makes the Rest button to disappear quickly. Is there a way to trigger the on click when ".sort-by-agency ul li a" link is clicked but load the function after the page is reloaded?
When the page reloads, the state of the app will be lost. So you have to prevent the page from reloading when the filter is clicked.
for accomplishing that, you should change your first function to this:
$('.sort-by-agency ul li a').click(function(event) {
event.preventDefault();
$('.sort-by-agency ul').after(viewAllBtn);
});
Learn more about this from jQuery docs : event.preventDefault()

Show Hidden Sub-Menu OnClick By Avoiding Link Of Parent Menu

I am working on a project where the most bad thing is that I can't edit HTML code of my project. I can only edit CSS/JavaScript. My project is that I have a list of menu using <ul><li>... having sub-list also in it. The full HTML code is giving below...
<ul class="main_list">
<li class="parent">
Menu-1
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
<li>Menu-2</li>
<li>Menu-3</li>
<li>Menu-4</li>
<li class="parent">
Menu-5
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
</ul>
This is the HTML code that I can not edit. I can only edit or add CSS/JavaScript. Here I want to hide all children menus and will show on click of there parent menu. But when we click on there parent menu then it goes to the external link that is on parent menu. So is there any way or solution for this...???
Update:
Keep in mind that I also want the parent menu link working too. I have an idea to add some text in front to parent menu like show/hide and make some JavaScript to open its children menu and in this case parent menu link will also work if we will click on it directly. Now can we add some text/icon in front of parent menu using JavaScript as I can't edit HTML?
Your click-function:
$('.main_list .parent > a').on('click', function(event){
event.preventDefault();
var href = $(this).attr('href'); // save the href for further use
$(this).siblings('.children').show(); //or whatever show-function you want to use
window.location.href = href; //if you want to user to be redirected
//OR
window.open(href,'_blank'); //for opening a new tab
});
For your second request, you can do somethin like that:
$(document).ready(function{
$('.main_list .parent').prepend('<span class="show">Show</span>');
});
then your selector in the click-handler above would be:
$('.show')
Demo
Cach your parent click event via JavaScript, then use event.preventDefault() to stop redirecting, then u can make some logic to show/hide menu items.
$(document).ready(function(){
$.each('.parent', function(){
$(this).prepend('<div class="clickableBox"></div>');
})
$(document).on('click', '.clickableBox', function(event){
//show/hide logic here
})
})
Based off of my comment above...
Append a drop down arrow next to the menu item for items with children - clicks on the parent item would navigate to it's link but clicks on the arrow would open up the submenu
JSfiddle DEMO
CSS:
ul.children {
display: none;
}
JQUERY:
$(function(){
$('li.parent').each(function(){
$(this).children('a').after('<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png" />');
});
$('li.parent img').on("click",function(){
$(this).siblings('ul.children').toggle();
});
});
EDITED JQUERY (with arrow image toggle):
$('li.parent img').on("click",function(){
if($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).attr('src','Arrow-down.png');
} else {
$(this).addClass('open');
$(this).attr('src','Arrow-up.png');
}
$(this).siblings('ul.children').toggle();
});
Updated DEMO
Since I can't see the full HTML, I'm acting like main_list is the only one.
// Get all anchors in menu
var anchors = document.getElementsByClassName('main_list')[0].getElementsByTagName('a');
// Change HREF to do nothing
for(a in anchors){
a.href = "javascript:void(0);
}
// Do other stuff
Make that code run at the end of the page after everything has loaded. Changing the href to javascript:void(0) will make there be no action.
The below works for me :)
jQuery(function( $ ){
$(document).ready(function(){
$('.main_list a').click(function (e) {
if ($(this).parent().children('ul').is(':visible') != true) {
$(this).parent().children('ul').show();
e.preventDefault();
return false;
}
})
});
});

jquery toggle function in tabs

Hi I'm currently facing this problem. I have some tab contents in 6 tabs. On load it will display the first tab content. I want to toggle between 1 tab such that when i click again it will hide. but the problem is when I clicked again, the remaining 5 tabs that are hidden are shown. how do I go about hiding the first tab content using toggle() without displaying the other 5 tabs content.
currently here's what I have written.
$("li").click(function() {
$(".tabContent").toggle();
});
And here's a jsfiddle
example: http://jsfiddle.net/eMLTB/98/
$("li").each(function(){//use .each() to call all list item element one by one
$(this).click(function(){// create click function
var i = $(this).find("a").attr("href");//get href attribute
$(i).toggle();//get div element by Id and call toggle()
});
});
--
You probably will want to add either return false; or event.preventDefault(); inside the function.

Using JQuery Conditionals to emulate toggle with click

I am building a project that has multiple panels, triggered by one of three buttons. When a button is clicked, a panel slides out, and any existing panels slide away. I started off using toggles, but I needed all of the toggles to work with eachother, so I changed the event to a click.
Everything is working great, but I have run into a problem closing up the panels. You can see a jsfiddle demo here: http://jsfiddle.net/3W4uG/1/
As you can see, the panels open up just great; however, you cannot close them by pressing the button again.
My JQuery looks like this:
$("a.button").on("click", function(e){
idClick = $(this).attr("id");
newSelector = $("#pane"+idClick);
//close panes and remove active classes
$(".pane").removeClass("panelUp");
$("a.button").removeClass("activeBtn");
//make active
$(this).addClass("activeBtn");
newSelector.addClass("panelUp");
e.preventDefault();
});​
I was thinking about implementing a conditional statement so emulate a toggle like so:
var thisBtn = $(this);
if(thisBtn.hasClass("activeBtn")){
$(this).removeClass("activeBtn"); //remove active state
newSelector.removeClass("panelUp"); //remove panel with css3
}
else{
$(".pane").removeClass("panelUp"); //closes down any other pane
$("a.button").removeClass("activeBtn"); //removes all other active classes
$(this).addClass("activeBtn"); //add active class to button just clicked
newSelector.addClass("panelUp"); //slides up new pane with css3
}
This didnt work. In fact, it stopped all the panels from working all together. What can I do to make this work without switching to a toggle?
http://jsfiddle.net/3W4uG/5/
$("a.button").on("click", function(e){
var idClick = $(this).attr("id");
var newSelector = $("#pane"+idClick);
var isCurrentPane= $(this).hasClass("activeBtn");
$(".pane").removeClass("panelUp");
$(".button").removeClass("activeBtn");
if(!isCurrentPane)
{
$(this).addClass("activeBtn");
newSelector.addClass("panelUp");
}
e.preventDefault();
});​
One possible solution is remembering original state of the current panel (see wasActive bellow), and not reopening the panel if it was originally opened.
$("a.button").on("click", function(e) {
idClick = $(this).attr("id");
newSelector = $("#pane" + idClick);
var wasActive = newSelector.hasClass('panelUp'); // newly added
//close panes and remove active classes
$(".pane").removeClass("panelUp");
$("a.button").removeClass("activeBtn");
if (!wasActive) { // newly added
//make active
$(this).addClass("activeBtn");
newSelector.addClass("panelUp");
}
e.preventDefault();
});​
Updated FIDDLE.

How do I stop the page from reloading when clicking on tabs? (jQuery)

I am have an issue with the page reloading. I have written a simple jQuery script that will tab through content. You can see it in action here: http://www.jonathanmaloy.com/tabstack/
The problem is that the page reloads and starts back at the top. I want to be able to have it stay in the same position so when you click on the next tab you wont have to scroll down the page back to it.
preventDefault() and return false do not fix the problem.
If there is anything else you need let me know but with the above link you can see everything.
Here is my current jQuery code:
$(document).ready(function() {
$('#tabnav li').click(function() {
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
});
$('#tabnav li:first').click();
});
Thanks in advance for any help!
Edit: Updated answer based on properly reading the question :-)
As discussed in the comments the problem arises when a new tab is shown and a previously shown tab is hidden. The DOM removal of the previous tab shrinks the page which causes the browser to jump to the top of the page which looks like a page reload, when actually it is not.
The following JavaScript stores the visible tab first and removes it once the new tab has begun to fade in. I also made a few changes to speed up the function by storing some jQuery objects so save re-querying the DOM each time. Also note that you did not need the each() as the same result can be achieved with a different selector, plus in your original code you were effectively hiding all .tab class elements multiple times.
$(function() {
var tabItems = $('#tabnav li'); // save looking this up multiple times
$('.tab').hide(); // hide all initially
$('#tabnav li').click(function() {
// remove active class from all and store the visible tab
tabItems.removeClass('active');
var visibleTab = $('.tab:visible');
// add class to selected list item
$(this).addClass('active');
$(this.title).fadeIn(450); // show new tab
visibleTab.hide(); // hide old one (DOM already has new tab in so page height will not shrink)
});
$('#tabnav li:first').click();
});
You want to either call event.preventDefault() or add a return false; (you don't need the event for this one) to the end of the function.
By default the browser would execute any click functions bound to the element being clicked on and then follow the link (which I assume is href="#" or similar) that causes the browser to reload the page. Since you are binding a function to the click event you are need to stop the click event from continuing and the browser will not continue execution and follow the href.
JavaScript
$('#tabnav li').click(function(event) { // <-- added the eventData map
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
event.preventDefault(); // or return false;
});

Categories