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()
Related
I have a page with the following menu:
https://jsfiddle.net/dva4zo8t/
Based on which menu button is clicked, the color changes and I can "remember" (set) the color on a new page load:
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
I also want to "remember" (set) the submenu link (so when I click "Add Appointment" and the appropriate page loads, it needs to stay highlighted like this:
So what I basically want is to change the class of the sub li just as I do with the main buttons, for example:
$('#redbutton').addClass('topmenu-selectedred');
$('.topmenu-tab-appointments').show();
Any pointers will be very welcome!
I try to answere your question. I have created fiddle.
I added following method in your code.
$('ul > li > a').click(function() {
if(!$(this).hasClass("parent")) {
$(this).css('color','red');
$(this).parent().siblings().children().css('color','black');
}
});
Link for Fiddle
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');
});
Ok... So I have this drop down menu working as I'd like... however I'm trying to figure out how to revert the function back to it's original state after a menu item is clicked.
So first when you trigger the function it does & works great the following:
It swaps out .menu_hide and .lockscreen for .menu_show and .lockscreen_on.
// show and hide mobile menu
$('#triggerMobileMenu').click(function(e) {
e.preventDefault();
// Toggle all 4 classes off or on
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
But now I'm trying to add another piece that says once a menu item is clicked, close the menu and swap the classes back to their original state from .menu_show and .lockscreen_on, to .menu_hide and .lockscreen_off.
$('#mobileMenu ul li a').on('click',function(){
$('#mobileMenu').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#mobileScreen').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});
});
I should also note that on the same page a scroll to id# may be happening vs just simply taking you to the new url/page. Either case will happen though.
I think that you're making this too complicated. Use the same event handler for both a#triggerMobileMenu and ul#mobileMenu li a since you're having them do the same thing (toggle the visibility of the menu and another element).
$('a#triggerMobileMenu, ul#mobileMenu li a').on('click', function(evt){
evt.preventDefault();
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
});
If you need to know which element was clicked in the event handler, evt.target is available:
if( $(evt.target).is($('a#triggerMobileMenu')) ) {
// do stuff
}
See http://jsfiddle.net/Mph6t/3/
I think it is working as intended. I had to fix some id names that may have been switched in the translation to jsfiddle. Here's a working one as far as I can tell. This leaves the somename2 div still showing. I assume that is going to be blank and just for locking the screen right?
I also changed the link to a new tab for testing purposes. FYI.
Relevant changes are:
$('#somename1 ul li a').on('click',function(){
$('#somename1').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#somename2').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});
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;
});
I have a little problem with some jquery and http://www.mikage.to/jquery/jquery_history_noc.html
The function works great, my problem is to highlight an li class, tab menu, when user backspace with the keyboard or just use the back button on their browser to return the last seen page.
html code
li code with the class active, when page is on
<li class="active"><span>Prices</span></li>
jquery code:
This is loaded when
$(document).ready
$('li > a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
Can i make som .... keyCode == 8 (backspace key) to return last page ?
Can somebody give me a tip, or mabye give me an code example :-/
I would consider storing the state in a cookie (whether or not a class has been added to an element, for instance), and re-initializing your page from the values written to the cookie within your $(document).ready function. I did something similar to keep expandy bits of the page expanded. Check out the jQuery cookie plugin.