Search Results

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

Page 20/87 | < Previous Page | 16 17 18 19 20 21 22 23 24 25 26 27  | Next Page >

• z-index not working in IE8 with the sortable jQuery plugin

  - by Ojtwist

  I'm working with the jQuery Sortable plugin to drag and drop images from one box to another box. This works fine in ff,chrome and safari but it fails in IE8. It seems that when you start dragging that the image is send to the back. I've tried to solve this by adding the z-index option to the sortable plugin, i've tried appending it to a node higher in the hierarchy (body). It appears that setting a z-index on every other item in the page would fix this, haven't tried it yet and i'm not planning on doing this because this would mess up alot. So the user can drag an image from 1 gallery to the next gallery screenshot of how it should work: http://img69.imageshack.us/i/draganddrop.jpg/ Some html: <!--SECOND ARROCRDION ITEM --> <a class="flickr_accordeon_header" id="flickr_second_header" href="javascript:;">__MSG__SEARCH_FOR_PHOTOS__</a> <div> <p class ="flickr_text" > __MSG__SEARCH_FOR_PHOTOS__</p> <form method="GET" action="javascript:;"> <p> <input type="text" value="__MSG__SEARCH__" id="flickr_key_input" class="flickr_changeColorNormal" /> <button class="s3d-button flickr_search" id="flickr_seach_button"> <span class="s3d-button-inner" >__MSG__SEARCH__</span> </button> <img src="/devwidgets/flickr/images/ajax-loader-gray.gif" alt="__MSG__LOADING_IMAGE__" id="flickr_loading_img" /> <a href="javascript:;" id="flickr_refresh_key_button"><img src="/dev/_images/recent_activity_icon.png" alt="refresh" title='refresh' /></a> </p> </form> <div id="flickr_input_error">__MSG__INPUT_ERROR__</div> <div id="flickr_input_same_error">__MSG__INPUT_SAME_ERROR__</div> **<div id="flickr_key_gallery" ><ul class="flickr_key_ul"><li></li></ul></div>** <div id="flickr_key_pagging" ></div> </div> </div> <!--SLIDING SIDEBAR --> <div id="flickr_sidebar" class="jcarousel-skin-tango"> <div id="flickr_side_paging"></div> **<ul> <li><img src="/devwidgets/flickr/images/drop-image.png" alt="__MSG__DROP_HERE__" class="flick_drop_here"></li> </ul>** </div> The images get rendered into the ul, so basically it's just an ul with li's with images javascript for sortable: horizontal: { helper: "clone", // Instead of dragging the real image a copy will be dragged connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected cursor: 'pointer', //change the cursor when dragging opacity: 0.50, //Change the opacity while dragging appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped containment: 'body', //Make sure the user can't drag the images outside the widget revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position zIndex: 9999 } I've tried it with setting the dragged image to absolute and the container on relative... doesn't work Anyone know how to solve this in IE8 ?

  Read the article

