I have some JQuery code that filters out a list of links on the page. At present the filtering is fired when a link wih a blind href is clicked. The id of the link is taken to determine which content remains visible on the page. EG:
<script type="text/javascript">
$(document).ready(function () {
//when a link in the filters div is clicked...
$('#filters a').click(function (e) {
//prevent the default behaviour of the link
e.preventDefault();
//get the id of the clicked link(which is equal to classes of our content
var filter = $(this).attr('id');
//show all the list items(this is needed to get the hidden ones shown)
$('#content ul li').show();
/*using the :not attribute and the filter class in it we are selecting
only the list items that don't have that class and hide them '*/
$('#content ul li:not(.' + filter + ')').hide();
});
});
I need to changed this so that, the JQuery is activated when an option is changed in a DropDownList/SELECT. However, I cant quite get my head around how to change this JScript to detect the selection in the DDL rather than a hyperlink.
Any help would be greatly appreciated.
Thanks.
Use the change() event
$("#idOfDropDown").change(function() {
//code here
var filter = this.value //gets the value of the selected dropdown item.
});
This will fire each time a dropdown selection has been made.
Related
I can not add class active in LI navigation menu where i click.
When i click on WHAT WE DO on home page it jump to what we do page so i need menu WHAT WE DO in what we do page to be active.
Here is my JSFIDDLE
JS
$( document ).ready(function() {
$( "#cssmenu a" ).click(function(e) {
e.preventDefault();
var navId = $(this).attr("href");
var str = '.' + $(this).attr('id');
$("html, body").animate({
scrollTop: $(navId).offset().top
}, 600);
$(str).show();
$(this).closest('ul').find('li').removeClass("active");
$(str).find('li').removeClass("active");
$(str).closest('ul').find('li').addClass("active");
});
});
You are using same id for multiple elements. Please remove it and use different Ids for different elements.
You can add active class using below jQuery :
$(str).find('[href="'+navId+'"]').closest('li').addClass("active");
instead of
$(str).closest('ul').find('li').addClass("active");
Working JSFiddle
Note : as active class has font color white hence it is not visible after adding active class to the li.
Updated Fiddle
You need to find li - a in what we do page to add the class.Change the last line to this,
$(str).find('ul li a#'+$(this).attr('id')).parent().addClass("active");
Or just
$(str).find('a#'+$(this).attr('id')).parent().addClass("active");
Note : Your markup has Duplicate IDs which is invalid.
Element IDs should be unique within the entire document.
I have been satisfactorily using a submit button like this
for some time. The class defines the position of the button and it's appearance.
Now I have added a Jquery script to the page, and the button no longer works. The script is
$(document).ready(function() {
$("#tabcontent > div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#tabcontent div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#tabcontent > div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
});
$('#prices').load('../prices.php?hid=<?php echo $hid;?>');
});
Presumably it is something to do with having "javascript:void()" in the href, but I can't see why. Is there an alternative way of writing the href to get both things working together?
PARTIAL SOLUTION
The problem was not really what I thought it was. In the end I found that the parent page and the page being loaded by Jquery both contained a with the same name. Re-naming one of the forms solved that part of the problem.
However now that that is out of the way I am finding another issue that appears to be a conflict between two bits of Jquery. I've asked another question about that at Jquery - Scripts are conflicting
Change the function as below. Add the submit in last line of the function like I shown
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#tabcontent > div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
$(this).submit() **// ADD HERE**
});
$('#tabs a').click is your problem. You are overwriting the click event for the <a> tag with this code.
You can update the jQuery code to this:
$('#tabs a:not(.buttonavail)').click
Using Twitter Bootstrap 2.3.2 Collapse plugin.
I'm having trouble trying to manipulate nested accordions with javascript.
I want to capture the id of the last clicked accordion-toggle so that I can refer back to it after I've closed all open accordions.
I can use the on shown/hidden events to globally close all open accordions but I need to then go back and open the last selected item (or do similar in another way if it is simpler).
I can't work out how to create a variable for the selected accordion-toggle. I can only access the accordion at the top level with the 'this' keyword.
Can I change the following so that it references the accordion-toggle?
$('.accordion').on('show', function () {
var selected = this.**[Accordion-Toggle]**
$('.accordion').on('hidden', function () {
clearCollapse();
});
do something with selected item here...
});
----------UPDATE--------
After sorting out the event capture with Ammu's help, I was able to amend the clearCollapse function to do what I needed. The code actually selects the accordion-body rather than the accordion-toggle.
//function to fully collapse accordion on same page
function pageCollapse(inner) {
$('#' + inner).find('.accordion-body').removeClass('in');
$('#' + inner).find('.accordion-body').height('0px');
}
//collapse inner accordion on same page
$('.accordion').on('hidden', function (e) {
var selected = e.target.id;
pageCollapse(selected);
});
This may be a help for you . In your code make a little change
$('.accordion').on('show',function (event)){
var selected=event.target.id; // give id of selected element
$('.accordion').on('hidden',function () {
clearCollapse();
});
do something with selected item here... });
I am working on a project i am having some anchors like tab, each have some CSS class, the selected tab have separate css class. I am clicking on tab and i want to change its CSS class to selected css class i have done this functionality but i am having some problems with it is that previously selected tab also having same class, how can i change the previous selected tab to unselected class,Below is my code
$(".btn").each(function ()
{
$(this).click(function () {
$(this).removeClass("course-btn-tab").addClass("course-btn-tab-selected");
});
});
<div class="course-Search-tabs">
A
B
C
D
</div>
You do not need to use each here, on click of element with class btn remove class for all elements with class btn and assign the desired class to current element (referred by $(this)) which is event source. Also I assume you want to remove selected class from previous elements.
$(".btn").click(function () {
if($(this).hasClass("course-btn-tab-selected"))
$(".btn").removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
});
Edit: You can improve this by hold the last selected element and changing it class if it suits you.
previouslyClicked = $(".btn").eq(0); //Assuming first tab is selected by default
$(".btn").click(function () {
previouslyClicked.removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
previouslyClicked = $(this);
});
Wrong usage of $.each()
Use this way:
$(".btn").click(function () {
$(".btn").removeClass("course-btn-tab-selected");
$(this).addClass("course-btn-tab-selected");
});
Should do the trick:
$(".btn").click(function () {
$(".course-btn-tab-selected").removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).removeClass('course-btn-tab').addClass("course-btn-tab-selected");
});
There is another way:
$(".btn").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).addClass("course-btn-tab-selected");
});
First you need bind a click event to "btn" CSS class using a jQuery selector, this will allow you manipulate all of the buttons at once.
Next find the previously selected button, remove the selected class and add the regular class.
Finally remove the regular class from the clicked button and add the selected class.
$('.btn').bind('click', function () {
var previouslySelectedButton = $('.course-btn-tab-selected');
var selectedButton = $(this);
if (previouslySelectedButton)
previouslySelectedButton.removeClass('course-btn-tab-selected').addClass('course-btn-tab');
selectedButton.removeClass('course-btn-tab').addClass('course-btn-tab-selected');
});
Alternatively here is a working example using your HTML: jsFiddle
Sorry if this has been asked, I am not sure how to best word it so I couldn't find a result on Google.
I currently have a div #divForm with some text and a table that has a form inside. I currently have it so when you click on the div it toggles to show the table:
$("#divForm").live('click', function () {
$(this).attr('class', 'closeForm');
$(this).find("table.formTable").slideDown();
});
The code that hides the div is as follows:
$(".closeForm").live ('click', function () {
$(this).attr('id', 'divForm');
$(this).find("table.formTable").slideUp();
});
This works. However, because there are inputs in the table/form, which is inside the div, clicking on the inputs to enter information causes the table to hide.
What is the best way to have it so the table/forms hides when clicking anywhere in the div EXCEPT when clicking on an input?
I'm not sure I completely understand your layout, but if .closeForm is the click target you could check the actual event target using .is() and :input like this:
$(".closeForm").live('click', function (e) {
if($(e.target).is(":input")) return;
$(this).attr('id', 'divForm');
$(this).find("table.formTable").slideUp();
});