Search Results

Search found 2954 results on 119 pages for 'zong li'.

Page 58/119 | < Previous Page | 54 55 56 57 58 59 60 61 62 63 64 65  | Next Page >

  • PHP Dynamic Count & Limit Menu items

    - by Adrian M.
    Hello, I want to modify this code which works pretty good but (or I don't know because I'm new with php) I can't limit the number of li's displayed for the main elements in the menu. The actual code will echo all elements it finds, I want to limit the times <li><a href='{$sLink}' {$sOnclick} target='_parent'>{$sPictureRep}{$sText}</a> this line is echoed.. let's say to echo just the first 15 elements + a "MORE" button under which to display the rest of the elements as sub-menus.. (this is a 2 level horizontal menu). Can someone please help me? I really tried a lot but I'm not an expert in PHP.. Thanks! <?php require_once( '../../../inc/header.inc.php' ); require_once( DIRECTORY_PATH_INC . 'membership_levels.inc.php' ); require_once( DIRECTORY_PATH_ROOT . "templates/tmpl_{$tmpl}/scripts/TemplMenu.php" ); class SimpleMenu extends TemplMenu { function getCode() { $this->iElementsCntInLine = 100; $this->getMenuInfo(); $this->genTopItems(); return $this->sCode; } function genTopItem($sText, $sLink, $sTarget, $sOnclick, $bActive, $iItemID, $isBold = false, $sPicture = '') { $sActiveStyle = ($bActive) ? ' id="tm_active"' : ''; if (!$bActive) { $sAlt= $sOnclick ? ( ' alt="' . $sOnclick . '"' ) : ''; $sTarget = $sTarget ? ( ' target="_parent"' ) : ''; } $sLink = (strpos($sLink, 'http://') === false && !strlen($sOnclick)) ? $this->sSiteUrl . $sLink : $sLink; $sSubMenu = $this->getAllSubMenus($iItemID); $sImgTabStyle = $sPictureRep = ''; if ($isBold && $sPicture != '') { $sPicturePath = getTemplateIcon($sPicture); $sPictureRep = "<img src='{$sPicturePath}' style='vertical-align:middle;width:16px;height:16px;' />"; $sText = '&nbsp;'; $sImgTabStyle = 'style="width:38px;"'; } $sMainSubs = ($sSubMenu=='') ? '' : " {$sSubMenu} </a>"; $this->sCode .= " <li><a href='{$sLink}' {$sOnclick} target='_parent'>{$sPictureRep}{$sText}</a> <div id='submenu'> <ul> <li>{$sMainSubs}</li> </ul> </div> </li> "; } } $objMenu = new SimpleMenu(); echo "<ul id='ddmenu'>"; echo $objMenu->getCode(); echo "</ul>"; ?>

    Read the article

  • How do I return a message if $_GET is null or does not match any database entries?

    - by CT
    I am working on designing an IT Asset database. Here I am working on a page used to view details on a specific asset determined by an asset id. Here I grab $id from $_GET["id"]; When $id is null, the page does not load. When $id does not match any entry within the database, the page loads but no asset table is printed. In both these cases, I would like to display a message like "There is no database entry for that Asset ID" How would this be handled? Thank you. <?php /* * View Asset * */ # include functions script include "functions.php"; $id = $_GET["id"]; ConnectDB(); $type = GetAssetType($id); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Wagman IT Asset</title> </head> <body> <div id="page"> <div id="header"> <img src="images/logo.png" /> </div> </div> <div id="content"> <div id="container"> <div id="main"> <div id="menu"> <ul> <table width="100%" border="0"> <tr> <td width="15%"></td> <td width="30%%"><li><a href="index.php">Search Assets</a></li></td> <td width="30%"><li><a href="addAsset.php">Add Asset</a></li></td> <td width="25%"></td> </tr> </table> </ul> </div> <div id="text"> <ul> <li> <h1>View Asset</h1> </li> </ul> <br /> <?php switch ($type){ case "Server": $result = QueryServer($id); $ServerArray = GetServerData($result); PrintServerTable($ServerArray); break; case "Desktop"; break; case "Laptop"; break; } ?> </div> </div> </div> <div class="clear"></div> <div id="footer" align="center"> <p>&nbsp;</p> </div> </div> <div id="tagline"> Wagman Construction - Bridging Generations since 1902 </div> </body> </html>

    Read the article

  • Clear float issue

    - by Jason
    I have a page with the standard navigation bar on the left and the content area taking up the rest of the horizontal area to its side. For modern browsers I am using table-row and table-cell values for the display attribute. However, for IE7 I included a conditional stylesheet that tries to float the nav bar. This works fine except when the content area itself has floated elements and I try to use clear. My goal is to displayed the clear element right after the content area floats but instead it gets shoved down below the nav area. The following demo code shows this issue. My goal is to get the table to display right below the "leftThing" and "rightThing" but instead there is a large gap between them and the table. <html> <head> <title>Float Test</title> <style type="text/css"> #body { background: #cecece; } #sidebar { background: #ababab; float: left; width: 200px; } #content { background: #efefef; margin-left: 215px; } #leftThing { background: #456789; float: left; width: 100px; } #rightThing { background: #654321; float: right; width: 100px; } table { clear: both; } </style> </head> <body> <div id="body"> <div id="sidebar"> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <div id="content"> <div style="position: realtive;"> <div id="leftThing"> ABCDEF </div> <div id="rightThing"> WXYZ </div> <table> <thead> <th>One</th> <th>Two</th> </thead> <tr> <td>Jason</td> <td>45</td> </tr> <tr> <td>Mary</td> <td>41</td> </tr> </table> <p>Exerci ullamcorper consequat duis ipsum ut nostrud zzril, feugait feugiat duis dolor feugiat commodo, accumsan, duis illum eum molestie luptatum nisl iusto. Commodo minim ullamcorper blandit, nostrud feugiat blandit esse dolore, consequat vulputate augue sit ad. Facilisi feugait luptatum eu minim wisi, facilisis molestie wisi in in amet vero quis.</p> </div> </div> </div> </body> </html> Thank you for your help.

    Read the article

  • How to debug SITE.MASTER ASPX file?

    - by salvationishere
    I am developing a C#/SQL VS 2008 website application and I'm trying to set breakpoints in my site.master file--is there a way to do this? The contents of this file are: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %> <!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 id="Head1" runat="server"> <title>Forms Authentication, Authorization, and User Accounts</title> <link href="Styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <form id="form1" runat="server"> <div id="header"> <span class="title">User Account Tutorials</span><br /> <span class="breadcrumb"> <asp:SiteMapPath ID="SiteMapPath1" runat="server"> </asp:SiteMapPath> </span> </div> <div id="content"> <asp:ContentPlaceHolder ID="MainContent" runat="server"> <!-- Page-specific content will go here... --> </asp:ContentPlaceHolder> </div> <div id="navigation"> <asp:ContentPlaceHolder ID="LoginContent" runat="server"> <asp:LoginView ID="LoginView1" runat="server"> <LoggedInTemplate> Welcome back,<asp:LoginName ID="LoginName1" runat="server" /> </LoggedInTemplate> <AnonymousTemplate> Hello, stranger! </AnonymousTemplate> </asp:LoginView> <br /> <br /> </asp:ContentPlaceHolder> <asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Logout.aspx" /> <ul> <li> <asp:HyperLink runat="server" ID="lnkHome" NavigateUrl="~/Default.aspx">Home</asp:HyperLink> </li> <asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"> <ItemTemplate> <li> <asp:HyperLink ID="lnkMenuItem" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink> <asp:Repeater ID="submenu" runat="server" DataSource="<%# ((SiteMapNode) Container.DataItem).ChildNodes %>"> <HeaderTemplate> <ul> </HeaderTemplate> <ItemTemplate> <li> <asp:HyperLink ID="lnkMenuItem" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink> </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> </li> </ItemTemplate> </asp:Repeater> </ul> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" /> </div> </form> </div> </body> </html>

    Read the article

  • event capturing or bubbling

    - by ChampionChris
    I have a link button in a repeater control. the li element is drag and droppable using jquery. when the page loads the the link button works perfectly, the jquery that is attached and the server side code both execute. when I perform a drag and drop then click on the link button it doesn't not fire. when i click it a second time it does fire. If i perform 2 or drag and drops in a row the link button doesn't fire a as many drag and drops as i before it will fire. for example if if perform 3 drag and drops then it will take about 3 click before the events are fired. <asp:Repeater ID="rTracks" runat="server" OnItemDataBound="rTracks_ItemDataBound" EnableViewState="true"> <ItemTemplate> <li onclick="testclick();" class='admin-song ui-selectee <asp:Literal id="ltStatusClass" runat="server" />' mediaid="<%# Eval("MediaId") %>" artistid="<%# Eval("tbMedia.tbArtists.id") %>"><span class="handle"><strong> <%--<%# int.Parse(DataBinder.Eval(Container, "ItemIndex", "")) + 1%>--%><%# Eval("SortNumber")%></strong><%--0:03--%></span> <span class="play"><span class="btn-play">&nbsp;</span></span> <span class="track" title="<%# Eval("tbMedia.Title") %>"> <%# Eval("tbMedia.Title") %></span> <span class="artist"> <%# Eval("tbMedia.tbArtists.Name") %></span> <span class="time" length="<%# Eval("tbMedia.Length") %>"> <asp:Literal ID="ltRuntime" runat="server" /></span> <span class="notes"><span class="btn-notes"> <asp:Literal ID="ltNotesCount" runat="server" /></span></span> <span class="status"> <asp:Literal ID="ltStatus" runat="server" /></span> <span class="date"> <%# Eval("DateAdded") %></span> <span class="remove"><asp:LinkButton ID="lbStatusClass2" runat="server" CssClass="btn-del" OnClick="UpdateStatus" ValidationGroup='<%#Bind("MediaId") %>'> <%--<span class='<asp:Literal id="ltStatusClass2" runat="server" Text="btn-del" />'>--%> &nbsp;<%--</span>--%></asp:LinkButton></span></span> </li> </ItemTemplate> </asp:Repeater> I have onclick event on the li element, when the mouse is clicks the link button the li onclick event is fired even when linkbutton event doesnt fire. My question is if the li captures the event y doesnt the event fire on the linkbutton? What would be stopping the event?

    Read the article

  • jQuery - Need help stopping animation on click command.

    - by iamtheratio
    With a few of your help I was able to get the jquery I wanted to work flawlessly, except for one thing.. the animation doesn't stop when i click on the buttons. Scenario: I have an Image, and 3 buttons underneath labeled "1","2", and "3". The jquery will automate the click function every 4500ms and switch from 1 to 2, then 2 to 3 and continuously loop. However the problem is, if I manually click on a 1,2,3 button the animation does not stop. Any ideas how I could accomplish this? jQuery: var tabs; var len; var index = 1; var robot; function automate() { tabs.eq((index%len)).trigger('click'); index++; } robot = setInterval(automate, 5500); jQuery(document).ready(function(){ jQuery(".imgs").hide(); jQuery(".img_selection a").click(function(){ stringref = this.href.split('#')[1]; $(".img_selection a[id$=_on]").removeAttr('id'); this.id = this.className + "_on"; jQuery('.imgs').hide(); if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") { jQuery('.imgs#' + stringref).show(); } else jQuery('.imgs#' + stringref).fadeIn(); return false; }); $('.img_selection a').removeAttr('id').eq(0).trigger('click'); tabs = jQuery(".img_selection a"); len = tabs.size(); }); I tried adding the below code, with a lot of help from this website, but to no avail.. CODE: jQuery(document).ready(function(){ jQuery(".imgs").hide().click(function(){ clearInterval(robot); }); HTML: <!-- TOP IMAGE ROTATION --> <div id="upper_image"> <div id="img1" class="imgs"> <p><img src="images/top_image.jpg" width="900" height="250" alt="The Ratio - Print Projects!" border="0" /></p> </div> <div id="img2" class="imgs"> <p><img src="images/top_image2.jpg" width="900" height="250" alt="The Ratio - In The Works!" border="0" /></p> </div> <div id="img3" class="imgs"> <p><img src="images/top_image3.jpg" width="900" height="250" alt="The Ratio!" border="0" /></p> </div> </div> <!-- / TOP IMAGE ROTATION --> <!-- TOP IMAGE SELECTION --> <ul class="img_selection"> <li><a id="img1_on" class="img1" href="#img1">1</a></li> <li><a class="img2" href="#img2">2</a></li> <li><a class="img3" href="#img3">3</a></li> </ul> <!-- / TOP IMAGE SELECTION -->

    Read the article

  • Bootstrap toggleable tag

    - by user1869816
    I am a newbies to bootstrap. I have tried to play with the code to make a page with toggleable tag. However, I have checked my code for many times but I still can't find the problem in my code. Would anyone help me, please? <div class="row"> <div class="tabbable"> <ul class="nav nav-tabs" id="tabs" data-tabs="tabs"> <li class="active"><a href="#having_a" data-toggle="tab">Having a</a></li> <li><a href="#having_b" data-toggle="tab">Having b</a></li> <li><a href="#having_c" data-toggle="tab">Having c</a></li> </ul> <!-- content of the tab --> <div class="tab-content" id="tab-content"> <div class="tab-pane active" id="having_a"> <p>a</p> </div> <div class="tab-pane" id="having_b"> <p>b</p> </div> <div class="tab-pane" id="having_c"> <p>c</p> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function ($) {$('#tabs').tab(); }); </script> </div> <hr> <footer> <p>&copy;2012</p> </footer> </div> <!-- /container --> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/jquery.js"></script> <script src="js/bootstrap-transition.js"></script> <script src="js/bootstrap-alert.js"></script> <script src="js/bootstrap-modal.js"></script> <script src="js/bootstrap-dropdown.js"></script> <script src="js/bootstrap-scrollspy.js"></script> <script src="js/bootstrap-tab.js"></script> <script src="js/bootstrap-tooltip.js"></script> <script src="js/bootstrap-popover.js"></script> <script src="js/bootstrap-button.js"></script> <script src="js/bootstrap-collapse.js"></script> <script src="js/bootstrap-carousel.js"></script>

    Read the article

  • Sam Abraham to Speak about MVC2 at the Florida.Net Miramar .Net User Group on July 13 2010

    - by Sam Abraham
    I am scheduled to give a presentation at the Miramar .Net User Group on July 13, 2010 about MVC and the new features in MVC2. This will be similar yet will have more advanced content since the group had already had a introduction to MVC in a previous meeting. Here is the topic and speaker bio: Sam Abraham To Speak At The LI .Net User Group on June 3rd, 2010 As you might know, I lived and worked on LI, NY for 11 years before relocating to South Florida. As I will be visiting my family who still live there in the first week of June, I couldn't resist reaching out to Dan Galvez, LI  .Net User Group Leader, and asking if he needed a speaker for June's meeting. Apparently the stars were lined up right and I am now scheduled to speak at my "home" group on June 3rd, which I am pretty excited about. Here is a brief abstract of my talk and speaker bio. What's New in MVC2 We will start by briefly reviewing the basics of the Microsoft MVC Framework. Next, we will look at the new features introduced in the latest and greatest MVC2. Many new enhancements were introduced to both the MS MVC Framework and to VS2010 to improve developers' experience and reduce development time. We will be talking about new MVC2 features such as: Model Validation, Areas and Template Helpers. We will also discuss the new built-in MVC project templates that ship with VS2010. About the Speaker Sam Abraham is a Microsoft Certified Professional (MCP) and Microsoft Certified Technology Specialist (MCTS ASP.Net 3.5) He currently lives in South Florida where he leads the West Palm Beach .Net User Group (www.fladotnet.com) and actively participates in various local .Net Community events as organizer and/or technical speaker. Sam is also an active committee member on various initiatives at the South Florida Chapter of the Project Management Institute (www.southfloridapmi.org). Sam finds his passion in leveraging latest and greatest .Net Technologies along with proven Project Management practices and methodologies to produce high quality, cost-competitive software.  Sam can be reached through his blog: http://www.geekswithblogs.net/wildturtle

    Read the article

  • New MySQL Enterprise Edition Demo

    - by Bertrand Matthelié
    @font-face { font-family: "Arial"; }@font-face { font-family: "Cambria"; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: "Times New Roman"; }div.Section1 { page: Section1; } In case you haven’t seen it yet, we released last week a new MySQL Enterprise Edition Flash Demo. @font-face { font-family: "Arial"; }@font-face { font-family: "Cambria"; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: "Times New Roman"; }a:link, span.MsoHyperlink { color: blue; text-decoration: underline; }a:visited, span.MsoHyperlinkFollowed { color: purple; text-decoration: underline; }div.Section1 { page: Section1; } This demo helps you understand in only 3 minutes how Oracle’s MySQL Enterprise Edition reduces the risk, cost and time required in developing, deploying and managing business-critical MySQL applications. You can watch it here. After watching the demo, you can easily go ahead and try MySQL Enterprise Edition, and/or get more detailed information in our whitepaper. @font-face { font-family: "Arial"; }@font-face { font-family: "Cambria"; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: "Times New Roman"; }a:link, span.MsoHyperlink { color: blue; text-decoration: underline; }a:visited, span.MsoHyperlinkFollowed { color: purple; text-decoration: underline; }div.Section1 { page: Section1; } Enjoy the demo!

    Read the article

  • Play sound on menu items on hover [migrated]

    - by Mahalia Samuels
    How can I go about making a sound clip play when an element is hovered over? I'm using the latest Wordpress, and the parent theme I am using gives me an option to paste scripts which it will embed to the <head> section. Is there a script which I can just add to my <head> that will play the sound when the cursor moves over my menu item class .menu li? I spent several hours trying to figure this out the other day with no avail. I've done this before in a simple HTML website: <head> <script language="javascript" type="text/javascript"> function playSound(soundfile) { document.getElementById("dummy").innerHTML= "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; } </script> </head> <li><a href="index.html" onmouseover="playSound('lib/hover.mp3');" onclick="playSound('lib/click.mp3');"><span>Home</span></a></li> Not sure how to deploy this on Wordpress though.

    Read the article

  • Using depends with the jQuery Validation plugin

    - by Glenn Slaven
    I've got a form with a bunch of textboxes that are disabled by default, then enabled by use of a checkbox next to each one. When enabled, the values in these textboxes are required to be a valid number, but when disabled they don't need a value (obviously). I'm using the jQuery Validation plugin to do this validation, but it doesn't seem to be doing what I expect. When I click the checkbox and disable the textbox, I still get the invalid field error despite the depends clause I've added to the rules (see code below). Oddly, what actually happens is that the error message shows for a split second then goes away. Here is a sample of the list of checkboxes & textboxes: <ul id="ItemList"> <li> <label for="OneSelected">One</label><input id="OneSelected" name="OneSelected" type="checkbox" value="true" /> <input name="OneSelected" type="hidden" value="false" /> <input disabled="disabled" id="OneValue" name="OneValue" type="text" /> </li> <li> <label for="TwoSelected">Two</label><input id="TwoSelected" name="TwoSelected" type="checkbox" value="true" /> <input name="TwoSelected" type="hidden" value="false" /> <input disabled="disabled" id="TwoValue" name="TwoValue" type="text" /> </li> </ul> And here is the jQuery code I'm using //Wire up the click event on the checkbox jQuery('#ItemList :checkbox').click(function(event) { var textBox = jQuery(this).siblings(':text'); textBox.valid(); if (!jQuery(this).attr("checked")) { textBox.attr('disabled', 'disabled'); textBox.val(''); } else { textBox.removeAttr('disabled'); textBox[0].focus(); } }); //Add the rules to each textbox jQuery('#ItemList :text').each(function(e) { jQuery(this).rules('add', { required: { depends: function(element) { return jQuery(element).siblings(':checkbox').attr('checked'); } }, number: { depends: function(element) { return jQuery(element).siblings(':checkbox').attr('checked'); } } }); }); Ignore the hidden field in each li it's there because I'm using asp.net MVC's Html.Checkbox method.

    Read the article

  • How to stop event bubbling with jquery live?

    - by chobo2
    Hi I am trying to stop some events but stopPropagation does not work with "live" so I am not sure what to do. I found this on their site. Live events do not bubble in the traditional manner and cannot be stopped using stopPropagation or stopImmediatePropagation. For example, take the case of two click events - one bound to "li" and another "li a". Should a click occur on the inner anchor BOTH events will be triggered. This is because when a $("li").bind("click", fn); is bound you're actually saying "Whenever a click event occurs on an LI element - or inside an LI element - trigger this click event." To stop further processing for a live event, fn must return false It says that fn must return false so what I tried to do $('.MoreAppointments').live('click', function(e) { alert("Hi"); return false; }); but that did not work so I am not sure how to make it return false. Update Here is some more information. I have a table cell and I bind a click event to it. $('#CalendarBody .DateBox').click(function(e) { AddApointment(this); }); So the AddApointment just makes some ui dialog box. Now the live code(MoreAppointments) sits in this table cell and is basically an anchor tag. So when I click on the anchor tag it first goes to the above code(addApointment - so runs that event first) runs that but does not launch my dialog box instead it goes straight to the (MoreAppointment) event and runs that code. Once that code has run it launches the dialog box from "addApointment". Update 2 Here is some of the html. I did not copy the whole table since it is kinda big and all the cells repeat itself with the same data. If needed I will post it. <td id="c_12012009" class="DateBox"> <div class="DateLabel"> 1</div> <div class="appointmentContainer"> <a class="appointments">Fkafkafk fakfka kf414<br /> </a><a class="appointments">Fkafkafk fakfka kf414<br /> </a><a class="appointments">Fkafkafk fakfka kf414<br /> </a><a class="appointments">Fkafkafk fakfka kf414<br /> </a><a class="appointments">Fkafkafk fakfka kf414<br /> </a> </div> <div class="appointmentOverflowContainer"> <div> <a class="MoreAppointments">+1 More</a></div> </div> </td>

    Read the article

  • UL alignment to bottom

    - by air
    dear i have define on ul <ul id="album"> <li id="list1"> <a href="#"> <img src="google.jpg" height="50"/> </a> <a href="#" class="user-title">Profile Pictures</a> 1 Picture </li> <li id="list1"> <a href="#"> <img src="yahoo.jpg" height="150"/> </a> <a href="#" class="user-title">Profile Pictures</a> 2 Picture </li> </ul> css for is as bellow. #album{ height:195px; width:155px; overflow:hidden; padding:6px 10px 14px 10px; float:left; } #album li{ border:0; padding:0; list-style:none; margin: 0 0.15em; list-style:none; display: inline; } #album img{ vertical-align:bottom; } #album a{ color:#000000; text-decoration:none; } #album .user-title{ display:block; font-weight:bold; margin-bottom:4px; font-size:11px; color:#36538D; } #album .addas{ display:block; font-size:11px; color:#666666; } #album img{ margin-right:14px; padding:4px; } this is working fine. but i need to align images to bottom on display. here is image

    Read the article

  • jQuery - toggle the class of a parent element?

    - by Nike
    Hello, again. I have a few list elements, like this: <li class="item"> <a class="toggle"><h4>ämne<small>2010-04-17 kl 12:54 by <u>nike1</u></small></h4></a> <div class="meddel"> <span> <img style="max-width: 70%; min-height: 70%;" src="profile-images/nike1.jpg" alt="" /> <a href="account.php?usr=47">nike1</a> </span> <p>text</p> <span style="clear: both; display: block;"></span> </div> </li> <li class="item odd"> <a class="toggle"><h4>test<small>2010-04-17 kl 15:01 by <u>nike1</u></small></h4></a> <div class="meddel"> <span> <img style="max-width: 70%; min-height: 70%;" src="profile-images/nike1.jpg" alt="" /> <a href="account.php?usr=47">nike1</a> </span> <p>test meddelande :) [a]http://youtube.com[/a]</p> <span style="clear: both; display: block;"></span> </div> </li> And i'm trying to figure out how to make it so that when you click a link with the class .toggle, the parent element (the li element) will toggle the class .current. I'm not sure if the following code is correct or not, but it's not working. $(this).parent('.item').toggleClass('.current', addOrRemove); Even if i remove "('.item')", it doesn't seem to make any difference. So, any ideas? Thanks in advance, -Nike

    Read the article

  • JavaScript: What would cause setInterval to stop firing?

    - by Rosarch
    I am writing a chat AJAX app. Randomly, in FF 3.5.9, setInterval() seems to stop firing. I don't have clearInterval() anywhere in my code. What could be causing this to happen? $(document).ready(function () { $("#no-js-warning").empty(); messageRefresher = new MessageRefresher(0); setInterval($.proxy(messageRefresher, "refresh"), 2000); }); function notifyInRoom(user) { $.getJSON('API/users_in_room', { room_id: $.getUrlVar('key'), username: user }, function (users) { if (!$.isEmptyObject(users)) { $("#users").empty(); $.each(users, function (index, username) { var newChild = sprintf("<li>%s</li>", username); $("#users").append(newChild); }); } else { $("#users-loading-msg").text("No one is in this room."); } }); } function MessageRefresher(latest_mid) { this._latest_mid = latest_mid; } MessageRefresher.prototype.refresh = function () { notifyInRoom($("#user-name").val()); var refresher = this; $.getJSON('API/read_messages', { room_id: $.getUrlVar('key'), mid: refresher._latest_mid }, function (messages) { if (! (messages == null || $.isEmptyObject(messages[0]))) { // messages will always be at least [[], [], 0] $("#messages-loading-msg").hide(); for (var i = 0; i < messages[0].length; i++) { var newChild = sprintf('<li><span class="username">%s:</span> %s</li>', messages[1][i], messages[0][i]); $("#messages").append(newChild); } refresher._latest_mid = messages[2]; setUserBlockClass(); } else { $("#messages-loading-msg").text("No messages here. Say anything..."); } }); } // Give the end-user-block class to the appropriate messages // eg, those where the next message is by a different user function setUserBlockClass() { $("#messages li").each(function (index) { if ($(this).children(".username").text() != $(this).next().children(".username").text()) { $(this).addClass("end-user-block"); } }); } I checked the most recent responses in Firebug, and it was the same responses that had been sent earlier. (So, it's not like an unusual response caused a crash.) If I refresh the page, the calls resume.

    Read the article

  • show-hide image onmouseover

    - by butters
    I have 3 images on top of each other. The first one is a normal .jpg image, the second a greyscale version and the 3rd is some kind of effect i add with a transparent .png Now what i want is that, if i move the mouse over those images, the greyscale image is hidden or replaced by another image and afterwards visible again. The problem here is that i am a js noob, so it's kind of hard for me to find a solution ^^ my code looks something like this: <html> <head> <style type="text/css"> <!-- ul li{ display: inline-table; } .frame{ position: relative; height: 110px; width: 110px; } .frame div{ position: absolute; top:0px; left:0px; } .effect{ background:url(images/effect.png) no-repeat; height:110px; width: 110px; } .image{ height:100px; width:100px; border: 1px solid red; margin:4px; } .greyscale{ height:100px; width:100px; border: 1px solid red; margin:4px; } --> </style> </head> <body> <ul> <li> <div class="frame"> <div class="image"><img src="images/pic1.jpg" height="100" width="100"></div> <div class="greyscale"><img src="images/grey1.jpg" height="100" width="100"></div> <div class="effect">qwert</div> </div> </li> <li> <div class="frame"> <div class="image"><img src="images/pic2.jpg" height="100" width="100"></div> <div class="greyscale"><img src="images/grey2.jpg" height="100" width="100"></div> <div class="effect">qewrt</div> </div> </li> </ul> </body> </html> </code></pre> would be super-awesome if someone can help me out :)

    Read the article

  • Swapping two jQuery draggable list items not working properly (with jsFiddle example)

    - by Tony_Henrich
    The minimalist working example below swaps the two boxes when box 'one' is dragged and dropped on box 'two'. The problem is that when box 'one' is dropped, its style has 'top' & 'left' values causing it to be placed away from where it should drop. Its class includes 'ui-draggable-dragging'. It seems the top & left values are related to the amount the elements were dragged before the drop. And the dragging was 'interrupted' hence the residual 'ui-draggable-dragging' class? What am I missing to make the swap work seamlessly? full jsfiddle example here <html> <head> <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true); var copy_from = $(this).clone(true); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = {revert: true}; $("li").draggable(options) $('#wrapper').droppable({ drop: function(event, ui) { $(ui.draggable).swapWith($('#two')); } }); }); </script> </head> <body> <form> <ul id="wrapper"> <li id='one'> <div style="width: 100px; height: 100px; border: 1px solid green"> one<br /></div> </li> <li id='two'> <div style="width: 110px; height: 110px; border: 1px solid red"> two<br /></div> </li> </ul> <br /> </form> </body> </html>

    Read the article

  • small scale web site - global javascript file style/format/pattern - improving maintainability

    - by yaya3
    I frequently create (and inherit) small to medium websites where I have the following sort of code in a single file (normally named global.js or application.js or projectname.js). If functions get big, I normally put them in a seperate file, and call them at the bottom of the file below in the $(document).ready() section. If I have a few functions that are unique to certain pages, I normally have another switch statement for the body class inside the $(document).ready() section. How could I restructure this code to make it more maintainable? Note: I am less interested in the functions innards, more so the structure, and how different types of functions should be dealt with. I've also posted the code here - http://pastie.org/999932 in case it makes it any easier var ProjectNameEnvironment = {}; function someFunctionUniqueToTheHomepageNotWorthMakingConfigurable () { $('.foo').hide(); $('.bar').click(function(){ $('.foo').show(); }); } function functionThatIsWorthMakingConfigurable(config) { var foo = config.foo || 700; var bar = 200; return foo * bar; } function globallyRequiredJqueryPluginTrigger (tooltip_string) { var tooltipTrigger = $(tooltip_string); tooltipTrigger.tooltip({ showURL: false ... }); } function minorUtilityOneLiner (selector) { $(selector).find('li:even').not('li ul li').addClass('even'); } var Lightbox = {}; Lightbox.setup = function(){ $('li#foo a').attr('href','#alpha'); $('li#bar a').attr('href','#beta'); } Lightbox.init = function (config){ if (typeof $.fn.fancybox =='function') { Lightbox.setup(); var fade_in_speed = config.fade_in_speed || 1000; var frame_height = config.frame_height || 1700; $(config.selector).fancybox({ frameHeight : frame_height, callbackOnShow: function() { var content_to_load = config.content_to_load; ... }, callbackOnClose : function(){ $('body').height($('body').height()); } }); } else { if (ProjectNameEnvironment.debug) { alert('the fancybox plugin has not been loaded'); } } } // ---------- order of execution ----------- $(document).ready(function () { urls = urlConfig(); (function globalFunctions() { $('.tooltip-trigger').each(function(){ globallyRequiredJqueryPluginTrigger(this); }); minorUtilityOneLiner('ul.foo') Lightbox.init({ selector : 'a#a-lightbox-trigger-js', ... }); Lightbox.init({ selector : 'a#another-lightbox-trigger-js', ... }); })(); if ( $('body').attr('id') == 'home-page' ) { (function homeFunctions() { someFunctionUniqueToTheHomepageNotWorthMakingConfigurable (); })(); } });

    Read the article

  • current page highlights on child pages

    - by user557318
    Im trying to achieve current page highlights on wordpress similar to this site Alex Soth. I'm very nearly there with my css. At present i have current page highlights on pages, ie. home,calendar, projects. However when it come to current page highlights on child pages i have a problem. the indented child page list appears on hover when selecting a child page, but after page selection the menu reverts back to the standard pages menu with no visible child menus? unlike the link to the Alex Soth site where the extended menu stays and current page is highlighted I know that the answer will be a simple piece of css involving current_page_item and possible position:relative to obtain the menu staying visible after selection. But i can for the life of me work it out. Any ideas Ive attached my relivant pieces of css below?? thanks /* =Link Styles ------------------------------------------------------------------*/ input#submit { cursor: pointer; } input#searchsubmit { background: url(images/search.png) no-repeat center; } input#searchsubmit:hover { background: url(images/search.png) no-repeat center #3399FF !important; cursor: pointer; } .navigation a:hover, input#submit { background: #3399FF; color: #3399FF !important; } a { color: #666; } a:hover, a:hover span { color: #c11501 !important;background-color: #fae100; } .entry sup a, #main_nav .current_page_item a, #main_nav .current_page_ancestor a { color: #666 !important; } #main_nav h1.masthead a { color: #666; } #main_nav h1.masthead a:hover { border-right: none; } h2 a, #main_nav a { color: #3399FF; } img a, img a:hover { text-decoration: none; } .post a, .navigation a { font-weight: bold; color: #000; } .navigation a { background: #EEE; color: #666; font-weight: normal; padding: 3px 0px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; } .post sup { font-size: 11px; color: #aaa; } .post sup a { border: 0; margin: 0; font-weight: normal; font-size: 10px; } #supplementary .post_nav ul.about_nav li a, #supplementary .post_nav ul.single_post_meta a, #supplementary ul.contact_key li a { color: #888888; border-bottom: 0; } /* =Main Menu ------------------------------------------------------------------*/ #main_nav ul.menu li { position: relative; } #main_nav ul.menu li:hover ul.sub-menu, #main_nav ul.menu li:hover ul.children { display: block; }

    Read the article

  • Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider

    - by Jalpesh P. Vadgama
    I have done lots breadcrumb kind of things in normal asp.net web forms I was looking for same for asp.net mvc. After searching on internet I have found one great nuget package for mvpsite map provider which can be easily implemented via site map provider. So let’s check how its works. I have create a new MVC 3 web application called breadcrumb and now I am adding a reference of site map provider via nuget package like following. You can find more information about MVC sitemap provider on following URL. https://github.com/maartenba/MvcSiteMapProvid So once you add site map provider. You will find a Mvc.SiteMap file like following. And following is content of that file. <?xml version="1.0" encoding="utf-8" ?> <mvcSiteMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0" xsi:schemaLocation="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0 MvcSiteMapSchema.xsd" enableLocalization="true"> <mvcSiteMapNode title="Home" controller="Home" action="Index"> <mvcSiteMapNode title="About" controller="Home" action="About"/> </mvcSiteMapNode> </mvcSiteMap> So now we have added site map so now its time to make breadcrumb dynamic. So as we all know that with in the standard asp.net mvc template we have action link by default for Home and About like following. <div id="menucontainer"> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> </div> Now I want to replace that with our sitemap provider and make it dynamic so I have added the following code. <div id="menucontainer"> @Html.MvcSiteMap().Menu(true) </div> That’s it. This is the magic code @Html.MvcSiteMap will dynamically create breadcrumb for you. Now let’s run this in browser. You can see that it has created breadcrumb dynamically without writing any action link code. So here you can see with MvcSiteMap provider we don’t have to write any code we just need to add menu syntax and rest it will do automatically. That’s it. Hope you liked it. Stay tuned for more till then happy programming.

    Read the article

  • Templated Razor Delegates – Phil Haack

    - by nmarun
    This post is largely based off of Phil Haack’s article titled Templated Razor Delegates. I strongly recommend reading this article first. Here’s a sample code for the same, so you can have a look at. I also have a custom type being rendered as a table. 1: // my custom type 2: public class Device 3: { 4: public int Id { get; set; } 5: public string Name { get; set; } 6: public DateTime MfgDate { get; set; } 7: } Now I can write an extension method just for this type. 1: public static class RazorExtensions 2: { 3: public static HelperResult List(this IList<Models.Device> devices, Func<Models.Device, HelperResult> template) 4: { 5: return new HelperResult(writer => 6: { 7: foreach (var device in devices) 8: { 9: template(device).WriteTo(writer); 10: } 11: }); 12: } 13: // ... 14: } Modified my view to make it a strongly typed one and included html to render my custom type collection in a table. 1: @using TemplatedRazorDelegates 2: @model System.Collections.Generic.IList<TemplatedRazorDelegates.Models.Device> 3:  4: @{ 5: ViewBag.Title = "Home Page"; 6: } 7:  8: <h2>@ViewBag.Message</h2> 9:  10: @{ 11: var items = new[] { "one", "two", "three" }; 12: IList<int> ints = new List<int> { 1, 2, 3 }; 13: } 14:  15: <ul> 16: @items.List(@<li>@item</li>) 17: </ul> 18: <ul> 19: @ints.List(@<li>@item</li>) 20: </ul> 21:  22: <table> 23: <tr><th>Id</th><th>Name</th><th>Mfg Date</th></tr> 24: @Model.List(@<tr><td>@item.Id</td><td>@item.Name</td><td>@item.MfgDate.ToShortDateString()</td></tr>) 25: </table> We get intellisense as well! Just added some items in the action method of the controller: 1: public ActionResult Index() 2: { 3: ViewBag.Message = "Welcome to ASP.NET MVC!"; 4: IList<Device> devices = new List<Device> 5: { 6: new Device {Id = 1, Name = "abc", MfgDate = new DateTime(2001, 10, 19)}, 7: new Device {Id = 2, Name = "def", MfgDate = new DateTime(2011, 1, 1)}, 8: new Device {Id = 3, Name = "ghi", MfgDate = new DateTime(2003, 3, 15)}, 9: new Device {Id = 4, Name = "jkl", MfgDate = new DateTime(2007, 6, 6)} 10: }; 11: return View(devices); 12: } Running this I get the output as: Absolutely brilliant! Thanks to both Phil Haack and to David Fowler for bringing this out to us. Download the code for this from here. Verdict: RazorViewEngine.Points += 1;

    Read the article

  • Antenna Aligner Part 4: Role'ing in the deep

    - by Chris George
    Since last time I've been trying to sort out the general workflow of the app. It's fundamentally not hard, there is a list of transmitters, you select a transmitter and it shows the compass view. Having done quite a bit of ajax/asp.net/html in the past, I immediately started off by creating two divs within my 'page', one for the list, one for the compass. Then using the onClick event in the list, this will switch the display attribute on the divs. This seemed to work, but did lead to some dodgy transitional redrawing artefacts which I was not happy with. So after some Googling I realised I was doing it all wrong! JQuery mobile has the concept of giving an object in html a data-role. By giving a div the attribute data-role="page" it is then treated as a separate page on the mobile device. Within the code, this is referenced like a html anchor in the form #mypage. Using this system, page transitions such as fade or slide are automatically applied which adds to the whole authenticity of the app! Here is a simple example: . <a href="#'compasspage">compass</a> . <div data-role="page" id="compasspage" data-add-back-btn="true"> But I don't want just a static link, I want to dynamically create my list, and get each list elements to switch to the compass page with the right information. So here is the jquery that I used to dynamically inject new <li> rows into the <ul> block. $('ul').append($('<li/>', {    //here appendin `<li>`     'data-role': "list-divider" }).append($('<a/>', {    //here appending `<a>` into `<li>`     'href': '#compasspage',     'data-transition': 'none',     'onclick': 'selectTx(' + i + ')',     'html': buttonHtml }))); $('ul').listview('refresh'); This is called within a for loop so the first 5 appropriate transmitters are used. There are several things of interest to note here. Firstly, I could not find a more elegant way to tell the target page which transmitter I've clicked on, so I have used the onclick event as well as the href attribute. The onclick event fires 'selectTx' which simply sets a global member variable to the specific index number I've clicked on. Yes it's not nice, but it works. Secondly, the data-transition attribute is set to 'none'. I wanted the transition between the pages to be a whooshy slidey effect. However this worked going to the compass page, but returning to the list page gave some undesirable visual artefacts (flickering, redrawing etc.). So I decided to remove the transitions all together, which was a shame. Thirdly, rather than embedding loads of html into the append command, I removed this out into a variable 'buttonHtml'. Doing this really tidied up my code. Until next time!

    Read the article

  • Antenna Aligner Part 4: Role'ing in the deep

    - by Chris George
    Since last time I've been trying to sort out the general workflow of the app. It's fundamentally not hard, there is a list of transmitters, you select a transmitter and it shows the compass view. Having done quite a bit of ajax/asp.net/html in the past, I immediately started off by creating two divs within my 'page', one for the list, one for the compass. Then using the onClick event in the list, this will switch the display attribute on the divs. This seemed to work, but did lead to some dodgy transitional redrawing artefacts which I was not happy with. So after some Googling I realised I was doing it all wrong! JQuery mobile has the concept of giving an object in html a data-role. By giving a div the attribute data-role="page" it is then treated as a separate page on the mobile device. Within the code, this is referenced like a html anchor in the form #mypage. Using this system, page transitions such as fade or slide are automatically applied which adds to the whole authenticity of the app! Here is a simple example: . <a href="#'compasspage">compass</a> . <div data-role="page" id="compasspage" data-add-back-btn="true"> But I don't want just a static link, I want to dynamically create my list, and get each list elements to switch to the compass page with the right information. So here is the jquery that I used to dynamically inject new <li> rows into the <ul> block. $('ul').append($('<li/>', {    //here appendin `<li>`     'data-role': "list-divider" }).append($('<a/>', {    //here appending `<a>` into `<li>`     'href': '#compasspage',     'data-transition': 'none',     'onclick': 'selectTx(' + i + ')',     'html': buttonHtml }))); $('ul').listview('refresh'); This is called within a for loop so the first 5 appropriate transmitters are used. There are several things of interest to note here. Firstly, I could not find a more elegant way to tell the target page which transmitter I've clicked on, so I have used the onclick event as well as the href attribute. The onclick event fires 'selectTx' which simply sets a global member variable to the specific index number I've clicked on. Yes it's not nice, but it works. Secondly, the data-transition attribute is set to 'none'. I wanted the transition between the pages to be a whooshy slidey effect. However this worked going to the compass page, but returning to the list page gave some undesirable visual artefacts (flickering, redrawing etc.). So I decided to remove the transitions all together, which was a shame. Thirdly, rather than embedding loads of html into the append command, I removed this out into a variable 'buttonHtml'. Doing this really tidied up my code. Until next time!

    Read the article

  • Html.ValidationSummary and Multiple Forms

    - by MightyZot
    Originally posted on: http://geekswithblogs.net/MightyZot/archive/2013/11/11/html.validationsummary-and-multiple-forms.aspxThe Html.ValidationSummary helper writes a div with a list of general errors added to the model state while a request is being serviced. There is generally one form per view or partial view, I think, so often there is only one call to Html.ValidationSummary in the page resulting from the assembly of your views. And, consequently, there is no problem with the markup that Html.ValidationSummary spits out as a result. What if you want to put multiple forms in one view? Even if you create a view model that’s an aggregate of the view models for each form, the error validation summary is going to contain errors from both forms. Check out this screen shot, which shows a page with multiple forms. Notice how the error validation summary shows up twice. Grrr! Errors for the login form also show up in the registration form. Luckily, there is an easy way around this. Pull the errors out of the model state and separate them for each form. You’ll need to identify the appropriate form by setting the key when you make calls to ModelState.AddModelError. Assume in my example that errors for the login form are added to model state using the “LoginForm” key. And, likewise, assume that errors for the registration form are added to model state using the “RegistrationForm” key. An example of that might look like this… // If we got this far, something failed, redisplay form ModelState.AddModelError("LoginForm", "User name or password is not right..."); return View(model); Over in the code for your View, you can pull each form’s errors from the model state using lambda expressions that look like these… var LoginFormErrors = ViewData.ModelState.Where(ms => ms.Key == "LoginForm"); var RegistrationFormErrors = ViewData.ModelState.Where(ms => ms.Key == "RegistrationForm"); Now that you have two collections containing errors, you can display only the errors specific to each form. I’m doing that in my code by removing the calls to Html.ValidationSummary and replacing them with enumerators that look like this… if(LoginFormErrors.Count() > 0) { <div class="cdt-error-list">     <ul>     @foreach (var entry in LoginFormErrors)     {         foreach (var error in entry.Value.Errors)         {             <li>@error.ErrorMessage</li>         }     }     </ul> </div> } …and for the registration form, the code looks like this… @if(RegistrationFormErrors.Count() > 0) { <div class="cdt-error-list">     <ul>     @foreach (var entry in RegistrationFormErrors)     {         foreach (var error in entry.Value.Errors)         {             <li>@error.ErrorMessage</li>         }     }     </ul> </div> } The result is a nice clean separation of the list of errors that are specific to each form. And, this is important because each form is submitted separately in my case, so both forms don’t generate errors in the same context. As you’ll see in the screen shot below, errors added to the model state when the login form is submitted do not show up in the registration form’s validation summary.

    Read the article

  • How to access/use custom attribute in spring security based CAS client

    - by Bill Li
    I need send certain attributes(say, human readable user name) from server to client after a successful authentication. Server part was done. Now attribute was sent to client. From log, I can see: 2010-03-28 23:48:56,669 DEBUG Cas20ServiceTicketValidator:185 - Server response: [email protected] <cas:proxyGrantingTicket>PGTIOU-1-QZgcN61oAZcunsC9aKxj-cas</cas:proxyGrantingTicket> <cas:attributes> <cas:FullName>Test account 1</cas:FullName> </cas:attributes> </cas:authenticationSuccess> </cas:serviceResponse> Yet, I don't know how to access the attribute in client(I am using Spring security 2.0.5). In authenticationProvider, a userDetailsService is configured to read db for authenticated principal. <bean id="casAuthenticationProvider" class="org.springframework.security.providers.cas.CasAuthenticationProvider"> <sec:custom-authentication-provider /> <property name="userDetailsService" ref="clerkManager"/> <!-- other stuff goes here --> </bean> Now in my controller, I can easily do this: Clerk currentClerk = (Clerk)SecurityContextHolder.getContext().getAuthentication().getPrincipal(); Ideally, I can fill the attribute to this Clerk object as another property in some way. How to do this? Or what is recommended approach to share attributes across all apps under CAS's centralized nature?

    Read the article

< Previous Page | 54 55 56 57 58 59 60 61 62 63 64 65  | Next Page >