Search Results

Search found 2172 results on 87 pages for 'ul'.

Page 55/87 | < Previous Page | 51 52 53 54 55 56 57 58 59 60 61 62  | Next Page >

• Selecting a div with same ID as the rel attribute of clicked link

  - by Chris

  Hi there, This is a two-part question. I'm using jQuery for a project and wanting to click a link and toggle the class name "highlight" to that link and also to the div with the same id as the rel attribute of the link. I then want to be able to link to the next div without the classname of "highlight". Here's the HTML for it: <ul> <li><a href="#" rel="panel1">Item 1</a></li> <li><a href="#" rel="panel2">Item 2</a></li> <li><a href="#" rel="panel3">Item 3</a></li> </ul> <a href="">go to next div without class of highlight</a> <div id="panel1">some text</div> <div id="panel2">some text</div> <div id="panel3">some text</div> Can anyone help with jQuery side of things? Many thanks in advance!

  Read the article

• Find tag that contains certain text and add a class

  - by David Gard

  I have the following HTML, and I need to add a class to both <li> and <a> where the text 'Charts' exists (so not the second line, but rather the 4th and 5th). I cannot change the output of the HTML. <div class="wp-submenu-wrap"> <div class="wp-submenu-head">Charts</div> <ul> <li class="wp-first-item"> <a class="wp-first-item" tabindex="1" href="admin.php?page=charts">Charts</a> </li> <li> <a tabindex="1" href="admin.php?page=add-chart">Add Chart</a> </li> </ul> </div> I've tried doing this by locating the <a> tag that contains the text, but it is not working. Can somebody please point me in the correct direction? Thanks. Code that I've tried - $(document).ready(function(){ if(pagenow === 'admin_page_edit-chart') { var page = $('.wp-submenu-wrap a:contains["Charts"]'); page.addClass('current'); page.parent('li').addClass('current'); } });

  Read the article

