Search Results

Search found 3038 results on 122 pages for 'casper li'.

Page 2/122 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • CHAT ROOMs 7 by 6

    - by user2939942
    I am looking for chatroom on one page with 7 loggedin users and 6+rows for say 42 users.these users will keep on adding wthnew users.Need urgent help.A PRETTY UNUSUAL Q FOR MOST OF U.What is MORE REQ new features: Usernames are unique to users currently chatting You can see a "currently chatting" user list There are multiple rooms for chatting <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Simpla Admin</title> <link rel="stylesheet" href="resources/css/reset.css" type="text/css" media="screen" /> <link rel="stylesheet" href="resources/css/style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="resources/css/invalid.css" type="text/css" media="screen" /> <script type="text/javascript" src="resources/scripts/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="resources/scripts/simpla.jquery.configuration.js"></script> <script type="text/javascript" src="resources/scripts/facebox.js"></script> <script type="text/javascript" src="resources/scripts/jquery.wysiwyg.js"></script> <script type="text/javascript" src="resources/scripts/jquery.datePicker.js"></script> <script type="text/javascript" src="resources/scripts/jquery.date.js"></script> <script language="JavaScript" type="text/javascript" src="suggest3.js"></script><script language="javascript"> function popitappup4() { var aid=document.a.cid.value; var url="followup.php?id="+aid; alert(url); newwindow=window.open(url,'name','height=480,width=480, scrollbars=yes'); if (window.focus) {newwindow.focus()} return false; } </script> <script type="text/javascript" src="highslide-with-html.js"></script> <link rel="stylesheet" type="text/css" href="highslide.css" /> <script type="text/javascript"> hs.graphicsDir = 'graphics/'; hs.outlineType = 'rounded-white'; hs.wrapperClassName = 'draggable-header'; </script> <link type="text/css" rel="stylesheet" media="all" href="css/chat.css" /> <link type="text/css" rel="stylesheet" media="all" href="css/screen.css" /> </head> <body onload="fnew()"><div id="body-wrapper"> <!-- Wrapper for the radial gradient background --> <div id="sidebar"> <link type="text/css" rel="stylesheet" media="all" href="css/chat.css" /> <link type="text/css" rel="stylesheet" media="all" href="css/screen.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/chat.js"></script> <script type="text/javascript"> function fnew() { document.getElementById("psearch").focus(); } </script> <div id="sidebar-wrapper"> <!-- Sidebar with logo and menu --> <h1 id="sidebar-title"><a href="#"></a></h1> <!-- Logo (221px wide) --> <a href="#"><img id="logo" src="resources/images/logo.png" alt="Simpla Admin logo" /></a> <!-- Sidebar Profile links --> <form name="frm" action="opd_view1.php"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="210"><div align="right" style="font-size:22px; color:#FFFFFF"><b>OPD Search</b></div></td> <td width="30"><div align="right"></div></td> </tr> <tr> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> </tr> <tr> <td align="right"><div align="right"> <input type="text" name="psearch" id="psearch" class="text-input" style="width:45mm;" /> </div></td> <td align="right"><div align="right"></div></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td><div align="right"></div></td> <td><div align="right"></div></td> </tr> </table> </form> <div id="profile-links"> <a href="welcome.php" title="Sign Out" style="font-size:16px" ><b> </b></a> <br /> <a href="sample.php" title="Chat">Chat</a> </div></div> <!-- End #sidebar --> <div id="main-content"> <!-- Main Content Section with everything --> <noscript> <!-- Show a notification if the user has disabled javascript --> </noscript> <div style="width:100%; height: 600px; overflow-x: scroll; scrollbar-arrow-color: blue; scrollbar-face-color: #e7e7e7; scrollbar-3dlight-color: #a0a0a0; scrollbar-darkshadow-color: #888888; background-color:#FFFFFF "> <ul class="shortcut-buttons-set"> <!-- Page Head --> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drabhinit')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drabhinit</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drvarun')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drvarun</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('sameer')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>sameer</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drchetan')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drchetan</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('neema')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>neema</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drpriya')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drpriya</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drchhavi')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drchhavi</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drsanjay')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drsanjay</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('ruchi')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>ruchi</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drarchana')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drarchana</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drshraddha')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drshraddha</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('sunita')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>sunita</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('reshma')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>reshma</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('riya')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>riya</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drritesh')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drritesh</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('rachana')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>rachana</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('sunita')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>sunita</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('kavye')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>kavye</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('paridhi')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>paridhi</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('paridhi')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>paridhi</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drsonika')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drsonika</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('anny')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>anny</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('nitansh')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>nitansh</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drekta')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drekta</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drritesh')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drritesh</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('neeraj')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>neeraj</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('neeraj')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>neeraj</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drneha')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drneha</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('kirti')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>kirti</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drratna')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drratna</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drratana')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drratana</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drnoopur')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drnoopur</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('admin k')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>admin k</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('web')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>web</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drarti')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drarti</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drsaqib')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drsaqib</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('neelesh')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>neelesh</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('pooja')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>pooja</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drneha')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drneha</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drnupur')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drnupur</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('isha')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>isha</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('isha')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>isha</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drnamrata')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drnamrata</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('ashish')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>ashish</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('ambrish')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>ambrish</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drrashmi')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drrashmi</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drsapna')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drsapna</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('manisha')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>manisha</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('Isha')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>Isha</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drrashmi')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drrashmi</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('Dr Meghna')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>Dr Meghna</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('akanksha')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>akanksha</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drashish')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drashish</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drpriya')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drpriya</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drnitya')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drnitya</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drmanoj')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drmanoj</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('sonali')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>sonali</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drkhushbu')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drkhushbu</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drpriyanka')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drpriyanka</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drabhishek')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drabhishek</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drpoonam')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drpoonam</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drprachi')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drprachi</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drpeenal')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drpeenal</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('neerajpune')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>neerajpune</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('paridhipune')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>paridhipune</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('faeem')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>faeem</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('rahul')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>rahul</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('DrNeha')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>DrNeha</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drmrigendra')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drmrigendra</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('neetu')" rel="modal" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>neetu</span></a></li> <li> <a class="shortcut-button" href="javascript:void(0)" onClick="javascript:chatWith('drriteshpawar')" rel="modal" style=" background-color:#00FF00" ><span><img src="resources/images/icons/comment_48.png" alt="icon" width="48" height="48" /> <br/>drriteshpawar</span></a></li> </ul> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/chat.js"></script> <!-- End .shortcut-buttons-set --> <div class="clear"></div> <div class="clear"></div>

    Read the article

  • Jquery Slidetoggle open 1 div and close another

    - by Stephen
    I'm trying to close one div when clicking on another div . Currently, it opens multiple divs at one time. JQUERY: $(document).ready(function() { $(".dropdown dt a").click(function() { var dropID = $(this).closest("dl").attr("id"); $("#"+dropID+" dd ul").slideToggle(200); return false; }); $(".dropdown dd ul li a").click(function() { var dropID = $(this).closest("dl").attr("id"); var text = $(this).html(); var selVal = $(this).find(".dropdown_value").html(); $("#"+dropID+" dt a").html(text); $("#"+dropID+" dd ul").hide(); return false; }); $("dl[class!=dropdown]").click(function() { $(".dropdown dd ul").hide(); return false; }); $("id!=quotetoolContainer").click(function() { $(".dropdown dd ul").hide(); return false; }); $('body').click(function() { $(".dropdown dd ul").hide(); return false; }); $('.productSelection').children().hover(function() { $(this).siblings().stop().fadeTo(200,0.5); }, function() { $(this).siblings().stop().fadeTo(200,1); }); }); HTML: <div id="quotetoolContainer"> <div class="top"></div> <div id="quotetool"> <h2>Instant Price Calculator</h2> <p>Document Type</p> <dl id="docType" class="dropdown"> <dt><a href="#"><span>Select a Document Type</span></a></dt> <dd> <ul> <li><a href="#" id="1">Datasheets<span class="value">Datasheets</span></a></li> <li><a href="#">Manuals<span class="value">Manuals</span></a></li> <li><a href="#">Brochures<span class="value">Brochures</span></a></li> <li><a href="#">Newsletters<span class="value">Newsletters</span></a></li> <li><a href="#">Booklets<span class="value">Booklets</span></a></li> </ul> </dd> </dl> <p>Flat Size</p> <dl id="flatSize" class="dropdown"> <dt><a href="#">8.5" x 11"<span class="value">8.5" x 11"</span></a></dt> <dd> <ul> <li><a href="#">8.5" x 11"<span class="value">8.5" x 11"</span></a></li> <li><a href="#">11" x 17"<span class="value">11" x 17"</span></a></li> </ul> </dd> </dl> <p>Full Color or Black &amp; White?</p> <dl id="color" class="dropdown"> <dt><a href="#">Full Color<span class="value">Full Color</span></a></dt> <dd> <ul> <li><a href="#">Full Color<span class="value">Full Color</span></a></li> <li><a href="#">Black &amp; White<span class="value">Black &amp; White</span></a></li> </ul> </dd> </dl> <p>Paper</p> <dl id="paper" class="dropdown"> <dt><a href="#">Value White Paper (20 lb.)<span class="value">Value White Paper (20 lb.)</span></a></dt> <dd> <ul> <li><a href="#">Value White Paper (20 lb.)<span class="value">Value White Paper (20 lb.)</span></a></li> <li><a href="#">Premium White Paper (28 lb.)<span class="value">Premium White Paper (28 lb.)</span></a></li> <li><a href="#">Glossy White Text (80 lb.) - Recycled<span class="value">Glossy White Text (80 lb.) - Recycled</span></a></li> <li><a href="#">Glossy White Cover (80 lb.) - Recycled<span class="value">Glossy White Cover (80 lb.) - Recycled</span></a></li> </ul> </dd> </dl> <p>Folding</p> <dl id="folding" class="dropdown"> <dt><a href="#">Fold in Half<span class="value">Fold in Half</span></a></dt> <dd> <ul> <li><a href="#">Fold in Half<span class="value">Fold in Half</span></a></li> <li><a href="#">Tri-Fold<span class="value">Tri-Fold</span></a></li> <li><a href="#">Z-Fold<span class="value">Z-Fold</span></a></li> <li><a href="#">Double-Parallel Fold<span class="value">Double-Parallel Fold</span></a></li> </ul> </dd> </dl> <p>Three-Hole Drill</p> <dl id="drill" class="dropdown"> <dt><a href="#">No<span class="value">No</span></a></dt> <dd> <ul> <li><a href="#">No<span class="value">No</span></a></li> <li><a href="#">Yes<span class="value">Yes</span></a></li> </ul> </dd> </dl> <p>Qty</p> <dl id="quantity" class="dropdown"> <dt><a href="#">50<span class="value">50</span></a></dt> <dd> <ul> <li><a href="#">50<span class="value">50</span></a></li> <li><a href="#">100<span class="value">100</span></a></li> <li><a href="#">150<span class="value">150</span></a></li> <li><a href="#">200<span class="value">200</span></a></li> <li><a href="#">250<span class="value">250</span></a></li> <li><a href="#">500<span class="value">500</span></a></li> <li><a href="#">750<span class="value">750</span></a></li> <li><a href="#">1,000<span class="value">1,000</span></a></li> <li><a href="#">1,500<span class="value">1,500</span></a></li> <li><a href="#">2,000<span class="value">2,000</span></a></li> <li><a href="#">2,500<span class="value">2,500</span></a></li> <li><a href="#">3,000<span class="value">3,000</span></a></li> <li><a href="#">3,500<span class="value">3,500</span></a></li> <li><a href="#">4,000<span class="value">4,000</span></a></li> <li><a href="#">4,500<span class="value">4,500</span></a></li> <li><a href="#">5,000<span class="value">5,000</span></a></li> <li><a href="#">5,500<span class="value">5,500</span></a></li> <li><a href="#">6,000<span class="value">6,000</span></a></li> <li><a href="#">6,500<span class="value">6,500</span></a></li> <li><a href="#">7,000<span class="value">7,000</span></a></li> <li><a href="#">7,500<span class="value">7,500</span></a></li> <li><a href="#">8,000<span class="value">8,000</span></a></li> <li><a href="#">8,500<span class="value">8,500</span></a></li> <li><a href="#">9,000<span class="value">9,000</span></a></li> <li><a href="#">9,500<span class="value">9,500</span></a></li> <li><a href="#">10,000<span class="value">10,000</span></a></li> <li><a href="#">12,500<span class="value">12,500</span></a></li> <li><a href="#">15,000<span class="value">15,000</span></a></li> <li><a href="#">17,500<span class="value">17,500</span></a></li> <li><a href="#">20,000<span class="value">20,000</span></a></li> </ul> </dd> </dl> <div id="priceTotal"> <div class="priceText">Your Price:</div> <div class="price">$29.00</div> <div class="clear"></div> </div> <div id="buttonQuoteStart"><a href="#" title="Start Printing">Start Printing</a></div> </div> <div class="bottom"></div> </div>

    Read the article

  • jQuery hover menu not disappearing

    - by Nathan Loding
    I have a basic menu using some nested UL's, which is pretty standard I think. When hovering over an LI from the "root" menu, I want the UL within that LI to display. Move the mouse off or to another LI, it shows that submenu. Move down to the submenu and it stays while you hover over each element. I had it working with a simple jQuery.hover() set, but then I ran into issues. When on a page, the "root" menu item is given a class of 'current-page' and if that class exists, I want it to display that submenu statically after a mouseout. Hope I explained that well enough. I just tossed a variable into the hover functions so on the mouseout it ran a .show() on the current-page's submenu. Easy. Except that when I move the mouse between the individual LI's of the submenu, it changes back to the current-page submenu. So I attempted to add a timer element based on another question here. That made things worse -- now the submenus just don't disappear. Here's my CSS, markup, and JS ... how the heck do I make this work properly? Markup: <div id="menu"> <div id="navbar"> <ul id="firstmenu"> <li> <a href="http://localhost/site/pageone">page one</a> <ul class="submenu"> <li><a href="http://localhost/site/pageone/subone">subone</a></li> <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> </ul> </li> <li> <a href="http://localhost/site/pagetwo">barely there</a> <ul class="submenu"> <li><a href="http://localhost/site/pageone/subone">subone</a></li> <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> </ul> </li> <li class="current-page"> <a href="http://localhost/site/pagetwo">kith & kin</a> <ul class="submenu"> <li><a href="http://localhost/site/pageone/subone">subone</a></li> <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> </ul> </li> <li> <a href="http://localhost/site/pagethree">focal point</a> <ul class="submenu"> <li><a href="http://localhost/site/pageone/subone">subone</a></li> <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> </ul> </li> <li> <a href="http://localhost/site/pagefour">products</a> <ul class="submenu"> <li><a href="http://localhost/site/pageone/subone">subone</a></li> <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> </ul> </li> <li> <a href="http://localhost/site/pagefive">clients</a> </li> </ul> </div></div> And here's the CSS: #navbar { margin: 0; padding: 0; border: 0; text-align: center; } #firstmenu { margin: 6px auto 0 auto; font-size: 16px; list-style-type: none; letter-spacing: -1px; } #firstmenu li { display: inline; position:relative; overflow: hidden; text-align: center; margin-right: 10px; padding: 5px 15px; } #firstmenu a { text-decoration: none; outline: none; color: black; font-weight: 700; width: 75px; cursor: pointer; } .current-page { color: white; background: url(../images/down_arrow.png) bottom center no-repeat; } .current-page a { color: white; border-bottom: 1px solid black; } #firstmenu .current-page a { color: white; } #firstmenu li.hover { color: white; background: url(../images/down_arrow.png) bottom center no-repeat; } #firstmenu li.hover a { color: white; border-bottom: 1px solid black; } #firstmenu li ul li.hover { color: white; background: none; } #firstmenu li ul li.hover a { color: white; border-bottom: none; text-decoration: underline; } #firstmenu li ul { width: 900px; color: white; font-size: .8em; margin-top: 3px; padding: 5px; position: absolute; display: none; } #firstmenu li ul li { list-style: none; display: inline; width: auto; } #firstmenu li ul li a { color: white; font-weight: normal; border: none; } .sub-current-page { font-weight: bold; text-decoration: underline; } #firstmenu li ul li.sub-current-page a { font-weight: bold; } And lastly, my not-at-all-working JS (this is in a $(document).ready(), of course): // Initialize some variables var hideSubmenuTimer = null; var current_page; $('.current-page ul:first').show(); // Prep the menu $('#firstmenu li').hover(function() { // Clear the timeout if it exists if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); } // Check if there's a current-page class set if($('li.current-page').length > 0) { current_page = $('li.current-page'); } else { current_page = false; } // If there's a current-page class, hide it if(current_page) { current_page.children('ul:first').hide(); } // Show the new submenu $(this).addClass('hover').children('ul:first').show(); }, function(){ // Just in case var self = this; // Clear the timeout if it exists if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); } // Check if there's a current-page class set if($('li.current-page').length > 0) { current_page = $('li.current-page'); } else { current_page = false; } // Set a timeout on hiding the submenu hideSubmenuTimer = setTimeout(function() { // Hide the old submenu $(self).removeClass('hover').children('ul').hide(); // If there's a current-page class, show it if(current_page) { current_page.children('ul:first').show(); current_page.css('color', 'white'); } }, 500); }); So what am I doing so wrong? As a side note, I'm using the $('.current-page ul:first').show() because if I gave .current-page any "display" setting in the CSS, it positioned it really weirdly on the page.

    Read the article

  • jQuery wrap code after x number of elements

    - by Al
    Hi all - I have a UL that contain any number of LIs. I am trying to create some jQuery code that will parse the original UL and wrap a UL and another LI after every 5 of the original LIs. Starting HTML: <ul id="original_ul"> <li class="original_li">..</li> <li>..</li> <li>..</li> <li>..</li> <li>..</li> <li>..</li> <li>..</li> <li>..</li> <li>..</li> <li>..</li> </ul> Required HTML: <ul id="processed_ul"> <li class="new_wrap_li"> <ul class="new_wrap_ul"> <li class="original_li">..</li> <li>..</li> <li>..</li> <li>..</li> <li>..</li> </ul><!-- end new wrap ul --> </li><!-- end new wrap li --> <li class="new_wrap_li"> <ul class="new_wrap_ul"> <li class="original_li">..</li> <li>..</li> <li>..</li> <li>..</li> <li>..</li> </ul><!-- end new wrap ul --> </li><!-- end new wrap li --> </ul><!-- end processed ul --> I've been using the .each function to go through the LIs and append them to the new processed ul held inside a temp div... now I just need to wrap the new LI and UL around every 5 LIs. Thanks in advance!! Al

    Read the article

  • Hiding elements based on last closed element jquery script

    - by Jared
    Hi my question is, how can I make this jquery script close all previously opened children when entering a new parent? At the moment it traverses thru all the tree structure fine, but switching from one parent to another does not close the previous children, but rather only the each individual parents elements as a user browses. Here is the jquery I'm using: <script type="text/javascript"> $(document).ready($(function(){ $('#nav>li>ul').hide(); $('.children').hide(); $('#nav>li').mousedown(function(){ // check that the menu is not currently animated if ($('#nav ul:animated').size() == 0) { // create a reference to the active element (this) // so we don't have to keep creating a jQuery object $heading = $(this); // create a reference to visible sibling elements // so we don't have to keep creating a jQuery object $expandedSiblings = $heading.siblings().find('ul:visible'); if ($expandedSiblings.size() > 0) { $expandedSiblings.slideUp(0, function(){ $heading.find('ul').slideDown(0); }); } else { $heading.find('ul').slideDown(0); } } }); $('#nav>li>ul>li').mousedown(function(){ // check that the menu is not currently animated if ($('#nav ul:animated').size() == 0) { // create a reference to the active element (this) // so we don't have to keep creating a jQuery object $heading2 = $(this); // create a reference to visible sibling elements // so we don't have to keep creating a jQuery object $expandedSiblings2 = $heading2.siblings().find('.children:visible'); if ($expandedSiblings2.size() > 0) { $expandedSiblings2.slideUp(0, function(){ $heading2.find('.children').slideDown(0); }); } else { $heading2.find('.children').slideDown(0); } } }); })); </script> and here is my html output <ul id="nav"> <li><a href="#">folder 4</a> <ul><li><a href="#">2001</a> <ul><li class="children"><a href="./directory//folder 4/2001/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder 4/2001/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder 4/2001/doc3.txt">doc3.txt</a></li> </ul> </li> <li><a href="#">2002</a> <ul><li class="children"><a href="./directory//folder 4/2002/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder 4/2002/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder 4/2002/doc3.txt">doc3.txt</a></li> <li class="children"><a href="./directory//folder 4/2002/doc4.txt">doc4.txt</a></li> </ul> </li> <li><a href="#">2003</a> <ul><li class="children"><a href="./directory//folder 4/2003/Copy of doc1.txt">Copy of doc1.txt</a></li> <li class="children"><a href="./directory//folder 4/2003/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder 4/2003/doc2.txt">doc2.txt</a></li> </ul> </li> <li><a href="#">2004</a> <ul><li class="children"><a href="./directory//folder 4/2004/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder 4/2004/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder 4/2004/doc3.txt">doc3.txt</a></li> <li class="children"><a href="./directory//folder 4/2004/doc4.txt">doc4.txt</a></li> </ul> </li> </ul> </li> <li><a href="#">folder1</a> <ul><li><a href="#">2001</a> <ul><li class="children"><a href="./directory//folder1/2001/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder1/2001/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder1/2001/doc3.txt">doc3.txt</a></li> </ul> </li> <li><a href="#">2002</a> <ul><li class="children"><a href="./directory//folder1/2002/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder1/2002/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder1/2002/doc3.txt">doc3.txt</a></li> <li class="children"><a href="./directory//folder1/2002/doc4.txt">doc4.txt</a></li> </ul> </li> <li><a href="#">2003</a> <ul><li class="children"><a href="./directory//folder1/2003/Copy of doc1.txt">Copy of doc1.txt</a></li> <li class="children"><a href="./directory//folder1/2003/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder1/2003/doc2.txt">doc2.txt</a></li> </ul> </li> <li><a href="#">2004</a> <ul><li class="children"><a href="./directory//folder1/2004/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder1/2004/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder1/2004/doc3.txt">doc3.txt</a></li> <li class="children"><a href="./directory//folder1/2004/doc4.txt">doc4.txt</a></li> </ul> </li> </ul> </li> <li><a href="#">folder2</a> <ul><li><a href="#">2001</a> <ul><li class="children"><a href="./directory//folder2/2001/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder2/2001/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder2/2001/doc3.txt">doc3.txt</a></li> </ul> </li> <li><a href="#">2002</a> <ul><li class="children"><a href="./directory//folder2/2002/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder2/2002/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder2/2002/doc3.txt">doc3.txt</a></li> <li class="children"><a href="./directory//folder2/2002/doc4.txt">doc4.txt</a></li> </ul> </li> <li><a href="#">2003</a> <ul><li class="children"><a href="./directory//folder2/2003/Copy of doc1.txt">Copy of doc1.txt</a></li> <li class="children"><a href="./directory//folder2/2003/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder2/2003/doc2.txt">doc2.txt</a></li> </ul> </li> <li><a href="#">2004</a> <ul><li class="children"><a href="./directory//folder2/2004/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder2/2004/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder2/2004/doc3.txt">doc3.txt</a></li> <li class="children"><a href="./directory//folder2/2004/doc4.txt">doc4.txt</a></li> </ul> </li> </ul> </li> <li><a href="#">folder3</a> <ul><li><a href="#">2001</a> <ul><li class="children"><a href="./directory//folder3/2001/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder3/2001/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder3/2001/doc3.txt">doc3.txt</a></li> </ul> </li> <li><a href="#">2002</a> <ul><li class="children"><a href="./directory//folder3/2002/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder3/2002/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder3/2002/doc3.txt">doc3.txt</a></li> <li class="children"><a href="./directory//folder3/2002/doc4.txt">doc4.txt</a></li> </ul> </li> <li><a href="#">2003</a> <ul><li class="children"><a href="./directory//folder3/2003/Copy of doc1.txt">Copy of doc1.txt</a></li> <li class="children"><a href="./directory//folder3/2003/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder3/2003/doc2.txt">doc2.txt</a></li> </ul> </li> <li><a href="#">2004</a> <ul><li class="children"><a href="./directory//folder3/2004/doc1.txt">doc1.txt</a></li> <li class="children"><a href="./directory//folder3/2004/doc2.txt">doc2.txt</a></li> <li class="children"><a href="./directory//folder3/2004/doc3.txt">doc3.txt</a></li> <li class="children"><a href="./directory//folder3/2004/doc4.txt">doc4.txt</a></li> </ul> </li> </ul> </li> </ul> I assume my problem is, jquery isn't closing the children between each new parent so I need to make a call, but I'm a bit lost on how to do that. I know the code is pretty messy, this project was done in a huge rush and a very tight timeframe. Appreciate your answers and any other constructive comments, cheers :)

    Read the article

  • Suckerfish Menu Not Working. Nested UL not displaying block

    - by Brett
    I'm going out of my mind with this one. I'm trying to build a suckerfish css drop down menu. I have the first level working ok but I can't get the nested ul (under the Glossary tab) to display in block format and show my a background color. I've been at this for three days and I'm about to go crazy. If anyone can help I'd really appreciate it. You can see it here: www.brettlockhart.com/blast/ body { min-width:640px; margin:0px; padding:0px 40px 0px 40px; background-color:#eee; } /*Nav One styles*/ nav#navOne ul { width:100%; min-width:640px; height:25px; margin:0px auto; padding:0px; background-image:url(/blast/images/navOneBg.png); border-radius:0px 0px 8px 8px; text-align:right; float:right; } nav#navOne ul li { position:relative; display:inline; margin: 0px 0px 0px 10px auto; padding:3px 0px; border-left:1px #0b4c8f solid; line-height:23px; } nav#navOne ul li:last-child { margin-right:10px; } .arrowDown { margin: auto; font-family:Tahoma, Geneva, sans-serif; font-size:.7em; color:#FFF; padding: 0px 5px 0px 0px; } nav#navOne ul li a { margin: 0px auto; padding: 4px 10px 4px 15px; font-family:Tahoma, Geneva, sans-serif; font-size:.7em; color:#FFF; border-left:1px #5d9ee0 solid; text-decoration:none; line-height:23px; } /*Nav One rollover*/ nav#navOne ul li ul { display:none; background-image:none; } nav#navOne ul li:hover ul { display:block !important; } nav#navOne ul li:hover nav#navOne ul li ul li { background-color:#69C !important; left:0px; top:26px; z-index:10; } h1 { float:left; width:158px; text-indent:-9999px; background-image:url(/blast/images/logo.png); background-repeat:no-repeat; } #search { float:right; width:280px; margin:0px; padding:0px; } /*Nav Two styles*/ nav#navTwo h3 { display:inline; } nav#navTwo ul { width:100%; height:50px; margin:0 auto; padding:0px; border:1px solid red; clear:both; } nav#navTwo ul li { display:inline; border: 1px solid green; margin-top:20px; } <header> <nav id="navOne"> <ul> <li><a href="#">Sign In</a></li> <li><a href="#">Register</a></li> <li><a href="#">Print Page</a></li> <li id="glossary"><a href="#">Glossary</a> <ul> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> </ul> </li> <li><a href="#">Text Size: A A A</a></li> <li><a href="#">Select Your Location</a> <span class="arrowDown">&#x2C5;</span></li> </ul> </nav><!--/navOne--> <h1>Logo</h1> <div id="search"> <form action="?" method="get"> <fieldset> <input type="text" id="searchField"> <input type="submit" id="searchSubmit" value="Submit"> Search:<label for="radioHere">here</label> <input type="radio" id="radioHere" name="here" value="here"> <label for="radioWeb">the web</label> <input type="radio" id="radioWeb" name="the web" value="the web"> </fieldset> </form> </div><!--/search--> <nav id="navTwo"> <ul> <li><h3>Residential:</h3></li> <li>TV</li> <li>Internet</li> <li>Phone</li> <li>Pricing</li> <li class="navTwoSelected">Music</li> <li>Order</li> <li>Billing</li> <li>Support</li> <li>|</li> <li>Business</li> <li>About Us</li> </ul> </nav><!--/navTwo--> <nav id="navThree"> <ul> <li>Today</li> <li>Watch</li> <li>Surf</li> <li>Play</li> <li class="navThreeSelected">Listen</li> <li>Learn</li> <li>Local</li> </ul> <h3>Tools:</h3> <ul> <li>Webmail</li> <li>Account</li> <li>Billing</li> <li>Order Services</li> </ul> </nav><!--/navThree--> <nav id="navFour"> <h3>Your are here:</h3> <ul id="breadcrumbs"> <li>Residential ></li> <li>My Place ></li> <li>Listen ></li> <li class="currentPage">Music</li> </ul> </nav><!--/navFour--> </header>

    Read the article

  • how to insert a new li tag at the specified lication?

    - by Amit
    Hi I wanted to insert a li tag in the middle of a list of li tags based on a css class set to the li tag using jQuery. Consider the following <ul class="myList"> <li><a href="#">test 1</a></li> <li class="active"><a href="#">test 2</a></li> <li><a href="#">test 3</a></li> <li><a href="#">test 4</a></li> <li><a href="#">test 5</a></li> <li><a href="#">test 6</a></li> </ul> I wanted to insert a new li tag after the li tag set to active. So the output will be like this. <ul class="myList"> <li><a href="#">test 1</a></li> <li class="active"><a href="#">test 2</a></li> <li><a href="#">My new Tag</a></li> <li><a href="#">test 3</a></li> <li><a href="#">test 4</a></li> <li><a href="#">test 5</a></li> <li><a href="#">test 6</a></li> </ul> I tried with .appendTo, .insertAfter, .append etc. but could not get the result I wanted. Any idea how this can be achieved?

    Read the article

  • HTML/jQuery/CSS Drop Down Menu Issue / Safari

    - by mmundiff
    I have a drop down menu that is coded in HTML, CSS, and jQuery and it works fine in Firefox and IE but not in Safari, and also not in Firefox on Mac. The drop down displays inline as opposed to list-item for the drop down in Safari. Any ideas why? <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function(){ $('#menu li').hover( function() { //$('ul', this).css('display', 'block'); $('ul', this).fadeIn(200); var src = $('img.item', this).attr('src').match(/[^\.]+/) + '_over.png'; $('img.item', this).attr('src', src); }, function() { //$('ul', this).css('display', 'none'); $('ul', this).fadeOut(350); var src = $('img.item', this).attr('src').replace('_over', ''); $('img.item', this).attr('src', src); }); }); </script> <style type="text/css"> /* General */ body { arial, sans-serif; background-color: white; } * { padding: 0; margin: 0; } #menu{ white-space:nowrap; list-style:none; margin-left: 1px; } #menu ul { list-style: none; position:absolute; left:0; display:none; margin:0 -3px 0 -1px; padding:0; background: #000000; z-index: 500; margin-top: -4px; } #menu li{ display:inline; float: left; /* Added */ position:relative; } #menu li a { display: block; } #menu ul li { width:116px; float:left; border-top:1px dotted #666666; display: block; } #menu li ul { display: none; border-top: 1px black solid; text-align: left; } #menu ul a:hover { text-decoration:none; background: #efda83; color: #000000; } #menu ul a { text-decoration:none; display:block; height:15px; padding: 8px 5px; color:#efda83; font-size: 12px; } img{ border: 0 none; } .clear{ clear: both; } </style> </head> <body> <div> <ul id="menu"> <li ><a href="index.php"><img src="images/ssr_nav_home.png" class="item" alt="Home" /></a> </li> <li ><a href="about.php"><img src="images/ssr_nav_about.png" class="item" alt="About" /></a> <ul> <li><a href="about_contributors.php">Contributors</a></li> <li><a href="about_behind.php">Behind the Exhibit</a></li> <li><a href="about_sponsors.php">Sponsors</a></li> </ul> <div class="clear"></div> </li> <li ><a href="exhibit_intro.php"><img class="item" src="images/ssr_nav_exhibit.png" alt="Exhibit" /></a> <ul> <li><a href="exhibit_intro.php">Intro</a></li> <li><a href="exhibit_silkroad.php">Silk Road</a></li> <li><a href="exhibit_western_regions.php">Western Regions</a></li> <li><a href="exhibit_daily_life.php">Daily Life</a></li> <li><a href="exhibit_burial_practices.php">Burial Practices</a></li> <li><a href="exhibit_relevance.php">Relevance</a></li> </ul> <div class="clear"></div> </li> <li ><a href="visit.php"><img class="item" src="images/ssr_nav_visit.png" alt="Visit" /></a> <ul> <li><a href="visit_tickets.php">Tickets</a></li> <li><a href="visit_specials.php">Special Offers</a></li> <li><a href="visit_tours.php">Tours</a></li> <li><a href="visit_groups.php">Groups</a></li> </ul> <div class="clear"></div> </li> <li ><a href="events.php"><img class="item" src="images/ssr_nav_events.png" alt="Events" /></a> <ul> <li><a href="events_lectures.php">Lecture Series</a></li> <li><a href="events_symposium.php">Symposium</a></li> <li><a href="kids_and_family.php">Kids &amp; Family</a></li> <li><a href="events_calendar.php">Event Calendar</a></li> </ul> <div class="clear"></div> </li> <li ><a href="gallery.php"><img class="item" src="images/ssr_nav_images.png" alt="Gallery" /></a></li> <li ><a href="resources.php"><img class="item" src="images/ssr_nav_resources.png" alt="Resources" /></a> <ul> <li><a href="resources_teachers.php">For Teachers</a></li> <li><a href="kids_and_family.php">Kids &amp; Family</a></li> <li><a href="http://www.penn.museum/podcasts-and-videos/819-secrets-of-the-silk-road.html" rel="external">Podcasts &amp; Videos</a></li> <!-- <li><a href="map.php">Silk Road Map</a></li> <li><a href="resources_timeline.php">Timeline</a></li> --> <li><a href="resources_quiz.php">Quiz</a></li> <li><a href="glossary.php">Glossary</a></li> <li><a href="blogs.php">Blog</a></li> </ul> <div class="clear"></div> </li> <li ><a href="press.php"><img class="item" src="images/ssr_nav_press.png" alt="Press" /></a> <ul> <li><a href="press_release.php">Press Release</a></li> <li><a href="press_images.php">Press Images</a></li> <li><a href="press_bloggers.php">Bloggers</a></li> </ul> <div class="clear"></div> </li> </ul> </div> </body> </html>

    Read the article

  • jQuery UI get the sorted position of LI element in UL

    - by PeterBZ
    I'm using jQuery UI's sortable for my UL list. Each time the user sorts the list, I want each li element to update it's "position" attribute to it's position in the list. <ul> <li position="1">a</li> <li position="2">b</li> <li position="3">c</li> </ul> So when a user swaps c with a, the position will also update. I tried to use .each but it seems that javascript doesn't follow the order of how the LI elements are displayed but the order of the element's creation.

    Read the article

  • Chrome trims the last <li> element in a row [closed]

    - by Paul
    Ok guys, I give up. Here's the code I'm struggling with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Blah</title> <style type="text/css"> #container { margin: 0 auto; width: 350px; border: 1px solid #ccc; } ul { list-style-type: none; margin: 0; padding: 0; text-align: center; } ul li { display: inline; padding: 5px; margin: 0 1px; background-color: lime; line-height: 2em; /* border: 1px solid red; */ } </style> </head> <body> <div id="container"> <ul> <li>Element A</li> <li>Element B</li> <li>Element C</li> <li>Element D</li> <li>Element E</li> <li>Element F</li> </ul> </div> </body> </html> Why the heck does Chrome trim the right side of "Element D" (even though there is enough space to display whole item), while Firefox and even Internet Explorer render this code properly? It becomes more visible when we apply the commented border. In other words, is there a way to tell the browser that I want every single <li> element to be autonomic, and thus to move it to the next row if it doesn't fit entirely in the previous one? Can't wait to see the solution, thanks in advance.

    Read the article

  • Can casper use a squashfs in the initrd?

    - by Max Brustkern
    I've built a very large initrd containing a full squashfs from a desktop image, and used it to boot a machine over PXE. Unfortunately, casper cannot seem to locate the squashfs, since it's not present on any of the block devices it scans. Is there some way I can force it to check the initrd, or point to a filesystem location there in the bootfrom parameter? I've tried using bootfrom=/ with the casper directory in the root of the initrd, and that didn't seem to work.

    Read the article

  • regexp target last main li in list

    - by veilig
    I need to target the starting tag of the last top level LI in a list that may or may-not contain sublists in various positions - without using CSS or Javascript. Is there a simple/elegant regexp that can help with this? I'm no guru w/ them, but it appears the need for greedy/non-greedy selectors when I'm selecting all the middle text (.*) / (.+) changes as nested lists are added and moved around in the list - and this is throwing me off. $pattern = '/^(<ul>.*)<li>(.+<\/li><\/ul>)$/'; $replacement = '$1<li id="lastLi">$3'; Perhaps there is an easier approach?? converting to XML to target the LI and then convert back? ie: Single Element <ul> <li>TARGET</li> </ul> Multiple Elements <ul> <li>foo</li> <li>TARGET</li> </ul> Nested Lists before end <ul> <li> foo <ul> <li>bar</li> </ul> <li> <li>TARGET</li> </ul> Nested List at end <ul> <li>foo</li> <li> TARGET <ul> <li>bar</li> </ul> </li> </ul>

    Read the article

  • Problem with jQuery plugin TinySort

    - by Volmar
    I'm trying to sort a list with the help of jQuery and the TinySort-plugin, and it works good but one thing is not working as i want. My Code is: <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>TinySort problem</title> <script type="text/javascript" src="http://so.volmar.se/www/js/jquery.js"></script> <script type="text/javascript" src="http://so.volmar.se/www/js/jquery.tinysort.min.js"></script> <script type="text/javascript"> function pktsort(way){ if($("div#paket>ul>li.sortdiv>a#s_abc").text() == "A-S"){ $("div#paket>ul>li.sortdiv>a#s_abc").text("S-A"); $("div#paket ul li.sortable").tsort("",{place:"org",returns:true,order:"desc"}); }else{ $("div#paket>ul>li.sortdiv>a#s_abc").text("A-S"); $("div#paket ul li.sortable").tsort("",{place:"org",returns:true,order:"asc"}); } } </script> </head> <body> <div id="paket" title="Paket"> <ul class="rounded"> <li class="sortdiv">Sort: <a href="#" onclick="pktsort();" class="active_sort" id="s_abc">A-S</a></li> <li class="sortable">Almost Famous</li> <li class="sortable">Children of Men</li> <li class="sortable">Coeurs</li> <li class="sortable">Colossal Youth</li> <li class="sortable">Demonlover</li> <li class="sortable">Femme Fatale</li> <li class="sortable">I'm Not There</li> <li class="sortable">In the City of Sylvia</li> <li class="sortable">Into the Wild</li> <li class="sortable">Je rentre à la maison</li> <li class="sortable">King Kong</li> <li class="sortable">Little Miss Sunshine</li> <li class="sortable">Man on Wire</li> <li class="sortable">Milk</li> <li class="sortable">Monsters Inc.</li> <li class="sortable">My Winnipeg</li> <li class="sortable">Ne touchez pas la hache</li> <li class="sortable">Nói albinói</li> <li class="sortable">Regular Lovers</li> <li class="sortable">Shaun of the Dead</li> <li class="sortable">Silent Light</li> <li class="addmore"><b>This text is not supposed to move</b></li> </ul> </div> </body> </html> you can try it out at: http://www.volmar.se/list-prob.html MY PROBLEM IS: I don't want the <li class="addmore"> to move above all the <li class="sortable">-elements when i press the sort-link. i wan't it to always be in the bottom. you can find documentation of the TinySort plugin here. i've tried loads of combinations with place and returns propertys but i just can't get it right.

    Read the article

  • need to align part of list item to right of li - using CSS3 Jquery column-layout

    - by Brad
    Using this jquery script to acheive CSS3 3-columns, to display a list of members alphabetically. I need it to display this way, which is does: A D B E C F Here is what I am using http://www.csscripting.com/css-multi-column/example6.php? (using this js file http://www.csscripting.com/js/v1.0beta/css3-multi-column.js) To the right of each member, it has their phone extension, which I want to float to the right, so it easy to read. I tried putting the phone extension within a div and span and when I do that, it tends to screw up at the last item in each column, by placing the person's name correctly, but their extension is the very first item in the next column. Screenshot: http://cl.ly/fq4 of what it is doing HTML Code: <div class="Article3Col"> <ul> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> </ul> </div> CSS: .Article3Col { column-count:3; } Any help is appreciated.

    Read the article

  • css ul li gap in ie7

    - by Gidon
    I have a css ul li nested menu that works perfectly in ie 8 and firefox but in ie7 it produces a small gap between the elements. this is my css: #nav, #nav ul { margin: 0; padding: 0; list-style-type: none; list-style-position: outside; position:static;/*the key for ie7*/ line-height: 1.5em; } #nav li { float: inherit; position: relative; width: 12em; } #nav ul { position: absolute; width: 12em; top: 1.5em; display: none; left: auto; } #nav a:link, #nav a:active, #nav a:visited { display: block; padding: 0px 5px; border: 1px solid #258be8; /*#333;*/ color: #fff; text-decoration: none; background-color: #258be8; /*#333;*/ } #nav a:hover { background-color: #fff; color: #333; } #nav ul li a { display: block; top: -1.5em; position: relative; width: 100%; overflow: auto; /*force hasLayout in IE7 */ right: 12em; padding:0.5em; } #nav ul ul { position: absolute; } #nav ul li ul { right: 13em; margin: 0px 0 0 10px; top: 0; position: absolute; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display: none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display: block; } #nav li { background: url(~/Scripts/ourDDL/ddlArrow.gif) no-repeat center left; } #divHead, #featuresDivHead { padding: 5px 10px; width: 12em; cursor: pointer; position: relative; background-color: #99ccFF; margin: 1px; } /* Holly Hack for IE \*/ * html #nav li { float: left; height: 1%; } * html #nav li a { height: 1%; } /* End */ and here is an example for a menu: <ul id='nav'><li><a href="#">Bookstore Online</a></li> <li><a href="#">Study Resources</a></li> <li><a href="#">Service Information</a></li> <li><a href="#">TV Broadcast</a></li> <li><a href="#">Donations</a></li></ul>

    Read the article

  • jquery selecting all last elements of an nested tree menu unordered list...not just the :last-child.

    - by Ronedog
    I'm having some trouble figuring this out. I have an unordered list menu that I want to style all the last elements with a folder icon and style all the expandable (parent) elements with a plus.gif image. I wanted to simply change the class by using .addclass() using jquery, which will contain the css to add the background-image. My jquery code below is only selecting the ":last-child", which is placing a folder icon on the last element in the list. i need to place a folder icon in front of all the "li's" that don't hav any children, and place a plus icon in front of all those that do have children. Is there a way to accomplish this? Here's my HTML: <ul id="nav"> <li>Heading 1 <ul> <li>Sub page A <ul> <li>Sub page A - 1 <ul> <li>A - 1: 0</li> <li>A - 1: 1</li> <li>A - 1: 2</li> </ul> </li> <li>Sub page A - 3</li> <li>Sub page A - 2</li> </ul> </li> <li>Sub page B</li> <li>Sub page C <ul> <li>Sub page C - 1 <ul> <li>C - 1: 0</li> <li>C - 1: 1</li> <li>C - 1: 2</li> </ul> </li> <li>Sub page C - 3</li> <li>Sub page C - 2</li> </ul> </li> </ul> </li> <li>Heading 2 <ul> <li>Sub page D</li> <li>Sub page E</li> <li>Sub page F</li> </ul> </li> <li>Heading 3 <ul> <li>Sub page G</li> <li>Sub page H</li> <li>Sub page I</li> </ul> </li> </ul> Here's the jquery code: $(function(){ //add class to last item in each list $('#nav li').find('li:last').addClass('menu_last_child'); });

    Read the article

  • click li, go to next li

    - by steve
    Can't find a simple solution to this, I know it's easy and I've tried a few things but I can't quite get it to work. I'm currently working with a sidescrolling site and I want every time you click an image (contained in an li) it scrolls to the next li. I have jQuery plugin localscroll so it smoothly goes from one to the next, and that's working. I need to now write a code that triggers jQuery to utilize the localscroll function and go to the next li. Right now I have this, but I know it's not right: $(document).ready(function () { var gallery = $('.wrapper ul li') $(gallery).click(function() { $.localscroll().next(li); }); });

    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

  • Why isn't this javascript with else if working?

    - by Uni
    I'm sorry I can't be any more specific - I have no idea where the problem is. I'm a total beginner, and I've added everything I know to add to the coding, but nothing happens when I push the button. I don't know at this point if it's an error in the coding, or a syntax error that makes it not work. Basically I am trying to get this function "Rip It" to go through the list of Dewey decimal numbers, change some of them, and return the new number and a message saying it's been changed. There is also one labeled "no number" that has to return an error (not necessarily an alert box, a message in the same space is okay.) I am a total beginner and not particularly good at this stuff, so please be gentle! Many thanks! <!DOCTYPE html> <html> <head> <script type="text/javascript"> function RipIt() { for (var i = l; i <=10 i=i+l) { var dewey=document.getElementById(i); dewey=parseFloat(dewey); if (dewey >= 100 && 200 >= dewey) { document.getElementById('dewey'+ 100) } else if (dewey >= 400 && 500 >= dewey) { document.getElementById('dewey'+ 200) } else if (dewey >= 850 && 900 >= dewey) { document.getElementById('dewey'-100) } else if (dewey >= 600 && 650 >= dewey) { document.getElementById('dewey'+17) } } } </script> </head> <body> <h4>Records to Change</h4> <ul id="myList"> <li id ="1">101.33</li> <li id = "2">600.01</li> <li id = "3">001.11</li> <li id = "4">050.02</li> <li id = "5">199.52</li> <li id = "6">400.27</li> <li id = "7">401.73</li> <li id = "8">404.98</li> <li id = "9">no number</li> <li id = "10">850.68</li> <li id = "11">853.88</li> <li id = "12">407.8</li> <li id = "13">878.22</li> <li id = "14">175.93</li> <li id = "15">175.9</li> <li id = "16">176.11</li> <li id = "17">190.97</li> <li id = "18">90.01</li> <li id = "19">191.001</li> <li id = "20">600.95</li> <li id = "21">602.81</li> <li id = "22">604.14</li> <li id = "23">701.31</li> <li id = "24">606.44</li> <li id = "25">141.77</li> </ul> <b> </b> <input type="button" value="Click To Run" onclick="RipIt()"> <!-- <input type="button" value="Click Here" onClick="showAlert();"> --> </body> </html>

    Read the article

  • Clickable LI overrules links within the LI

    - by Kenneth B
    Hello guys and gals... I have a LI with some information, including some links. I would like jQuery to make the LI clickable, but also remain the links in the LI. The Clickable part works. I just need the links within to work as well. NOTE: They work if you right click and choose "Open in new tab". HTML <ul id="onskeliste"> <li url="http://www.dr.dk">Some info with links <a href="http://www.imerco.dk" target="_blank">Imerco</a></a> </ul> jQuery $(document).ready(function() { $("#onskeliste li").click( function() { window.location = $(this).attr("url"); return false; }); })(jQuery); I've found a simular question here, but it doesn't seem to solve my problem. http://stackoverflow.com/questions/180211/jquery-div-click-with-anchors Can you help me?? :-) Thank you in advance...

    Read the article

  • Jquery get selected checkboxes

    - by kevin
    Hi id like to get the list of selected checkboxes ina page, actually what I really need is th get the text of the element next to the checkbox which is a html element the code is below and its not working the html is as follows <script type="text/javascript"> $(document).ready(function () { $('#target').click(function () { alert("in"); var checkValues = []; $('input[name=checkboxlist]:checked').each(function() { alert($(this)val()); checkValues.push($(this)val()); }); }); }); </script> HTML: <ul id="7b1fe2bd-1b26-4185-8cd9-aec10e652a70"> <li>Structured Products<input type="checkbox" name="checkboxlist"</li> <li>Global FID <ul> <li>PowerPoint Presentations<input type="checkbox" name="checkboxlist"</li> <li>Global Deck <ul> <li>Test1<input type="checkbox" name="checkboxlist"</li> <li>Test2<input type="checkbox" name="checkboxlist"</li> <li>Test3<input type="checkbox" name="checkboxlist"</li> </ul> <input type="checkbox" name="checkboxlist"</li> <li>Credit Default Swaps Position <ul> <li>Test4<input type="checkbox" name="checkboxlist"</li> <li>Test5<input type="checkbox" name="checkboxlist"</li> </ul> <input type="checkbox" name="checkboxlist"</li> <li>Thought Leadership<input type="checkbox" name="checkboxlist"</li> <li>Fixed Income Perspectives<input type="checkbox" name="checkboxlist"</li> <li>Public Policy Information and Regulatory<input type="checkbox" name="checkboxlist"</li> <li>Regional FID<input type="checkbox" name="checkboxlist"</li> </ul> <input type="checkbox" name="checkboxlist"</li> <li>Global Rates<input type="checkbox" name="checkboxlist"</li> <li>Global Credit Products<input type="checkbox" name="checkboxlist"</li> <li>FX<input type="checkbox" name="checkboxlist"</li> <li>Emerging Markets<input type="checkbox" name="checkboxlist"</li> <li>Commodities<input type="checkbox" name="checkboxlist"</li> <li>testcat<input type="checkbox" name="checkboxlist"</li> <li>testcat<input type="checkbox" name="checkboxlist"</li> </ul>

    Read the article

  • JQUERY, appending an LI to a UL, and then animating that LI

    - by nobosh
    I have an UL: <ul id="news-feed">.....</ul> I'd like to be able to append a LI to the top of the list and have that appended item slideDown into place. $("#news-feed").append('<li">This is my item</li>').hide().slideDown(); Problem I'm having is the above code is sliding the news-feed item down, and not the appended item. Any ideas?

    Read the article

  • How to select LI exept first and second ?

    - by Wazdesign
    Here is the structure of the content , I want to select all LI except the first two ( ie no-link) jQuery(document).ready(function(){ var nosubnav = jQuery('.first-level li:not(:has(ul))'); var nosubnavsize = jQuery('.first-level li:not(:has(ul))').size(); jQuery(nosubnav).css('border' , '1px solid red'); alert('List item which does not have submenu '+nosubnavsize); }); div class="navigation-container"> <ul class="first-level"> <li><a href="#">No Link</a></li> <li><a href="#">No Link</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a> <ul> <li><a href="#">Link2.1</a></li> <li><a href="#">Link2.2</a> <ul> <li><a href="#">Link 2.2.1</a></li> </ul> </li> </ul> </li> <li><a href="#">Link </a></li> </ul> </div> related Question : http://stackoverflow.com/questions/2771801/how-to-count-li-which-does-not-have-ul

    Read the article

  • Show Hide Subnav

    - by Jon
    How can I toggle the subnav for each item, and if one is open, hide the open one to show the current one? If there are none shown, just toggle. If you click one and show subnav then and click another hide previous and show current. Here is my html - <header> <div class="content-wrapper"> <div class="user-menu-wrapper"> <div class="hsn-logo"></div> <div class="user-greeting-wrapper"> <div class="user-greeting">Hi, Abraham</div> </div> <div class="user-menu"> <ul class="user-menu-items"> <li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-account" })</li> <li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-favorites" })</li> <li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-bag" })</li> </ul> </div> </div> <div class="hsn-nav-wrapper"> <div class="hsn-nav"> <ul class="hsn-nav-items"> <li style="width: 25%"> <a class="shop" href="#"> <span class="hsn-nav-item-wrap"> <span>SHOP</span><span class="drop-down-arrow"></span> </span> </a> </li> <li style="width: 25%"> <a class="watch" href="#"> <span class="hsn-nav-item-wrap"> <span>WATCH</span><span class="drop-down-arrow"></span> </span> </a> </li> <li style="width: 25%"> <a class="play" href="#"> <span class="hsn-nav-item-wrap"> <span>PLAY</span><span class="drop-down-arrow"></span> </span> </a> </li> <li style="width: 15%"> <a href=""><span class="hsn-search-icon"></span> </a> </li> </ul> </div> <br class="clear" /> </div> </div> </header> <subnav id="shop" class="shop-subnav"> <div class="hsn-subnav-wrapper"> <div class="hsn-subnav"> <div class="hsn-subnav-left"> <ul> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li><span class="hsn-subnav-callout">Deals</span></li> </ul> </div> <div class="hsn-subnav-right"> <ul> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li>SubnavItem</li> <li><span class="hsn-subnav-callout">Clearance</span></li> </ul> </div> </div> </div> </subnav> <subnav id="watch" class="watch-subnav"> <div class="hsn-subnav-wrapper"> <div class="hsn-subnav"> <div class="hsn-subnav-left"> <ul> <li>SubnavItem2</li> <li>SubnavItem2</li> <li>SubnavItem2</li> <li>SubnavItem2</li> </ul> </div> <div class="hsn-subnav-right"> <ul> <li>SubnavItem2</li> <li>SubnavItem2</li> <li>SubnavItem2</li> <li>SubnavItem2</li> </ul> </div> </div> </div> </subnav> Here is my Jquery / JS - $(document).ready(function () { $('ul.hsn-nav-items li a').click(function () { var navitem = $(this).attr('id') , id = $(this).attr('class') , subnav = $('subnav.' + id + '-subnav'); $('a.selected').not(this).removeClass('selected'); $(this).toggleClass('selected'); $('#'+id).toggle(); }); });

    Read the article

  • How to select LI except first and second ?

    - by Wazdesign
    Here is the structure of the content, I want to select all LI except the first two (ie no-link) jQuery(document).ready(function(){ var nosubnav = jQuery('.first-level li:not(:has(ul))'); var nosubnavsize = jQuery('.first-level li:not(:has(ul))').size(); jQuery(nosubnav).css('border' , '1px solid red'); alert('List item which does not have submenu '+nosubnavsize); }); div class="navigation-container"> <ul class="first-level"> <li><a href="#">No Link</a></li> <li><a href="#">No Link</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a> <ul> <li><a href="#">Link2.1</a></li> <li><a href="#">Link2.2</a> <ul> <li><a href="#">Link 2.2.1</a></li> </ul> </li> </ul> </li> <li><a href="#">Link </a></li> </ul> </div> related Question : http://stackoverflow.com/questions/2771801/how-to-count-li-which-does-not-have-ul

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >