Search Results

Search found 3785 results on 152 pages for 'jun li'.

Page 25/152 | < Previous Page | 21 22 23 24 25 26 27 28 29 30 31 32  | Next Page >

  • Using JQuery tabs in an HTML 5 page

    - by nikolaosk
    In this post I will show you how to create a simple tabbed interface using JQuery,HTML 5 and CSS.Make sure you have downloaded the latest version of JQuery (minified version) from http://jquery.com/download.Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. Let me move on to the actual example.This is the sample HTML 5 page<!DOCTYPE html><html lang="en">  <head>    <title>Liverpool Legends</title>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >    <link rel="stylesheet" type="text/css" href="style.css">    <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>     <script type="text/javascript" src="tabs.js"></script>       </head>  <body>    <header>        <h1>Liverpool Legends</h1>    </header>     <section id="tabs">        <ul>            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#first-tab">Defenders</a></li>            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#second-tab">Midfielders</a></li>            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#third-tab">Strikers</a></li>        </ul>   <div id="first-tab">     <h3>Liverpool Defenders</h3>     <p> The best defenders that played for Liverpool are Jamie Carragher, Sami Hyypia , Ron Yeats and Alan Hansen.</p>   </div>   <div id="second-tab">     <h3>Liverpool Midfielders</h3>     <p> The best midfielders that played for Liverpool are Kenny Dalglish, John Barnes,Ian Callaghan,Steven Gerrard and Jan Molby.        </p>   </div>   <div id="third-tab">     <h3>Liverpool Strikers</h3>     <p>The best strikers that played for Liverpool are Ian Rush,Roger Hunt,Robbie Fowler and Fernando Torres.<br/>      </p>   </div> </div></section>            <footer>        <p>All Rights Reserved</p>      </footer>     </body>  </html>  This is very simple HTML markup. I have styled this markup using CSS.The contents of the style.css file follow* {    margin: 0;    padding: 0;}header{font-family:Tahoma;font-size:1.3em;color:#505050;text-align:center;}#tabs {    font-size: 0.9em;    margin: 20px 0;}#tabs ul {    float: left;    background: #777;    width: 260px;    padding-top: 24px;}#tabs li {    margin-left: 8px;    list-style: none;}* html #tabs li {    display: inline;}#tabs li, #tabs li a {    float: left;}#tabs ul li.active {    border-top:2px red solid;    background: #15ADFF;}#tabs ul li.active a {    color: #333333;}#tabs div {    background: #15ADFF;    clear: both;    padding: 15px;    min-height: 200px;}#tabs div h3 {    margin-bottom: 12px;}#tabs div p {    line-height: 26px;}#tabs ul li a {    text-decoration: none;    padding: 8px;    color:#0b2f20;    font-weight: bold;}footer{background-color:#999;width:100%;text-align:center;font-size:1.1em;color:#002233;}There are some CSS rules that style the various elements in the HTML 5 file. These are straight-forward rules. The JQuery code lives inside the tabs.js file $(document).ready(function(){$('#tabs div').hide();$('#tabs div:first').show();$('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function(){$('#tabs ul li').removeClass('active');$(this).parent().addClass('active');var currentTab = $(this).attr('href');$('#tabs div').hide();$(currentTab).show();return false;});}); I am using some of the most commonly used JQuery functions like hide , show, addclass , removeClass I hide and show the tabs when the tab becomes the active tab. When I view my page I get the following result Hope it helps!!!!!

    Read the article

  • PHP throws 'Allowed memory exhausted' errors while migrating data in Drupal.

    - by Stan
    I'm trying to setup a tiny sandbox on a local machine to play around with Drupal. I created a few CCK types; in order to create a few nodes I wrote the following script: chdir('C:\..\drupal'); require_once '.\includes\bootstrap.inc'; drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL); module_load_include('inc', 'node', 'node.pages'); $node = array('type' => 'my_type'); $link = mysql_connect(..); mysql_select_db('my_db'); $query_bldg = ' SELECT stuff FROM table LIMIT 10 '; $result = mysql_query($query_bldg); while ($row = mysql_fetch_object($result)) { $form_state = array(); $form_state['values']['name'] = 'admin'; $form_state['values']['status'] = 1; $form_state['values']['op'] = t('Save'); $form_state['values']['title'] = $row->val_a; $form_state['values']['my_field'][0]['value'] = $row->val_b; ## About another dozen or so of similar assignments... drupal_execute('node_form', $form_state, (object)$node); } Here are a few relevant lines from php_errors.log: [12-Jun-2010 05:02:47] PHP Notice: Undefined index: REMOTE_ADDR in C:\..\drupal\includes\bootstrap.inc on line 1299 [12-Jun-2010 05:02:47] PHP Notice: Undefined index: REMOTE_ADDR in C:\..\drupal\includes\bootstrap.inc on line 1299 [12-Jun-2010 05:02:47] PHP Warning: session_start(): Cannot send session cookie - headers already sent by (output started at C:\..\drupal\includes\bootstrap.inc:1299) in C:\..\drupal\includes\bootstrap.inc on line 1143 [12-Jun-2010 05:02:47] PHP Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at C:\..\drupal\includes\bootstrap.inc:1299) in C:\..\drupal\includes\bootstrap.inc on line 1143 [12-Jun-2010 05:02:47] PHP Warning: Cannot modify header information - headers already sent by (output started at C:\..\drupal\includes\bootstrap.inc:1299) in C:\..\drupal\includes\bootstrap.inc on line 709 [12-Jun-2010 05:02:47] PHP Warning: Cannot modify header information - headers already sent by (output started at C:\..\drupal\includes\bootstrap.inc:1299) in C:\..\drupal\includes\bootstrap.inc on line 710 [12-Jun-2010 05:02:47] PHP Warning: Cannot modify header information - headers already sent by (output started at C:\..\drupal\includes\bootstrap.inc:1299) in C:\..\drupal\includes\bootstrap.inc on line 711 [12-Jun-2010 05:02:47] PHP Warning: Cannot modify header information - headers already sent by (output started at C:\..\drupal\includes\bootstrap.inc:1299) in C:\..\drupal\includes\bootstrap.inc on line 712 [12-Jun-2010 05:02:47] PHP Notice: Undefined index: REMOTE_ADDR in C:\..\drupal\includes\bootstrap.inc on line 1299 [12-Jun-2010 05:02:48] PHP Fatal error: Allowed memory size of 239075328 bytes exhau sted (tried to allocate 261904 bytes) in C:\..\drupal\includes\form.inc on line 488 [12-Jun-2010 05:03:22] PHP Fatal error: Allowed memory size of 239075328 bytes exhausted (tried to allocate 261904 bytes) in C:\..\drupal\includes\form.inc on line 488 [12-Jun-2010 05:04:34] PHP Fatal error: Allowed memory size of 262144 bytes exhausted (tried to allocate 261904 bytes) in Unknown on line 0 At this point any action php takes results in the last error shown above. I tried increasing the value of memory_limit in php.ini before the final Fatal error which obviously didn't help. How can the error be eliminated? Am I on a correct path to migrating data into Drupal or should the cck tables be operated on directly? Windows XP PHP 5.3.2 VC6 Apache 2.2

    Read the article

  • MSDN "pseudoframe"

    - by bobobobo
    So, I'm trying to replicate MSDN "pseudoframes" here. Their pages are laid out like they're using an old-school frameset, but inspecting their elements with firebug reveals they've done this with purely div's. Here's my attempt at it. Its not perfect though, it only works in Chrome and Firefox, it has this weird highlight select behavior that I don't like, any takers? <!doctype html> <html> <head> <title>msdn "pseudoframe"</title> <style> body { background-color: #aaa; margin: 0; padding: 0; } div#pseudoframe, div#main { border: solid 1px black; background-color: #fff; } div#pseudoframe { position: absolute; left: 0; width: 180px; height: 100%; overflow-x: auto; overflow-y: none; } div#sizeMod { background-color: #a0a; position: absolute; left: 220px; height: 100%; cursor: e-resize; } div#main { font-weight: bold; font-size: 2em; padding: 24px; margin-left: 224px; } </style> <script type="text/javascript"> function initialize() { // get the pseudoframe and attach an event to the mouse flyover. var pf = document.getElementById('pseudoframe'); var main = document.getElementById('main'); var resize = document.getElementById( 'sizeMod' ); pf['onmouseover'] = function( event ) { event = event || window.event; var el = event.srcElement || event.target ; // are we within 5 px of the border? if we are, // change the mouse cursor to resize. }; pf['onscroll'] = function( event ) { event = event || window.event; var el = event.srcElement || event.target ; var sizeMod = document.getElementById( 'sizeMod' ); //alert( el.scrollLeft ); sizeMod.style.right = '-' + (el.scrollLeft) + 'px'; //alert( sizeMod.style.right ); // are we within 5 px of the border? if we are, // change the mouse cursor to resize. }; resize['onmousedown'] = function( event ) { event = event || window.event; var el = event.srcElement || event.target ; window.lockResize = true; }; window['onmouseup'] = function( event ) { event = event || window.event; var el = event.srcElement || event.target ; window.lockResize = false; //release on any mouse up event //alert('unlocked'); }; window['onmousemove'] = function( event ) { event = event || window.event; var el = event.srcElement || event.target ; if( window.lockResize == true ) { // resize. get client x and y. var x = event.clientX; var y = event.clientY; pf.style.width = x + 'px'; resize.style.left = x + 'px'; main.style.marginLeft = x + 'px'; //alert( pf.style.width ); event.stopPropagation(); event.preventDefault(); return false; } }; } </script> </head> <body onload=" initialize(); "> <div id="pseudoframe"> <ul> <li>Code</li> <li>MICROSOFT CODE <ul> <li>WINDOWS XP SOURCE</li> <li>WINDOWS VISTA SOURCE</li> <li>WINDOWS 7 SOURCE</li> <li>WINDOWS 8 SOURCE</li> </ul> </li> <li>DOWNLOAD ALL MICROSOFT CODE EVER WRITTEN</li> <li>DOWNLOAD ALL MAC OS CODE EVER WRITTEN</li> <li>DOWNLOAD ALL AMIGA GAME CONSOLE CODE</li> <li>DOWNLOAD ALL CODE EVER WRITTEN PERIOD</li> </ul> </div> <div id="sizeMod">&nbsp;&nbsp;</div> <div id="main"> lorem ipsum microsoft pseudoframe lorem ipsum microsoft pseudoframe lorem ipsum microsoft pseudoframe lorem ipsum microsoft pseudoframe lorem ipsum microsoft pseudoframe lorem ipsum microsoft pseudoframe lorem ipsum microsoft pseudoframe lorem ipsum microsoft pseudoframe lorem ipsum microsoft pseudoframe </div> </body> </html>

    Read the article

  • how to start sendmail - WP email turned off

    - by wejrowski
    I have a WP site on a linux box. Our email was working fine in Wordpress but recently it stopped, I think because of a restart. All I could think of was to restart sendmail. I couldn't find sendmail in the normal directory (/etc/init.d/sendmail restart) but that didn't exist. I found another directory for sendmail in the sbin but every time I try running it it doesn't respond and I have to exit. This is all what I tried. Any ideas? [root@li209-134 ~]# /etc/init.d/sendmail restart -bash: /etc/init.d/sendmail: No such file or directory [root@li /]# find . -name sendmail -print ./usr/sbin/sendmail ./usr/lib/sendmail [root@li /]# ./usr/sbin/sendmail restart ^C [root@li /]# sudo /usr/sbin/sendmail restart ^C [root@li /]# sudo service sendmail start sendmail: unrecognized service [root@li /]# /usr/sbin/sendmail start ^C [root@li /]# /usr/sbin/sendmail ^C [root@li /]# /usr/lib/sendmail start ^C

    Read the article

  • unable to apply jquery filter

    - by Pradyut Bhattacharya
    Hi I m un-animating a list using this code... function unanimate_li(){ $li.filter(':last') .animate({ height: 'hide', opacity: 'hide' }, 1000, function(){ unanimate_li(); }); $li = $li.not(':last'); } I have set up the li using this code $li = $("ol#update > li"); $li = $li.filter(':gt(4)').filter(':lt('+ size + ')'); Now when i try to do this i cannot get the 5th li(4th on zero based) to remove It removes the sixth li The example here And when the second time i do the update it goes on to infinite loop I cannot understand why

    Read the article

  • Wait 300ms and then slide down menu using jQuery

    - by Derfder
    I tried this js code: <script type="text/javascript"> $(document).ready( function() { var timer; $('.top-menu-first-ul li').hover(function(){ if(timer) { clearTimeout(timer); timer = null } timer = setTimeout(function() { $(this).find('ul').slideToggle(100); }, 500) }, // mouse out }); }); </script> with this html: <ul class="top-menu-first-ul"> <li> <a href="http://google.com">Google</a> <ul class="top-menu-second-ul"> <li><a href="http://translate.google.com">Google Translate</a></li> <li><a href="http://images.google.com">Google Images</a></li> <li><a href="http://gmail.google.com">Gmail</a></li> <li><a href="http://plus.google.com">Google Plus</a></li> </ul> </li> <li> <a href="http://facebook.com">Facebook</a> </li> <li> <a href="http://twitter.com">Twitter</a> </li> </ul> but it is not working. I would like to show the submenu when hovering over e.g. Google link and other will appear after 300ms. So, I need to prevent loading submenu when the user just quickly hover over it and not stay on hover link for at least 300ms. Then I need to stop executing code (or slide up) when he leaves the link. Because if he go over and back and over and back a copule of times he stop doing hovering anfd the code is still executing itself how many times he had hover over the link. I need somehow prevent this to happen. EDIT: I need to solve this without plugins like hoverIntent etc. if possible, just plain javascript and jQuery

    Read the article

  • asp.net menu control css for child items

    - by Andres
    I have an asp.net menu control which the child items(submenu) width is tied to its parent's width, I was wondering is there a work around? because some of the titles for the submenu are longer than the title of the parent so it looks all smooshed together and just horrible on the eyes. Any help is much appreciated. :) .net control: <asp:Menu ID="navigation" runat="server" Orientation="Horizontal" CssClass="topmenu" MaximumDynamicDisplayLevels="20" IncludeStyleBlock="false"> <DynamicSelectedStyle /> <DynamicMenuItemStyle /> <DynamicHoverStyle /> <DynamicMenuStyle /> <StaticMenuItemStyle /> <StaticSelectedStyle /> <StaticHoverStyle /> </asp:Menu> html rendered: <div class="topmenu" id="navigation"> <ul class="level1"> <li><a class="popout level1" href="dashboard.aspx?option=1">Seguridad</a> <ul class="level2"> <li><a class="level2" href="security/users.aspx?option=15">Usuarios</a></li> <li><a class="level2" href="security/profiles.aspx?option=16">Perfiles</a></li> <li><a class="level2" href="security/options.aspx?option=17">Opciones</a></li> <li><a class="level2" href="security/actions.aspx?option=18">Acciones</a></li> </ul> </li> </ul> </div> css: div.topmenu{} div.topmenu ul { list-style:none; padding:5px 0; margin:0; background: #0b2e56; } div.topmenu ul li { float:left; padding:10px; color: #fff; height:16px; z-index:9999; margin:0; } div.topmenu ul li a, div.menu ul li a:visited{ color: #fff; } div.topmenu ul li a:hover{ color:#fff; } div.topmenu ul li a:active{color:#fff; } thats what I have and the styling works i just need help in getting submenus to expand if they are bigger than main title. Thanks in advance!

    Read the article

  • ldirectord ipvsadm not show reals ip and not work wtih pacemaker and corosync

    - by miguer27
    first thanks for your time. I'm having a problem with ldirectord that I can not solve, I comment my situation: I have two nodes with pace maker and corosync and configure somes resources: root@ldap1:/home/mamartin# crm status Last updated: Tue Jun 3 12:58:30 2014 Last change: Tue Jun 3 12:23:47 2014 via cibadmin on ldap1 Stack: openais Current DC: ldap2 - partition with quorum Version: 1.1.7-ee0730e13d124c3d58f00016c3376a1de5323cff 2 Nodes configured, 2 expected votes 7 Resources configured. Online: [ ldap1 ldap2 ] Resource Group: IPV_LVS IPV_4 (ocf::heartbeat:IPaddr2): Started ldap1 IPV_6 (ocf::heartbeat:IPv6addr): Started ldap1 lvs (ocf::heartbeat:ldirectord): Started ldap1 Clone Set: clon_IPV_lo [IPV_lo] Started: [ ldap2 ] Stopped: [ IPV_lo:1 ] root@ldap1:/home/mamartin# crm configure show node ldap2 \ attributes standby="off" node ldap1 \ attributes standby="off" primitive IPV-lo_4 ocf:heartbeat:IPaddr \ params ip="192.168.1.10" cidr_netmask="32" nic="lo" \ op monitor interval="5s" primitive IPV-lo_6 ocf:heartbeat:IPv6addrLO \ params ipv6addr="[fc00:1::3]" cidr_netmask="64" \ op monitor interval="5s" primitive IPV_4 ocf:heartbeat:IPaddr2 \ params ip="192.168.1.10" nic="eth0" cidr_netmask="25" lvs_support="true" \ op monitor interval="5s" primitive IPV_6 ocf:heartbeat:IPv6addr \ params ipv6addr="[fc00:1::3]" nic="eth0" cidr_netmask="64" \ op monitor interval="5s" primitive lvs ocf:heartbeat:ldirectord \ params configfile="/etc/ldirectord.cf" \ op monitor interval="20" timeout="10" \ meta target-role="Started" group IPV_LVS IPV_4 IPV_6 lvs group IPV_lo IPV-lo_6 IPV-lo_4 clone clon_IPV_lo IPV_lo \ meta interleave="true" target-role="Started" location cli-prefer-IPV_LVS IPV_LVS \ rule $id="cli-prefer-rule-IPV_LVS" inf: #uname eq ldap1 colocation LVS_no_IPV_lo -inf: clon_IPV_lo IPV_LVS property $id="cib-bootstrap-options" \ dc-version="1.1.7-ee0730e13d124c3d58f00016c3376a1de5323cff" \ cluster-infrastructure="openais" \ expected-quorum-votes="2" \ no-quorum-policy="ignore" \ stonith-enabled="false" \ last-lrm-refresh="1401264327" rsc_defaults $id="rsc-options" \ resource-stickiness="1000" The problem is in the ipvsadm only show a one real IP, when i configured two now, show the ldirector.cf: root@ldap1:/home/mamartin# ipvsadm IP Virtual Server version 1.2.1 (size=4096) Prot LocalAddress:Port Scheduler Flags - RemoteAddress:Port Forward Weight ActiveConn InActConn TCP ldap-maqueta.cica.es:ldap wrr - ldap2.cica.es:ldap Route 4 0 0 TCP [[fc00:1::3]]:ldap wrr - [[fc00:1::2]]:ldap Route 4 0 0 root@ldap1:/home/mamartin# cat /etc/ldirectord.cf checktimeout=10 checkinterval=2 autoreload=yes logfile="/var/log/ldirectord.log" quiescent=yes #ipv4 virtual=192.168.1.10:389 real=192.168.1.11:389 gate 4 real=192.168.1.12:389 gate 4 scheduler=wrr protocol=tcp checktype=on #ipv6 virtual6=[[fc00:1::3]]:389 real6=[[fc00:1::1]]:389 gate 4 real6=[[fc00:1::2]]:389 gate 4 scheduler=wrr protocol=tcp checkport=389 checktype=on and in the logs I see nothing clear: root@ldap1:/home/mamartin# ldirectord -d /etc/ldirectord.cf start DEBUG2: Running system(/sbin/ipvsadm -a -t 192.168.1.10:389 -r 192.168.1.11:389 -g -w 0) Running system(/sbin/ipvsadm -a -t 192.168.1.10:389 -r 192.168.1.11:389 -g -w 0) DEBUG2: Quiescent real server: 192.168.1.11:389 (192.168.1.10:389) (Weight set to 0) Quiescent real server: 192.168.1.11:389 (192.168.1.10:389) (Weight set to 0) DEBUG2: Disabled real server=on:tcp:192.168.1.11:389:::4:gate:\/: (virtual=tcp:192.168.1.10:389) DEBUG2: Running system(/sbin/ipvsadm -a -t 192.168.1.10:389 -r 192.168.1.12:389 -g -w 0) Running system(/sbin/ipvsadm -a -t 192.168.1.10:389 -r 192.168.1.12:389 -g -w 0) DEBUG2: Quiescent real server: 192.168.1.12:389 (192.168.1.10:389) (Weight set to 0) Quiescent real server: 192.168.1.12:389 (192.168.1.10:389) (Weight set to 0) DEBUG2: Disabled real server=on:tcp:192.168.1.12:389:::4:gate:\/: (virtual=tcp:192.168.1.10:389) DEBUG2: Checking on: Real servers are added without any checks DEBUG2: Resetting soft failure count: 192.168.1.12:389 (tcp:192.168.1.10:389) Resetting soft failure count: 192.168.1.12:389 (tcp:192.168.1.10:389) DEBUG2: Running system(/sbin/ipvsadm -a -t 192.168.1.10:389 -r 192.168.1.12:389 -g -w 4) Running system(/sbin/ipvsadm -a -t 192.168.1.10:389 -r 192.168.1.12:389 -g -w 4) Destination already exists root@ldap1:/home/mamartin# cat /var/log/ldirectord.log [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Quiescent real server: 192.168.1.11:389 (192.168.1.10:389) (Weight set to 0) [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Quiescent real server: 192.168.1.12:389 (192.168.1.10:389) (Weight set to 0) [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Resetting soft failure count: 192.168.1.12:389 (tcp:192.168.1.10:389) [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] system(/sbin/ipvsadm -a -t 192.168.1.10:389 -r 192.168.1.12:389 -g -w 4) failed: [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Added real server: 192.168.1.12:389 (192.168.1.10:389) (Weight set to 4) [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Resetting soft failure count: 192.168.1.11:389 (tcp:192.168.1.10:389) [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Restored real server: 192.168.1.11:389 (192.168.1.10:389) (Weight set to 4) [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Resetting soft failure count: [[fc00:1::2]]:389 (tcp:[[fc00:1::3]]:389) [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] system(/sbin/ipvsadm -a -t [[fc00:1::3]]:389 -r [[fc00:1::2]]:389 -g -w 4) failed: [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Added real server: [[fc00:1::2]]:389 ([[fc00:1::3]]:389) (Weight set to 4) [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Resetting soft failure count: [[fc00:1::1]]:389 (tcp:[[fc00:1::3]]:389) [Tue Jun 3 09:39:29 2014|ldirectord.cf|19266] Restored real server: [[fc00:1::1]]:389 ([[fc00:1::3]]:389) (Weight set to 4) do not know if this is a bug or a configuration error, can anyone help? Regards.

    Read the article

  • ordered list does not work on IE7 (<ol><li).

    - by Cesar Lopez
    Hi all, I am trying to create an ordered list on IE7 but for some reason does not work. Does anybody knows why this can be? Thanks. eg. <ol> <li></li> <li><li> <ol> Update As an example I saw this page where if you look at it on IE7 you wont see de numbers, but if you look at it on any other (but not ie) you will see the numbers. http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html Thanks

    Read the article

  • jQuery: Adding class to the li element after the link is clicked, and deselecting all other classes

    - by Oleg Tarasenko
    Hi, I am generating menu with such tags: <div class="animatedtabs"> <ul> {% for item in menu_items %} <li><a href="{{ item.url }}" title="{{ item.name }}"><span>{{ item.name }}</span></a></li> {% endfor %} </ul> </div> What I want to do, I want to add class="selected" to li, after the link is clicked, and to remove all other class="selected" on other li's... Also I wonder, how to show menu in the way, so the first item is selected by default... But then when another linked is clicked, then class="selected" is toggled

    Read the article

  • Google maps sometimes does not return a geocoded value for string

    - by XGreen
    Hi Guys, I have the following code: It basically looks into a HTML list and geocodes and markets each item. it does it correctly 8 out of ten but sometimes I get an error I set for show in the console. I can't think of anything. Any thoughts is much appreciated. $(function () { var map = null; var geocoder = null; function initialize() { if (GBrowserIsCompatible()) { // Specifies that the element with the ID map is the container for the map map = new GMap2(document.getElementById("map")); // Sets an initial map positon (which mainly gets ignored after reading the adderesses list) map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Instatiates the google Geocoder class geocoder = new GClientGeocoder(); map.addControl(new GSmallMapControl()); // Sets map zooming controls on the map map.enableScrollWheelZoom(); // Allows the mouse wheel to control the map while on it } } function showAddress(address, linkHTML) { if (geocoder) { geocoder.getLatLng(address, function (point) { if (!point) { console.log('Geocoder did not return a location for ' + address); } else { map.setCenter(point, 8); var marker = new GMarker(point); map.addOverlay(marker); // Assigns the click event to each marker to open its balloon GEvent.addListener(marker, "click", function () { marker.openInfoWindowHtml(linkHTML); }); } } ); } } // end of show address function initialize(); // This iterates through the text of each address and tells the map // to show its location on the map. An internal error is thrown if // the location is not found. $.each($('.addresses li a'), function () { var addressAnchor = $(this); showAddress(addressAnchor.text(), $(this).parent().html()); }); }); which looks into this HTML: <ul class="addresses"> <li><a href="#">Central London</a></li> <li><a href="#">London WC1</a></li> <li><a href="#">London Shoreditch</a></li> <li><a href="#">London EC1</a></li> <li><a href="#">London EC2</a></li> <li><a href="#">London EC3</a></li> <li><a href="#">London EC4</a></li> </ul>

    Read the article

  • Li with float in IE6/7. It disappears?

    - by Ricardo H.Bin
    Hi guys. Try test this code in IE 6/7: <html> <head> <title>Title</title> </head> <body> <ul> <li style="float:left">huisashaiuhs iuhuiahsiuhsaiu</li> </ul> </body> </html> Where is the circle of LI? I already do ALL types of workaround, in UL and LI. Nothing, NOTHING works. Do you have any idea? (BTW already tried hasLayout,padding-left,margin-left,display:inline, etc etc etc)

    Read the article

  • jquery: adding class on to list-items only on mouseover-remove on mouse-out?

    - by user239831
    hey guys, what's the best way to do that: i have a list <ul> <li>hello</li> <li>good bye</li> <li>arrivederci</li> <li class="selected">dude</li> <li>whatever</li> </ul> Initially one item already has a class of .selected applied. When i hover over one of the list-items i want this one to have the .selected class. So every item should only have the class applied when im over, as soon as i leave the item the class get's removed and the next one has the class.

    Read the article

  • jQuery not selecting div class

    - by Cortopasta
    Trying to make a simple toggle menu, and I can't seem to hide/show the sub menu using this bit of jQuery: $(".topic news").mouseup(function(){ $(".feed groups").hide("fast", function(){ $(".feed messages").hide("fast"); $("ul.feed news").toggle("fast"); }); }); Here is the corresponding HTML: <div class="topic news"> <span>News Feed</span> </div> <ul class="feed news"> <li>News item #1</li> <li>News item #1</li> <li>News item #1</li> <li>News item #1</li> <li>News item #1</li> </ul> Any ideas?

    Read the article

  • IE7 and IE8: Float clearing without adding empty elements

    - by tk-421
    Hello, I'm having a problem similar to the one described here (without a resolution): http://stackoverflow.com/questions/2467745/ie7-float-and-clear-on-the-same-element The following HTML renders as intended in Firefox but not in (both) IE7 and IE8: <html> <head> <style> ul { list-style-type: none; } li { clear: both; padding: 5px; } .left { clear: left; float: left; } .middle { clear: none; float: left; } .right { clear: right; float: left; } </style> </head> <body> <ul> <li>1</li> <li class="left">2</li> <li class="right">3</li> <li class="left">4</li> <li class="middle">5</li> <li class="right">6</li> <li>7</li> </ul> </body> </html> This is a form layout, and in Firefox the results appear like: 1 2 3 4 5 6 7 That's what I'm going for. In IE7 and IE8 however, the results are: 1 2 3 5 6 4 7 [Note: I don't want to float anything to the right because I want the fields on my form to left-align correctly, without a giant space in-between the floated fields to account for the parent container's width.] Apparently I need a full clear, and can probably add an empty list-item element to the list to force clearing, but that seems like a dumb solution and sort of defeats the purpose. Any ideas? I've spent a few hours reading and trying different options without success.

    Read the article

  • CSS: How the backgrounds can extend the border and overlap?

    - by AlexStack
    I'm designing a navigation bar as shown in image below (a) with the following code: <ul> <li class="unselected">Step 1</li> <li class="selected">Step 2</li> <li class="unselected">Step 3</li> <li class="unselected">Step 4</li> <li class="unselected">Step 5</li> </ul> I want to have one background image for unselected steps (d) and one for the selected step (c). For simplicity let's assume Step 1 and Step 5 use the same background as well. I want to adjust the button background in HTML only with a class name. The question is how can I achieve the result with CSS? I just want to know how background of two neighbor elements can overlap each other?

    Read the article

  • Can't append to second container

    - by George Katsanos
    I have the following script: (function($) { $.fn.easyPaginate = function(options){ var defaults = { step: 4, delay: 100, numeric: true, nextprev: true, controls: 'pagination', current: 'current' }; var options = $.extend(defaults, options); var step = options.step; var lower, upper; var children = $(this).children(); var count = children.length; var obj, next, prev; var page = 1; var timeout; var clicked = false; function show(){ clearTimeout(timeout); lower = ((page-1) * step); upper = lower+step; $(children).each(function(i){ var child = $(this); child.hide(); if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); } if(options.nextprev){ if(upper >= count) { next.addClass('stop'); } else { next.removeClass('stop'); }; if(lower >= 1) { prev.removeClass('stop'); } else { prev.addClass('stop'); }; }; }); $('li','#'+ options.controls).removeClass(options.current); $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current); if(options.auto){ if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); }; }; }; function auto(){ if(upper <= count){ page++; show(); } else { page--; show(); } }; this.each(function(){ obj = this; if(count>step){ var pages = Math.floor(count/step); if((count/step) > pages) pages++; var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>').insertAfter(obj); if(options.nextprev){ prev = $('<li class="prev">prev</li>') .appendTo(ol) .bind('click', function() { //check to see if there are any more pages in the negative direction if (page > 1) { clicked = true; page--; show(); } }); } if(options.numeric){ for(var i=1;i<=pages;i++){ $('<li data-index="'+ i +'">'+ i +'</li>') .appendTo(ol) .click(function(){ clicked = true; page = $(this).attr('data-index'); show(); }); }; }; if(options.nextprev){ next = $('<li class="next">next</li>') .appendTo(ol) .bind('click', function() { //check to see if there are any pages in the positive direction if (page < (count / 4)) { clicked = true; page++; show(); } }); } show(); }; }); }; })(jQuery); jQuery(function($){ $('ul.news').easyPaginate({step:4}); }); which is a carousel-like plugin that produces this html structure for the navigation: <ol id="pagination" class="pagin"><li class="prev">prev</li><li data-index="1" class="">1</li><li data-index="2" class="">2</li><li data-index="3" class="current">3</li><li class="next stop">next</li></ol> And all I want is to enclose this list in a div. Seems simple, but appendTo doesn't want to cooperate with me, or I'm doing something wrong (I'd appreciate if you would help me understand what that is..) So I'm modifying as such: var ol = $('<ol id="'+ options.controls +'" class="pagin"></ol>'); var tiv = $('<div id="lala"></div>'); ol.appendTo('#lala'); tiv.insertAfter(obj); I know how to chain, but I'm in "debugging" mode trying to understand why I don't get the result I imagine I would get: <div id="lala> <ol id="pagination><li>...... </li></ol> </div> I tried putting some console.log's to see the status of my variables but couldn't find something useful.. I guess there's something with DOM insertion I don't get.

    Read the article

  • Why can't I set attribute "TYPE" of LI element in IE?

    - by Petr Urban
    Hello, I've just come to an unusual beghavior of Internet Explorer IE (v8.0.6001.18904). When I try to set "type" attribute of any <LI> element, it will result into error. I used jQuery (v1.32): $("<li>").attr("type", "test"); The same thing works for DIV. LI element does not seem to have "type" attribute reserved by HTML or XHTML definitions. It also might be jQuery issue. Solution is simple - just use another attribute name :-) But is there someone out there who knows WHY does this error occur? Could it happen with another attribute names? Why the error comes with LI element only?

    Read the article

  • How to show specific link to user that's signed in and on specific page in rails?

    - by sevens
    I have the following code for part of my navigation: <% if user_signed_in? %> <li><%= link_to 'Edit Profile', edit_profile_path(current_user.profile) %></li> <li><%= link_to 'Edit Account', edit_user_registration_path %></li> <% elsif user_signed_in? and params[:controller] == 'profiles#edit' %> <li><%= link_to 'View Profile', profile_path(current_user.profile) %></li> <li><%= link_to 'Edit Account', edit_user_registration_path %></li> <% else %> <li><%= link_to 'Sign up', new_user_registration_path %></li> <% end %> I want different links to show depending on where the "user_signed_in" is. However, my <% elsif user_signed_in? and params[:controller] == 'profiles#edit' %> doesn't seem to be working. What am I doing wrong?

    Read the article

  • removeChild on a li inside a ul inside a div with an id?

    - by Prozaker
    I have the following code on a webpage: <div id="emails"> <ul> <li>email1</li> <li>email2</li> </ul> </div> <a href="#" onClick="javascript:deleteEmail">click</a> and I want to remove the first email, i've been trying with this: function deleteEmail(){ var ul = document.getElementById('alt_emails').getElementsByTagName('ul'); ul.removeChild(ul.childNodes[0]); } im kinda new to Javascript DOM, so if there's a better way to do it, please let me know. Note: I would like to do this without any kind of js framework.

    Read the article

  • Internet Explorer and margins

    - by Hailwood
    Hi there. I have some pretty simple html which is meant to make a layout as below. To push the tabs down from the userbar I am using margin-top: 35px; However in internet explorer the tabs are completly misaligned(the top of the tabs is where the bottom should be). So I need to use margin-top: -50px; for internet explorer. Why is this and how can I fix it without using a ie specific stylesheet <div id="pageHead"> <div id="userBar"> <span class="bold">Hi Matthew Hailwood | <a href="#">Logout</a> </div> <a href="http://localhost/buzz/" id="pageLogo"></a> <div id="pageTabs" class="clearfix"> <ul> <li><a href="http://localhost/buzzil/templates">Templates</a></li> <li><a href="http://localhost/buzzil/messaging">Messaging</a></li> <li><a href="http://localhost/buzzil/contacts">Contacts</a></li> </ul> </div> </div> With the css being #pageHead { height: 100px; } #pageLogo { float: left; width: 149px; height: 77px; margin-top: 11px; background: transparent url('../images/logo.png') no-repeat; } #userBar { text-align: right; color: #fff; margin-top: 10px; } #userBar a:link, #userBar a:visited, #userBar a:active { font-weight: normal; color: #E0B343; text-decoration: none; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } #pageTabs { float: right; margin-top: 35px; } #pageTabs ul { position: relative; width: 100%; list-style: none; margin: 0; padding: 0; border-left: 1px solid #000; } #pageTabs ul li { float: right; background: url(../images/tabsBg.png) no-repeat 0% 0%; border-left: 1px solid #000; margin-left: -1px; } #pageTabs ul li a:link, #pageTabs ul li a:visited, #pageTabs ul li a:active { color: #fff; background: url(../images/tabsBg.png) no-repeat 100% 0%; display: block; font-size: 14px; font-weight: bold; line-height: 42px; text-transform: uppercase; padding: 4px 32px; text-decoration: none; } #pageTabs ul li a:hover, #pageTabs ul li a:focus { text-decoration: underline; }

    Read the article

  • Create nice animation on your ASP.NET Menu control using jQuery

    - by hajan
    In this blog post, I will show how you can apply some nice animation effects on your ASP.NET Menu control. ASP.NET Menu control offers many possibilities, but together with jQuery, you can make very rich, interactive menu accompanied with animations and effects. Lets start with an example: - Create new ASP.NET Web Application and give it a name - Open your Default.aspx page (or any other .aspx page where you will create the menu) - Our page ASPX code is: <form id="form1" runat="server"> <div id="menu">     <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List">                     <Items>             <asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Images/Home.png" Text="Home" Value="Home"  />             <asp:MenuItem NavigateUrl="~/About.aspx" ImageUrl="~/Images/Friends.png" Text="About Us" Value="AboutUs" />             <asp:MenuItem NavigateUrl="~/Products.aspx" ImageUrl="~/Images/Box.png" Text="Products" Value="Products" />             <asp:MenuItem NavigateUrl="~/Contact.aspx" ImageUrl="~/Images/Chat.png" Text="Contact Us" Value="ContactUs" />         </Items>     </asp:Menu> </div> </form> As you can see, we have ASP.NET Menu with Horizontal orientation and RenderMode=”List”. It has four Menu Items where for each I have specified NavigateUrl, ImageUrl, Text and Value properties. All images are in Images folder in the root directory of this web application. The images I’m using for this demo are from Free Web Icons. - Next, lets create CSS for the LI and A tags (place this code inside head tag) <style type="text/css">     li     {         border:1px solid black;         padding:20px 20px 20px 20px;         width:110px;         background-color:Gray;         color:White;         cursor:pointer;     }     a { color:White; font-family:Tahoma; } </style> This is nothing very important and you can change the style as you want. - Now, lets reference the jQuery core library directly from Microsoft CDN. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script> - And we get to the most interesting part, applying the animations with jQuery Before we move on writing jQuery code, lets see what is the HTML code that our ASP.NET Menu control generates in the client browser.   <ul class="level1">     <li><a class="level1" href="Default.aspx"><img src="Images/Home.png" alt="" title="" class="icon" />Home</a></li>     <li><a class="level1" href="About.aspx"><img src="Images/Friends.png" alt="" title="" class="icon" />About Us</a></li>     <li><a class="level1" href="Products.aspx"><img src="Images/Box.png" alt="" title="" class="icon" />Products</a></li>     <li><a class="level1" href="Contact.aspx"><img src="Images/Chat.png" alt="" title="" class="icon" />Contact Us</a></li> </ul>   So, it generates unordered list which has class level1 and for each item creates li element with an anchor with image + menu text inside it. If we want to access the list element only from our menu (not other list element sin the page), we need to use the following jQuery selector: “ul.level1 li”, which will find all li elements which have parent element ul with class level1. Hence, the jQuery code is:   <script type="text/javascript">     $(function () {         $("ul.level1 li").hover(function () {             $(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow");         }, function () {             $(this).stop().animate({ opacity: 1, width: "110px" }, "slow");         });     }); </script>   I’m using hover, so that the animation will occur once we go over the menu item. The two different functions are one for the over, the other for the out effect. The following line $(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow");     does the real job. So, this will first stop any previous animations (if any) that are in progress and will animate the menu item by giving to it opacity of 0.7 and changing the width to 170px (the default width is 110px as in the defined CSS style for li tag). This happens on mouse over. The second function on mouse out reverts the opacity and width properties to the default ones. The last parameter “slow” is the speed of the animation. The end result is:   The complete ASPX code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title>ASP.NET Menu + jQuery</title>     <style type="text/css">         li         {             border:1px solid black;             padding:20px 20px 20px 20px;             width:110px;             background-color:Gray;             color:White;             cursor:pointer;         }         a { color:White; font-family:Tahoma; }     </style>     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>     <script type="text/javascript">         $(function () {             $("ul.level1 li").hover(function () {                 $(this).stop().animate({ opacity: 0.7, width: "170px" }, "slow");             }, function () {                 $(this).stop().animate({ opacity: 1, width: "110px" }, "slow");             });         });     </script> </head> <body>     <form id="form1" runat="server">     <div id="menu">         <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List">                         <Items>                 <asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/Images/Home.png" Text="Home" Value="Home"  />                 <asp:MenuItem NavigateUrl="~/About.aspx" ImageUrl="~/Images/Friends.png" Text="About Us" Value="AboutUs" />                 <asp:MenuItem NavigateUrl="~/Products.aspx" ImageUrl="~/Images/Box.png" Text="Products" Value="Products" />                 <asp:MenuItem NavigateUrl="~/Contact.aspx" ImageUrl="~/Images/Chat.png" Text="Contact Us" Value="ContactUs" />             </Items>         </asp:Menu>     </div>     </form> </body> </html> Hope this was useful. Regards, Hajan

    Read the article

  • twitter bootstrap collapsable nav menu

    - by clifgray
    I am using twitter bootstrap on my web app to do all of the styling and everything is great for the most part. The problem is that my nav bar, once collapsed, will not drop down when I click the dropdown icon. I have listed my HTML but I think the problem is with my javascript seeing as this fiddle with the exact same code: http://jsfiddle.net/YWUmb/30/ works just fine. <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/">Exployre</a> <div class="nav-collapse"> <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/profile">Profile</a></li> <li><a href="/sponsors">Sponsors</a></li> <li><a href="/working">Exployrers</a></li> <li><a href="/about">About</a></li> <li><a href="/share">Share</a></li> <li> {% if user %} User: {{ user }}<br> <a href="{{ logout }}">Logout</a> {% else %} <a href="/login">Signin or Register</a> {% endif %} <li> <a href="/profile"> {% if visits %} {% if visits > 10 %} Prestige: {{ visits }} {% elif visits > 5 %} {% endif %} {% endif %} </a> </li> <li> <form action="/search" class="navbar-search"> <div> <input type="text" placeholder="Search" class="search-query" name="q" size="55"/> </div> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <script type="text/javascript" src="/static/js/bootstrap.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> Is there anything wrong with my source code links or anything additional that I need to do to make it work?

    Read the article

  • How to get dropdown menu to open/close on click rather than hover?

    - by TankDriver
    Hello! I am very new to java and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover. The menu in question is found on http://www.gamefriction.com/Coded/ and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module). The gray menu is part of a menu and the language menu is not. I have a jquery import as well which can be found in the view source of the above link. My Java: <script type="text/javascript"> /* Language Selector */ $(function() { $("#lang-selector li").hover(function() { $('ul:first',this).css('display', 'block'); }, function() { $('ul:first',this).css('display', 'none'); }); }); $(document).ready(function(){ /* Navigation */ $('.subnav-game').hide(); $('.subnav-game:eq(0)').show(); $('.preorder-type').hide(); $('.preorder-type:eq(3)').show(); }); </script> My CSS: #lang-selector { font-size: 11px; height: 21px; margin: 7px auto 17px auto; width: 186px; } #lang-selector span { color: #999; float: left; margin: 4px 0 0 87px; padding-right: 4px; text-align: right; } #lang-selector ul { float: left; list-style: none; margin: 0; padding: 0; } #lang-selector ul li a { padding: 3px 10px 1px 10px; } #lang-selector ul, #lang-selector a { width: 186px; } #lang-selector ul ul { display: none; position: absolute; } #lang-selector ul ul li { border-top: 1px solid #666; float: left; position: relative; } #lang-selector a { background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat; color: #666; display: block; font-size: 10px; height: 17px; padding: 4px 10px 0 10px; text-align: left; text-decoration: none; width: 166px; } #lang-selector ul ul li a { background: #333; color: #999; } #lang-selector ul ul li a:hover { background: #c4262c; color: #fff; } My HTML: <div id="lang-selector"> <ul> <li> <a href="#">Choose a Language</a> <ul> <li><a href="?iw_lang=en">English</a></li> <li><a href="?iw_lang=de">Deutsch</a></li> <li><a href="?iw_lang=es">Espa&ntilde;ol</a></li> <li><a href="?iw_lang=fr">Fran&ccedil;ais</a></li> <li><a href="?iw_lang=it">Italiano</a></li> </ul> </li> </ul> </div> Thanks!

    Read the article

< Previous Page | 21 22 23 24 25 26 27 28 29 30 31 32  | Next Page >