• Prototype function to set onclick event observer in checkboxes

  - by xain

  Hi, I want to set an observer for each of the following checkboxes: <div id="listr"> <ul id="lr" style="list-style-type: none"> <p class="tir">Text 1</p> <li class="ro"><input type="checkbox" name="r1" id="r1"/>A1</li> <li class="ro"><input type="checkbox" name="r2" />A2</li> <p class="tir">Text 2</p> <li class="rubro"><input type="checkbox" name="r3" />B1</li> <p class="tir">Text 3</p> <li class="ro"><input type="checkbox" name="r4" />B2</li> </ul> </div> It works if I write one observer per checkbox, but I want to do it in a short fashion, so I need something like $$('listr.lr.li.input').invoke('observe',click,function(field) { alert(this.name + ' clicked ' + this.checked); // other stuff ... }); Which is not working Thanks in advance

  Read the article

• What is the best unobtrusive and lightweight jquery solution to make tab?

  - by metal-gear-solid

  Which is the best unobtrusive and lightweight jquery solution to make tab? Although Jquery similar to jquery ui. jquery ui tab is good but it's overkill fro for just tab. we will have to add jquery ui core.js, jquery ui tab.js then a little code snippet. I need lightweight solution. using this type HTML. and jquery code should be in no.conflict mode. <ul> <li><a href="#example-1">example 1</a></li> <li><a href="#example-2">example 2</a></li> <li><a href="#example-3">example 3</a></li> </ul> <div id="tabs-1"> <p> tab 1 content</p> </div> <div id="tabs-2"> <p> tab 2 content</p> </div> <div id="tabs-3"> <p> tab 3 content</p> </div> tabs content should be accessible if js is disabled.

  Read the article

• How to change the link color of the current page with CSS

  - by Josh Curren

  How do I display the link for the current page different from the others? I would like to swap the colors of the text and background. This is what I currently have: The HTML: <div id="header"> <ul id="navigation"> <li class="bio"><a href="http://www.jacurren.com/">Home</a></li> <li class="theatre"><a href="http://www.jacurren.com/theatre.php">Theatre</a></li> <li class="prog"><a href="http://www.jacurren.com/programming.php">Programming</a></li> <li class="resume"><a href="http://www.jacurren.com/resume.php">R&eacute;sum&eacute;</a></li> <li class="portf"><a href="http://www.jacurren.com/portfolio.php">Portfolio</a></li> <li class="contact"><a href="http://www.jacurren.com/contact.php">Contact</a></li> </ul> </div> The CSS: #navigation{ margin:0; padding:0; background:#000000; height:34px; list-style:none; position: relative; top: 80px; } #navigation li{ float:left; clear:none; list-style:none; } #navigation li a{ color:#A60500; display:block; font-size:12px; text-decoration:none; font-weight:bold; padding:10px 18px; } #navigation li a:hover{ color:#640200; background-color:#000000; }

  Read the article

• Retrieving models from form with ModelMultipleChoiceField

  - by colinjameswebb

  I am having difficulties with forms, specifically ModelMultipleChoiceField. I've pieced together this code from various examples, but it sadly doesn't work. I would like to be able to: Search for some Works on work_search.html Display the results of the search, with checkboxes next to each result Select the Works I want, via the checkboxes After pressing Add, display which works were selected. I believe everything is okay except the last part. The page simply displays "works" :( Here is the code - sorry about the length. Models.py class Work(models.Model): title = models.CharField(max_length=200) artist = models.CharField(max_length=200) writers = models.CharField(max_length=200) def __unicode__(self): return self.title + ' - ' + self.artist forms.py class WorkSelectForm(forms.Form): def __init__(self, queryset, *args, **kwargs): super(WorkSelectForm, self).__init__(*args, **kwargs) self.fields['works'] = forms.ModelMultipleChoiceField(queryset=queryset, widget=forms.CheckboxSelectMultiple()) views.py def work_search(request): query = request.GET.get('q', '') if query: qset = ( Q(title__icontains=query) | Q(artist__icontains=query) | Q(writers__icontains=query) ) results = Work.objects.filter(qset).distinct() form = WorkSelectForm(results) return render_to_response("work_search.html", {"form": form, "query": query }) else: results = [] return render_to_response("work_search.html", {"query": query }) def add_works(request): #if request.method == POST: form = WorkSelectForm(request.POST) #if form.isvalid(): items = form.fields['works'].queryset return render_to_response("add_works.html", {"items":items}) work_search.html {% extends "base.html" %} {% block content %} <h1>Search</h1> <form action="." method="GET"> <label for="q">Search: </label> <input type="text" name="q" value="{{ query|escape }}"> <input type="submit" value="Search"> </form> {% if query %} <h2>Results for "{{ query|escape }}":</h2> <form action="add_works" method="post"> <ul> {% if form %} {{ form.as_ul }} {% endif %} </ul> <input type="submit" value="Add"> </form> {% endif %} {% endblock %} add_works.html {% extends "base.html" %} {% block content %} {% if items %} {% for item in items %} {{ item }} {% endfor %} {% else %} <p>Nothing selected</p> {% endif %} {% endblock %}

  Read the article

• Jquery Returning values to original

  - by Cam

  So my script works perfectly, but here is the issue, I have buttons (Sprite action here) that are 40px height, but the top 20 only shows perfectly. When you click the button ie img the bottom 20px show perfecto! but... Issue, i included in my script a way to return all others to there default (only one should be selected) now, how can I fix this issue that I seem unable to correct as I can select multiple of them ** USERS can switch ** The last part of the script that is the issue. Thanks $(document).ready(function() { $('.form_sub').hide(); $('.theader').addClass('active'); $('.theader_t').click(function() { $('.form_header').show(); $('.form_sub').hide(); $('.theader').addClass('active'); $('.sub_theader').removeClass('active'); }); $('.sub_theader_t').click(function() { $('.form_header').hide(); $('.form_sub').show(); $('.theader').removeClass('active'); $('.sub_theader').addClass('active'); }); $('.top_head_img').click(function() { $(this).css({ position: 'relative', bottom: '20px' }).siblings().css( 'bottom', '0' ); }); }); <ul class="top_head"> <li> <a href="javascript:void(0)" onClick="selectPic5('top');"><img src="custom/images/top2.jpg" alt="Left" border="0" class="top_head_img"/></a> </li> <li> <a href="javascript:void(0)" onClick="selectPic5('center');"><img src="custom/images/mid2.jpg" alt="Center" border="0" class="top_head_img"/></a> </li> <li> <a href="javascript:void(0)" onClick="selectPic5('bottom');"><img src="custom/images/bot2.jpg" alt="Right" border="0" class="top_head_img"/></a> </li> </ul>

  Read the article

• Why is Chrome miscalculating jQuery submenu dimensions?

  - by chunkymonkey

  I'm trying to implement this dropdown menu with flyouts: http://jsfiddle.net/chunkymonkey/fr6x4/ In Chrome certain categories can be expanded to show their subcategories while others show nothing when opened up. For example: Alternative Rock can be expanded to show its multiple subcategories . . . BUT . . . World Music, which has as many subcategories, shows no subcategories when expanded. (SCREENSHOT: http://i.imgur.com/0WorR.jpg) I thought I had tracked this problem down to a problem with they way the dimensions of the dropdown elements are calculated in the original code: First change: - var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180; + var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * container.width(); Second change: Remove: var checkMenuHeight = function(el) { if (el.height() > options.maxHeight) { el.addClass('fg-menu-scroll') }; el.css({ height: options.maxHeight }); }; Add: var checkMenuHeight = function(el) { var max_height = options.maxHeight - breadcrumb.getTotalHeight(); if (el.height() > max_height) { el.addClass('fg-menu-scroll'); el.height(max_height); topList.height(max_height); } else { if (topList.height() < el.height()) { topList.height(el.height()); } } }; But it's still not working only on Chrome (version 8, Windows & Mac) (not sure why Chrome is different).

  Read the article

• Nokogiri changing custom elements

  - by dagda1

  Hi, I have sample html that I have marked up with some special tags that will be used by a different program, an example of the html is below. You should note the <START:organization>..<END> elements. <html> <head/> <body> <ul> <li> <START:organization> Advanced Integrated Pest Management <END> </li> <li> <START:organization> American Bakers Association <END> </li> </ul> </body> </html> I wanted to use nokogiri to preprocess the html to easily remove irrelevant tags like <script>. I created the following extension to the nokogiri document class: module Nokogiri module HTML class Document def prepare_html xpath("//script").remove to_html.remove_new_lines end end end end The problem is that nokogiri is changing the <START:organization> element to <organization>. Is there anyway that I can preserve the htnl to maintain my custom markup tags? Thanks Paul

  Read the article

• css caption issue

  - by Moode Osman

  i have problem with caption to make caption appear under each photo when hover over it but thr problem here they appear all on one side one place the left bottom side here the code for HTML <div id="content2"> <ul style="width: 5020px; height: 600px;"> <li class="image" style="width: 392px;"><img src="images/pr1x.jpg" ><p class="caption">1st caption</p></li> <li class="image" style="width: 392px;"><img src="images/pr2x.jpg" ><p class="caption">2st caption</p></li> </ul></div> here the code for CSS li.image p.caption { position:absolute; display: none; font-size: 28px; color: red; } li.image:hover p.caption { display: list-item; }? #content2{ width: 150%; height: 600px; float:left; overflow:hidden; } #content2 p{ width: 150%; } .scrollbar-hor{ background-color: #e5e2de; height: 24px; width: 150%; float:left; } .handle-hor{ height: 25px; width: 400px; background: url(http://brafitting.info/images/bar.jpg) no-repeat; } plz help ty

  Read the article

• Displaying data from a linked table and displaying it as a list with HTML/PHP/MySQL

  - by user1672694

  I have three tables. students studentID | FirstName | LastName | Email | Form course CCode | Title courseenrolement courseenrolementid | studentID | ccode | complete | scode With the website, I have a page where I can view all the current enrolements and I wish to be able to view the list displaying the first name, surname and course title. I know I could do it with the following SQL (for the names): SELECT FirstName, LastName FROM student, courseenrolement WHERE courseenrolement.studentID = student.studentID But I am unsure how to get this to work using HTML/PHP. At present I only know how to display the studentID and CCode from the courseenrolement table using the following code: <ul> <?php foreach ($courseenrolements as $ce): ?> <li> <form action="" method="post"> <div> <?php htmlout($ce['studentID']); ?> <?php htmlout($ce['CCode']); ?> <input type="hidden" name="courseenrolementid" value="<?php echo $ce['courseenrolementid']; ?>"> <input type="submit" name="action" value="Edit"> <input type="submit" name="action" value="Delete"> </div> </form> </li> <?php endforeach; ?> </ul> which displays this: But I would like the names and course title. I managed to get it to show the names etc in the dropdown on the 'Add new' form, so I would assume it will be similar, but just unsure on how exactly. Thanks in advance

  Read the article

• jquery show / hide div on click even in a slideshow?

  - by KnockKnockWhosThere

  Is it possible to combine a slideshow and show / hide div functionality? My html structure is below, and basically, I'm trying to get the tabs a links to open up the div with the corresponding class if a user clicks on it. If a user doesn't click on it, it should still just cycle through each image. So, if the images are rotating, and I click on <a class="t2"> then would open. The thing is, it's unknown how many divs / tabs there will be, but they'll always be named t{n}. <div id="tab-content"> <div class="t1">content</div> <div class="t2">lorem ipsum</div> <div class="t3">knock knock</div> </div> <div id="nav"> <div id="tabs"> <ul> <li class="t1"><a class="t1" href="#">tab 1</a></li> <li class="t2"><a class="t2" href="#">tab 2</a></li> <li class="t3"><a class="t3" href="#">tab 3</a></li> </ul> </div> </div>

  Read the article

• How to get multiple html() strings in jQuery

  - by Bryan

  I'm pretty new to jQuery... so far I'm impressed. But I encountered a situation today that is giving me trouble. I want to use .html() to get some raw text and use that in a selector, but that function only returns the first element. In the following structure, how can I get ALL of the "toggle_containerLG" divs to show when I click on the trigger "Some Header"? <h6 class="trigger active">Some Header</h6> <ul> <li><a href="#" class="trigger">Title One</a></li> <li><a href="#" class="trigger">Title Two</a></li> <li><a href="#" class="trigger">Title Three</a></li> </ul> <div class="toggle_containerLG" id='Title_One'></div> <!-- show these! --> <div class="toggle_containerLG" id='Title_Two'></div> <div class="toggle_containerLG" id='Title_Three'></div> <div class="toggle_containerLG" id='Title_Four'></div> <!-- not this one! --> I can't use $(".toggle_containerLG") because there are others I don't want to expand... I just want the ones listed under "Some Header". Seems like there should be an easy way to do it... and I'm just missing it because I don't know jQuery very well.

  Read the article

• ssh & script problem

  - by Nishanth

  I am having a strange problem while doing ssh. I am not sure where the term Unmatched ` is coming from. What I need to do is run script that logs information of what I am doing on the terminal to text file. After ssh - Sun Microsystems Inc. SunOS 5.8 Generic Patch October 2001 This is /etc/motd, last updated 3 Feb 2003. To learn about the UCS system and other aspects of computing at UL-Lafayette visit our home page http://helpdesk.louisiana.edu/ . For more information about system use, contact the Help Desk, Stephens Hall, Room 201, 482-5516 (x25516), during normal UL office hours; or send e-mail to [email protected]. ATTENTION: Unsecure Telnet and FTP will be turned off soon. Please make arrange to use ssh or sftp. Putty(telnet) and WinSCP(ftp) would be a good replacement. Unmatched ` d13.ucs.louisiana.edu% bash bash-2.04$ script -a myInformation.txt Script started, file is myInformation.txt Unmatched ` d13.ucs.louisiana.edu% When I tried to start the script with name myInformation.txt, you can see the message I am getting - Script started, file is myInformation.txt. But again I am getting that message Unmatched ` and is coming out of bash, as you can notice. What is the problem ? Any insights suggested would be very great. Note: file with name myInformation.txt is being created but nothing goes in to it. As I have even tried running certain commands like ls and then exited the script with ctrl+d. But when I open the file, nothing is there.

  Read the article

• CSS Flexible Height with scrollable content

  - by th3hamburgler

  I'm looking to create a flexible width/height page layout with no window scrollbars! Any content that will not fit on the page should be scrollable independently with the overflow property. I've seen plenty of ways to construct flexible width layouts using just HTML and CSS. The following site does a pretty good job on that front: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html I wish to implement scrollable content within the 3 centre columns. The content should be scrollable not the column div. e.g. <div class="column"> <h4>Title</h4> <ul> <li>These</li> <li>Items</li> <li>Should</li> <li>Be</li> <li>Scrollable</li> <li>If</li> <li>They</li> <li>Exceed</li> <li>The</li> <li>Window</li> <li>Height</li> </ul> So far if the list exceeds the window height it pushes the footer off page. I'm not to bothered about it working on old versions of IE, although that would score bonus points!

  Read the article

• Folder permission and submit button

  - by bob

  I want to create a simple installation script. Below are simple code. <ul> <?php function check_perms($path,$perm) { clearstatcache(); $configmod = substr(sprintf('%o', fileperms($path)), -4); $css = (($configmod != $perm) ? " class='error r2'" : " class='none'"); echo "<li".$css.">\n"; echo '<span style="float:left; padding-right:20px;">'.$path.'</span>'; echo '<span style="float:right; width:100px; text-align:right;"> <strong>'.$perm.'</strong></span>'; echo '<span style="float:right; padding-right:100px;"><strong>'.$configmod.'</strong></span>'; echo '<div class="clear"></div>'; echo "</li>"; } check_perms("config.php","0777"); check_perms("themes","0777"); check_perms("themes/images","0777"); check_perms("useruploads","0777"); ?> </ul> How to make if all file and folder is valid permission to 777 will appear Submit button. <input type='submit' name='submit' value='Submit' /> If there still have incorrect permission do not show the Submit button Let me know.

  Read the article

• How could I cache images that I'm pulling from a magento database through ajax?

  - by wes

  Here's script being called through ajax: <?php require_once '../app/Mage.php'; umask(0); /* not Mage::run(); */ Mage::app('default'); $cat_id = ($_POST['cat_id']) ? $_POST['cat_id'] : NULL; try { $category = new Mage_Catalog_Model_Category(); $category->load($cat_id); $collection = $category->getProductCollection(); $output = '<ul>'; foreach ($collection as $product) { $cProduct = Mage::getModel('catalog/product'); $cProduct->load($product->getId()); $output .= '<li><img id="'.$product->getId().'" src="' . (string)Mage::helper('catalog/image')->init($cProduct, 'small_image')->resize(75) . '" class="thumb" /></li>'; } $output .= '</ul>'; echo $output; } catch (Exception $e) { echo 'Caught exception: ', $e->getMessage(), "\n"; } I'm just passing in the Category ID, which I've tacked onto the navigation links, then doing some work to eventually just pass back all product images in that category. I'm using this on a drag and drop build-a-bracelet type of application, and the amount of images returned is sometimes in the 500s. So it get's pretty held up during transmission, sometimes 10 seconds or so. I know I'd do good by caching them some way, just not sure how to go about it. Any help is much appreciated. Thanks. -Wes

  Read the article

• Dynamic vertical menu for Wordpress

  - by buttonstack

  Does anyone know how to achieve a dynamic multi-level page menu for Wordpress? I have found a couple scripts but none of them put the subpages directly under the parent page or some will show every subpage to the entire menu Example: page1 (selected) –subpage1-1 –subpage1-2 page2 page3 This code comes close by inserting the subpages directly under, but it doesn't hide the subpages to the other pages. <?php if($post->post_parent) { $children = preg_replace('@\<li([^>^]*)>\<a([^>^]*)>(.*?)\<\/a>@i','<li$1><a$2><span>$3</span></a>',wp_list_pages('title_li=&amp;amp;amp;amp;amp;child_of='.$post->post_parent.'&amp;amp;amp;amp;amp;echo=0&amp;amp;amp;amp;amp;depth=1')); } else { $children = preg_replace('@\<li([^>^]*)>\<a([^>^]*)>(.*?)\<\/a>@i','<li$1><a$2><span>$3</span></a>',wp_list_pages('title_li=&amp;amp;amp;amp;amp;child_of='.$post->ID.'&amp;amp;amp;amp;amp;echo=0&amp;amp;amp;amp;amp;depth=1')); } if($children) { echo" <ul class=\"submenu\">\n". $children ."</ul>\n"; } ?>

  Read the article

• jQuery each loop - using variables

  - by Sam

  I have a list of products. Each product has a title and a review link. Currently the titles link directly to the individual product page, and the review links go elsewhere. I'd like to use a jquery each loop to cycle through each li, take the href from the title (the first link), and apply it to the review link (the second link), so they both point to the product page. Simplified code would be as follows: <ul> <li><a href="product1.html">Product 1</a><a href="review1.html">Review 1</a></li> <li><a href="product2.html">Product 2</a><a href="review2.html">Review 2</a></li> <li><a href="product3.html">Product 3</a><a href="review3.html">Review 3</a></li> </ul> I thought it would be something like the following: $("li").each(function(){ var link = $("a:eq(0)").attr('href'); $("a:eq(1)").attr("href", link); }); But it always uses the same variable "link". Can someone help me out?

  Read the article

• How to bring the parent element with floated child elements to the center of the document?

  - by Starx

  I have organized a menu. Its HTML is as follows: <ul class="topmenu"> <li><a href="sample.html">Text 1</a></li> <li><a href="sample.html">Text 2</a></li> <li><a href="sample.html">Text 3</a></li> <li><a href="sample.html">Text 4</a></li> <ul> This is a horizontal menu, so I have floated the list items to left to appear them in a horizontal line. I could have used display:inline to appear them in a single line, but since IE does not support it and I don't know any other way to do so, I used float:left;. It's css is: .topmenu { list-style:none; margin:0; padding:0; } .topmenu li { float:left; } This brings the menu in a perfect horizontal line, but the entire list is floated to the left. I want to bring the .topmenu to appear in the center of the document and keep the listitem inside it floated towards the left. I found that this is achievable by defining width property of the .topmenu, but I dont want to fix its width as the list-items are dynamically generated and thus could increase and decrease. Any one know of any solution?

  Read the article

• Creating a three level ASP.NET menu with SiteMap, how do i do it?

  - by user270399

  I want to create a three level menu, I have got a recursive function today that works with three levels. But the thing is how do i output the third lever? Using two repeaters i have managed to get a hold of the first two levels through the ChildNodes property. But that only gives me the second level. What if a want the third level? Example code below. How do i get the third level? :) <asp:Repeater ID="FirstLevel" DataSourceID="SiteMapDataSource" runat="server" EnableViewState="false"> <ItemTemplate> <li class="top"> <a href='/About/<%#Eval("Title")%>.aspx' class="top_link"><span class="down"><%#Eval("Title")%></span><!--[if gte IE 7]><!--></a><!--<![endif]--> <asp:Repeater runat="server" ID="SecondLevel" DataSource='<%#((SiteMapNode)Container.DataItem).ChildNodes%>'> <HeaderTemplate><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"></HeaderTemplate> <ItemTemplate> <li> <a href='<%#((string)Eval("Url")).Replace("~", "")%>' style="text-align: left;"><%#Eval("Title")%></a> Third repeater here? </li> </ItemTemplate> <FooterTemplate></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></FooterTemplate> </asp:Repeater> </li> </ItemTemplate> </asp:Repeater>

  Read the article

• Finding the index of a list item in jQuery

  - by Tim Piele

  I have an unordered list of eight items. On page load the first five <li> have default thumbnail images in them and the 6th one has a 1px by 1px placeholder image with the ID of $('#last'). When a user inserts a new image it replaces the 'src' of $('#last') with their new image. It's not the most efficient way but it works. <ul> <li><img src="img1.png" /></li> <li><img src="img2.png" /></li> <li><img src="img3.png" /></li> <li><img src="img4.png" /></li> <li><img src="img5.png" /></li> <li><img src="1px.png" id="last"/></li> <li></li> <li></li> </ul> When the user adds a new image the ID of $('#last') is removed and I use each() to find the next empty <li> and insert the 1px by 1px image in it, with an ID of $('#last') so it is ready for the next image upload. At this point I need to get the index() of the <li> that now has the 1px by 1px image in it, whose ID is $('#last'), so that I can store the index in the session, so when a user comes back to the page the $('#last') ID is still set and ready to accept another image. How do I get the index of the <li> with that image in it, since it was set after page load? Is there a way to use delegate() or on() to get it? i.e. how do I get the index of an element that was set after page load?

  Read the article

• preload image with jquery

  - by robertdd

  ok, I spent 2 days trying to preloaded images but no succes! i have this function: jQuery.getlastimage = function(id) { $.getjs(); $.post('operations.php', {'operation':'getli', 'id':id,}, function(lastimg){ $("#upimages" + id).html('<a href="uploads/'+ lastimg +'?'+ (new Date()).getTime() +'"><img class="thumbs" id="' + id + '" alt="' + lastimg + '" src="uploads/' + lastimg +'?'+ (new Date()).getTime() + '" /></a>'); }); }; while the image loading i want to appear a gif or a text "Loading...". the function will get something like this: <div class="upimage"> <ul class="thumbs" id="upimagesQueue"> **<li id="#upimagesRIFDIB"> <a href="uploads/0001.jpg?1271800088379"> <img src="uploads/0001.jpg?1271800088379" alt="0001.jpg" id="RIFDIB" class="thumbs"> </a> </li>** <li> .... </li> </ul> </div> i tryed like this: ... $.post('operations.php', {'operation':'getli', 'id':id,}, function(lastimg){ $("#upimages" + id) .html('<a href="uploads/'+ lastimg +'?'+ (new Date()).getTime() +'"><img class="thumbs" id="' + id + '" alt="' + lastimg + '" src="uploads/' + lastimg +'?'+ (new Date()).getTime() + '" /></a>') .hide() .load(function() { $(this).show(); }); ... but all the <li> will hide and after is loading the image appear, i want the <li> to apear with a gif or a text in it and after the image is loaded the link and the image to apear! How to do this? Anyone have an idea? Thanks!

  Read the article

• Javascript: Change li class if checkbox is selected (on load)

  - by BoDiE2003

  I have this code on javascript side: function changeSelectionStyle(id) { if(document.getElementById(id).className != 'yes'){ document.getElementById(id).className = 'yes'; } else{document.getElementById(id).className = '';} } And this on html: <ul> <li id="selectedAuthorities-4_1li" class=""> <input type="checkbox" id="selectedAuthorities-4_1" name="selectedAuthorities" value="ROLE_ADD_COMMENT_TO_CV" checked="checked" onload="changeSelectionStyle(this.id + 'li');" onclick="changeSelectionStyle(this.id + 'li'); checkFatherSelection(this.id);"> <a href="#" onclick="document.getElementById('selectedAuthorities-4_1').click(); return false;"> Agregar comentario <samp><b></b>Permite agregar comentario en el detalle.</samp> </a> </li> </ul> Well what I cant get work is when the checkbox is selected, on load, the JS should check it, and assign class="yes" to the li, here: <li id="selectedAuthorities-4_1li" class=""> Any suggestions? Thank you

  Read the article

• jquery animated buttons that just wont behave

  - by TJ Sherrill

  Ok I have a inline list of buttons. <ul id="nav"> <li class="home"><a href="#">Menu Item</a></li> <li class="contact"><a href="#">Menu Item</a></li> <li class="about"><a href="#">Menu Item</a></li> </ul> .home{ position:absolute; bottom:0; background-image:url(../img/menu/single_line.png); background-repeat:no-repeat; height:34px; width:134px; } .home_hover{ position:absolute; bottom:0; background-image:url(../img/menu/single_line_over.png); background-repeat:no-repeat; height:70px; width:134px; } $(document).ready(function(){ $("#nav .home").mouseover(function(){ $(this).toggleClass("home_hover").slideToggle("slow"); return false; }).mouseout(function(){ $(this).toggleClass("home_hover").slideToggle("slow"); return false; }); }); Each menu item has a background image, and then when its hovered the background image is replaced by a taller image. Ultimately I am trying to build a simple menu where on mouseover the menu item appears to slide up. But in reality Jquery can animate the toggleClass with slideToggle. The problem is that this current code doesn't behave right. It jumps up and down, because the text is moving. I am pretty new to Jquery so any help is greatly appreciated. I also loaded this up at http://gasworks.ravennainteractive.com/result/ thanks

  Read the article

< Previous Page | 51 52 53 54 55 56 57 58 59 60 61 62  | Next Page >