Search Results

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

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

  • jQuery: List expands on page load

    - by Hasanah
    I've been looking for something very simple: How to make a side navigation expand with animation on page load, but all the tutorial websites I usually go to don't seem to have it. The closest I could find is this jQuery sample: http://codeblitz.wordpress.com/2009/04/15/jquery-animated-collapsible-list/ I've managed to strip down the list like so: <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function(){ $('li') .css('pointer','default') .css('list-style','none'); $('li:has(ul)') .click(function(event){ if (this == event.target) { $(this).css('list-style', (!$(this).children().is(':hidden')) ? 'none' : 'none'); $(this).children().toggle('slow'); } return false; }) .css({cursor:'pointer', 'list-style':'none'}) .children().hide(); $('li:not(:has(ul))').css({cursor:'default', 'list-style':'none'}); }); <body> <fieldset> <legend>Collapsable List Demo</legend> <ul> <li>A - F</li> <li>G - M <ul> <li>George Kent Technology Centre</li> <li>Hampshire Park</li> <li>George Kent Technology Centre</li> <li>Hampshire Park</li> </ul> </li> <li> N - R </li> <li>S - Z</li> </ul> </fieldset> My question is: Is there any way to make this list expand on page load instead of on click? I also don't need it to collapse at all; basically I need only the animating expansion. Thank you for your time and advice. :)

    Read the article

  • jQuery Autocomplete with _renderItem and catagories

    - by LillyPop
    As a newb to jQuery im wondering if its possible to have both jQuery _renderItem (for custom list item HTML/CSS) AND the categories working together in harmony? Ive got my _renderItem working great but I have no idea how to incorporate categories into the mix. My code so far $(document).ready(function () { $(':input[data-autocomplete]').each(function () { $(':input[data-autocomplete]').autocomplete({ source: $(this).attr("data-autocomplete") }).data("autocomplete")._renderItem = function (ul, item) { var MyHtml = "<a>" + "<div class='ac' >" + "<div class='ac_img_wrap' >" + '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' + "</div>" + "<div class='ac_mid' >" + "<div class='ac_name' >" + item.value + "</div>" + "<div class='ac_info' >" + item.info + "</div>" + "</div>" + "</div>" + "</a>"; return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul); }; }); }); The jQuery documentation for the autocomplete gives the following code example : $.widget("custom.catcomplete", $.ui.autocomplete, { _renderMenu: function (ul, items) { var self = this, currentCategory = ""; $.each(items, function (index, item) { if (item.category != currentCategory) { ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); currentCategory = item.category; } self._renderItem(ul, item); }); } }); Id like to get my custom HTML (_renderItem) and categories working together, can anyone help me to merge these two together or point me in the right direction. Thanks

    Read the article

  • Wordpress: Check if there are previous posts before displaying link

    - by Chris Armstrong
    I'm using the following code to display a 'previous posts' link on my Wordpress blog. <nav> <ul> <li><?php previous_posts_link('Newer Entries &raquo;') ?></li> </ul </nav> Problem is, when there ARN'T any previous posts, while the link doesn't display, I still get <nav> <ul> <li><</li> </ul </nav> Printed out. Is there an if() statement I could wrap around it all so it checks if there are any previous posts, and only prints it out if there are?

    Read the article

  • best way to add and delete text lines with jquery product configurator

    - by Daniel White
    I am creating a product configurator with Jquery. My users can add custom text lines to their product. So you could create say... 4 text lines with custom text. I need to know what the best way to add and delete these lines would be. Currently I have the following code for adding lines... //Add Text Button $('a#addText').live('click', function(event) { event.preventDefault(); //Scroll up the text editor $('.textOptions').slideUp(); $('#customText').val(''); //count how many items are in the ul textList var textItems = $('ul#textList li').size(); var nextNumber = textItems + 1; if(textItems <= 5) { //Change input to reflect current text being changed $('input#currentTextNumber').val(nextNumber); //Append a UL Item to the textList $('ul#textList').append('<li id="textItem'+nextNumber+'">Text Line. +$5.00 <a class="deleteTextItem" href="'+nextNumber+'">Delete</a></li>'); //Scroll down the text editor $('.textOptions').slideDown(); }else { alert('you can have a maximum of 6 textual inputs!'); } }); I'm probably not doing this the best way, but basically i have an empty UL list to start with. So when they click "Add Text Line" it finds out how many list elements are in the unordered list, adds a value of 1 to that and places a new list element with the id TextItem1 or TextItem2 or whatever number we're on. The problem i'm running into is that when you click delete item, it screws everything up because when you add an item again all the numbers aren't correct. I thought about writing some kind of logic that says all the numbers above the one you want deleted get 1 subtracted from their value and all the numbers below stay the same. But I think i'm just going about this the wrong way. Any suggestions on the easiest way to add and delete these text lines is appreciated.

    Read the article

  • Need help to make link active with change background-position onClick

    - by Erik
    I can't figure out how to make my image links change background-position onClick on ACTIVE. Nothing works: .active { background-position-y: -96px 0px; } <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); }); </script> <ul class="tabs"> <li><a class="a1" href="#tab1"></a></li> <li><a class="a22" href="#tab22"></a></li> <li><a class="a23" href="#tab23"></a></li> <li><a class="a24" href="#tab24"></a></li> <li><a class="a25" href="#tab25"></a></li> <li><a class="a26" href="#tab26"></a></li> </ul>

    Read the article

  • What options exist to get text/ list items to appear in columns?

    - by alex
    I have a bunch of HTML markup coming from an external source, and it is mainly h3 elements and ul elements. I want to have the content flow in 3 columns. I know there is something coming in CSS3, but what options do I have to get this content to flow nicely into the 3 columns at the time being? I'm not that concerned about IE6 (as long as it degrades gracefully). Am I stuck using jQuery to parse the markup and chop it up into 3 divs which float? Thank you Update As per request, here is some of the HTML I am working with <h3>Tourism Industry</h3> <ul> <li><a href="">Something</a></li> <li><a href="">Something</a></li> <li><a href="">Something</a></li> <li><a href="">Something</a></li> </ul> <h3>Small Business</h3> <ul> <li><a href="">Something</a></li> <li><a href="">Something</a></li> <li><a href="">Something</a></li> <li><a href="">Something</a></li> <li><a href="">Something</a></li> </ul> And a whole lot more following the same format.

    Read the article

  • How do I control the direction of the scroll on my coda slider?

    - by lightingwrist
    Hello, I have a coda slider and am unable to determine the direction of the scroll. I have 3 panels that I want to scroll left to right. Sometimes it scrolls left to right, sometimes up and down, and sometimes horizontally. How do I lock it down to go the direction I want? Here is the HTML: <body> <div id="slider_home" class="round_10px"> <ul class="navigation_home"> <li><a href="#scroll_Parents" class="round_10px">Information For Parents</a></li> <li><a href="#scroll_Materials" class="round_10px">Print Materials</a></li> <li><a href="#scroll_Resources" class="round_10px">Online Resources</a></li> </ul> <div id="scroll_bg_home"> <div class="scroll_home"> <div class="scrollContainer_home"> <div class="panel_home" id="scroll_Parents"> content </div> <div class="panel_home" id="scroll_Materials"> content </div> <div class="panel_home" id="scroll_Resources"> content </div> </div> </div> </div> </div> </body> Here is the CSS: #wrapper {width:550px;margin:0px auto;} #intro {padding-bottom:10px;} h2 {margin:0;margin-bottom:14px;padding:0;} #slider {width:631px;margin:10px auto 0px auto;position:relative;} #scroll_bg{height:360px;width:590px;overflow:hidden;position:relative;clear:left;background:#FFFFFF url(images/) no-repeat; margin:0px auto 0px auto} .scroll{ background:transparent; width:550px; height:370px; padding:0px; margin:0px auto; overflow:hidden; } .scrollContainer div.panel {padding:20px 0px;height:330px; width:550px;margin:0px;float:left;} #shade {background:#EDEDEC url(images/shade.jpg) no-repeat 0 0;height:50px;} ul.navigation {list-style:none;margin:0px 0px 0px 23px;padding:0px;padding-bottom:0px;} ul.navigation li {display:inline; margin-right:5px;} ul.navigation li a { background:#FFFFFF;font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#CCCCCC;padding:5px 5px 5px 5px;border:1px #F4F4F4 solid;text-decoration: none;} ul.navigation a:hover { color:#EDEDEC;border:1px #E6E6E6 solid;} ul.navigation a.selected {color:#333333;} ul.navigation a:focus {outline:none;} .scrollButtons {position:absolute;top:150px;cursor:pointer;} .scrollButtons.left {left:-37px;top:20px} .scrollButtons.right {right:-32px;top:20px;} .hide {display:none;} And here is the Jquery includes file: // when the DOM is ready... $(document).ready(function () { var $panels = $('#slider_home .scrollContainer_home > div.panel_home'); var $container = $('#slider_home .scrollContainer_home'); // if true, we'll float all the panels left and fix the width // of the container var horizontal = true; // float the panels left if we're going horizontal if (horizontal) { $panels.css({ 'float' : 'left', 'position' : 'relative' // IE fix to ensure overflow is hidden }); // calculate a new width for the container (so it holds all panels) $container.css('width', $panels[0].offsetWidth * $panels.length); } // collect the scroll object, at the same time apply the hidden overflow // to remove the default scrollbars that will appear var $scroll_bg = $('#scroll_bg_home'); var $scroll = $('#slider_home .scroll_home').css('overflow', 'hidden'); // apply our left + right buttons $scroll_bg .before('<img class="scrollButtons_home left" src="styles/images/BackFlip.jpg" />') .after('<img class="scrollButtons_home right" src="styles/images/flipForward.jpg" />'); // handle nav selection function selectNav() { $(this) .parents('ul:first') .find('a') .removeClass('selected') .end() .end() .addClass('selected'); } $('.navigation_home').find('a').click(selectNav); // go find the navigation link that has this target and select the nav function trigger(data) { var el = $('.navigation_home').find('a[href$="' + data.id + '"]').get(0); selectNav.call(el); } if (window.location.hash) { trigger({ id : window.location.hash.substr(1) }); } else { $('.navigation_home a:first').click(); } // offset is used to move to *exactly* the right place, since I'm using // padding on my example, I need to subtract the amount of padding to // the offset. Try removing this to get a good idea of the effect var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1; var scrollOptions = { target: $scroll, // the element that has the overflow // can be a selector which will be relative to the target items: $panels, navigation: '.navigation_home a', // selectors are NOT relative to document, i.e. make sure they're unique prev: 'img.left', next: 'img.right', // allow the scroll effect to run both directions axis: 'xy', onAfter: trigger, // our final callback offset: offset, // duration of the sliding effect duration: 500, // easing - can be used with the easing plugin: // http://gsgd.co.uk/sandbox/jquery/easing/ easing: 'swing' }; // apply serialScroll to the slider - we chose this plugin because it // supports// the indexed next and previous scroll along with hooking // in to our navigation. $('#slider_home').serialScroll(scrollOptions); // now apply localScroll to hook any other arbitrary links to trigger // the effect $.localScroll(scrollOptions); // finally, if the URL has a hash, move the slider in to position, // setting the duration to 1 because I don't want it to scroll in the // very first page load. We don't always need this, but it ensures // the positioning is absolutely spot on when the pages loads. scrollOptions.duration = 1; $.localScroll.hash(scrollOptions); });

    Read the article

  • In which order are CSS styles applied?

    - by citronas
    I have the following HTML. <ul> <li> <a>asdas</a> </li> </ul> In my CSS stylesheet I have general settings for the a tag, and several hundered lines later settings for ul li a. Like this: a:link { color: red; } ... ul li a { color:blue; } Firebug tells me, that first the color:blue is loaded, and afterwards overriden by color:red So far I've always thought, that the order of loading css files and the order of style inside a single css file tell the browser how html elements should be formatted. Unfortunately I'm now experiencing it vice versa. So tell me, how must I correct my style to achieve the a tag inside the li to be rendered blue and not red?

    Read the article

  • how to get items that hasnot got a certain class in jquery?

    - by manraj82
    <ul id ='caseStudies'> <li class="humor crime fantasy hidden"> A </li> <li class="crime"> B </li> <li class="humor crime hidden"> C </li> <li class="humor crime"> D </li> <li class="humor crime fantasy action hidden"> E </li> <li class="fantasy action"> F </li> <li class="humor fantasy"> G </li> <li class="crime action hidden"> H </li> </ul> $('ul#caseStudies li.hidden').each(function() { }//this will get all the LI in the UL that has got class 'hidden' But how do i get all the LI in the UL that hasn got a class 'hidden'?

    Read the article

  • Is it possible to convert this asp to asp.net?

    - by Phil
    I have been tasked with sifting through the worst classic asp spaghetti i've ever come across. The script runs a series of recordsets in sequence, getting 1 record at a time. As the record is built it takes the id and passes it to the next loop, which gets data, and passes on the id to the next loop. It then continues in this manner and builds an unordered list, kicking out the required html as it goes. Here are my efforts so far: have a class delivering data via sqldatareaders and output these to nested repeaters (this failed due to not being able to loop and get the id) Have a datatable populated with all the required data, then datatable.select to filter it out. have 4 datareaders looping and building the ul arraylists (I couldnt get the id's to match up) Please can you suggest the best method (with a bit of sample code if possible) to go about doing this conversion? Here is the code (sorry its long / horrible / spaghetti!!!) <% set RSMenuLevel0 = conn.execute("select id, DepartmentID, GroupingID, Heading, OrderID, Publish, moduleid, url, urltarget " &_ "from Grouping where (DepartmentID = 0 and GroupingID = 0 and Publish <> 0) order by OrderID") %> <% if session("JavaScriptEnabled") = "False" Then %> <% while not RSMenuLevel0.EOF if RSMenuLevel0("Publish") <> 0 then Menu0heading = RSMenuLevel0("Heading") Menu0id = RSMenuLevel0("id") %> <%if RSMenuLevel0("url") > "" and RSMenuLevel0("moduleid") = 0 then%> &nbsp;<a href="http://<%=RSMenuLevel0("url")%>" target="<%=RSMenuLevel0("urltarget")%>"><%=Menu0heading%></a> <%else%> &nbsp;<a href="/default.asp?id=<%=Menu0id%>"><%=Menu0heading%></a> <%end if%> <% end if RSMenuLevel0.MoveNext wend %> <% else %> <ul id="Menu1" class="MM"> <%if home <> 1 then%> <!-- <li><a href="/default.asp"><span class="item">Home</span></a> --> <%end if%> <% numone=0 while not RSMenuLevel0.EOF ' numone = numone + 1 Menu0heading = RSMenuLevel0("Heading") 'itemID = lcase(replace(Menu0heading," ","")) Menu0id = RSMenuLevel0("id") if RSMenuLevel0("url") > "" and RSMenuLevel0("moduleid") = 0 then url = RSMenuLevel0("url") if instr(url,"file:///") > 0 then %> <li><a href="<%=RSMenuLevel0("url")%>" target="<%=RSMenuLevel0("urltarget")%>" <%if numone=1 then%>class="CURRENT"<%end if%>><span class="item"><%=Menu0heading%></span></a> <%else%> <li><a href="http://<%=RSMenuLevel0("url")%>" target="<%=RSMenuLevel0("urltarget")%>" <%if numone=1 then%>class="CURRENT"<%end if%>><span class="item"><%=Menu0heading%></span></a> <%end if%> <%else%> <li><a href="/default.asp?id=<%=RSMenuLevel0("id")%>" <%if numone=1 then%>class="CURRENT"<%end if%>><span class="item"><%=Menu0heading%></span></a> <%end if%> <% set RSMenuLevel1 = conn.execute("select id, DepartmentID, GroupingID, Heading, OrderID, Publish, moduleid, url, urltarget " &_ "from Grouping where (DepartmentID = 0 and GroupingID = " & Menu0id & " and Publish <> 0) order by OrderID") if not RSMenuLevel1.EOF then %> <ul> <% while not RSMenuLevel1.EOF Menu1heading = RSMenuLevel1("Heading") Menu1id = RSMenuLevel1("id") if RSMenuLevel1("url") > "" and RSMenuLevel1("moduleid") = 0 then url = RSMenuLevel1("url") if instr(url,"file:///") > 0 then %> <li><a href="<%=RSMenuLevel1("url")%>" target="<%=RSMenuLevel1("urltarget")%>"><%=Menu1heading%></a> <%else%> <li><a href="http://<%=RSMenuLevel1("url")%>" target="<%=RSMenuLevel1("urltarget")%>"><%=Menu1heading%></a> <%end if%> <%else%> <li><a href="/default.asp?id=<%=RSMenuLevel1("id")%>"><%=Menu1heading%></a> <%end if%> <% set RSMenuLevel2 = conn.execute("select id, DepartmentID, GroupingID, Heading, OrderID, Publish, moduleid, url, urltarget " &_ "from Grouping where (DepartmentID = 0 and GroupingID = " & Menu1id & " and Publish <> 0) order by OrderID") if not RSMenuLevel2.EOF then %> <ul> <% while not RSMenuLevel2.EOF Menu2heading = RSMenuLevel2("Heading") Menu2id = RSMenuLevel2("id") if RSMenuLevel2("url") > "" and RSMenuLevel2("moduleid") = 0 then %> <li><a href="http://<%=RSMenuLevel2("url")%>" target="<%=RSMenuLevel2("urltarget")%>"><%=Menu2heading%></a> <%else%> <li><a href="/default.asp?id=<%=RSMenuLevel2("id")%>"><%=Menu2heading%></a> <%end if%> <% set RSMenuLevel3 = conn.execute("select id, DepartmentID, GroupingID, Heading, OrderID, Publish, moduleid, url, urltarget " &_ "from Grouping where (DepartmentID = 0 and GroupingID = " & Menu2id & " and Publish <> 0) order by OrderID") if not RSMenuLevel3.EOF then %> <ul> <% while not RSMenuLevel3.EOF Menu3heading = RSMenuLevel3("Heading") Menu3id = RSMenuLevel3("id") if RSMenuLevel3("url") > "" and RSMenuLevel3("moduleid") = 0 then %> <li><a href="http://<%=RSMenuLevel3("url")%>" target="<%=RSMenuLevel3("urltarget")%>"><%=Menu3heading%></a></li> <%else%> <li><a href="/default.asp?id=<%=RSMenuLevel3("id")%>"><%=Menu3heading%></a></li> <%end if%> <% RSMenuLevel3.MoveNext wend %> </ul> <% end if RSMenuLevel2.MoveNext %> </li> <% wend %> </ul> <% end if RSMenuLevel1.MoveNext %> </li> <% wend %> </ul> <% end if RSMenuLevel0.MoveNext %> </li> <% wend %> </ul> <% end if %>

    Read the article

  • jQuery sortable drop within itself.

    - by Janis Peisenieks
    So my question here is: Can I place a sortable element within another sortable element of the same level. Example: <ul class="sortable"> <li class="subsortable">Some text</li> <li class="subsortable">Some text</li> </ul> into: <ul class="sortable"> <li class="subsortable">Some text<li class="subsortable">Some text</li></li> </ul> I've been trying to do this for a day now, and I can't seem to find a way to do this.

    Read the article

  • how to add special class for labels and errors on zend form elements?

    - by user1400
    hello how we could add a special class for labels and errors for a zend-form-element for example html output code before add classes <dt id="username-label"><label for="username" class="required">user name:</label></dt> <dd id="username-element"> <input type="text" name="username" id="username" value="" class="input" /> <ul class="errors"><li>Value is required and can't be empty</li></ul></dd> and code after we add classes <dt id="username-label"><label for="username" **class="req-username"**>user name:</label></dt> <dd id="username-element"> <input type="text" name="username" id="username" value="" class="input" /> <ul **class="err-username"**><li>Value is required and can't be empty</li></ul></dd> thanks

    Read the article

  • How to get rid of white space between css horizontal list items?

    - by Curyous
    I've got the following test page and css. When displayed, there is a 4px gap between each list item. How do I get the items to be next to each other? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" /> </head> <body> <div> <ul class="nav"> <li class="nav"><a class="nav" href="#">One1</a></li> <li class="nav"><a class="nav" href="#">Two</a></li> <li class="nav"><a class="nav" href="#">Three</a></li> <li class="nav"><a class="nav" href="#">Four</a></li> </ul> </div> </body> </html> The css: ul.nav, ul li.nav { display: inline; margin: 0px; padding: 0px; } ul.nav { list-style-type: none; } li.nav { background-color: red; } a.nav { background-color: green; padding: 10px; margin: 0px; } a:hover.nav { background-color: gray; }

    Read the article

  • Image Hover-HTML CSS

    - by LostSchemer
    I am having trouble creating a different image to appear when you place your curser over the original image. Heres my code without the rest of my listed buttons: <nav class="buttons"> <ul> <li class="left"> <a class="home" href="www.google.com"> <img src="img/Home_2.png"></a></li> </ul> </nav> Css: .buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;} .buttons ul{list-style-type: none; margin:0px; padding:0px} .left{float:left} .home:hover {background: url(../img/Home_crack.PNG)} Any suggestions? EDIT: Okay great suggestions, however when I hover over the "home button" now the stuff in the float tweeks out. Heres the code with the full float properties: HTML: <nav class="buttons"> <ul> <li class="left"> <a class="home" href="www.google.com"> <img src="img/Home_2.png"></a></li> <li class="left"> <a href="www.google.com" class="menu"> <img src="img/Menu_2.png"></a></li> <li class="right"> <a href="www.google.com" class="about"> <img src="img/About_2.png"></a></li> <li class="right"> <a href="www.google.com" class="contact"> <img src="img/Contact_2.png"></a></li> </ul> </nav> CSS: .buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;} .buttons ul{list-style-type: none; margin:0px; padding:0px} .left{float:left} .home:hover img{display:none} .home:hover {background: url(../img/Home_crack.PNG);} .right{float:right} Basically i wanted to separate 4 buttons.... one in the left float and one in the right float, then on the hover, the buttons would change to a different image....With the new img{display:none} the left float rapidly flashes.

    Read the article

  • How to create nested ViewComponents in Monorail and NVelocity?

    - by rob_g
    I have been asked to update the menu on a website we maintain. The website uses Castle Windors Monorail and NVelocity as the template. The menu is currently rendered using custom made subclasses of ViewComponent, which render li elements. At the moment there is only one (horizontal) level, so the current mechanism is fine. I have been asked to add drop down menus to some of the existing menus. As this is the first time I have seen Monorail and NVelocity, I'm a little lost. What currently exists: <ul> #component(MenuComponent with "title=Home" "hover=autoselect" "link=/") #component(MenuComponent with "title=Videos" "hover=autoselect") #component(MenuComponent with "title=VPS" "hover=autoselect" "link=/vps") #component(MenuComponent with "title=Add-Ons" "hover=autoselect" "link=/addons") #component(MenuComponent with "title=Hosting" "hover=autoselect" "link=/hosting") #component(MenuComponent with "title=Support" "hover=autoselect" "link=/support") #component(MenuComponent with "title=News" "hover=autoselect" "link=/news") #component(MenuComponent with "title=Contact Us" "hover=autoselect" "link=/contact-us") </ul> Is it possible to have nested MenuComponents (or a new SubMenuComponent) something like: <ul> #component(MenuComponent with "title=Home" "hover=autoselect" "link=/") #component(MenuComponent with "title=Videos" "hover=autoselect") #blockcomponent(MenuComponent with "title=VPS" "hover=autoselect" "link=/vps") #component(SubMenuComponent with "title="Plans" "hover=autoselect" "link=/vps/plans") #component(SubMenuComponent with "title="Operating Systems" "hover=autoselect" "link=/vps/os") #component(SubMenuComponent with "title="Supported Applications" "hover=autoselect" "link=/vps/apps") #end #component(MenuComponent with "title=Add-Ons" "hover=autoselect" "link=/addons") #component(MenuComponent with "title=Hosting" "hover=autoselect" "link=/hosting") #component(MenuComponent with "title=Support" "hover=autoselect" "link=/support") #component(MenuComponent with "title=News" "hover=autoselect" "link=/news") #component(MenuComponent with "title=Contact Us" "hover=autoselect" "link=/contact-us") </ul> I need to draw the sub menu (ul and li elements) inside the overridden Render method on MenuComponent, so using nested ViewComponent derivatives may not work. I would like a method keep the basically declarative method for creating menus, if at all possible.

    Read the article

  • Problem with adding and removing classes with jQuery when hovering over a list item.

    - by Andrew
    I want to add a class to a list item when I hover over it, and then remove it and add it to a different list item if a different list item is hovered over. Here's what I tried: jQuery - $(document).ready(function() { $("#results").text("Tournaments"); $("#Tournaments").addClass("box-active"); $("#box ul li").hover(function() { var show = $(this).attr('id'); $("#results").text(show); $("#box ul li").each(function() { $(this).removeClass("box-active"); }); $("#box ul li#" + show).addClass("box-active"); }); }); HTML - <div id="box"> <ul> <li id="Tournaments">Tournaments</li> <li id="Join">Join</li> <li id="Forums">Forums</li> <li id="GameBattles">GameBattles</li> <li id="Practice">Practice</li> </ul> <p>Hovering over: <span id="results"></span></p> </div> When I hover over an item, it changes the class, but if I hover over I different one it removes the class over the item I first hovered over, but doesn't add the class to the new item I'm hovering over. Not sure why, and any help would be appreciated.

    Read the article

  • Imitate Google suggest with Ajax and php

    - by phil
    I want to imitate Google suggest with the following code, which means: step 1: When user types in search box, the query string will be processed by a server php file and query suggestion string is returned(using Ajax object). step 2:When user clicks on a query suggestion, it will fill into the search box (autocomplete). Step 1 is achieved while step 2 is not. I think the problem lies in the .click() method. My intention is to use .click() binding a onclick event to the dynamically created <li> element. Any idea? <script src="jquery-1.4.2.js"> </script> <style> #search,#suggest,ul,li{margin: 0; padding:0; width: 200px;} ul{ list-style-type: none;} .border{border: solid red 1px; } </style> <p>My first language is:</p> <input type="text" width="200px" id="search" onkeyup="main(this.value)" value="" /> <ul id="suggest"></ul> <script type="text/javascript"> function main(str) { //setup Ajax object var request=new XMLHttpRequest(); request.open("GET","language.php?q="+str,true) //core function request.onreadystatechange=function() { if ( request.readyState==4 && request.status==200) { if (str=="") {$('li').remove(); $('ul').removeClass('border');return;} $('li').remove(); array=request.responseText.split(","); for (i=0;i<array.length;i++) { //create HTML element of <li> $('#suggest').append($('<li>',{id: 'li'+i, html: array[i]})); //style ul $('ul').addClass('border'); //I THINK HERE IS THE PROBLEM! $('li'+i).click(function(){ $("#search").html(array[i]);}); } } } request.send(); } </script> PHP: <?php $q=$_GET[q]; $a[]='english'; $a[]='chinese'; $a[]='japanese'; $a[]='eeeeee'; //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?>

    Read the article

  • jQuery arange li order base on #ID

    - by Mircea
    Hi, I have the following code: <ul> <li id="project_25">Proj Something</li> <li id="project_26">Proj Blah</li> <li id="project_27">Proj Else</li> <li id="project_31">Proj More</li> ... </ul> Is there a way to arrange these LIs, reverse their order, based on the LI ID? Something like: <ul> <li id="project_31">Proj More</li> <li id="project_27">Proj Else</li> <li id="project_26">Proj Blah</li> <li id="project_25">Proj Something</li> ... </ul> Thank you.

    Read the article

  • Change the output of the Html.menu() asp control .

    - by user327893
    Im creating a asp mvc application and im using a sitemap to create my menu. Is it possible to change the output of the Html.menu() asp control? normal output: <ul> <li><a href="#">Item 1</li> <li><a href="#">Item 2</li> </ul> needed output: <ul> <li><a href="#"><span>Item 1</span></li> <li><a href="#"><span>Item 2</span></li> </ul> Or should i filter true the nodes of the sitemap to get the format i want?? TY in advance:)

    Read the article

  • Adding delay to mouse out function.

    - by Wazdesign
    I have one drop down menu, <ul> <li><a>link 1</a> <ul><li><a>link 1</a></li></ul> </li> </ul> I am using the following JS to use hover and show child menus. I want to add delay to the mouse out function (when the class of the LI removed) about 500ms, $('li').hover(function(){ $(this).addClass('over'); }, function(){ $(this).removeClass('over'); }); Please do needful in this. thanks in advance

    Read the article

  • Is it possible to reference object within the same object?

    - by fudgey
    I've been messing around with jQuery plugin code and I'm trying to put all of my common variables into a single object for easy access. I have included a few examples below on how I've done this, but I'm wondering how others deal with this problem. Lets say I have this var x = function(options){ var defaults = { ulist : $('ul#list'), listLen : $('ul#list').children().length } $.extend(options, defaults); // do other stuff } What I'm trying to do is use the ulist object in as a base, then find the number of li's I guess I could do this: var x = function(options){ var defaults = { ulist : $('ul#list'), listLen : 0 } defaults.listLen = defaults.ulist.children().length; $.extend(options, defaults); // do other stuff } or this: var x = function(options){ var defaults = { ulist : $('ul#list') }; var defaults2 = { listLen : defaults.ulist.children().length } $.extend(defaults, defaults2); $.extend(options, defaults); // do other stuff } The above code samples are just thrown together, and only meant to get the idea across to you. Anyway, is there a better way to do this?

    Read the article

  • extra white line under li items that have no border

    - by isabel018
    I have a problem with extra white lines showing up under my list items. It's not a border as I haven't set any borders, except the one under My Account, it's just to show that the white line is not a border. The one under it is -- a 4px border the same color as the background. This problem occurred after I had resolved a conflict between my Nivo Slider and the Woocommerce plugin on my WP site. I got both of them to work together, but then this other issue with the list cropped up. Any ideas as to what caused this and how to fix it? Here's my CSS if that helps: #header #navigation ul.nav > li.current_page_item > a { color: #D4145A;} #header #navigation ul.nav > li:hover a { border-width: 0px 0px 4px; border-style: none none solid; border-color: -moz-use-text-color -moz-use-text-color rgb(212, 20, 90); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; background: none repeat scroll 0% 0% rgb(212, 20, 90);} and the HTML for it too: <nav id="navigation" class="col-full parent" role="navigation"> <ul id="main-nav" class="nav fl parent"> <li class="page_item"></li> <li class="page_item page-item-11"></li> <li class="page_item page-item-12"></li> <li class="page_item page-item-13 parent"></li> <li class="page_item page-item-15 current_page_item parent"> <a href=""></a> <ul class="children"></ul></li> </ul> </nav> Help please! I'm at my wits' end! Thanks!

    Read the article

  • how can I change top-margin the right way if multiple css class assigned?

    - by Radek
    I assigned these classes menu second_menu menu_about_author to ul so the html code looks like <ul class="menu second_menu menu_about_author"> I wanted this ul to have the same properties like menu and second_menu and then I wanted to move the menu_about_author little bit down. I did so by .menu_about_author { margin-top:40px; } but it didn't work any idea why the margin-top:40px; is crossed? the link to the image is [1]: http://img153.imageshack.us/img153/882/58daeef0c3c846e4a8d6321.png

    Read the article

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