• My list item's child label elements disappear in IE on accordion menu opening

  - by Scott B

  I've got an app that's working pretty flawlessly in Chrome and FF, however, when I view it in IE, all is well until I click on a header element to activate it (jQuery accordion). What happens then is that I see a brief flash where the content is there, then suddenly the entire left column disappears. This column is generated by a floated label element with a class of ".left" as seen below... <ul class="menu collapsible"> <li class='expand sectionTitle'><a href='#'>General Settings</a> <ul class='acitem'> <li class="section"> <label class="left">This item if floated left with a defined width of 190px via css. This is the item that's disappearing after a brief display</label> <input class="input" value="input element here" /> <label class="description">This element has a margin-left:212px; set via css in order to be positioned to the right of the label element as if in an adjacent table cell. When I add a max-width property to this element, it disappears in IE too!</label> </li> </ul> </li> </ul> As you can see from the comments in the code above (for the two label elements) the description label disappears once I set a max-width on it (I don't have a max-width on the left label element, but it disappears nonetheless). The initial view of this UL menu is fine (note the expand class declaration which makes this part of the accordion open at startup. Its not until I click the "General Settings" to toggle it closed, then back open, that the left class elements disappear (and only in IE)

  Read the article

• trying to make an accordion menu from a list - jquery indexhibit

  - by orionrush

  Hello - Im teaching my self javascript & jquery so this might be a bit of a low brow question or entirely too much code for anyone to wade through, but Im hoping for some feedback. I have looked around and haven't found a thread that looks like it will deals neatly with my question. Im using the cms indexhibit (cant create a new tag!) and trying to create an accordion style menu from the menu list it generates. I basically have the behaviour Im after, modifying an existing bit of work but there are quite a few foibles, which are no doubt a conflict between the .click and .toggle and a confused use if statements. I basically want to start from scratch and redo this so I can a) learn from my mistakes b) understand what's happening. Im having trouble now because I dont know where to go from here, or how to trouble shoot it. Can anyone give me a quick analysis how the the script in the head of the document work together? Also any insight into the nature of the conflicts Im seeing and what approach might take to remedy them? If you were going to start afresh what would be your approach? Here is a test to see it in action (warts and all): http://stillstatic.nfshost.com/ This script goes into the document head: <script type='text/javascript'> //im not entirely clear as to what this achieves path = 'path/to/script/'; $(document).ready(function() { setTimeout('move_up()', 1); expandingMenu(0); expandingMenu(1); expandingMenu(2); expandingMenu(3); expandingMenu(4); //etc }); </script> the generated list: <ul> <li class='section-title active_menu'>blogs</li> <li><a class="active" href='#' onclick="do_click();">3</a></li> </ul> <ul> //this menu section dose not have a label: class .section-title <li><a href='#' onclick="do_click();">1</a></li> <li><a href='#' onclick="do_click();">2</a></li> </ul> <ul> //this menu section is not the 'active menu' this is achieved by the jquery script <li class='section-title'>writing</li> <li><a href='#' onclick="do_click();">4</a></li> <li><a href='#' onclick="do_click();">5</a></li> </ul> The meat of in an external script: function expandingMenu(num) { var speed = 500; var menu_title = $("#menu ul").eq(num).children(":first"); // ie. first child be the title with the class .section-title unless the user turned it off var menu_items = $("#menu ul").eq(num).children().filter(function (index) { return index 0; }); // ie. any li NOT in position 0, below li.section-title if (menu_items.is(".active") == true) { menu_title.addClass("active_menu"); //Add a class to the active list so we can style it. } if (menu_title.is(".section-title") == true){ // this if prevents interference with users who turn off the section titling if ((menu_items.is(".active") == false) && (menu_items.is(":visible")) ) { menu_items.hide(0);// first we hide the inactive exhibits } $('li').click(function (){ if ( (menu_title.is(":visible") == true) ){ menu_items.hide(speed); } if ( (menu_items.is(":hidden") == true ) && (('')) ){// ?! without this second condition things break down. . . menu_items.show(speed); } }) menu_title.css({cursor:"pointer"}).toggle( // add click functions + pointer to menu_title function () { menu_items.show(speed);//Open it up }, function () { // this function could even be empty but without the if things get weird if (menu_items.is(".xx")) menu_items.hide(speed); //Take the menu item off of active duty! } ) } }

  Read the article

• want to increase delay timmings for hover effect

  - by Swati Sharma

  i have three level of ul li. <ul> <li> <li> <ul> <li> <li> <ul> <li> I want to increase the hover timings i.e when i hover over the second level li the delay time for hover has to be increased until i reach its children i.e third level

  Read the article

• Weird margin in a list

  - by kevin

  I'm trying to style a menu, but I keep running into this weird margin that's appearing in both FF4 and IE. This is the only affecting css: #header ul { display: inline; } #header ul li { list-style-type: none; background: #000; display: inline; margin: 0; padding: 0; } #header ul li a { color: #fff; text-decoration: none; display: inline-block; width: 100px; text-align: center; } And this is the HTML: <div id="header"> <ul id="toplinks"> <li><a href="#">Hello</a></li> <li><a href="#">Herp</a></li> <li><a href="#">Derp</a></li> </ul> </div> As you can see, there's a margin appearing on both sides, and I'd like it so it would have no margin (or maybe 1px would be okay)...

  Read the article

• jquery: addClass 1,2,3 etc. auto to a list

  - by Svensson

  Hello, is it possible, to add auto numeric classes to a list by using jquery? html: <ul id="list"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> <li>Element 5</li> </ul> i want to get something like this: <ul id="list"> <li class="1">Element 1</li> <li class="2">Element 2</li> <li class="3">Element 3</li> <li class="4">Element 4</li> <li class="5">Element 5</li> </ul> hope there is a solution available :-)

  Read the article

