Search Results

Search found 3308 results on 133 pages for 'li ma'.

Page 15/133 | < Previous Page | 11 12 13 14 15 16 17 18 19 20 21 22  | Next Page >

  • Calling data from different model in Rails

    - by Danny McClelland
    Hi Everyone, I need to be able to call data from a different model - not just one field, but any of them. At the moment I have the following models: kase person company party I can call information from the company to the kase and from the person to the kase using this: <li>Client Company Address: <span class="address"><%=h @kase.company.companyaddress %></span></li> <li>Case Handler: <span><%=h @kase.person.personname %></span></li> Those two work, however if I add the following: <li>Client Company Fax: <span><%=h @kase.company.companyfax %></span></li> <li>Case Handler Tel: <span><%=h @kase.person.personmobile %></span></li> <li>Case Handler Email: <span><%=h @kase.person.personemail %></span></li> Any idea whats wrong? Thanks, Danny EDIT: I get the following error message: NoMethodError in Kases#show Showing app/views/kases/show.html.erb where line #37 raised: You have a nil object when you didn't expect it! The error occurred while evaluating nil.personname The lines that are noted are as follows: 34: <div id="clientinfo_showhide" style="display:none"> 35: <li>Client Company Address: <span class="address"><%=h @kase.company.companyaddress %></span></li> 36: <li>Client Company Fax: <span><%=h @kase.company.companyfax %></span></li> 37: <li>Case Handler: <span><%=h @kase.person.personname %></span></li> 38: <li>Case Handler Tel: <span><%=h @kase.person.personmobile %></span></li> 39: <li>Case Handler Email: <span><%=h @kase.person.personemail %></span></li> 40: </div> The model for the kase is as follows: class Kase belongs_to :company # foreign key: company_id belongs_to :person # foreign key in join table The model for the person is as follows: class Person has_many :kases # foreign key in join table belongs_to :company The model for the company is as follows: class Company has_many :kases has_many :people def to_s; companyname; end Hope this helps!

    Read the article

  • jQuery: modify href attribute for first level list only

    - by bloggerious
    I'm a noob in jQuery and have stuck at this. I have the following HTML code output from a PHP page: <ul class="cats"> <li><span><a href="cant_post_link_yet1">Lifestyle</a></span></li> <li><span><a href="cant_post_link_yet2">Entertainment</a></span></li> <li class="has_child"> <span><a href="cant_post_link_yet3">Technology</a></span> <ul class="subcats"> <li><span><a href="cant_post_link_yet4">Gadgets</a></span></li> <li><span><a href="cant_post_link_yet5">Hardware</a></span></li> </ul> </li> <li><span><a href="cant_post_link_yetsports">Sports</a></span></li> <li class="has_child"> <span><a href="cant_post_link_yet6">Design</a></span> <ul class="subcats"> <li class="has_child"> <span><a href="cant_post_link_yet7">Web Design</a></span> <ul class="subcat"> <li><span><a href="cant_post_link_yet8">Adobe Photoshop</a></span></li> </ul> </li> <li><span><a href="cant_post_link_yet9">Graphics and Print</a></span></li> </ul> </li> What's the correct jQuery code so that I can modify the href attribute for the first-level list only? Basically, I want to change the href of Technology and Design to be "#" but will not change the href of Web Design which is already on second-level list. More Info: In the code above, if list has subcategories, then it has the class has_child, whether it's on first-level or not. So I want only the first-level list which has class has_child to be modified the href to "#" I can't alter output anymore because it's in the PHP code. Any help is greatly appreciated.

    Read the article

  • Displaying data from mutliple arrays with codeigniter

    - by Craig Ward
    I am trying to display results from a database where the results are contained in three tables. How do I echo out the results? $p- works, but $img- or $branch- doesn't. What am I doing wrong? Example code is below Sample controller: $p_id = $this-uri-segment(3); $this-load-model('One_model'); $data['prop'] = $this-One_model-get_details($p_id); $data['img'] = $this-One-get_images($p_id); $this-load-model('Two_model'); $data['branch'] = $this-Two_model-get_details($p_id); $this-load-view('a_test_view', $data); A Sample View <?php foreach ($property as $p):?> <p><?php echo $p->SUMMARY; ?></p> <p>We have <?php echo "$img->num_photos"; ?> photos</p> <p>Branch is <?php echo $branch->name; ?>. Telephone <?php echo $branch->tel; ?></p> <ul> <li><?php echo $p->FEATURE1; ?></li> <li><?php echo $p->FEATURE2; ?></li> <li><?php echo $p->FEATURE3; ?></li> <li><?php echo $p->FEATURE4; ?></li> <li><?php echo $p->FEATURE5; ?></li> <li><?php echo $p->FEATURE6; ?></li> <li><?php echo $p->FEATURE7; ?></li> <li><?php echo $p->FEATURE8; ?></li> <li><?php echo $p->FEATURE9; ?></li> <li><?php echo $p->FEATURE10; ?></li> </ul> <?php endforeach; ?>

    Read the article

  • Alligning a multiline li in an ul

    - by user146780
    I have two li (points) on this page http://animactions.ca/Animactions/le_developpement_des_equipes_de_travail.php that take up two lines. I'm not sure how to properly align them so that they line up with the first line. I'm referring to this point: Renforcir la cohésion et l’esprit d’équipe pour un travail proactif et durable qui génère des rendements supérieurs. Thanks

    Read the article

  • how can i check all ul of nested checkboxes

    - by Mike
    Question: I have a category listing which some categories have children, I am trying to create a ALL category that when clicked, will check all sibling checkboxes in that same category. e.g; clicking ALL underneath the MUSIC category would check blues, jazz, rock n roll Code: HTML: <ul name="events-categories" id="events-categories"> <li><input type="checkbox" name="category-events" value="185" placeholder="" id="category-185" class="events-category"> CONVENTIONS <ul class="event-children"> <li><input type="checkbox" name="child-category-all" value="" class="events-child-category-all">ALL</li> <li><input type="checkbox" name="child-category-190" value="190" id="child-category-190" class="child events-child-category">SCIENCE</li> <li><input type="checkbox" name="child-category-191" value="191" id="child-category-191" class="child events-child-category">TECHNOLOGY</li> </ul> </li> <li><input type="checkbox" name="category-events" value="184" placeholder="" id="category-184" class="events-category"> MUSIC <ul class="event-children"> <li><input type="checkbox" name="child-category-all" value="" class="events-child-category-all">ALL</li> <li><input type="checkbox" name="child-category-189" value="189" id="child-category-189" class="child events-child-category">BLUES</li> <li><input type="checkbox" name="child-category-188" value="188" id="child-category-188" class="child events-child-category">JAZZ</li> <li><input type="checkbox" name="child-category-187" value="187" id="child-category-187" class="child events-child-category">ROCK N ROLL</li> </ul> </li> <li><input type="checkbox" name="category-events" value="186" placeholder="" id="category-186" class="events-category"> TRIBUTES</li> </ul>? CSS: .event-children { margin-left: 20px; list-style: none; display: none; }? jQuery So Far: /** * left sidebar events categories * toggle sub categories */ $('.events-category').change( function(){ console.log('showing sub categories'); var c = this.checked; if( c ){ $(this).next('.event-children').css('display', 'block'); }else{ $(this).next('.event-children').css('display', 'none'); } }); $('.events-child-category-all').change( function(){ var c = this.checked; if( c ){ $(this).siblings(':checkbox').attr('checked',true); }else{ $(this).siblings(':checkbox').attr('checked',false); } });? jsfiddle: http://jsfiddle.net/SENV8/

    Read the article

  • Properly create centered vertical navigation list with a hover image on both sides?

    - by Damainman
    I have a navigation list I placed inside of a , I am attempting to get an image that appears on both sides of a link when you hover. Basically a an arrow on each side of the link. I have managed to get the effect I am looking for with: <ul> <li style=""> <a href="#">Services</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Media</a> </li> <li> <a href="#">FAQ</a> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Contact</a> </li> </ul> .nav ul{ list-style:none; text-align:center; } .nav li:hover a:before, .nav li:hover a:after { content:url(../images/nav_bullet.png); } The end result will look like the following but with the list centered: link >> Hovered Link << link However I am not sure if that is the best way of going about it, and the image is too close to the text. I tried placing a margin and padding but that didn't work. To top of it off, the image is not vertically centered with the link text. Anyone know of a proper way to do this as I am just going by trial and error? Thank you in advance!

    Read the article

  • jQuery: Adding li element only if it not already there?

    - by Legend
    I am constructing an <li> element like this: var element = $("<li></li>") .html(mHTML) .attr('id', "elemid"); I am trying to add this element to a <ul> element only if it doesn't already exist. Any ideas on how to do this? Am I supposed to use contains() to see if the ul element contain the html and then decide? For instance, <ul id="elemul"> <li id="elemli1">Element 1</li> <li id="elemli2">Element 2</li> <li id="elemli3">Element 3</li> </ul> If I try adding Element 1, it should not add it. What should I do if its a longer string (not really long but about 150 characters). Do I go about using hashmaps?

    Read the article

  • fonts mac vs pc

    - by Kieran
    Hi all hope your having a good day/evening. Simple question, but maybe not so simple to answer. I have an unordered list, which i am using as a menu. The list items are floated right and sized due to an anchor tag inside them with a roll over. The last element is given a specific size to suck up any extra space. See the code snippits bellow. css ul.mainNav { width: 970px; display:block; background:black; clear:both; overflow:hidden;} ul.mainNav li { float: left; height:29px;} ul.mainNav li a { display: block; padding:7px 19px; color:#ffffff; background-color:#000; font-weight:bold; text-decoration:none; font-size:13px; } ul.mainNav li a:hover, ul.mainNav li a.selected { background-color:#ffff00; color:#000; } ul.mainNav li a.last{ text-align:center; padding: 7px 19px; width:58px;} html <ul class="mainNav" id="mainNav"> <li><a href="/Default.aspx">home</a></li> <li><a href="/About/">about</a></li> <li><a href="/News/">news</a></li> <li><a href="/Enter/Registration.aspx">enter SOYA 2010</a></li> <li><a href="/Categories/Film.aspx">categories</a></li> <li><a href="/Mentors/janChapman.aspx">mentors</a></li> <li><a href="/PastWinners/">past winners</a></li> <li><a href="/Awards/">awards nights</a></li> <li><a href="/Support/" class="last">contact</a></li> </ul> It is containted in a <div style="margin:0 auto;">...</div> to center on the menu on screen Now my problem is: On PC; firefox/ Safari /IE /Chrome are all displaying correctly. Take the same code to a Mac; Safari/ firefox are displaying the menu to be too short and the only thing i can point to is that the fonts may be smaller in widths. The width is currently set to 970px. My question is: How can i get it to display at the same widths without specifying exact widths for each list item? Any help would be appreciated. If my structure is wrong or it is just a mac thing that i will never solve(hope not). Cheers, KJ

    Read the article

  • How to get element order number

    - by martin-masiar
    Hello everyone, how can i get order number of some element by javascript/jquery? <ul> <li>Anton</li> <li class="abc">Victor</li> <li class="abc">Simon</li> <li>Adam</li> <li>Peter</li> <li class="abc">Tom</li> </ul> There is 3xli with abc class. Now I need to get order(sequence) number of Simon li. Thanks in advance

    Read the article

  • Content display problems when using Suckerfish menus with 960.gs and IE

    - by Cedar Jensen
    I'm using 960.gs layout and when I add the suckerfish menu as part of the content to one of the grids, the contents of adjacent siblings bleed through the menu in all versions of IE. In the listed html below, the text from 'belowFoldSection' will appear through the menu when it is visible and has enough items to make it span over 2nd section. However, the contents of 'introSummary' will be underneath the menu, as expected. I've set the z-index for #nav and #nav ul in my css and this of course makes it work in FF, Chrome and Safari, but not in IE (because IE incorrectly assigns child elements its own z-index). If I change the .grid_nn class 'position' attribute (set by default in the 960 template) from 'relative' to absolute, this fixes it in IE. However, it is my understanding that I don't want the child elements of the 'container_12' to be taken out of the flow of the document and want them positioned relative to the .container_12's starting point. (Changing the attribute to absolute causes other general layout problems) Can anyone suggest a work-around? My html: <div class="container_12"> <!--First section where menu lives--> <div class="grid_12" id="mainSection"> <div class="grid_4 alpha" id="intro"> <p>Start of menu here</p> <div id="subMenu"> <ul id="nav"> <li><a href="#">Item 1</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <!--10 more for longer list --> </ul> </li> <li><a href="#">Item 2</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <!--10 more for longer list --> </ul> </li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <!--10 more for longer list --> </ul> </li> </ul> <div id="introSummary"> <h1>PERCIFORMES! (1)</h1> <p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p> </div> </div> <!-- end of sub menu --> </div> <div class="grid_8 omega" id="summary"> <p>Some stuff goes here</p </div> </div> <!-- End of first section --> <div class="clear">&nbsp;</div> <div class="grid_12 spacer"> </div> <div class="grid_4" id="belowFoldSection"> <p>Here is some stuff I want to appear below the menu when the pop-up is visible</p> </div> </div> <!-- container_12 --> The suckerfish css file: #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; line-height: 1; z-index: 99; } #nav a { display: block; width: 10em; } #nav li { /* all list items */ float: left; width: 10em; } #nav li ul { /* second-level lists */ position: absolute; background: orange; width: 10em; left: -999em; } #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ left: auto; } Default 960.gs css: .container_12, .container_16 { margin-left: auto; margin-right: auto; width: 960px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 { display: inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; }

    Read the article

  • jquery li with image fade in background (fade in class)

    - by steve
    I'm currently using this code: var gallery = $('ul#gallery').children(); $(gallery).filter(':even').not(':last').hover(function () {$(this).toggleClass('next')}); I'm trying to make it fade this new class in. Currently, there's an <li> with an image in it, no background. When the 'next' class is added, it gives it a background image when hovered over. Is there a way to just fade in the new class without making the image blink/fade at all? Thanks.

    Read the article

  • jquery add a fade to an .addClass

    - by Nik
    How do I fade .addClass in and out. Here is the link - www.aus-media.com/dev/site_BYJ/new-students/ and here is the code - $(document).ready(function() { $('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() { $(this).addClass('pretty-hover'); }, function() { $(this).removeClass('pretty-hover'); }); }); $(document).ready(function() { $('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() { $(this).addClass('pretty-hover_01'); }, function() { $(this).removeClass('pretty-hover_01'); }); }); Thanks

    Read the article

  • Anchor bug on IE9, anchor hitbox overlapped

    - by user1456399
    The menu below works just fine in Firefox and Chrome, but in IE9, but hitbox for the "HOME" anchor is being covered partially by the list item behind it except for the actual test, and a single horizontal pixel line at the top and bottom of the button. Can anyone see what I'm missing? Code to follow: index.html <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <title>Navigation</title> <style> .menu-container { width:960px; height:45px; margin:0 auto; position:relative; z-index:2; background-color: #3d3d3d; margin-bottom: 20px; } .menu-navigation { font-family:Arial, Helvetica, sans-serif; font-size:13px; list-style:none; padding:0; margin:0; text-align: right; font-size: 0; /* Removes whitespace between <li> */ } .menu-navigation > li { display:inline; margin:0; border-left:solid 1px #242424; background-color:transparent; font-size: 12px; padding: 15px 0 15px 0; } .menu-navigation > li:hover, .menu-navigation > li.current-menu-item { background-color:#202020; } .menu-navigation > li.active, .menu-navigation > li.active:hover { background-color:#131313; } .menu-navigation > li a { text-decoration:none; color:#bbbbbb; } .menu-navigation > li a:hover { color:#efefef; } .menu-navigation > li span a { color:#ffffff; } .menu-navigation > li a:focus { outline:none; } .menu-navigation > li.menu-item-parent > span, .menu-navigation > li > span > a { text-transform:uppercase; outline:0; text-decoration:none; color:#ffffff; text-shadow:1px 1px 1px #000000; line-height: 45px; display: inline-block; height: 45px; padding: 0 20px 0 20px; } .menu-navigation > li.menu-item-parent > span { background:url("../img/down.png") no-repeat right center; } .menu-navigation > li.menu-item-parent > span:hover, .menu-navigation > li > span > a:hover { cursor:pointer; } </style> </head> <body> <div class="menu-container"> <ul class="menu-navigation"> <li><span><a href="#">This is a link</a></span></li> <li><span><a href="#">This is a link</a></span></li> <li class="menu-item-parent"><span>Not a link</span></li> <li class="menu-item-parent"><span>Not a link</span></li> <li class="menu-item-parent"><span>Not a link</span></li> </ul> </div> </body> </html> EDIT: Alright, I've changed the code to isolate the issue, and narrowed down the problem CSS. Simply adding a background image fixes the issue. The code is set up so it styles so the hit boxes for all the menu items are the same regardless if there's a link in them or not to facilitate an "onClick" drop down on those menu items without anchors. Refer to lines 81 - 86. Remove those lines (just a background image), and the hit box issue is seen in the menu items "NOT A LINK" as well. Further, the act of adding a background image fixes the hit box issue of "THIS IS A LINK" menu items. Simply add the following snippet to the CSS: .menu-navigation > li > span > a { background:url("../img/down.png") no-repeat right center; } Adding a background image, even if there is no actual image, is changing something with regards to the hit box... I'm just not sure what...

    Read the article

  • CSS Menu loses focus when part of jquery hover()

    - by Steve Syfuhs
    I have the following html (viewable at www.communityftw.com) <table width="100%"> <tr> <td style="text-align: left"> <!-- 2008.3.1314.35 --><span id="headerSearch1_sb_form_q_wrapper" class="RadInput_Default" style="white-space:nowrap;"><input value="language..." type="text" size="20" id="headerSearch1_sb_form_q_text" name="headerSearch1_sb_form_q_text" class="riTextBox riEmpty sw_qboxTop" name="q" style="width:140px;" /><input id="headerSearch1_sb_form_q" name="ctl00$headerSearch1$sb_form_q" class="rdfd_" style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" type="text" value="" /><input id="headerSearch1_sb_form_q_ClientState" name="headerSearch1_sb_form_q_ClientState" type="hidden" /></span> <input type="submit" name="ctl00$headerSearch1$sb_form_go" value="" id="headerSearch1_sb_form_go" class="sw_qbtnTop" /> </td> <td style="text-align: left"> <ul id="menu"> <li class="languageContainer"> <div> <a href="#" id="languageField"> <img src="/images/flags/ca.png" alt="Canada" /> Canada (English)</a> </div> <ul id="language"> <li><a href="#" id="A1"> <img src="/images/flags/ca.png" alt="Canada" /> Canada (French)</a> </li> <li><a href="#" id="A2"> <img src="/images/flags/us.png" alt="United States" /> United States</a> </li> <li><a href="#" id="A3"> <img src="/images/flags/de.png" alt="Germany" /> Germany</a> </li> <li><a href="#" id="A4"> <img src="/images/flags/fr.png" alt="France" /> France</a> </li> <li><a href="#" id="A5"> <img src="/images/flags/ru.png" alt="Russia" /> Russia</a> </li> <li class="last"> <img alt="" src="images/langLocDrop_r4_c1.png" /> </li> </ul> </li> </ul> </td> </tr> </table> Javascript/jquery $('#slide').animate({ top: '-=34' }, 1000); $("#slide").hover(function () { $(this).animate({ top: '+=34' }); }, function () { $(this).animate({ top: '-=34' }); }); menu { margin: 0px; padding: 0px; list-style: none; display: inline-block; float: left; z-index: 1000; } menu a { color: #dc2525; text-decoration: none; } menu li { background: none repeat scroll 0 0; cursor: pointer; float: left; position: relative; } menu li a:hover { color: orange; } menu ul { padding: 0px; margin: 0px; display: block; display: inline; } menu li ul { position: absolute; left: -15px; top: 0px; margin-top: 20px; width: 170px; line-height: 16px; background-image: url(/images/langLocDrop_r2_c1.png); display: none; } menu li:hover ul { display: block; } menu li ul li { display: block; margin: 5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type: none; } menu li ul li:first-child { border-top: none; } menu li ul li a { display: block; } menu li ul li a:hover { color: orange; } .languageContainer div { display: inline; padding: 5px; } languageField img { display: inline; vertical-align: middle; } language img { display: inline; } menu .last { background: transparent none repeat scroll 0% 0%; margin: 0px; padding: 0px; border: none; position: relative; border: none; height: 0px; } What I'm trying to do is have a menu mostly hidden at the top except when you mouse over it, and then have a submenu (just css driven) pop out when you mouse over the language. What is happening though is that when I move onto the language list, and I go past Germany (~50% down the list?), the hover() loses focus and closes the original menu, which closes the language menu. Any idea's what is causing the issue? Any ideas how to fix the issue? I have tried the hoverIntent() plugin as well to no avail.

    Read the article

  • I just don't know what it is, tried everything, IE 7 bug

    - by Emmy
    Has anyone seen this bug? I have a sidebar with a ul nav background image for the hover state, floated right, looks great in all browsers. Then...I added another div underneath it for ad space. inside, there's an anchored image. That image tucks underneath the background image of the nav, but only in IE7 (i abandoned trying to please ie6). So I took it out of the sidebar, played with float, display,height hacks, but nothing works I can declare a large top margin with some more top padding do get it to clear but it breaks the design. i even tried creating a div called clear and put a top margin there. so it displays with this huge gap in chrome, FF, safari but this tiny space between in IE. i even tried creating a div called clear and put a top margin there. I have spent hours trying to find someone with the same problem but to no avail. Any suggestions? Here's a code snippet: <div id="leftsidebar"> <div id="leftnav"> <ul class="slidenav" id="sidenav"> <li id="overview" class="inactive"> <a href="expat.html">expat lifestyle</a> </li> <li id="tips" class="inactive"> <a href="traveltips.html">travel tips</a> </li> <li id="bts" class="inactive"> <a href="bts-mrt.html">bts/mrt</a> </li> <li id="bus" class="inactive"> <a href="bus.html">bus system</a> </li> <li id="van" class="inactive"> <a href="taxi.html">vans/taxis</a> </li> <li id="boat" class="inactive"> <a href="klong.html">boats/klong</a> </li> <li id="boat" class="inactive"> <a href="klong.html">boats/klong</a> </li> <li id="tuk" class="inactive"> <a href="tuk.html">tuk-tuks</a> </li> <li id="train" class="inactive"> <a href="train.html">trains</a> </li> <li id="airport" class="inactive"> <a href="airport.html">int'l airport</a> </li> <li id="dangers" class="inactive"> <a href="dangers.html">dangers</a> </li> <li id="fun" class="inactive"> <a href="fun.html">fun places</a> </li> <li id="shopping" class="inactive"> <a href="shopping.html">shopping</a> </li> </ul> </div> </div> <div id="store"> <a href="astore.amazon.com/ten044-20"; title="Shop WIB store"> <img src="images/WIBstore.png" height="70" width="200" border="none"/> </a> </div> the corresponding CSS: #leftsidebar { float:right; width: 210px; margin: 40px 0 0 0; padding: 0; height:1%; } #store { margin: 20px 0px 0 0px; padding: 0 10px 0 0; float: right; height: 1%; display: inline; } And an image:

    Read the article

  • jquery select problem

    - by codedude
    Say I have an unordered list like so: <ul> <li>Some Text</li> <li>Some Text</li> <li>Some Text</li> <li>Some Text</li> </ul> I want to use jquery so that when I click a "li", the background changes to blue. So I do this: $('li').click(function() { $(this).addClass('active'); }); And the "active" class has as background of blue. However, I can't figure out how to make it so that when I click another "li", the other "li" that has a background of blue stops having a background of blue. I guess what I'm trying to say is how to make only one "li" have a background of blue at a time--using jquery.

    Read the article

  • Put text directly to the left of an <LI>

    - by Horace Loeb
    I have a list of songs, and I want to put the word "New!" to the left of the new songs like this: How can I do this so that all the songs line up? I.e., I want the names of songs that aren't new to line up with the names of songs that are new, not with the start of the word "New" Note that this is trivial if "New!" is an image. I.e., I set the image as the background-image of the <li> and give it some padding-left

    Read the article

  • How to select the previous element of a given class

    - by JCN
    I have an UL list : <ul> <li data-sel='foo'></li> <li></li> <li data-sel='foo'></li> <li class='selected'></li> <li data-sel='foo'></li> </ul> I can access the first previous element of li.selected who do not have attribute data-sel=foo by using :not selector var element = $('.selected').prev("li:not([data-sel='foo'])"); But how can i access the first previous element of li.selected who have attribute data-sel=foo ?

    Read the article

  • Checking for length of ul and removing an li element

    - by Legend
    I am trying to remove the last <li> element from a <ul> element only if it exceeds a particular length. For this, I am doing something like this: var selector = "#ulelement" if($(selector).children().length > threshold) { $(selector + " >:last").remove(); } I don't like the fact that I have to use the selector twice. Is there a shorter way to do this? Something like a "remove-if-length-greater-than-threshold" idea. I was thinking that maybe there is a way to do this using the live() function but I have no idea how.

    Read the article

  • Problem with CSS on Wordpress

    - by Tdasads
    Hi there! I'm trying to code my sidebar.php but it breaks and goes all the way down below the posts PHP: <!-- begin sidebar --> <div id="menu"> <?php /* Widgetized sidebar, if you have the plugin installed. */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <label for="s">SEARCH</label> <form id="searchform" method="get" action="#"> <div> <input type="text" name="s" id="s" size="15" /> <br /> <input type="submit" value="TYPE HERE_" /> </div> </form> <div class="bg-sidebar"> <h2>MOST READ</h2> <ul> <li><a href="javascript:void(0);">Worth A Thousand Words</a></li> <li><a href="javascript:void(0);">Feed Your Head</a></li> <li><a href="javascript:void(0);">Aliquam tempus, eros commodo porta pretium</a></li> <li><a href="javascript:void(0);">Pellentesque quis libero dui</a></li> <li><a href="javascript:void(0);">Lorem ipsum dolor sit amet</a></li> </ul> <h2>RECENT POSTS</h2> <ul> <li><a href="javascript:void(0);">Worth A Thousand Words</a></li> <li><a href="javascript:void(0);">Feed Your Head</a></li> <li><a href="javascript:void(0);">Aliquam tempus, eros commodo porta pretium</a></li> <li><a href="javascript:void(0);">Pellentesque quis libero dui</a></li> <li><a href="javascript:void(0);">Lorem ipsum dolor sit amet</a></li> </ul> <h2>ARCHIVE</h2> <ul> <li> <?php wp_get_archives('type=monthly'); ?> </li> </ul> <h2>LINKS</h2> <ul> <li><a href="http://www.t.com">t</a></li> <li><a href="http://www.tt.com">tt</a></li> </ul> </div> <?php endif; ?> </div> CSS: * { margin: 0; padding: 0; } body, input { font-family: "Trebuchet MS"; font-size: 12px; } .move { clear: both; height: 0; float: none !important; } body { background: url(images/bg.gif); width: 991px; position: absolute; top: 0; left: 50%; margin: 0 0 0 -495px; padding: 0 0 71px 0; } a { text-decoration: none; } li { list-style: none; } img { border: 0; } #searchform { float: left; width: 366px; height: 27px; } #searchform * { float: left;} #searchform label { width:75px; height: 26px; border: solid 1px #ab0000; border-width: 1px 1px 0 0; text-align: center; line-height: 25px; font-weight: bold; font-size: 18px; color: #ab0000; background: white; } #searchform p { border-bottom: solid 1px #ab0000; width: 290px; height: 25px; } #searchform input { border: 0; margin: 6px 0 0 10px; display: inline; width: 234px; font-weight: bold; color: #999999; background: transparent; outline: none; height: 16px; } #searchform button { background: url(images/btn_vai.gif); width: 34px; height: 24px; border: 0; margin: 0 0 2px 0; float: right; } #menu { width: 366px; height: 40px; float: left; margin: 1px 0 0 0; } .bg-sidebar { background: white; width: 366px; padding: 50px 0 0 0; } #menu h2 { color: #ab0000; font-size: 18px; line-height: 18px; padding: 0 0 10px 15px; } #menu ul { border-top: solid 1px #d5d5d5; padding: 0 0 38px 0; } #menu li { border-bottom: solid 1px #f3f2f2; line-height: 30px; font-size: 13px; font-weight: bold; padding: 0 0 0 24px; } #menu li a { color: black; } Can somebody help me out on this one?

    Read the article

  • Line Text with Nav Bar in HTML

    - by Eric
    I have a navbar right under the title to the site, but I want to be line up the first and last items in the navbar with the beginning and end of the Title. I don't have a live preview, but I attached an image. I can get it to line up in one browser, but when I open it in the other, its off again. Is there an easy way to line the text up so it works for everything? thank you HTML: <body onload="play()"> <div class="heading">UPRISING</div> <div class="container_12"> <div id="topnav" align="center"> <ul id="list-nav"> <li><a href="home.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="trailer.html">TRAILER</a></li> <li><a href="stills.html">STILLS</a></li> <li><a href="news.html">NEWS</a></li> <li><a href="contact.html">CONTACT</a></li> <!-- <li><a href="distribution.html">DISTRIBUTION</a></li> --> </ul> </div> <!-- START OF CONTAINER --> <div class="trailer"> <img id="imgHolder" /> </div> </div> <!-- END OF CONTAINER 12 --> CSS: #topnav li { margin-right: 110px; } #topnav li:nth-last-child(1) { margin-right: 0px; }

    Read the article

< Previous Page | 11 12 13 14 15 16 17 18 19 20 21 22  | Next Page >