JQuery :: Can't Have Click On Multiple Items With Same Class?
Oct 14, 2010
I'm trying to have multiple divs with the same class acting a s a button. I need to handle the click for each one. I will be obtaining the name attribute and passing that in an ajax call.However, this only works for one of the divs on the page, am I doing something wrong?
$(document).ready(function(){
$('#mark_sold').click(function() {
var item = $(this).attr("name");
alert(item+'clicked');
});
});
I'm also going to need to know how to refresh an image, too. I will be updating an image in the ajax call.
This is what I'm trying to do: I want a simple image container to swap the image inside it by clicking the nav buttons on the right like 1, 2, 3.Here's my code:
HTML Code HTML4Strict: <div id="item1"> <div class="img-container shadow" style="background-image:url(images/gallery/tcg1.jpg)">[code].....
My jQuery code is not right. I want it to turn off the "hover" class and the "show" class of the others when you click one. I think I need some kind of if..else? how to write it? I have a bg image set on the container div so there's an initial image to view.I also need multiple of these on the same page!
I have a huge blob of code but the main part I am focusing on is this
$('.billboard_click').click(function () { //this remove class $(".billboard_click").removeClass("billboard_click"); });
1. Execute a click event when the div with the class 'billboard_click' is clicked
2. Once clicked, remove the class from that very div to avoid another click from happening
3. Execute a series of events such as animations, etc
4. add the class back to the clicker div
The code does not seem to work as expected but I am wondering if I am having issues elsewhere at this point and wonder if this actually is known to work
Trying to get data from xml file. Got it. Trying add data in class. $(this).find('Category').each(function(){ var menuItem = ($(this).find('Label:first').text()) $(".DfMenu").text(menuItem) alert(menuItem) There are 4 menu item. Alert shows up right but it add same data in all menus one by one. How can I add four different menu item in four divs that is using the same class.
I have several conditional select boxes that populate from a database, using .ajax(). When the first select has an onchange, the second select populates normally. The same goes for the second and third selects. When I change the value of the second select box, the third box drops all dynamically created options and repopulates. When I change the value of the first select box, I can only empty the second box and repopulate. The third and future boxes keep their values.
The delete and repopulate piece of my function uses this bit of code: var dynamic_options = $("#" + next_dropdown_ID).children(".dynamic_option"); if ( dynamic_options ){ $("#"+ next_dropdown_ID + " .dynamic_option").remove()};
where next_dropdown_ID is the ID of the child select box. I've played with .find() and .filter() but the results are always either (a) ALL options with this class are removed, including the select I'm currently in, or (b)NO options with this class are removed.
Is it possible to delete ALL options on the page that have the ".dynamic_option" class, except for the children of the select box I'm currently in? I was hoping to be somewhat dynamic about it and not have to write an IF statement for every potential select box, so the code will be reusable. I can post the full function and HTML if more context is needed.
I have a list of links in a sidebar, each with an associated class name. When one of these links are clicked, I want to fade out all of the main content list items that do NOT have this class (ie - if I click on boots, I want to fade out the list items heels and sandals)
I'm trying to toggle the on and off class on list items but having issues it working.
I only want the 'on' class on the element that is clicked. So if another element in the list is clicked it removes the 'on' class from the one that had it to the one that has been clicked.
I'm trying to create a list that contains items which are filters for a search. The list shows 10 items (max) on the page load. if there are more than 10 it changes the class of the elements > 10 so they are hidden, and a 'show more' link is appended. Now if the user has 'unhidden' the previously hidden items and then chooses one, I want the class for all those previously hidden items to change until the user has deselected that item.
[Code]...
Is there a better, smaller way to write this? It works for what i need currently, but there are future features im planning that will not be practical checkingindividualindexes the way i've done it.
I have a table containing multiple rows (tr), each row has two columns (td). In the first columnIhave acheckbox, when this checkbox is clicked i need it to change the class of a div in the second column of the row.
When my page loads I want some text to fade in on my header, display for a few seconds, thenfade out, followed by a second piece of text which does the same, then a third etc. Ideally, I would like all the text elements to loop infinitely. I have managed to get the effect I want with one piece of text usingthese simple lines of code but am stumped when it comes to the subsequent ones. From what my small brain has computed I think the option may be to put all my text items in a list, set the initial list div to display: nonethen apply the fadein, display, fadeout to each in turn. But I don't know what I would put in the script to acheive this (create some sort of array with the li items?)
My searches keep leading me to image carousels etc which I couldn't work out how to configure for text. Also I'm not sure if the (hidden) list would just be dropped onto the page for non-javascipt enabled browsers messing up my page layout, so maybe I need to pull the text from a file / folder? <script type="text/javascript"> $(function() { $('#hdrtext').fadeIn(5000); }); </script> <div id="hdrtext"> first line of text </div>
I need to append multiple spans to the line items in an unordered list. Essentially, each line item contains a <span> and I need to grab the content of that span and append it to the bottom of the line item it's contained in. Here's what I have so far: My jquery code:
$("ul").ready(function(){ var Name = $(".name") .text(); var Content = $(".content") .text();
[code].....
As you can see, instead of taking the all the "Name" var's and putting them together, instead of just using the "Name" var of that line item.
[code]I want to be able to highlight all of the divs which contain both the classes 'two' and 'three'. So the first and the third divs above are highlighted but the second isn't because it doesn't contiain both classes.I can see how to select multiple classes like this:$('.two, .three').css('background',''yellow');This selects items with either'two' or 'three' classes. I want it only to select the items with both classes.
I'm looking for a lightweight way to be able to switch between 2 divs on a page.
I have found various ways to do this online with jQuery, but none of which are able to handle multiple switches and make it extendable across the pages of my website efficiently.
For example I could have 12 - 15 individual elements on a page (All with same style) each with an option to switch content e.g. "Click here to do something" then once clicked "it would reveal something" (Within that element/<li> tag) - so it's element specific.
For example:
Code: <ul> <li class="box> Title
[Code]....
But of course as it's element specific you have to associate each id together but you can't have two id="2" - as that won't validate.....
Looking around, a perfect example can be seen at: [URL]
And because it's CMS driven and will have multiple categories/pages, you can't list all the id's with the javascript, so it has to be portable/OOP (Is that the word?) so just a main identifier in the JS...??
Where you click to reveal code and it switches div, but only for that element, it doesn't effect anything else.
I plan to use this functionality in a few places on the pages. To do so I want to check if something else has been opened (and not closed) and if any of the other items called are still opened, close them. Some sort if if statement that checks for 2-3 variables :items 1,2,3 are :open, close them all before opening this item.
If you look at this page [url] you will see that if you hover over the photo the text block goes up, and if you hover over the text it slides down and covers the photo. It's all pretty basic and it works fine. But ones I try to get them animated during the sliding up and down the trouble starts.
It works fine if you take the time and wait for them to go back to their starting position, but if you move over the items quickly it becomes a mess. You can see what I mean on this page [url]
I hoped that by adding a stop() before the animation if would fix the problem, but it doesn't really improve at all. It still quickly becomes a mess if you hover from one item to the next one.
How I could get the animations to work properly without it becoming a mess? I now there are double id's in the html, but unfortunately I can't really change the html.
I have a simple filmstrip that uses getJSON to return data. The data is an array containing two arrays. The first, is the base path to photos. The second is a list of the photo file names. I am trying to loop through the array of photos and set them in divs. Then I need to attach an event to popup a larger view of the image placed in a dynamically generated div containing the image and initially hidden.
So what I am trying to accomplish is: 1. get JSON data from server. 2. get base image path from json data array 3. get list of images from json data array 4. Loop through list of images, prepend base path and assign to hard coded div. 5. create a dynamically generated div with larger version of same image. 6. Attach hover action to cause a mouse-over action on the hard coded div to popup the dynamically generated div containing the larger version of the image.
My issue is that once my code runs, no matter what image in the filmstrip I mouse over I always get a popup with the last image in it. Here is my code: <script language="javascript"> $(document).ready( function(){ $.getJSON("<?php echo site_url('filmstrip/index');?>", function(data){ var dir = data['dir']; var imgs = data['imgs']; var i =0; .....
I have a UL group with multiple LI items, and each LI has a DL with a DT and DD inside. What I am trying to do is show EACH LI's DT, but not the DD. The DD will only show once the DT has been clicked (except for the first, which should be visible on page load.here is the structure code ... I am struggling to make this work using jQuery show/hide functionailty.
<!-- LIST --> <ul class="examples"> <!-- ITEM #1 -->
how to implement this bit of UI wizardry. I have a list of categories and the user is asked to pick all applicable items and then rate them individually. Right now I have a long list with checkboxes. Whenever a user checks one of the boxes a rating control pops up next to it and they just select the number of stars they want to rate the item.
Although this works for my purposes, it's a bit clumsy and takes up a lot of real estate (I have 30 items in the list so far and this may grow). What would be the best way to get this done?
I am missing something here but this is what I want to do. I want to select a checkbox as such
$('chkRequired'); Easy enough. But I want to then use $(this).attr('checked','true'); and then $(this).show(); and then $(this).next().show(); How can I formulate that into something like:
1)Need to display menu on right click of a data grid using Jquery,2)I need to disable or hide some of the menu items in certain rows,3)postback to the server with the selected row details
I'm quite new to jQuery and have this working, though I'm fairly sure if this won't be an efficient way to do this. I have a form with each day of the week, and each day has a choice in the number of slots which then shows the correct number of slots for entry for that day.
The form: <table border="0" cellspacing="0" cellpadding="0" class="DataTable"><tbody> <tr> <th> Day </th> <th> Slots .....
This is simplified just a little as there are more than the 1 input in an 'Entry Section' (eg .Entry3). The jQuery I have working here is: <script> $(document).ready(function(){ $("#frmSlots1").change(onSelectChange); }); function onSelectChange(){ .....
That's working fine, except I do want to have 7 days so that would be quite a lot of replicated jQuery code. I am thinking there will be a way to identify the select item with the others so jQuery will know which to adjust without having to spell every single item out. Is there an easy way to achieve this in the above?
I have some modules on my web site that have HTML similiar to this, where the tab is a dynamic generated number:
[Code]...
Basically, anytime someone presses the close class from one of tabs, using AJAX it eliminates it from their page. However, since their are multiple close classes on the page, its calling the AJAX a number of times if they have multiple tabs.