• Ruby on Rails + Jquery: Saving data from draggable lists

  - by sjsc

  Hello. I'm trying to save data to the MySQL database in Rails when the user drags items from different lists. I'm using the below Jquery script and HTML: <script> $(document).ready(function() { $("#draggable").draggable( { connectToSortable: 'ul#myList', helper:'clone' } ); $("#myList").sortable(); }); </script> HTML: <ul> <li id="draggable">Drag me to myList</li> </ul> <ul id="myList"> <li id="item-1">item 1</li> <li id="item-2">item 2</li> </ul> I know I probably have to use something like this: $.post({ url: 'lists/update', data: $('#myList').sortable("serialize") }); I've been Googling for the last few hours but can't seem to find how to save data between multiple lists using Rails. Any idea?

  Read the article

• Select next element in the page source using jQuery

  - by Travis

  I have an arbitrarily deep list of the form: <ul> <li></li> <li> <ul> <li></li> </ul> </li> </ul> I am trying to build a function "nextElement" that returns a jQuery selector. The first time the function is called, it returns the first li in the list. The second time it is called, it returns the next li in the page. Etc. I'd like this function to pay no attention to siblings, parents, children, etc. All I care about is that everytime it is called, the next li in the source gets chosen. Any suggestions on how to go about approaching this? Thanks

  Read the article

• JQUERY, TEXT, appending an LI to a list with a SPAN wrapped?

  - by nobosh

  here is my current line of code: $("<li>").text($(this).text()).appendTo("#theList"); Which results in <ul id="theList"> <li>blah</li> <li>blah</li> </ul> How can I update that code above to result in: <ul id="theList"> <li><span>blah</span></li> <li><span>blah</span></li> </ul>

  Read the article

• remove/restore elements, maintaining their events and element's children

  - by Emin

  I came to a situation where I need to edit the following in a way that, on some event (lets assume the 'click' event in this case) I need to remove (or unwrap?) the .container and the .header and have the .itemlist still visible/available on the page. And then, I need to restore .container and .header back again on some other event, while still maintain the event listeners on the a tags, and if possible, without removing the said items from the DOM. Is this possible? <ul class="container"> <li class="header"><a href="#">delete</a> | <a href="#">edit</a></li> <ul class="itemlist"> <li>some item</li> <li>some other item</li> </ul> </ul>

  Read the article

• Jquery nested div .click event

  - by Sylph

  The link #loadContent will loads tree.html. Upon success loading the content, the script reinitialize some functions which is in tree.html. However, I am unable to get the .click event to function in the loaded content. Index.html <a href="#" id="loadContent">Load</a> <script type="text/javascript"> $(function() { $("#loadContent").click(function() { $.ajax({ url: "tree.html" ,success: function(data) { $('#result').html(data); $("#demo_1").tree({ rules : { use_max_children : false, use_max_depth : false }, callback : { onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) { alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE)); } } }); } }); }); }); </script> <script type="text/javascript" class="source"> $(function () { $.tree.drag_start = function () { $("#log").append("<br />Drag start "); }; $.tree.drag = function () { $("#log").append(" ."); }; $.tree.drag_end = function () { $("#log").append(" Drag end<br />"); }; $("#demo_1").tree({ rules : { use_max_children : false, use_max_depth : false }, callback : { onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) { alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE)); } } }); $("#demo_2").tree({ rules : { use_max_children : false, use_max_depth : false }, callback : { onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) { alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE)); } } }); }); </script> <div class="demo" id="demo_2"> <ul> <li id="phtml_1" class="open"><a href="#"><ins>&nbsp;</ins>Root node 1</a> <ul> <li id="phtml_2"><a href="#"><ins>&nbsp;</ins>Child node 1</a></li> <li id="phtml_3"><a href="#"><ins>&nbsp;</ins>Child node 2</a></li> <li id="phtml_4"><a href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li> </ul> </li> <li id="phtml_5"><a href="#"><ins>&nbsp;</ins>Root node 2</a></li> </ul> </div> <div id="result"></div><br> <div id="log"></div> Tree.html <div class="demo" id="demo_1"> <ul> <li id="phtml_1" class="open"><a href="#"><ins>&nbsp;</ins>Root node 1</a> <ul> <li id="phtml_2"><a href="#"><ins>&nbsp;</ins>Child node 1</a></li> <li id="phtml_3"><a href="#"><ins>&nbsp;</ins>Child node 2</a></li> <li id="phtml_4"><a href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li> </ul> </li> <li id="phtml_5"><a href="#"><ins>&nbsp;</ins>Root node 2</a></li> <li><a class="preset_text" id="1">model 1</a> </li> <li><a class="preset_text" id="2">model 2</a></li> </ul> </div> <script type="text/javascript"> $(document).ready(function() { $('.preset_text').click(function(){ var target = $(this).attr("id"); alert(target); }); }); </script> In tree.html, I am unable to get the alert(target). However, If I moved this section out from the "div #demo_1" in tree.html, I am able to receive alert(target). <a class="preset_text" id="1">model 1</a> <a class="preset_text" id="2">model 2</a> How can I get to detect the item clicked in the div demo_1 ? Thanks

  Read the article

