Search Results

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

Page 63/87 | < Previous Page | 59 60 61 62 63 64 65 66 67 68 69 70  | Next Page >

  • Dojo extending dojo.dnd.Source, move not happening. Ideas?

    - by Soulhuntre
    Hey all, Ok... I have a simple dojo page with the bare essentials. Three UL's with some LI's in them. The idea si to allow drag-n-drop among them but if any UL goes empty due to the last item being dragged out, I will put up a message to the user to gie them some instructions. In order to do that, I wanted to extend the dojo.dnd.Source dijit and add some intelligence. It seemed easy enough. To keep things simple (I am loading Dojo from a CDN) I am simply declating my extension as opposed to doing full on module load. The declaration function is here... function declare_mockupSmartDndUl(){ dojo.require("dojo.dnd.Source"); dojo.provide("mockup.SmartDndUl"); dojo.declare("mockup.SmartDndUl", dojo.dnd.Source, { markupFactory: function(params, node){ //params._skipStartup = true; return new mockup.SmartDndUl(node, params); }, onDndDrop: function(source, nodes, copy){ console.debug('onDndDrop!'); if(this == source){ // reordering items console.debug('moving items from us'); // DO SOMETHING HERE }else{ // moving items to us console.debug('moving items to us'); // DO SOMETHING HERE } console.debug('this = ' + this ); console.debug('source = ' + source ); console.debug('nodes = ' + nodes); console.debug('copy = ' + copy); return dojo.dnd.Source.prototype.onDndDrop.call(this, source, nodes, copy); } }); } I have a init function to use this to decorate the lists... dojo.addOnLoad(function(){ declare_mockupSmartDndUl(); if(dojo.byId('list1')){ //new mockup.SmartDndUl(dojo.byId('list1')); new dojo.dnd.Source(dojo.byId('list1')); } if(dojo.byId('list2')){ new mockup.SmartDndUl(dojo.byId('list2')); //new dojo.dnd.Source(dojo.byId('list2')); } if(dojo.byId('list3')){ new mockup.SmartDndUl(dojo.byId('list3')); //new dojo.dnd.Source(dojo.byId('list3')); } }); It is fine as far as it goes, you will notice I left "list1" as a standard dojo dnd source for testing. The problem is this - list1 will happily accept items from lists 2 & 3 who will move or copy as apprriate. However lists 2 & 3 refuce to accept items from list1. It is as if the DND operation is being cancelled, but the debugger does show the dojo.dnd.Source.prototype.onDndDrop.call happening, and the paramaters do look ok to me. Now, the documentation here is really weak, so the example I took some of this from may be way out of date (I am using 1.4). Can anyone fill me in on what might be the issue with my extension dijit? Thanks!

    Read the article

  • Whitelist element with class of, using htmlpurifier

    - by mcgrailm
    I want to only allow the span element only when it has a certain class in htmlpurifier does anyone know how to do this, right now I have $config->set('HTML.Allowed','a[href],p,ol,li,ul,img[src],blockquote,em,span[class]'); $config->set('Attr.AllowedClasses',"allowed"); but that allows all spans and only allows class allowed I like that it only allows the "allowed" class but I only want it to allow span when the value of its class is "allowed" thanks

    Read the article

  • ListView not firing OnItemCommand (nor ItemInserting) after preventing postback

    - by nevizi
    Hi there, I have a ListView inside a FormView that, for some strange reason, doesn't fire neither the ItemInsert nor the ItemCommand event. I'm populating the ListView with a generic list. I bind the list to the ListView on the OnPreRenderComplete. <asp:ListView runat="server" ID="lvReferences" DataKeyNames="idReference" OnItemInserting="ContractReferences_Inserting" OnItemDeleting="ContractReferences_Deleting" InsertItemPosition="LastItem" OnItemCommand="ContractReferences_Command" OnItemCreated="ContractReferences_ItemDataBound"> <LayoutTemplate> <ul> <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> </ul> </LayoutTemplate> <ItemTemplate> <li class="obsItem"> <a href="#"><asp:TextBox ID="valRef" runat="server" Width="5px" Enabled="false" Text='<%#Bind("idProcessRecordRef") %>' /></a> <asp:TextBox id="txtRef" runat="server" Text='<%#Bind("description") %>' /> <asp:ImageButton ID="btDelete" runat="server" CommandName="Delete" ImageUrl="~/_layouts/web.commons/Images/eliminar.png" /> </li> </ItemTemplate> <InsertItemTemplate> <li class="obsItem"> <a href="#"><asp:TextBox ID="valRef" runat="server" Width="5px" Enabled="false" /></a> <asp:TextBox id="txtRef" runat="server" /> <asp:ImageButton ID="btDetail" CausesValidation="false" OnClientClick="javascript:openPopup();return false;" runat="server" ImageUrl="~/_layouts/web.commons/Images/novo.png" /> <asp:ImageButton ID="btSaveDs" runat="server" CommmandName="Insert" CausesValidation="false" ImageUrl="~/_layouts/web.commons/Images/gravarObs.png" /> </li> </InsertItemTemplate> </asp:ListView> My ItemDataBound method is: protected void ContractReferences_ItemDataBound(object sender, ListViewItemEventArgs e) { if (!IsPostBack) { TextBox valRef = e.Item.FindControl("valRef") as TextBox; TextBox txtRef = e.Item.FindControl("txtRef") as TextBox; ScriptManager.RegisterStartupScript(this, this.GetType(), "popup", "function openPopup(){ window.open('ContractPicker.aspx?c1=" + valRef.ClientID + "&c2=" + txtRef.ClientID + "');}", true); } } So, basically, in the InsertItemTemplate I put a button that opens a LOV and populates my valRef and txtRef fields. I had to put a "return false" in order for the parent page to not postback (and I think the problem lies here...). Then, when I click in the ImageButton with the CommandName="Insert", instead of firing the ItemCommand event, it enters once again in the ItemDataBound handler. So, any ideas? Thanks!

    Read the article

  • flickr phpflickr api

    - by sea_1987
    Overview I am trying to get a photo feed on to my site using Flickr's api and the phpflickr library. I can successfully get the photoset on to my site, but it shows all the photos from every photoset, what I was hoping to achieve was to show the primary photo from each photoset, and then if the user clicked on the image it would show the full photoset in a lightbox/shadowbox. My Code <div id="images" class="tabnav"> <ul class="items"> <?php $count = 1; ?> <?php foreach ($photosets['photoset'] as $ph_set): ?> <?php $parentID = $ph_set['parent']; ?> <?php $photoset_id = $ph_set['id']; $photos = $f->photosets_getPhotos($photoset_id); foreach ($photos['photoset']['photo'] as $photo): ?> <li> <a rel="shadowbox['<?=$count;?>']" href="<?= $f->buildPhotoURL($photo, 'medium') ?>" title="<?= $photo['title'] ?>"> <img src="<?= $f->buildPhotoURL($photo, 'rectangle') ?>" alt="<?= $photo['title'] ?>" width="210" height="160" title="<?= $photo['title'] ?>" /> <h3><?=$ph_set['title']?></h3> <p><?=$ph_set['description'];?></p> </a> </li> <?php endforeach; ?> <?php $count++; ?> <?php endforeach; ?> </ul> </div> Another Attempt I have also tried calling the getPhotos function differently, instead of sending it without any parameters I sent it with parameters $photos = $f->photosets_getPhotos($photoset_id, NULL, NULL, 1, NULL); The above code stopped the showing all the photos from each photoset and started showing just the primary image, but it also stopped making the rest of the photos accesible to me. Is there something I can do to make this work? I am totally out iof ideas. Regards and thanks

    Read the article

  • Jquery Tabs help with onShow function

    - by StealthRT
    Hey all i am trying to figiure out why my code is not triggering the "onShow" function for the tabs. Here is my code: $(document).ready(function() { $('#tabMain > ul').tabs({ fx: {height: 'toggle'},onShow: function() {alert('onShow');} }); }) I never see the alert box pop up saying "onShow" so i do not know what i am doing wrong? Any help would be awesome! :) David

    Read the article

  • Galleria jQuery plugin briefly shows all images in IE 7 & 8

    - by hollyb
    I'm using the galleria jQuery plugin on a site. When the gallery first loads, all of the images appear briefly & vertically in ie 7 & 8. This doesn't happen when i isolate the gallery, only when i put it on a somewhat heavy page. This leads me to believe that it happens when the page is a little slow to load. Does anybody know a way to fix this? I feel like an overflow: hidden should fix this, but I've applied it along with a height in every container I could think of. Anybody have any ideas? Here is my css: .galleria{list-style:none;width:350px; overflow:hidden; height: 70px;} .galleria li{display:block;width:50px;height:50px;overflow:hidden;float:left;margin:4px 10px 20px 0;} .galleria li a{display:none;} .galleria li div{position:absolute;display:none;top:0;left:180px;} .galleria li div img{cursor:pointer;} .galleria li.active div img,.galleria li.active div{display:block;} .galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto} .galleria li .caption{display: inline;padding-top:.5em; width: 300px; } * html .galleria li div span{width:350px;} /* MSIE bug */ html: <ul class="gallery"> <li class="active"><img src="1.jpg" cap="A great veiw by so and so. This is a long block of info.<br /><span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> <li><img src="2.jpg" cap="A mountain <span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> <li><img src="3.jpg" cap="Another witty caption <span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> <li><img src="4.jpg" cap="<span style=color:#666;>Photo by: Billy D. Williams</span>" alt="Image01"></li> </ul>

    Read the article

  • Accessible semantic jQuery tabs plugin

    - by user249950
    Hello, Just a quick question to see if anyone knows of any jquery tabs plugins that run based on a similar structure to: <div class="tabs"> <div> <h4>Tab one</h4> <p>Lorem Ipsum</p> </div> <div> <h4>Tab two</h4> <p>Lorem Ipsum</p> </div> </div> Where the plugin grabs the title of the tabs from the h4s? I can only seem to find plugins that use the structure: <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Tab 1 content</p> </div> <div id="tabs-2"> <p>Tab 2 content</p> </div> <div id="tabs-3"> <p>Tab 3 content</p> </div> </div> I assume the only other way to use these plugins would be to grab the titles, remove them, add them into a list at the top of the html and then run the plugin based on that? I just ask as I am quite new to jQuery so I'm not sure how I would go about it and just wondered if there was a plugin already in existence that anyone knew of. If not, not to worry, I'll have to get busy with the docs and give it a go! Cheers

    Read the article

  • Whielist element with class of, using htmlpurifier

    - by mcgrailm
    I want to only allow the span element only when it has a certain class in htmlpurifier does anyone know how to do this, right now I have $config->set('HTML.Allowed','a[href],p,ol,li,ul,img[src],blockquote,em,span[class]'); $config->set('Attr.AllowedClasses',"allowed"); but that allows all spans and only allows class allowed I like that it only allows the "allowed" class but I only want it to allow span when the value of its class is "allowed" thanks

    Read the article

  • Carousel not working in IE7/8

    - by user515990
    I am working with jquery.carouFredSel-4.0.3-packed.js for the carousal and it works good with IE9 and mozilla,but in IE7/8, it says "LOG: carouFredSel: Not enough items: not scrolling " whenever i am seeing it is not the case. The code i am using is <div class="carousel-wrapper"> <div class="mask"> <a class="arrow left off"><-</a> <a class="arrow left on" href="javascript:void(0);"><-</a> <ul> <dsp:droplet name="ForEach"> <dsp:param name="array" value="${listRecommended}"/> <dsp:oparam name="empty">no recommended apps</dsp:oparam> <dsp:oparam name="output"> <li> <a href="javascript:void(0);"><img src="${resourcePath}/images/apps/carousel-image1.jpg" alt="bakery story"/></a> <a href="javascript:void(0);"><dsp:valueof param="element.displayName"/></a><br/> <dsp:getvalueof var="averageRating" param="element.averageRating"/> <dsp:getvalueof var="rating" param="count"/> <div class="rating"> <div class="medium"> <dsp:droplet name="For"> <dsp:param name="howMany" value="${averageRating}"/> <dsp:oparam name="output"> <input checked="checked" class="star {split:1}" disabled="disabled" name="product-similar-'${rating}'" type="radio"> </dsp:oparam> </dsp:droplet> </div> </div> </li> </dsp:oparam> </dsp:droplet> </ul> </div> <a class="arrow right off">-></a> <a class="arrow right on" href="javascript:void(0);">-></a> </div> and javascript library is jquery.carouFredSel-4.0.3-packed.js. Please let me know if someone has faced similar problem. thanks in advance Hemish

    Read the article

  • ASP.NET MVC2: Can you get ModelMetadata.ContainerType from within a collection?

    - by CodeSponge
    I'm trying to call DisplayFor and DisplayForModel to iterate an IEnumerable< with various element types from within a view. I have Templates defined for each element/Model type. What I would like to do is check the ViewData.ModelMetadata.ContainerType from within the Template so that Template can determine if it was called as part of a collection. A simple example: Index1.aspx: To render a collection of Foos. <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Foo>>" %> <asp:Content ContentPlaceHolderID="MainPlaceHolder" runat="server"> <ul><%:Html.DisplayForModel()%></ul> </asp:Content> Index2.aspx: To render a Foo. <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Foo>" %> <asp:Content ContentPlaceHolderID="MainPlaceHolder" runat="server"> <%:Html.DisplayForModel()%> </asp:Content> Shared\DisplayTemplates\Foo.ascx: A context aware Template for Foo. <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Foo>" %> <% var tag = typeof(IEnumerable).IsAssignableFrom(ViewData.ModelMetaData.ContainerType) ? "li" : "div"; %> <<%:tag%>><%:Model.Name%></<%:tag%>> The problem with this example is that ViewData.ModelMetaData.ContainerType is null in the Template when resolved though Index1.aspx. From what I've read on Brad Wilson post and others it has to do with the use of IEnumerable and its being an interface. Is there a way to insure that the ContainerType is set? Perhaps by creating a ModelMetadataProviders? I looked into that breifly but it appears the ContainerType value is determined before and then passed to the Provider. Any suggestions would be appreciated.

    Read the article

  • rails paperclip unable to access image from another view

    - by curiousCoder
    my app has an habtm relation b/w listings and categories. now from the categories index page, a user filters select box to view listings in the show page. now i am not able to access images attached to listings in the category show page. listing.rb attr_accessible :placeholder, :categories_ids has_and_belongs_to_many :categories has_attached_file :placeholder, :styles => { :medium => "300x300>", :thumb => "100x100>" }, :default_url => "/images/:style/missing.png", :url => "/system/:hash.:extension", :hash_secret => "longSecretString" categories controller def index @categories = Category.all end def show @categories = Category.find_by_sql ["select distinct l.* from listings l , categories c, categories_listings cl where c.id = cl.category_id and l.id = cl.listing_id and c.id in (?,?)" , params[:c][:id1] , params[:c][:id2]] end the sql just filters and displays the listings in show page where i can show its attributes, but cant access the placeholder. note the plural @categories in show categories show page <ul> <% @categories.each_with_index do |c, index| %> <% if index == 0 %> <li class="first"><%= c.place %></li> <%= image_tag c.placeholder.url(:thumb) %> <li><%= c.price %></li> <% else %> <li><%= c.place %></li> <li><%= c.price %></li> <%= image_tag c.placeholder.url(:thumb) %> <% end %> <% end %> </ul> Access image from different view in a view with paperclip gem ruby on rails this said to make the object plural and call a loop, wch shall allow to access the image. it does not work in this case. undefined method `placeholder' for #<Category:0x5c78640> but the amazing thing is, placeholder will be displayed as an array of all images for all the listings if used as suggested in that stackoverflow, wch is, obviously, not the way i prefer. where's the issue? what am i missing?

    Read the article

  • hyperLink on jsf error messages problem

    - by user234194
    I am trying to put link in the error messages produced by JSF. For this I am using the custom renderer, it works(clicking the error, focuses the respective input field) but the problem is , all the form values gets empty. ie when error occurs, all the input fields get empty. Any suggestion will be appreciated. package custom; public class CustomErrorRenderer extends Renderer { @Override @SuppressWarnings("unchecked") public void encodeEnd(FacesContext context, UIComponent component) throws IOException { ResponseWriter writer = context.getResponseWriter(); writer.startElement("div", component); writer.writeAttribute("id", component.getClientId(context), "id"); writer.writeAttribute("style", "color: red", null); writer.startElement("ul", null); Iterator clientIds = context.getClientIdsWithMessages(); while (clientIds.hasNext()) { String clientId = clientIds.next(); Iterator messages = context.getMessages(clientId); if (!messages.hasNext()) { continue; } String javaScript = "var field = document.getElementById('" + clientId + "');" + "if(field == null) return false;" + "field.focus(); return false;"; writer.startElement("li", null); writer.startElement("a", null); writer.writeAttribute("onclick", javaScript, null); writer.writeAttribute("href", "#", null); while (messages.hasNext()) { writer.writeText(messages.next().getSummary(), null); } writer.endElement("a"); writer.endElement("li"); } writer.endElement("ul"); writer.endElement("div"); } } This renderer is defined in faces-config.xml: add to base HTML_BASIC renderkit HTML_BASIC HTML_BASIC CustomErrorRenderer javax.faces.Output custom.CustomErrorRenderer custom.CustomErrorRenderer CustomErrorMessages custom.Errors javax.faces.component.UIOutput a tag class: package custom; import javax.faces.webapp.UIComponentELTag; public class CustomErrorTag extends UIComponentELTag { @Override public String getComponentType() { return "custom.Errors"; } @Override public String getRendererType() { return "custom.CustomErrorRenderer"; } } This is defined in a TLD file: http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd" version="2.1" 1.0 custom http://custom errors custom.CustomErrorTag empty This goes at the top of the JSP page: <%@ taglib prefix="custom" uri="http://custom"%

    Read the article

  • Safari extensions: style of selectbox like safari's bookmark folders

    - by janoliver
    Hey guys, I'm developing an extension for Safari 5 at the moment. In my extension, I use an additional toolbar, with selectboxes in it. Now, it would be great to style these like the folders in the bookmarks toolbar look. I know that it would be possible to replace my select with a completely styleable ul-list or somethin like that, but maybe there is a simpler solution. Doesn't apple provide extra tools to imitate their look? Best regards and thanks for help, Jan

    Read the article

  • Problem retrieving HTML5 video duration

    - by drebabels
    UPDATE: Ok so although I haven't solved this problem exactly, but I did figure out a work around that handles my biggest concern... the user experience. First the video doesn't begin loading until after the viewer hits the play button, so I am assuming that the duration information wasn't available to be pulled (I don't know how to fix this particular issue... although I assume that it would involve just loading the video metadata separately from the video, but I don't even know if that is possible). So to get around the fact that there is no duration data, I decided to hide the duration info (and actually the entire control) completely until you hit play. I know... its cheating. But for now it makes me happy :) That said... if anyone knows how to load the video metadata separately from the video file... please share. I think that should completely solve this problem. I am working on building a HTML5 video player with a custom interface, but I am having some problems getting the video duration information to display. My HTML is real simple (see below) <video id="video" poster="image.jpg" controls> <source src="video_path.mp4" type="video/mp4" /> <source src="video_path.ogv" type="video/ogg" /> </video> <ul class="controls"> <li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li> </ul> And the javascript I am using to get and insert the duration is var duration = $('#duration').get(0); var vid_duration = Math.round(video.duration); duration.firstChild.nodeValue = vid_duration; The problem is nothing happens. I know the video file has the duration data because if I just use the default controls, it displays fine. But the real strange thing is if I put alert(duration) in my code like so alert(duration); var vid_duration = Math.round(video.duration); duration.firstChild.nodeValue = vid_duration; then is works fine (minus the annoying alert that pops up). Any ideas what is happening here or how I can fix it?

    Read the article

  • Treeview drag and drop

    - by David Thorisson
    I'm using the jQuery droppable/dragable to reorder a treeview (made up of ul/li items) I have no problems making a element and dragging it into the tree When I define the items to be draggable, the code doesn´t work any more (the items are classed as "droppables" but the drop event won´t run) Isn't this supposed to be possible?

    Read the article

  • Question about the code of the backend of symfony

    - by user248959
    Hi, this is the index action and template generated at the backend for the model "coche". public function executeIndex(sfWebRequest $request) { // sorting if ($request->getParameter('sort') && $this->isValidSortColumn($request->getParameter('sort'))) { $this->setSort(array($request->getParameter('sort'), $request->getParameter('sort_type'))); } // pager if ($request->getParameter('page')) { $this->setPage($request->getParameter('page')); } $this->pager = $this->getPager(); $this->sort = $this->getSort(); } This is the index template: <?php use_helper('I18N', 'Date') ?> <?php include_partial('coche/assets') ?> <div id="sf_admin_container"> <h1><?php echo __('Coche List', array(), 'messages') ?></h1> <?php include_partial('coche/flashes') ?> <div id="sf_admin_header"> <?php include_partial('coche/list_header', array('pager' => $pager)) ?> </div> <div id="sf_admin_bar"> <?php include_partial('coche/filters', array('form' => $filters, 'configuration' => $configuration)) ?> </div> <div id="sf_admin_content"> <form action="<?php echo url_for('coche_coche_collection', array('action' => 'batch')) ?>" method="post"> <?php include_partial('coche/list', array('pager' => $pager, 'sort' => $sort, 'helper' => $helper)) ?> <ul class="sf_admin_actions"> <?php include_partial('coche/list_batch_actions', array('helper' => $helper)) ?> <?php include_partial('coche/list_actions', array('helper' => $helper)) ?> </ul> </form> </div> <div id="sf_admin_footer"> <?php include_partial('coche/list_footer', array('pager' => $pager)) ?> </div> </div> In the template there is this line: include_partial('coche/filters', array('form' => $filters, 'configuration' => $configuration)) ?> but i can not find the variables $this-filters and $this-configuration in the index action. How is that possible? Javi

    Read the article

  • php recursive list help

    - by Jason
    Hi all, I am trying to display a recursive list in PHP for a site I am working on. I am really having trouble trying to get the second level to display. I have a function that displays the contents to the page as follows. function get_menu_entries($content,$which=0) { global $tbl_prefix, $sys_explorer_vars, $sys_config_vars; // INIT LIBRARIES $db = new DB_Tpl(); $curr_time = time(); $db->query("SELECT * FROM ".$tbl_prefix."sys_explorer WHERE preid = '".$which."' && config_id = '".$sys_explorer_vars['config_id']."' && blocked = '0' && startdate < '".$curr_time."' && (enddate > '".$curr_time."' || enddate = '') ORDER BY preid,sorting"); while($db->next_record()){ $indent = $db->f("level") * 10 - 10; $sitemap_vars['break'] = ""; $sitemap_vars['bold'] = ""; if($db->f("level") == 2) { $sitemap_vars['ul_start'] = ""; $sitemap_vars['bold'] = "class='bold'"; $sitemap_vars['ul_end'] = ""; } switch($db->f("link_type")) { case '1': // External Url $sitemap_vars['hyperlink'] = $db->f("link_url"); $sitemap_vars['target'] = ""; if($db->f("link_target") != "") { $sitemap_vars['target'] = "target=\"".$db->f("link_target")."\""; } break; case '2': // Shortcut $sitemap_vars['hyperlink'] = create_url($db->f("link_eid"),$db->f("name"),$sys_config_vars['mod_rewrite']); $sitemap_vars['target'] = ""; break; default: $sitemap_vars['hyperlink'] = create_url($db->f("eid"),$db->f("name"),$sys_config_vars['mod_rewrite']); $sitemap_vars['target'] = ""; break; } if($db->f("level") > 1) { $content .= "<div style=\"text-indent: ".$indent."px;\" ".$sitemap_vars['bold']."><a href=\"".$sitemap_vars['hyperlink']."\" ".$sitemap_vars['target'].">".$db->f("name")."</a></div>\n"; } $content = get_menu_entries($content,$db->f("eid")); } return(''.$content.''); } At the moment the content displays properly, however I want to turn this function into a DHTML dropdown menu. At present what happens with the level 2 elements is that using CSS the contents are indented using CSS. What I need to happen is to place the UL tag at the beginning and /UL tag at the end of the level 2 elements. I hope this makes sense. Any help would be greatly appreciated.

    Read the article

  • Transitioning accordions from small height to full height with CSS

    - by arkanciscan
    I am building an accordion list and I want it to animate open and closed using a CSS -webkit-transition:. The animation is triggered by an event handler that simply toggles the .open class on and off. The problem is that when I click it, the animation goes from closed height to 0px height then jerks back to full height instead of smoothly animating to full height. HTML <ul class="accordion"> <li>Foo <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis leo sit amet justo vulputate volutpat. Suspendisse potenti. Aliquam aliquet justo ut turpis suscipit adipiscing.</p> </li> <li class="open">Baz <p>Ut velit magna, sagittis at blandit accumsan, vestibulum et dolor. Aliquam elit ante, congue vel pharetra ut, ultricies non est. In hac habitasse platea dictumst. Donec velit ligula, sodales a imperdiet non, sagittis id mauris.</p> </li> <li>Bar <p>Cras sit amet gravida lacus. Nulla consequat molestie nunc nec fermentum. Donec lobortis pretium quam sit amet scelerisque.</p> </li> </ul>? Javascript $('.accordion').delegate('li', 'click', function(li){ $(this).toggleClass('open'); }); Css .accordion li.open{ -webkit-transition: height 1s; } .accordion li:not(.open){ height: 1em; -webkit-transition: height 1s; } ? Try it on JSFiddle and see what I mean. I've already figured out how to make it work, but it requires setting an explicit height on the .open class. The accordions have variable height however, and creating an explicit selector for each one is obtrusive and unmaintainable. Can anyone give me a better solution than this? Here it is working with an explicit height that doesn't fit the content

    Read the article

  • JQuery Hover li Show div which sits outside li structure

    - by Dave_Stott
    Hi everyone I'm currently trying to create a "mega" dropout menu using JQuery but have encountered an issue I'm yet to be able to resolve. At the moment I have the following HTML structure: <div id="TopNav" class="grid_16"> <ul class="cmsListMenuUL level0" id="TopNavMenu"> <li class="cmsListMenuLIcmsListMenuLI highlightedLI" id="TopNavMenu_Home"><a href="/"> <span class="text">Home</span></a></li> <li class="cmsListMenuLIfirst" id="TopNavMenu_0_1"><a href="/Key-Sectors.aspx" class="cmsListMenuLink"> <span class="text">Key Sectors</span></a></li> <li class="cmsListMenuLI" id="TopNavMenu_0_2"><a href="/Global-Brands.aspx" class="cmsListMenuLink"> <span class="text">Global Brands</span></a></li> <li class="cmsListMenuLI" id="TopNavMenu_0_3"><a href="/News---Features.aspx" class="cmsListMenuLink"> <span class="text">News &amp; Features</span></a></li> <li class="cmsListMenuLI" id="TopNavMenu_0_4"><a href="/Videos.aspx" class="cmsListMenuLink"> <span class="text">Videos</span></a></li> <li class="cmsListMenuLI" id="TopNavMenu_0_5"><a href="/Events.aspx" class="cmsListMenuLink"> <span class="text">Events</span></a></li> <li class="cmsListMenuLI" id="TopNavMenu_0_6"><a href="/Key-Cities.aspx" class="cmsListMenuLink"> <span class="text">Key Cities</span></a></li> <li class="cmsListMenuLI" id="TopNavMenu_0_7"><a href="/Doing-Business-in-Yorkshire.aspx" class="cmsListMenuLink"><span class="text">Doing Business in Yorkshire</span></a></li> <li class="cmsListMenuLI" id="TopNavMenu_0_8"><a href="/How-We-Can-Help.aspx" class="cmsListMenuLink"> <span class="text">How We Can Help</span></a></li> <li class="cmsListMenuLI" id="TopNavMenu_0_9"><a href="/Contact-Us.aspx" class="cmsListMenuLink"> <span class="text">Contact Us</span></a></li> </ul> </div> <div class="sectorsDropped"> <div class="floatLeft leftColumn"> <div class="parentItem" style="border-color: #0064BE;"> <a href="/Key-Sectors/Advanced-Engineering---Materials.aspx" class="parentItemContent"> Advanced Engineering &amp; Materials</a><div class="childItem"> <a href="/Key-Sectors/Advanced-Engineering---Materials/Nuclear.aspx">- Nuclear</a></div> <div class="childItem"> <a href="/Key-Sectors/Advanced-Engineering---Materials/Logistics---Infrastructure.aspx"> - Logistics &amp; Infrastructure</a></div> </div> <div class="parentItem" style="border-color: #FFB611;"> <a href="/Key-Sectors/Chemicals.aspx" class="parentItemContent">Chemicals</a></div> <div class="parentItem" style="border-color: #B7CC0B;"> <a href="/Key-Sectors/Environmental-Technologies.aspx" class="parentItemContent">Environmental Technologies</a><div class="childItem"> <a href="/Key-Sectors/Environmental-Technologies/Offshore-Wind.aspx">- Offshore Wind</a></div> <div class="childItem"> <a href="/Key-Sectors/Environmental-Technologies/Carbon-Capture---Storage.aspx">- Carbon Capture &amp; Storage</a></div> <div class="childItem"> <a href="/Key-Sectors/Environmental-Technologies/Tidal-Power.aspx">- Tidal Power</a></div> <div class="childItem"> <a href="/Key-Sectors/Environmental-Technologies/Biomass.aspx">- Biomass</a></div> </div> </div> <div class="floatLeft rightColumn"> <div class="parentItem" style="border-color: #AC26AA;"> <a href="/Key-Sectors/Digital---New-Media.aspx" class="parentItemContent">Digital &amp; New Media</a></div> <div class="parentItem" style="border-color: #e1477e;"> <a href="/Key-Sectors/Food---Drink.aspx" class="parentItemContent">Food &amp; Drink</a></div> <div class="parentItem" style="border-color: #00c5b5;"> <a href="/Key-Sectors/Healthcare-Technologies.aspx" class="parentItemContent">Healthcare Technologies</a><div class="childItem"> <a href="/Key-Sectors/Healthcare-Technologies/Biotechnology.aspx">- Biotechnology</a></div> <div class="childItem"> <a href="/Key-Sectors/Healthcare-Technologies/Pharmaceuticals.aspx">- Pharmaceuticals</a></div> <div class="childItem"> <a href="/Key-Sectors/Healthcare-Technologies/Medical-Devices.aspx">- Medical Devices</a></div> </div> <div class="parentItem" style="border-color: #AC1A2F;"> <a href="/Key-Sectors/Financial---Professional.aspx" class="parentItemContent">Financial &amp; Professional</a></div> </div> </div> In normal circumstances the div containing the "mega" menu options would sit inside the li item that fires the show/hide but this is currently not possible as the ul list of navigation links is rendered using a 3rd party piece of software which does not provide an equivalent of an OnItemDataBound event for me to be able to inject the div into the item Does anyone know of a way, using JQuery, of showing the div but maintain the display of the div as the mouse focus leaves the li that originaly displayed the div and actually enters the div? I'm currently using the following JQuery which displays the div correctly but as the mouse focus enters the div the div then disappears as the mouse focus from the li has now moved: $(document).ready(function() { function addMega(){ $(".sectorsDropped").toggle("fast"); } function removeMega(){ $(".sectorsDropped").toggle("fast"); } var megaConfig = { interval: 500, sensitivity: 4, over: addMega, timeout: 500, out: removeMega }; $("#TopNavMenu_0_1").hoverIntent(megaConfig) }); Thanks Dave

    Read the article

  • Animating list items with jQuery

    - by Giles B
    Hi Guys, Im trying to find the best way of animating a list of items one by one. So for example I have a UL with 7 items in it and when my trigger element is clicked I want each item to fade in one below the other with a slight delay between each item. Any ideas would be most appreciated. Thanks

    Read the article

  • $.ajax ColdFusion cfc JSON Hello World

    - by cf_PhillipSenn
    I've simplified this example as much as I can. I have a remote function: <cfcomponent output="false"> <cffunction name="Read" access="remote" output="false"> <cfset var local = {}> <cfquery name="local.qry" datasource="myDatasource"> SELECT PersonID,FirstName,LastName FROM Person </cfquery> <cfreturn local.qry> </cffunction> </cfcomponent> And using the jQuery $.ajax method, I would like to make an unordered list of everyone. <!DOCTYPE HTML> <html> <head> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> jQuery(function($){ $.ajax({ url: "Remote/Person.cfc?method=Read&ReturnFormat=json", success: function(data){ var str = '<ul>'; // This is where I need help: for (var I=0; I<data.length; I++) { str += '<li>' + I + data[I][1]+ '</li>' } str += '</ul>'; $('body').html(str); }, error: function(ErrorMsg){ console.log("Error"); } }); }); </script> </head> <body> </body> </html> The part where I'm lost is where I'm looping over the data. I prefer to the use jQuery $.ajax method because I understand that $.get and $.post don't have error trapping. I don't know how to handle JSON returned from the cfc.

    Read the article

  • <plugin> not a function

    - by bah
    Hi, I've been trying to solve this mystery almost 2 hours, this is giving me a headache. I tried 2 plug-ins already and I'm always getting "* is not a function". My code is exactly like examples so I don't know why it's not working. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>asd</title> <script type="text/javascript" src="jquery.js"></script> <script type='text/javascript' src='serial/jquery.scrollTo'></script> <script type='text/javascript' src='serial/jquery.serialScroll'></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider').serialScroll({ items:'li', offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left) start:1, //as we are centering it, start at the 2nd duration:1200, force:true, stop:true, lock:false, cycle:false, //don't pull back once you reach the end easing:'easeOutQuart', //use this easing equation for a funny effect jump: true //click on the images to scroll to them }); }); </script> </head> <body> <div id="slider"> <ul> <li><img width="500" height="500" src="dummy/dummy.jpg" alt="Css Template Preview" /></li> <li><img width="500" height="500" src="dummy/dummy1.jpg" alt="Css Template Preview" /></li> <li><img width="500" height="500" src="dummy/dummy2.jpg" alt="Css Template Preview" /></li> <li><img width="500" height="500" src="dummy/dummy3.jpg" alt="Css Template Preview" /></li> </ul> </div> </body> </html> I must be missing something essential there because I see nothing what's wrong. I'm using jQuery 1.4.2. and there are plug-ins I've tried - Easy Slider, jQuery serial scroll

    Read the article

  • get the start position of an item using the jquery ui sortable plugin

    - by Rippo
    I am using the jQuery UI sortable plugin and I am trying to get 2 alerts I want the staring position of the element and the finished position of the element. $(function() { $("#filterlist ul").sortable({ opacity: 0.6, cursor: 'move', update: function(event, ui) { alert(ui.item.prevAll().length + 1); } }); }); I can get the position of the item after it has been dragged by using:- ui.item.prevAll().length + 1 What do I use to get the position it started from?

    Read the article

< Previous Page | 59 60 61 62 63 64 65 66 67 68 69 70  | Next Page >