Search Results

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

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 42/133 | < Previous Page | 38 39 40 41 42 43 44 45 46 47 48 49  | Next Page >

  • How to convet a string to pieces with PHP or regex?

    - by shin
    I have different outputs of $slider['image']and two examples are followings. The first one has and at the beginning and at the end. In the second one, all img tag has and tags. <p><img src="../../assets/images/prints/print2_600x300.gif" alt="" width="600" height="300"><img src="../../../assets/images/support_images/imageA_600x300.gif" alt="" width="600" height="300"><img src="../../../assets/images/support_images/imageB_600x300.gif" alt="" width="600" height="300"><img src="../../../assets/images/support_images/imageC_600x300.gif" alt="" width="600" height="300"><img src="../../../assets/images/support_images/imageD_600x300.gif" alt="" width="600" height="300"></p> or <p><img src="../../assets/images/prints/print2_600x300.gif" alt="" width="600" height="300"></p><p><img src="../../../assets/images/support_images/imageA_600x300.gif" alt="" width="600" height="300"><img src="../../../assets/images/support_images/imageB_600x300.gif" alt="" width="600" height="300"></p><p><img src="../../../assets/images/support_images/imageC_600x300.gif" alt="" width="600" height="300"></p><p><img src="../../../assets/images/support_images/imageD_600x300.gif" alt="" width="600" height="300"></p> I need to change this to the following. <li><span>Homepage</span><a href="#"><img alt="" src="assets/images/prints/print2_600x300.gif" /></a></li> <li><span>Content Page</span><a href="#"><img alt="" src="assets/images/support_images/imageA_600x300.gif" /></a></li> <li><span>Dropdown Menu</span><a href="#"><img alt="" src="assets/images/support_images/imageB_600x300.gif" /></a></li> <li><span>Comments List</span><a href="#"><img alt="" src="assets/images/support_images/imageC_600x300.gif" /></a></li> <li><span>Comment Form</span><a href="#"><img alt="" src="assets/images/support_images/imageD_600x300.gif" /></a></li> I assume I may need regex and php (explode, str_replace, foreach)for this but I need some help. I appreciate your inputs and help. Thanks in advance. Full out put. [0] =>; Array ( [id] => 12 [name] => Print 2 [shortdesc] => <p>Print 2 short description</p> [longdesc] => <p>Print 2 long description</p> [thumbnail] => <p><img src="../../assets/images/prints/thumbnails/print2_223x112.gif" alt="" width="223" height="112"></p> [image] =&gt; <p><img src="../../assets/images/prints/print2_600x300.gif" alt="" width="600" height="300"><img src="../../../assets/images/support_images/imageA_600x300.gif" alt="" width="600" height="300"><img src="../../../assets/images/support_images/imageB_600x300.gif" alt="" width="600" height="300"><img src="../../../assets/images/support_images/imageC_600x300.gif" alt="" width="600" height="300"><img src="../../../assets/images/support_images/imageD_600x300.gif" alt="" width="600" height="300"></p> [product_order] => 0 [class] => [grouping] => [status] => active [category_id] => 5 [featured] => front [other_feature] => none [price] => 0.00 )

    Read the article

  • create previous next button for iframe pages

    - by Resu
    This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible... So I have this code... <script type="text/javascript"> var pages=new Array(); pages[0]="listItem1.html"; pages[1]="listItem2.html"; pages[2]="listItem3.html"; pages[3]="listItem4.html"; pages[4]="listItem5.html"; var i=0; var end=pages.length; end--; function changeSrc(operation) { if (operation=="next") { if (i==end) { document.getElementById('the_iframe').src=pages[end]; i=0;} else { document.getElementById('the_iframe').src=pages[i]; i++;}} if (operation=="back") { if (i==0) { document.getElementById('the_iframe').src=pages[0]; i=end;} else { document.getElementById('the_iframe').src=pages[i]; i--;}}} </script> </head> <body> <ul id="menu" role="group"> <li><a href="listItem1.html" target="ifrm" role="treeitem">Welcome</a> <ul> <li><a href="listItem2.html" target="ifrm" role="treeitem">Ease of Access Center</a></li> </ul> </li> <li><a href="listItem3.html" target="ifrm">Getting Started</a> <ul> <li><a href="listItem4.html" target="ifrm">Considerations</a></li> <li><a href="listItem5.html" target="ifrm">Changing Perspective</a></li> </ul> </li> </ul> <iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe> <input type="button" onClick="changeSrc('back');" value="Back" /> <input type="button" onClick="changeSrc('next');" value="Next" /> and if I click on the next or prev button, it does move somewhere,but... let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3). It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5. Many Thanks For Any Help!

    Read the article

  • Setting background image in asp.net (Master page)

    - by JRC
    I'm new in asp.net. And I am having trouble setting my background image. Here's the master page source: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master"%> <!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 runat="server"> <link rel="stylesheet" type="text/css" href="scripts/style.css"/> <title>Tracker</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <div class="container"> <a href="#"><img src="images/cross-header.gif" alt="Insert Logo Here" width="100%" id="Insert_logo" style="background: #C6D580; display:block;" /></a> <div class="sidebar1"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#"><span style="font-weight:italic">LINK</span></a></li> <li><a href="#"><span style="font-weight:italic">LINK</span></a></li> </ul> </nav> <p>SOME LABEL</p> <p>SOME QUOTE HERE</p> <p></p> </div> </div> <footer> <a href="#">LINK HERE</a> | <a href="#">LINK HERE</a> | <a href="contact.php">CONTACT</a> | <a href="register.php">REGISTER</a> | <a href="login.php">LOGIN</a> <address> Copyright 2012 @JRC </address> </footer> </div> </form> </body> </html> The image that I am trying to use is located at the folder image. I don't know whats wrong. And here's what the style.css source: body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; background-image:url('images/background.jpg'); background-repeat:no-repeat; background-attachment:scroll; background-position:repeat-x; } I also tried this url('image/background.jpeg') etc. but still fails.

    Read the article

  • "Too much recursion" error when loading the same page with a hash

    - by Elliott
    Hi, I have a site w/ an image gallery ("Portfolio") page. There is drop-down navigation that allows a user to view a specific image in the portfolio from any page on the site. The links in the navigation use a hash, and that hash is read and converted into a string of an image filename. The image src attribute on the /portfolio/ page is then swapped out with the new image filename. This works fine if I'm clicking the dropdown link from a page OTHER THAN the /portfolio/ page itself. However if I take the same action from the /portfolio/ page, I get a "too much recursion" error in Firefox. Here's the code: Snippet of the nav markup: <li>Portfolio Category A <ul> <li><a href="/portfolio/#dining-room-table">Dining Room Table</a></li> <li><a href="/portfolio/#bathroom-mirror">Bathroom Mirror</a></li> </ul> </li> JS that reads the hash, converts it to an image filename, and swaps out the image on the page: $(document).ready(function() { if(location.pathname.indexOf("/portfolio/") > -1) { var hash = location.hash; var new_image = hash.replace("#", "")+".jpg"; swapImage(new_image); } }); function swapImage(new_image) { setTimeout(function() { $("img#current-image").attr("src", "/images/portfolio/work/"+new_image); }, 100); } I'm using the setTimeout function because I'm fading out the old image before making the swap, then fading it back in. I initially thought this was the function that was causing the recursion error, but when I remove the setTimeout I still have this problem. Does this have to do with a closure I'm not aware of? I'm pretty green on closures. JS that listens for the click on the nav: $("nav.main li.dropdown li ul li").click(function() { $(this).find("a").click(); $("nav.main").find("ul ul").hide(); $("nav.main li.hover").removeClass("hover"); }); I haven't implemented the fade in/out functionality for the dropdown nav yet, but I have implemented it for Next and Previous arrows, which can also be used to swap out images using the same swapImage function. Here's that code: $("#scroll-arrows a").click(function() { $("#current-image").animate({ opacity: 0 }, 100); var current_image = $("#current-image").attr("src").split("/").pop(); var new_image; var positions = getPositions(current_image); if($(this).is(".right")) { new_image = positions.next_img; } else { new_image = positions.prev_img; } swapImage(new_image); $("#current-image").animate({ opacity: 1 }, 100); return false; }); Here's the error I'm getting in Firefox: too much recursion var ret = handleObj.handler.apply( this, arguments ); jquery.js (line 1936) Thanks for any advice.

    Read the article

  • Mahout - Error when try out wikipedia exmaples

    - by Li'
    Note this post is similar to Caused by: java.lang.ClassNotFoundException: classpath but different error message. When I try to run Wikipedia Bayes Example from https://cwiki.apache.org/confluence/display/MAHOUT/Wikipedia+Bayes+Example When I ran the following command : lis-macbook-pro:mahout-distribution-0.8 Li$ mahout wikipediaXMLSplitter -d examples/temp/enwiki-latest-pages-articles10.xml -o wikipedia/chunks -c 64 I got error message: MAHOUT_LOCAL is set, so we don't add HADOOP_CONF_DIR to classpath. MAHOUT_LOCAL is set, running locally SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/Users/Li/File/Java/mahout-distribution-0.8/examples/target/mahout-examples-0.8-job.jar!/org/slf4j/impl/StaticLoggerBinder.class] SLF4J: Found binding in [jar:file:/Users/Li/File/Java/mahout-distribution-0.8/examples/target/dependency/slf4j-jcl-1.7.5.jar!/org/slf4j/impl/StaticLoggerBinder.class] SLF4J: See http://www.slf4j.org/codes.html#multiple_bindings for an explanation. SLF4J: Actual binding is of type [org.slf4j.impl.JCLLoggerFactory] Oct 21, 2013 4:25:47 PM org.slf4j.impl.JCLLoggerAdapter warn WARNING: Unable to add class: wikipediaXMLSplitter java.lang.ClassNotFoundException: wikipediaXMLSplitter at java.net.URLClassLoader$1.run(URLClassLoader.java:202) at java.security.AccessController.doPrivileged(Native Method) at java.net.URLClassLoader.findClass(URLClassLoader.java:190) at java.lang.ClassLoader.loadClass(ClassLoader.java:306) at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:301) at java.lang.ClassLoader.loadClass(ClassLoader.java:247) at java.lang.Class.forName0(Native Method) at java.lang.Class.forName(Class.java:171) at org.apache.mahout.driver.MahoutDriver.addClass(MahoutDriver.java:236) at org.apache.mahout.driver.MahoutDriver.main(MahoutDriver.java:127) I am using Hadoop 1.2 and Mahout 0.8. mahout-distribution-0.8/bin has been added to $PATH. $MAHOUT_LOCAL is set to "True", so it runs locally. I dont know why I got "Unable to add class: wikipediaXMLSplitter"

    Read the article

  • How do I load new pages into my current jQuery colorbox?

    - by thinkswan
    I'm having a bit of trouble loading pages into an already-existing colorbox. I have a colorbox opened by clicked a link that is bound by the following code: $("a.ajaxAddPage").colorbox({ onComplete: function(){ $('ul#addPage li a').click(function() { $.fn.colorbox({href: $(this).attr('href')}); return false; }); } }); The following HTML is loaded into that colorbox via AJAX: <div class='colorboxWindow'> <ul id='addPage'> <li><a href='addCat.php'>Add Category</a></li> <li><a href='addPage.php' class='current'>Add New Page</a></li> <li><a href='addPage2.php'>Add Another Page</a></li> </ul> <h3>Add New Page...</h3> </div> I'm trying to have each of those 3 links open in the current colorbox when they are clicked. With my onComplete binding above, this works for the first click, but the next click just opens like a normal page. If I add another onComplete to the $.fn.colorbox() call in the above code, then the 2nd click will also load in the same colorbox, but the 3rd will not. Is there a way to just bind all future clicks to open in the same colorbox? I don't know much about event binding yet. If you need clarification, please ask.

    Read the article

  • jQuery Drag/Drop problem: mousemove Event not binding for some elements

    - by saturdayplace
    Using the latest jQuery/UI that are hosted at Google. I've got the following markup: <ul id="tree"> <li><a href="1/">One</a></li> <li><a href="2/">Two</a></li> </ul> And the following javascript: $(document).ready(function(){ // Droppable callbacks function dragOver(overEvent, ui_object) { $(this).mousemove(function(moveEvent){ console.log("moved over", this); }); } function drop_deactivate() { $(this).unbind(); } function drag_out() { $(this).unbind(); } // Actual dragging $("#treeContainer li").draggable({ revert: true, revertDuration: 0 }); // Actuall dropping $("a").droppable({ tolerance: "pointer", over: dragOver, deactivate: drop_deactivate, out: drag_out }); }); If I drag the first li down over the second, the mousemove function fires (and firebug logs the output). But if I drag the second li up over the first, the mousemove function doesn't fire. You can see this live at http://jsbin.com/ivala. Is there a reason for this? Should I be trapping the mousemove event in some other way? Edit: It appears as thought the mousemove() event isn't binding for earlier elements than the one currently being dragged (should be bound upon their mouseover).

    Read the article

  • how to add a sidebar to a .net page based on a master page that doesnt have a sidebar.

    - by UXdesigner
    Hello, I have been told that I should add a sidebar to one page of this .net project, but the master page don't include a sidebar. How can I add a sidebar to one page only ? This is the code for the Master Template, can anyone suggest or help me out here? I'd buy a book and read more, but I have to do this for the next 12 hours. <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Public.master.cs" Inherits="Public" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <%--<!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 runat="server"> <title></title> <%--<link href="favicon.ico" rel="Shortcut Icon" type="image/x-icon" />--%> <link href="<%= Server.MapPath("~/css/main2.css") %>" rel="stylesheet" type="text/css" media="all" /> <link href="<%= Server.MapPath("~/css/dropdown.css") %>" media="screen" rel="stylesheet" type="text/css" /> <link href="<%= Server.MapPath("~/css/default.advanced.css") %>" media="screen" rel="stylesheet" type="text/css" /> <link href="<%= Server.MapPath("~/css/vlightbox.css") %>" rel="stylesheet" type="text/css" /> <link href="<%= Server.MapPath("~/css/visuallightbox.css") %>" rel="stylesheet" type="text/css" media="screen" /> <link href="<%= Server.MapPath("~/boxes.css") %>"rel="stylesheet" type="text/css" media="screen" /> <script src="<%= Server.MapPath("~/engine/js/jquery.min.js") %>" ype="text/javascript"></script> <script src="<%= Server.MapPath("~/js/cufon-yui.js") %>" type="text/javascript"></script> <script src="<%= Server.MapPath("~/js/AFB_400.font.js") %>" type="text/javascript"></script> <style type="text/css"> #vlightbox a#vlb { display:none } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script type="text/javascript"> Cufon.replace('h2'); </script> <script type="text/javascript"> Cufon.replace('h3'); </script> <script type="text/javascript"> Cufon.replace('h5'); </script> <!--[if IE 8]> <style type="text/css"> #footer {display:table;} </style> <![endif]--> <style> ul#nav { width:100%; height:36px; display:block; background-color:#000; background-repeat:repeat-x; } #wrapthatbanner {display:block; float:left; width:100%; height:529px; margin-left:-20px; margin-bottom:0px; } </style> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(document).ready(function() { $("#footer").stickyFooter(); }); // sticky footer plugin (function($) { var footer; $.fn.extend({ stickyFooter: function(options) { footer = this; positionFooter(); $(window) .scroll(positionFooter) .resize(positionFooter); function positionFooter() { var docHeight = $(document.body).height() - $("#sticky-footer-push").height(); if (docHeight < $(window).height()) { var diff = $(window).height() - docHeight; if (!$("#sticky-footer-push").length > 0) { $(footer).before('<div id="sticky-footer-push"></div>'); } $("#sticky-footer-push").height(diff); } } } }); })(jQuery); </script> </head> <body id="@@(categoria)@@"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" AsyncPostBackTimeout="900"></asp:ScriptManager> <div id="container"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div id="header"> <div id="headerlink"> <table width="100%" border="0"> <tr> <td height="77px;" width="67%"> <asp:ImageButton PostBackUrl="~/index.aspx" ImageUrl="~/images/Titulos/5.png" runat="server" alt="" name="screen_logo" width="257" hspace="10" vspace="10" border="0" id="screen_logo" title="" /> </td> <td valign="top" align="right" width="33%"> <table> <tr> <td> <asp:Label ID="lblFullMessage" Visible="false" runat="server" Font-Size="X-Small" ForeColor="White" Text="Please enter the {0}, {1} and {2} characters from your password."></asp:Label> </td> </tr> <tr valign="middle"> <td> <img src="../images/login.jpg"</td> <td valign="top"> <asp:TextBox runat="server" Height="16px" Font-Size="Small" ID="txtLogin" Width="100px"></asp:TextBox> <asp:Button ID="btnLogin" Height="20px" Font-Size="X-Small" runat="server" Text="Go" OnClick="btnLogin_Click" /> </td> </tr> <tr> <td> <asp:Label ID="lblError" Visible="false" runat="server" Font-Size="X-Small" ForeColor="Red" Text="Error"></asp:Label> </td> </tr> </table> </td> </tr> </table> </div> </div> </ContentTemplate> </asp:UpdatePanel> <ul id="nav" class="dropdown dropdown-horizontal"> <li><asp:HyperLink NavigateUrl="~/index.aspx" CssClass="dir" runat="server" ID="lnk1">Home</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk3">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk4">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk7">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk5">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk2">link</asp:HyperLink></li> <li><asp:HyperLink NavigateUrl="~/PublicSide/link.aspx" CssClass="dir" runat="server" ID="lnk6">link</asp:HyperLink></li> </ul> <div id="wmfg"> </div> <div id="content"><asp:ContentPlaceHolder ID="Content1" runat="server"> </asp:ContentPlaceHolder></div> <div id="footer">Footer</div> </div> </form> </body> </html>

    Read the article

  • Right-Align and Vertical Align label with checkbox/radio button CSS

    - by Jon
    Hi Everyone, I'm very close and have this working in Safari, Firefox and IE8, however IE7 the labels and radio buttons do not align vertically. My HTML is: <div id="master-container"> <fieldset id="test"> <legend>This is a test of my CSS</legend> <ul class="inputlist"> <li> <label for="test1">Test 1</label> <input name="test1" id="test1" type="checkbox" disabled="disabled"/> </li> <li> <label for="test2">Test 2</label> <input name="test2" id="test2" type="checkbox" disabled="disabled"/> </li> </ul> </fieldset> </div> My CSS Is: html{font-family:Arial,Helvetica,sans-serif;} #master-container{width:615px;font-size:12px;} ul.inputlist{list-style-type:none;} ul.inputlist li{width:100%;margin-bottom:5px;} ul.inputlist li label{width:30px; text-align:right; margin-right:7px;float:left;} Any suggestions? Thanks! EDIT: Based on the suggestion to check the rest of my html and css. I updated the code above and now it accurately demonstrates the problem. If I take font-size out of #master-container it lines up but then it is not the proper font-size. I tried to add a font-size to ul.inputlist li input but that didn't help. Any suggestions? Thanks for your help everyone!

    Read the article

  • Position an icon on the right in the middle of a list item

    - by Andy
    I have the following code which prints an img if the current page is selected. The issue i have is if the list item is a varied height i cant position it in the middle of the list item on the far right... <li><?php echo $child->link($child->title); ?><?php echo (url_start_with($child->url) ? '<img src="images/ico-arrow.png" class="pointer">': null); ?></li> how can i ammend the "TOP" so that it will position itself vertically no matter what the height using css #bf-fest-list li { margin:0; padding:5px 25px; position:relative; } #bf-fest-list li a:hover { color:#ec1c23; text-decoration:none; } #bf-fest-list li.current { background:#a0a1a4; padding:10px 25px; } #bf-fest-list li.current a { color:#FFF; } #bf-fest-list li .pointer { position:absolute; top:10px; left:233px; }

    Read the article

  • jQuery : add css class to menu item based on browser scroller position

    - by antosha
    Hi, I have a menu: <ul class="menu-bottom"> <li id="m1" class="active"><a id="1" href="#"><span>Link 1</span></a></li> <li id="m2"><a id="2" href="#"><span>Link 2</span></a></li> <li id="m3"><a id="3" href="#"><span>Link 3</span></a></li> </ul> I want that depending of browser's scroller position, the "active" class goes the correct < li element. This is how I see it : if ($(document).height() == 500) { $('#m1').parent().addClass('active'). siblings().removeClass('active'); } if ($(document).height() == 1000) { $('#m2').parent().addClass('active'). siblings().removeClass('active'); } if ($(document).height() == 1500) { $('#m2').parent().addClass('active'). siblings().removeClass('active'); } I am not very familiar with jQuery Dimensions properties so this code doesn't make much sense, but I hope you get the idea. If someone could tell me how to make this work, it would be really cool. Thanks :)

    Read the article

  • Getting proper indentation using XMLBuilder in a helper

    - by Robbie
    I'm attempting to use a view helper to create some dynamic links based on if you're logged in or not. What I want returned, for sake of easy code readability, is: <ul class="right"> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> </ul> In the view helper I have this Ruby code: def loginh xm = Builder::XmlMarkup.new(:indent=>2, :margin=>4) xm.ul("class" => "right") { xm.li('class' => 'text') { xm.text("test") } } end In the view, the line that calls login helper is already indented 4 levels. Because of this, the first line gets 'skewed', so in the view I have: <%= loginh %> Which results in: <ul class="right"> <li class="text"> <text>test</text> </li> </ul> You can see it works perfectly, except for the first line. It would appear that the first line is affected by the indent before <%= loginh % is called. I can easily remedy this by removing the indentation prior to <%= loginh % - but in essence I'd be sacrificing code readability for markup readability. Which isn't what I'm looking to do. Is there any way I could remove the beginning whitespace?

    Read the article

  • jQuery slideDown: Parent element doesn't expand?

    - by bobsoap
    Hi, This issue occurs in our beloved Internet Explorer 7: I have a list of items, each with a hidden child div. When user clicks the "expand" button in any list item, the hidden div will expand downwards and push all content beneith it lower. This works just as it should in FF, Chrome, IE8 - but IE7 will not expand the parent element along with its children. This is noticeable because the top-most parent container has an absolutely positioned image at the very bottom (yea... rounded corners) - that doesn't get pushed down when the content expands. I'm guessing that's because of the absolute positioning... Just wondering whether I should attempt to code up some huge workaround in jQuery just for that (assuming I'm able to), or if this is a known issue of some sort. My HTML: <div id="container"> <ul> <li>Click here to expand <div class="hide"></div> </li> <li>Click here to expand <div class="hide"></div> </li> <li>Click here to expand <div class="hide"></div> </li> </ul> <div id="containerbottom"></div> </div> The CSS: #container { position:relative; } #container #containerbottom { position:absolute; bottom:0px; left:0px; } The jQuery is pretty much your everyday slide function: $('ul li').click(function() { $(this).children('.hide').slideDown(200); }); Any ideas?

    Read the article

  • Recursive list of lists in XSL

    - by Paul Tomblin
    I have a recursive nodes that I'm trying to set up for jquery-checktree. The nodes look like foo/bar/ID /NAME /CHECKED bar/ID /NAME /CHECKED /bar/ID /NAME /bar/ID /NAME /bar/ID /NAME /CHECKED /bar/ID /NAME /CHECKED Where any bar may or may not have one or more bar nodes below it, but any bar will have ID and NAME and might have a CHECKED. and I want to turn that into <ul> <li><input type="checkbox" name="..." value="..." checked="checked"></input> <label for="...">...</label> <ul> <li><input type="checkbox" name="..." value="..." checked="checked"></input> <label for="...">...</label> </li> </ul> <li>....</li> </ul> I can get the first level by doing: <ul class="tree"> <xsl:for-each select="/foo/bar/"> <li><input type="checkbox" name="{ID}" value="{ID}"> <xsl:if test="CHECKED = 'Y'"><xsl:attribute name="checked">checked</xsl:attribute></xsl:if> </input><label for="{ID}"><xsl:value-of select="NAME"/></label> </li> </xsl:for-each> </ul> But I don't know how to recurse down to the embedded "bar" within the "bar", down to however many levels there might be.

    Read the article

  • Drupal6: How to programmatically style a block?

    - by Fronker
    In Drupal6, I basically have a block (a hierarchical menu structure) that turns out like this in HTML: <div class="block block-menu_block" id="block-menu_block-1"> <div class="content"> <div class="menu-block-1 menu-name-menu-navigation parent-mlid-0 menu-level-1"> <ul class="menu"> <li class="leaf first menu-mlid-248 active active-trail"><a class="active-trail active" title="" href="/">Start</a></li> <li class="expanded menu-mlid-249 active"><a class="active" title="" href="/">Aktuell</a> <ul class="menu"> <li class="leaf first menu-mlid-259"> <a title="News und Presse" href="/news-und-presse">News and Press</a> </li>... What I would like to get is actually a lot simpler: <div id="topmenu"> <ul class="one"> <li>some main entry <ul> <li> some sub entry ... or maybe: <div id="topmenu"> <h2>some main entry</h2> <h3><a href="#">some sub entry</a></h3> <h3><a href="#">another sub entry</a></h3> <h2>another main entry</h2> So, keeping the structure, but being able to use simpler, even completely different tags, if and when needed. I think I understand from the drupal docs, that I am (maybe) looking at <div class="block block-menu_block" id="block-menu_block-1" ==> module := menu_block delta := 1 (?) regrettably, none of the suggested * block-[module]-[delta].tpl.php * block-[module].tpl.php * block-[region].tpl.php placed next to page.tpl.php has any impact (yes, I did clear the cache).

    Read the article

  • jquery keypress iterate through each loop?

    - by user239831
    hey guys, probably a simpel question, however couldn't find anything online. i have a list with search results and i want to be able to navigate through the list with my up and down keys. if (e.keyCode == 40) { //down //alert('down'); $('#searchresults ul li').each(function() { }); } if (e.keyCode == 38) { //up //alert('up'); } if (e.keyCode == 13) { //enter //alert('enter'); } the searchresults look like this: <ul> <li class="matched"><a href="link1">link1</a></li> <li class="matched"><a href="link2">link2</a></li> <li class="matched"><a href="link3">link3</a></li> </ul> So basically i just want to be able to navigate through my searchresults with the up and down keys. the selection of the current element should maybe just change the background color and when i press enter the linked and matched element is fired. any idea how i can iterate through the searchresults? thank you

    Read the article

  • Presentation Issue in an Unordered List

    - by phreeskier
    I'm having an issue with correctly presenting items in an unordered list. The labels are floating left and the related spans that are long in length are wrapping and showing below the label. I need a solution that keeps the related spans in their respective columns. In other words, I don't want long spans to show under the labels. What property can I take advantage of so that I get the desired layout in all of the popular browsers, including IE6? Thanks in advance for the help. My code is as follows: <ul> <li> <label>Name</label> <span><%= Html.Encode(Model.Name) %></span> </li> <li> <label>Entity</label> <span><%= Html.Encode(Model.Entity) %></span> </li> <li> <label>Phone</label> <span><%= Html.Encode(Model.Phone) %></span> </li> </ul> My CSS styling is as follows: ul { display:block; list-style-type:none; margin:0; padding:0; } ul li label { float:left; width:100px; }

    Read the article

  • jQuery image fader slow in IE6 & 7

    - by Jamie
    Hi guys, I'm using the following jQuery script to rotate through a series of images pulled into an unordered list using PHP: function theRotator() { $('#rotator li').css({opacity: 0.0}); $('#rotator li:first').css({opacity: 1.0}); setInterval('rotate()',5000); }; function rotate() { var current = ($('#rotator li.show') ? $('#rotator li.show') : $('#rotator li:first')); var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#rotator li:first') :current.next()) : $('#rotator li:first')); next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 2000); current.animate({opacity: 0.0}, 2000).removeClass('show'); }; $(document).ready(function() { theRotator(); }); It works brilliantly in FF, Safari, Chrome and even IE8 but IE6 & 7 are really slow. Can anyone make any suggestions on making it more efficient or just work better in IE6 & 7? The script is from here btw. Thanks.

    Read the article

  • How add class='active' to html menu with php

    - by meow
    Hello I want to put my html navigation in a separate php file so when I need to edit it, I only have to edit it once. The problem starts when I want to add the class active to the active page. I've got three pages and one common file. common.php : <?php $nav = <<<EOD <div id="nav"> <ul> <li><a <? if($page == 'one'): ?> class="active"<? endif ?> href="index.php">Tab1</a>/</li> <li><a href="two.php">Tab2</a></li> <li><a href="three.php">Tab3</a></li> </ul> </div> EOD; ?> index.php : All three pages are identical except their $page is different on each page. <?php $page = 'one'; require_once('common.php'); ?> <html> <head></head> <body> <?php echo $nav; ?> </body> </html> This simply won't work unless I put my nav on each page, but then the whole purpose of separating the nav from all pages is ruined. Is what I want to accomplish even possible? What am I doing wrong? Thanks EDIT: When doing this, the php code inside the li don't seem to run, it's just being printed as if it was html

    Read the article

  • Clearing block affects wrong floating

    - by HiveHicks
    I've got two-column layout <div class="left-pane"> Left pane </div> <div class="central-pane"> <div> <ul class="customers-types-tabs"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> <div>Main content</div> </div> and the stylesheet: .left-pane { width: 248px; float: left; background-color: #f6f6f6; border: 1px solid #e6e6e6; padding: 20px 5px; } .central-pane { margin-left: 270px; } .customers-types-tabs li { background-color: #f6f6f6; border: 1px solid #d5d5d5; line-height: 38px; padding: 0 20px; float: left; margin-right: 10px; position: relative; top: 1px; } The problem is that I want "Main content" to appear right below the div with ul inside it (that represents tabs control), but if I set Main content's div's style to clear: both, it appears below the left pane, which is taller than the ul. What should I do to get correct position of main content?

    Read the article

  • Fancy Box to Popup an HTML Page from One List Item in an Unordered List

    - by nicorellius
    I have an unordered list: <ul> <li><a id="fancy_popup" href="popup.html" class="fancybox"> Popup HTML Link</a></li> <li><a href="other.html">Other HTML Link</a></li> <li><a href="other.html">Other HTML Link</a></li> </ul> And I have a jQuery script: <script type="text/javascript"> $(document).ready(function() { $("#fancy_popup").fancybox({ transitionIn : 'elastic', transitionOut : 'elastic', easingIn : 'easeInSine', easingOut : 'easeOutSine', speedIn : 400, speedOut : 200, titlePosition : 'inside', titleFormat : 'document.write("Fancy Box Title");', cyclic : true }); }); </script> This jQuery Fancy Box script works elsewhere, with a div that has the id="fancy_popup" so I thought why not add it to the anchor directly in this case... I'm trying to figure out how to apply Fancy Box so that when someone clicks the Popup HTML link above, a Fancy Box window pops up, according to the script. I've tried variations with placing the id on the li, on the ul and manipulating the script for these selectors to no avail. Any help is appreciated.

    Read the article

  • JQuery Bind click event to appended element with an argument

    - by Gabor Szauer
    Hi guys, I'm trying to populate a ul list with some li elements and give each li element a link that calls the same function with a different argument. However it doesn't seem to work, i've attached the code below, CheckForNewMail is called on document load. Can anyone please help me out? function CheckForNewMail() { ////////////////////////////////////////////////////////////////// // This will be dynamic MailInInbox[0] = new Array("0", "Mail One"); MailInInbox[1] = new Array("12", "Mail Two"); MailInInbox[2] = new Array("32", "Mail Three"); MailInInbox[3] = new Array("5", "Mail Four"); ////////////////////////////////////////////////////////////////////// $('#mail-in-inbox').children().remove(); size = 4; element = $('#mail-in-inbox'); for(i = 0; i < size; ++i) { var link = $('<a href="#" class="inbox-link">'+ MailInInbox[i][1] +'</a>'); link.live('click', function() { LoadMailById(i); }); li = $('<li></li>'); li.append(link); element.append(li); } } function LoadMailById(id) { alert("Button "+ id +" clicked!"); }

    Read the article

  • Is there a way to check if a div has the same class as an ancestor in jQuery?

    - by T.R.
    I'm looking to dynamically highlight a tab, if it represents the current page. I have: <style> #tabs li{bg-color: white;} body.Page1 #tabs .Page1, body.Page2 #tabs .Page2, body.Page3 #tabs .Page3{bg-color: orange;} </style> <body class="Page1 ADifferentClass"> <ul id="tabs"> <li class="Page1 SomeClass"> <li class="Page2 SomeOtherClass"> <li class="Page3 AnotherClass"> </ul> </body> As you can see, there needs to be CSS for each tab, so adding another page involves modifying both the HTML and the CSS. Is there a simple (DRY) way to check if two divs have the same class already built into jQuery? I ultimately went with this: <script> $(document).ready(function(){ var classRE = /Page\d+/i; var pageType = $('body').attr('className').match(classRE); $('li.'+pageType).addClass('Highlight'); }); </script> <style> #tabs li{bg-color: white;} #tabs li.Highlight{bg-color: orange;} </style>

    Read the article

  • CSS to create curved corner between two elements?

    - by Tauren
    My UI has an unordered list on the left. When a list item is selected, a div appears on the right of it. I'd like to have a curved outer corner where the <li> and the <div> meet. See the white arrow in the image below. To extend the blue <li> to the edge of the <ul>, I'm planning to do something like this: li { right-margin: 2em; border-radius: 8px; } li.active { right-margin: 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } Is there a better way to extend the <li> to the edge of the <ul>? Obviously, I'll include the webkit and mozilla border radius CSS as well. The main thing I'm unsure about is that outer corner underneath the bottom right corner of the active <li>. I have some ideas, but they seem like hacks. Any suggestions? NOTE that the <ul> is indicated in grey, but it would be white in the real design. Also, I'm planning to use Javascript to position the <div> correctly when an <li> is selected.

    Read the article

  • Using innerHTML to add ordered list fails in IE

    - by Matt
    I'm using the following Javascript code to populate a DIV with an ordered list: // send script back in split list var scriptList = script.split("\n"); var finalScript = "<ol>\n"; var count = 0; while(scriptList.length >= count) { if((scriptList[count]=="") || (scriptList[count] == undefined)) { count ++; continue; } finalScript = finalScript + "<li>" + scriptList[count] + "</li>\n"; count ++; } finalScript = finalScript + "</ol>"; scriptingDiv.innerHTML = finalScript; In firefox, if i look in the DOM using Firebug, this correctly translates to the following and correctly displays an ordered list. <ol> <li>This is the first item in the list</li> <li>This is the second item in the list</li> </ol> In IE, it displays as if the </li> tags are <br /> tags and ignores all the other tags, like this: This is the first item in the list This is the second item in the list Do I need to dynamically add the ordered list to the DOM for this to work? As opposed to just setting the html code in the div using .innerHTML? TIA

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 38 39 40 41 42 43 44 45 46 47 48 49  | Next Page >