• JQuery dynamic .load - works for 1 and not for the other??

  - by Alvin

  UPDATE: Site is online http://qwickqual.com/memorial/create/ under "Memoria Media" - Click on "Our Videos" and it loads the list of categories click on any sub category and it goes through the process below ---------------- end edit ---------------------------------- UPDATED DESCRIPTION OF ERROR: All code is based on <li> objects being linked If I click on an <li> from the Initial page load to load: section 1: I can click on an <li> to load sub-categories section 2: I then click on an <li>, the query is made server returns section 3, section is not loaded to screen / and callback function is skipped over perhaps someone has run into a similar issue before?? ---------------- end edit ---------------------------------- I've also added comments to the code I have a jquery function that is setup to load categorized lists of thumbnails. So far the function is in use in 3 location. Each of them generates HTML using the same template under django. The function works perfectly in 2 of the 3 locations, and I"m plain stumped as to why the 3rd won't work. Below is the complete set of relevant javascript, the page load HTML for the relevant section. And 2 examples of HTML that is loaded through the script, 1 of them works, 1 of them doesn't and both are loaded into the same page load HTML Any ideas what I'm missing here? Or information I need to add to help debug? Currently posting this to a live server to interact with, been local only till now... Error: Script works properly through all levels of title="our_photos" Script loads 1st level of title="our_videos" Script will not load sub-category of title="our_videos" Example: From HTML below: Click on Script will query the server properly: GET http://localhost%3A8000/memorial/media%5Ftype/our%5Fvideos/4/ Script will not load the returned HTML into the #select_media div scopeChain: [Call, Call multi=false uri=/memorial/media_type/our_videos/, Window # 0=Call 1=Call 2=window] relative vars: label = "our_videos" wrapper = "media" uri = "/memorial/media_type/our_videos/" multi = false Javascript <script type="text/javascript"> // this piece is where I'm having trouble in the grand scheme of things // label = piece of class tag // wrapper = tag to load everything inside of // uri = base of the page to load // multi = not relevant for this piece but needed to pass on to next function function img_thumb_loader(label, wrapper, uri, multi) { if(!(wrapper)) { wrapper = label } $('.'+label+'_category').click(function () { // show the loading animation $('div#'+wrapper+'_load').show(); // get var of current object type = $(this).attr('title') || ''; // load it into the screen - this is the error // when I click on an <li> from section 2 below it will query server // (Tamper data & server see it - & return section 3 below // But will not load into the screen on return // also skips over the callback function $('#select_'+label).load(uri+type+'/', '', function() { $('div#'+wrapper+'_load').hide(); $('input.img_'+label+'_field').each(function() { img = $(this).attr('value'); $('li#img_'+label+'-'+img).css('selected_thumb'); }); img_thumb_selected(label); window[label+'_loader'](); }); }); $('.img_'+label).click(function () { if($(this).hasClass('selected_thumb')) { $(this).removeClass('selected_thumb'); id = $(this).attr('title'); $('.img_'+label+'_selected[value="'+id+'"]').remove(); } else { if(!(multi)) { previous = $('.img_'+label+'_selected').val(); $('#img_'+label+'-'+previous).removeClass('selected_thumb'); $('.img_'+label+'_selected').remove(); } $(this).addClass('selected_thumb'); id = $(this).attr('title'); $('#select_'+wrapper).after('<input class="img_'+label+'_selected" id="img_'+label+'_field-'+id+'" type="hidden" name="imgs[]" value="'+id+'" />'); } }); img_thumb_selected(label); } function img_thumb_selected(label) { $('.img_'+label+'_selected').each(function() { current = $(this).val(); if(current) { $('#img_'+label+'-'+current).addClass('selected_thumb'); } }); } function media_type() { $('.media_type').click(function () { $('#media_load').show(); type = $(this).attr('title') || ''; $('#select_media').load('/memorial/media_type/'+type+'/', '', function() { $('#select_media').wrapInner('<div id="select_'+type+'"></div>'); $('#select_media').append('<ul class="root_link"><h3><a class="load_media" onclick="return false;" href="#">Return to Select Media Type</a></h3></ul>'); load_media_type(); $('#media_load').hide(); window[type+'_loader'](); }); }); } media_type(); function load_media_type() { $('.load_media').click(function () { $('#media_load').show(); $('#select_media').load('{% url mem_media_type %}', '', function() { $('#media_load').hide(); media_type(); }); }); } function our_photos_loader() { img_thumb_loader('our_photos', 'media', '{% url mem_our_photos %}', true); } function our_videos_loader() { img_thumb_loader('our_videos', 'media', '{% url mem_our_videos %}', false); } </script> HTML - Initial Page load <fieldset> <legend>Memorial Media</legend> <div style="display: none;" id="media_load" class="loading"/> <div id="select_media"> <ul style="width: 528px;" class="initial"> <li title="your_photos" class="media_type"><div class="photo_select_upload"><h3>Your Photos</h3></div></li> <li title="our_photos" class="media_type"><div class="photo_select"><h3>Our Photos</h3></div></li> <li title="our_videos" class="media_type"><div class="video_select"><h3>Our Videos</h3></div></li> </ul> </div> </fieldset> HTML - Returned from Click on section 1 this section can make calls to subcategories and it will work <br class="clear" /> <ul class="thumb_sub_category" style="width: 352px;"> <li id="our_photos_category-29" class="our_photos_category" title="29"> <div> <span style="background-image: url(/site_media/photologue/photos/cache/stuff_004_thumbnail.jpg);" class="thumb"><span></span></span> <p>Birds 1</p> </div> </li> <li id="our_photos_category-25" class="our_photos_category" title="25"> <div> <span style="background-image: url(/site_media/photologue/photos/cache/dsc_0035_thumbnail.jpg);" class="thumb"><span></span></span> <p>Dogs 1</p> </div> </li> </ul> HTML - Returned from click on Section 2 Having trouble with sub-categories from this area <br class="clear" /> <ul class="thumb_sub_category" style="width: 528px;"> <li id="our_videos_category-1" class="our_videos_category" title="1"> <div> <span style="background-image: url(/site_media/photologue/photos/cache/forest-1_thumbnail.jpg);" class="thumb"><span></span></span> <p>Video 1</p> </div> </li> <li id="our_videos_category-3" class="our_videos_category" title="3"> <div> <span style="background-image: url(/site_media/photologue/photos/cache/mountain-1_thumbnail.jpg);" class="thumb"><span></span></span> <p>Video 3</p> </div> </li> <li id="our_videos_category-4" class="our_videos_category" title="4"> <div> <span style="background-image: url(/site_media/photologue/photos/cache/mountain-3_thumbnail.jpg);" class="thumb"><span></span></span> <p>Video 4</p> </div> </li> </ul> HTML that fails to load inside - Section 3 <br class="clear" /> <ul class="thumb_sub_category" style="width: 528px;"> <li id="our_videos_category-1" class="our_videos_category" title="1"> <div> <span style="background-image: url(/site_media/photologue/photos/cache/forest-1_thumbnail.jpg);" class="thumb"><span></span></span> <p>Video 1</p> </div> </li> <li id="our_videos_category-3" class="our_videos_category" title="3"> <div> <span style="background-image: url(/site_media/photologue/photos/cache/mountain-1_thumbnail.jpg);" class="thumb"><span></span></span> <p>Video 3</p> </div> </li> <li id="our_videos_category-4" class="our_videos_category" title="4"> <div> <span style="background-image: url(/site_media/photologue/photos/cache/mountain-3_thumbnail.jpg);" class="thumb"><span></span></span> <p>Video 4</p> </div> </li> </ul>

  Read the article

