For some reason my loadFirstPage in the following code is unable to find the dynamically created list items built up in the buildGallery function. I have a button in the extended code that calls the loadFirstPage function on a click which works perfectly when I click it
var buildNavi = function(){
var naviTemplate ='<li class="prev"><a href="#" title="Previous">Previous</a>
</li><li><span class="current"></span><span class="total">
I'm trying to manipulate items in a table using jQuery, using the parent() and children() methods of the "this" object. I think I'm not understanding how to use the parent and children methods correctly.
What I want the code to do is to show the list and button within the <td></td> when clicked on, and then hide it when the newly shown button appears.
I am having checkbox list and on top "add new" link. As I click on add new link dialog box appear exactly on checkbox list with form items and with submit button and as I click on submit button. Checkbox list appear with new added items.
I have selected a list that contains sub-lists. Now, I'd like to search for the list items that contain sub-lists (but not including the sub-list-items). I think the example below will explain what I'm trying to do.
HTML: <ul class="start-here"> <li>Do Not Need</li> <li>NEED THIS ITEM[code].....
I have created a simple portfolio item for a site I am working on, with left and right buttons to move between the visible thumbnails in the portfolio.
The problem is this: when I click on one of the left or right buttons used to scroll the active list items, it resizes the space between all of the thumbnails by 1 pixel per click, up to 10 clicks.
I have a multiple select list <select id=mylist name=mylist[]> <option id=1>first</option> <option id=2>second</option> <option id=3>third</option> <option id=4>fourth</option> <option id=5>fifth</option> </select>
Then I have a string of id's that I want to set to selected like so. var selectedIds = '1,3,5'; Is it possible to use jquery (preferably in a one liner) to set first, third and fifth to selected.?
How would I target (with jQuery or normal javascript) the 5th and 6th li in an unsorted list for styling? I need to change the css for only 2 items in a list.
I want to modify the appearance of an unordered list by assigning a value to each list item and then setting the custom properties for each list item. At first I was thinking of assigning a number to each list item and then controlling it's properties via that number.But now I'm wondering if jQuery can do a search for the list items content.
I am having difficulties to deal with a simple remove function.
I have an item list with "listitem" css class. I placed a button on each item to delete it. I am now trying to use the remove function to erase it from the page. I thought $(this).remove(); will work but it doesn't. I also tried something like this: $(this).parent('.listitem').remove(); but it didn't work.
When I write $('.listitem').remove(); it erased all the items of the list. I m just trying to be able to erase just the one clicked.
I followed a tutorial in .net magazine (a UK web design mag) on how to fade images using jQuery. I have followed it and I can now fade images for my menu, problem is, I am not sure how to append the code to all my to fade images for non list items. For example, I have a call to action button (just a telephone number with a graphic, I have used css sprites to add a hover to the graphic, but would now like to fade it using jquery. Still not managed to get this working, here is what I for my menu, which fades the images perfectly.
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've got an infinite jQuery carousel, which is working, however I need to make a couple of tweaks and I don't know where to start. Below is the code for a visually simplified, but technically identical version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]"> <html xmlns="[URL]"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Page Title</title> <script src="[URL]" type="text/javascript"></script> <script type="text/javascript"> $.fn.infiniteCarousel = function () { function repeat(str, num) { return new Array( num + 1 ).join( str ); } .....
Basically, I'm trying to achieve two things: 1. The script creates empty carousel items; these are visible in yellow when you scroll through the items by clicking on the blue squares. How can I remove these so that item '6' goes straight back to item '1', without the two empty list items in between? 2. At the moment two clicks allow you to see all 6 'real' squares, plus the two empty yellow ones. How can I make it so that it scrolls one list item at a time, rather than 4 at present?
I have a page where there is a list of items and a drop container. When I drag item, the other items below the one that is being dragged moves up. Can other items stay in their respective positions when one of the item is dragged away?I have list of items like this:
I'm trying to create a list, to which you can: 1. Add and remove items. 2. According to what's in this list, there should be dynamic content loaded on to the page.
I've accomplished 1 with the code below. I'm not sure about how to accomplish 2. <script language="javascript"> var listItems = new Array(); var currentList = new String(); function listManager(task, id, name) { //$("#debug").append(" ##### List manager. ("+listItems.length+" items) ##### "); if(task == "add") { refreshList(); // refresh the list .....
I'm trying to dynamically create and remove items from a list, it works just fine. Sort of, I can remove items, and create items, but once an item has been created, I cannot remove it again, but I can remove the items present when the page loads.
Here is my code <div class="list"> <div class="item"> <input type="text" value="" /> <a href="" class="removeitem">Remove this item</a> </div><div class="item"> <input type="text" value="" /> <a href="" class="removeitem">Remove this item</a> </div><a href="" class="additem">Add item to list</a> </div><script type="text/javascript"> // Add item to list $('.additem').click(function(){ var template = $($(this).prev().get(0)).clone(); template.insertBefore($(this)); return false; }); // Remove item from list $('.removeitem').click(function(){ $(this).prev().parent().remove(); return false; }); </script> I can remove the 2 original items, but when I create new ones, they cannot be removed.
It seems that using the slideUp/slideDown methods on <li> elements causes some odd results.
The following code hides then unhides the items with a class of "hide-show" once the document is ready. These list items lose their bullet point type markers before the text making the whole list look a bit weird.
I'm currently trying to parse through all the children list items within a navigation menu so that I can trim off a trailing "|" character. I'm trying the following but its not working correctly,
$('#nav > li > ul > li').each(function() { var str = $(this).text(); $(this).text(str.replace("|", "")); });
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 have a select list that is populated from a mysql DB with 3 names in it. I've created buttons to allow my users to move the names up or down inside the select list.
I'd like to put a save button at the bottom of the form that when clicked, runs a jquery function to read each value of the list and put them into a hidden tag or something that gets submitted to my next form.
I've been trying different combo's of items I've found on the internet, but nothing seems to work for my application.
I have considered updating the table everytime an item is moved, but I just dont have the jquery/javascript experience to pull it off.
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 have a nested lists which contain city names, and then level 2 is businesses in that city. those are hidden by default so that when you click on the city name the businesses will slideToggle down. What would be the correct script to enable this.I have the effect working, but when I click on any of my top level anchors all of the nested items toggle. I want each city's businesses to act independently from each other.