• jQuery toggle pushing other elements around... bullies!!

  - by tony noriega

  Ok, so in the left_col of my page, i have a list UL LI that incorporates a jQuery toggle to open a small box, which is "LoginBox". <ul> <li class="members"><a href="/members/signon.asp?userType=member">Members</a></li> <li class="employers"><a href="/employers/signon.asp?userType=employer">Employers</a></li> <li class="providers"><a href="#LoginBox" class="clicker">Providers</a></li> <div class="loginbox" id="LoginBox"> <p>Medical</p> <p>Dental</p> </div> <li class="brokers"><a href="/brokers/signon.asp?userType=broker">Brokers</a></li> </ul> when the jQuery is invoked, it pushes the elements below it down. As expected. What i dont get is that i have an H3 tag below this UL LI which has a background image. The text portion of the H3 gets pushed down, but the background image seems to stay put, and the UL LI that gets pushed down just covers up the background image of the H3. why would the text move, but not the background image itself? here is the H3 style: .sectionmenu h3{ background: url(/_images/h3-triangle.gif) left center no-repeat; color: #000; font-size: 12px; font-weight: bold; padding: 4px 0px 4px 10px; margin: 0; border-bottom:1px dotted #aeaeae;; } and the login box style: .loginbox{ display:none; width:100px; height:50px; margin:0 0 0 77px; }

  Read the article

• javascript accordian menu problem in worpress

  - by Praveen kalal

  hi all i am working on wordpress project there is i used accordion for right sidebar but all the link are over lapping each other in IE8 its working fine mozzila so plz help my code is var parentAccordion=new TINY.accordion.slider("parentAccordion"); parentAccordion.init("acc","h4",1,-1); var nestedAccordion=new TINY.accordion.slider("nestedAccordion"); nestedAccordion.init("nested","h4",1,-1,"acc-selected"); $args = array('parent'=>0,'hide_empty'=>0); $cats = get_categories($args); echo '<ul id="acc" class="acc">'; foreach($cats as $key => $val) { $args1=array( 'showposts' => 10, 'category__in' => array($val->term_id), 'caller_get_posts'=>1 ); $post=get_posts($args1); echo '<li><h4>'.$val->name.'</h4>'; echo '<div class="" style="opacity: 0; height: auto;">'; echo '<ul id="nested" class="acc">'; if(isset($post) && !empty($post)) { foreach($post as $key1 => $val1) { echo '<li class="cat-item"><a title='.$val1->post_title.' href='.$val1->guid.'>'.$val1->post_title.'</a>'; } } $subcats = get_categories(array('parent'=>$val->term_id,'hide_empty'=>0)); if(isset($subcats) && !empty($subcats)) { foreach($subcats as $k => $v) { echo '<li><h4 class="">'.$v->name.'</h4>'; $args2=array( 'showposts' => 10, 'category__in' => array($v->term_id), 'caller_get_posts'=>1 ); $post1=get_posts($args2); if(isset($post1) && !empty($post1)) { echo '<div class="" style="opacity: 1; height: auto;">'; echo '<ul class="children" style="padding-left:15px;">'; foreach($post1 as $key2 => $val2) { echo '<li><a title='.$val2->post_title.' href='.$val2->guid.'>'.$val2->post_title.'</a></li>'; } echo '</ul></div>'; } } } echo "</ul>"; echo "</li>"; } echo '</ul>'; ?> </div> so plz help me

  Read the article

• jQuery toggle menu dropdown

  - by Seong Lee

  I am working on a menu navigation that has parent horizontal bar as static and a vertical accordion child menu that interacts with the parent. I have them working fine except one part where I want to toggle show() and hide() child menu when clicked on the same parent menu item. I've looked at toggle() jQuery API but couldn't get it working properly. The following is only a script for parent part which I got rid of toggle() for now. $(function () { $('#mainMenu > ul > li > a').click(function () { $('#mainMenu li').removeClass('active'); $(this).closest('li').addClass('active'); if ($(this).text() == "1st click") { $('#subMenu > ul').siblings().hide(); $('#subMenu > ul:nth-child(1)').show(); } else if ($(this).text() == "2nd click") { $('#subMenu > ul').siblings().hide(); $('#subMenu > ul:nth-child(2)').show(); } }); }); The Full code that isolates the problem is available here

  Read the article

• Can't move li elements from one unorderted list to another

  - by Roland

  I have two un-ordered list <ul id="#list1"> <li>one</li> <li>two</li> </ul> <ul id="#list2"></ul> and two buttons <input id="add" name="yt1" type="button" value="<<" /><br /> <input id="remove" name="yt2" type="button" value=">>" /> If the button with the id add is pressed all elements from #list1 should be move to #list2. How do I move elements from one list to another using JQuery I though of something like the below, but not sure how to do the actual moving $("#add").click(function(){ $("#list1 li").each(function(){ //Do not know what to put in here } })

  Read the article

• Get ID of a clicked parent ID

  - by Yan Cheng CHEOK

  I try using evt.parent.attr("id") inside jsddm_close, but it doesn't work. <script type="text/javascript"> var ddmenuitem = 0; function jsddm_open() { // When "help-menu" being click, I will toggle drop down menu. ddmenuitem = $(this).find('ul').eq(0).toggle(); } function jsddm_close(evt) { // When everywhere in the document except "help-menu" being clicked, I will close the drop down menu. // How I can check everywhere in the document except "help-menu"? if (ddmenuitem) ddmenuitem.hide(); } $(document).ready(function() { $('#jsddm > li').bind('click', jsddm_open); $(this).bind('click', jsddm_close); }); </script> <ul id="jsddm"> <li><a href="#">Home</a></li> <li><a href="#" id="help-menu"><u>Help</u><small>xx</small></a> <ul> <li><a href="#">menu item 1</a></li> <li><a href="#">menu item 2</a></li> </ul> </li> </ul>

  Read the article

• ie8 playing funny with list-style-position: inside

  - by LeeR

  Ok, So problem here... when using list-style-position:inside in IE8 the first like is indented but every line after that is not. So the new lines appear under the bullet. This is fine, but when I use a list with that css applied with an a tag within the li then the text automatically gets pushed to the second line, and the first line is empty. When I remove the a tag from the li then it jumps back up. Any idea on why this might be or is this a bug in the ie8 world or do I just need to double check my css? Any insights would be much appreciated. As asked here is some code <div id="sub_nav"> <ul> ... <li><a class="active_page" href="#">Liposculpture</a> <ul> <li><a href="#">What is Liposculpture?</a></li> <li><a href="#">About Liposculpture surgery</a></li> <li><a href="#" class="active_sub">After Liposculpture surgery</a></li> <li><a href="#">Post Op Instructions</a></li> <li><a href="#">Liposculpture Side Effects</a></li> <li><a href="#">Liposuction Introduction to</a></li> <li><a href="#">Tumescent Liposculpture</a></li> </ul> </li> ... </ul> </div> For the CSS I will try and show it best I can #sub_nav li { width: 200px; padding:4px 0; border-bottom: 1px #CCC solid; } #sub_nav li a { text-decoration: none; color:#555; padding:7px 15px 7px 15px; display: block; } #sub_nav li ul li { list-style-position: inside; list-style-type: disc; font: 11px Arial; padding-left:15px; color:#FFF; border-bottom: none; } #sub_nav li ul li a { padding:0; margin:0; text-indent: 0; } Hope this helps

  Read the article

• Asign Id's dynamically to DOM elements with javascript.

  - by jnkrois

  Hello everybody, I just have a quick question about how to generate id's on-the-fly for HTML elements. So far I've tried a few things, I started with a "for" loop, I already know how many elements I have to generate Id's for, in this case I have an "ul" with 6 "li". My "for" loop is as follows: var items = $("ul li").length; for(var i = 0; i <= items; i++){ $("ul li").attr("id", "number" + i); } "number" would be the new id concatenated with "i", so I get a different Id for each "li". As you can probably tell, this does not work, because I end up with the same Id for each "li": in this case I get <li id="number6">... </li> for all the "li" elments in the "ul". I tried a "while" loop and ".each()" with jQuery but I get the exact same thing. Any help would be appreciated.

  Read the article

• CSS Positioning Issues: Wordpress

  - by cam

  I'm following this tutorial here http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery on adding a menu with jquery. I've created my menu, but I'm having trouble adding it to wordpress. I opened up the header.php file since I want it to appear below the banner, and I paste it in it's own div, but it always "pushes" everything below it to the right. How do I stop it from doing this? Here's the code: <ul id="nav"> <li><a href="#">1 HTML</a></li> <li><a href="#">2 CSS</a></li> <li><a href="#">3 Javascript</a> <ul> <li><a href="#">3.1 jQuery</a> <ul> <li><a href="#">3.1.1 Download</a></li> <li><a href="#">3.1.2 Tutorial</a></li> </ul> </li> <li><a href="#">3.2 Mootools</a></li> <li><a href="#">3.3 Prototype</a></li> </ul> </li>

  Read the article

• JQuery selectors select from an html object other than from document root?

  - by orangebrainer

  jQuery selectors select from the document. How do I select from somewhere else other than root? Say I want to select some children from an html object. For this function dothis(obj) { $j("#tabs").removeClass(); $j("#tabs>ul").removeClass(); $j("#tabs>ul>li>a").each(function() { var tabNum = $j(this).attr("href").replace("#", ""); var tabContent = $j("div[id=" + tabNum + "]"); tabContent.removeClass(); $(tabContent).before("<br><h1>" +$j(this).text() + "</h1>\n" ); }); $j("#tabs>ul").each(function() { $j(this).empty();//remove Ul links on top }); } I want to reference the selectors from an html Object (obj) i passed into as argument, instead of selecting from document. Sorry I'm pretty new to jQuery.

  Read the article

• backbonejs remove anomaly concept

  - by user1537158

  I was building a small app for adding and deleting li from ul using Backbonejs.One of the SO members cymen helped me code it, using that i tailored the code a little.currently if i add one element and delete , it works , but the second time i add an element (to ul) and go to delete it , i get Uncaught TypeError: Cannot call method 'remove' of undefined Pasting my code here , HTML : <input type="text" id="name"> <button id="add">Add</button> <ul id="mylist"></ul> JS: $(function(){ var myCollection = Backbone.Collection.extend(); var myView = Backbone.View.extend({ el:$('body'), tagName:'li', initialize : function(e){ this.collection.bind("add",this.render,this); this.collection.bind("remove",this.render,this); }, events:{ 'click #add' : 'addfoo' }, addfoo : function(){ var myname= $('#name').val(); $('#name').val(''); this.collection.add({name:myname}); }, render : function(){ $('#mylist').empty(); this.collection.each(function(model){ console.log("myView"); var remove = new myRemoveView({model:model}); remove.render(); }); } }); var myRemoveView = Backbone.View.extend({ el:$('body'), events:{ 'click .button':'removeFoo' }, removeFoo : function(){ console.log("here"); this.model.collection.remove(this.model); }, render : function(){ console.log("second view"); $('#mylist').append('<li>'+this.model.get('name') + "<button class='button'>"+"delete"+"</button></li>"); return; } }); var view = new myView({collection: new myCollection()}); }); Two things i did not understand : i) in the removeFoo function , we write this.model.collection.remove(this.model) shouldnt this have been this.collection.model.remove , something of that sort ? ii) i add a li to ul , then i delete it , when i add another li (appending to ul works perfect) but this time when i go to delete it throws me the above error : Uncaught TypeError :cannot call method 'remove' of undefined can you please help me figure out these 2 doubts in my code , btw SO member cymen's code works like a charm only my tailored code (above) is giving me errors. SO member cymen's code : JS Fiddle for his code Thank you

  Read the article

• appending multiple groups with values from xml

  - by zurna

  In my xml file comments are listed as <Comments> <CommentID id="1"> <CommentBy>efet</CommentBy> <CommentDesc> Who cares!!! My boyfriend thinks the same with me. tell your friends. </CommentDesc> </CommentID> <CommentID id="2"> <CommentBy>tetto</CommentBy> <CommentDesc> xyz.... </CommentDesc> </CommentID> </Comments> I need to append them inside the ul of the div id="nw-comments". <div id="nw-comments" class="article-page"> <h3>Member Comments</h3> <ul> <li class="top-level"> <ul class="comment-options right"> <li> <a id="reply_1272195" class="reply" href="javascript:void(0);" name="anchor_1272195">Reply</a> </li> <li class="last"> <a id="report_1272195" class="report" href="javascript:void(0);">Report Abuse</a> </li> </ul> <h6>Posted By: [CommentBy] @ [CommentDateEntered]</h6> <div class="post-content"> <p>[CommentDesc]</p> </div> </li> </ul> </div> I tried to do it with the following code but I keep getting errors. $(document).ready(function(){ $.ajax({ dataType: "xml", url: "/FLPM/content/news/news.cs.asp?Process=ViewNews&NEWSID=<%=Request.QueryString("NEWSID")%>", success: function(xml) { $(xml).find('row').each(function(){ var id = $(this).attr('id'); var FullName = $(this).find('FullName').text(); var CommentBy = $(this).find('CommentBy').text(); var CommentDateEntered = $(this).find('CommentDateEntered').text(); var CommentDesc = $(this).find('CommentDesc').text(); $("#nw-comments ul").append("<h6>Posted By: " + CommentBy + " @ " + CommentDateEntered + "</h6><div class=""post-content""><p>" + CommentDesc + "</p></div>"); }); } });

  Read the article

• How to give cross browser transparency to element's background only?

  - by metal-gear-solid

  How to give cross browser transparency to background only? I want to give transparency to background of ul { background: } only don't want to make text inside ul li a {} transparent. ul { filter: alpha(opacity=50); /* internet explorer / -khtml-opacity: 0.5; / khtml, old safari / -moz-opacity: 0.5; / mozilla, netscape / opacity: 0.5; / fx, safari, opera */ } this code make everything transparent http://perishablepress.com/press/2009/01/27/cross-browser-transparency-via-css/

  Read the article

• is there an index to be accessed in the CI foreach with {}-Notation?

  - by helle

  Hello Guys, i'm new with Codeigniter,and whish to know if i can access any kind of iterator for the foreach with {}-Notation in my views. The thing is, i'm having a list which should be devided after each x items. example (what i would like to do: <ul> {list} <li>{items}</li> <? if ($iterator % 15 == 0) echo "</ul><ul>"; ?> {/list} </ul> thanks in advice ;-)

  Read the article

< Previous Page | 16 17 18 19 20 21 22 23 24 25 26 27  | Next Page >