Search Results

Search found 18674 results on 747 pages for 'jquery effects'.

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

Page 80/747 | < Previous Page | 76 77 78 79 80 81 82 83 84 85 86 87  | Next Page >

  • CKEditor inside jQuery Dialog, how do I build it?

    - by Ben Dauphinee
    So, I'm working with CKEditor and jQuery, trying to build a pop-out editor. Below is what I have coded so far, and I can't seem to get it working the way I want it to. Basically, click the 'Edit' link, dialog box pops up, with the content to edit loaded into the CKEditor. Also, not required, but helpful if you can suggest how to do it. I can't seem to find out how to make the save button work in CKEditor (though I think the form will do it). Thanks in advance for any help. $(document).ready(function(){ var config = new Array(); config.height = "350px"; config.resize_enabled = false; config.tabSpaces = 4; config.toolbarCanCollapse = false; config.width = "700px"; config.toolbar_Full = [["Save","-","Cut","Copy","Paste","-","Undo","Redo","-","Bold","Italic", "-", "NumberedList","BulletedList","-","Link","Unlink","-","Image","Table"]]; $("a.opener").click(function(){ var editid = $(this).attr("href"); var editwin = \'<form><div id="header"><input type="text"></div><div id="content"><textarea id="content"></textarea></div></form>\'; var $dialog = $("<div>"+editwin+"</div>").dialog({ autoOpen: false, title: "Editor", height: 360, width: 710, buttons: { "Ok": function(){ var data = $(this).val(); } } }); //$(this).dialog("close"); $.getJSON("ajax/" + editid, function(data){ alert("datagrab"); $dialog.("textarea#content").html(data.content).ckeditor(config); alert("winset"); $dialog.dialog("open"); }); return false; }); });

    Read the article

  • How to pass a parameter to jQuery UI dialog event handler?

    - by bebraw
    I am currently trying to hook up jQuery UI dialog so that I may use it to create new items to my page and to modify ones existing already on the page. I managed in the former. I'm currently struggling in the latter problem, however. I just cannot find a nice way to pass the item to modify to the dialog. Here's some code to illustrate the issue better. Note especially the part marked with XXX. The {{}} parts are derived from Django template syntax: $(".exercise").click(function() { $.post("{{ request.path }}", { action: "create_dialog", exercise_name: $(this).text() }, function(data) { $("#modify_exercise").html(data.content); }, "json" ); $("#modify_exercise").dialog('open'); }); $("#modify_exercise").dialog({ autoOpen: false, resizable: false, modal: true, buttons: { '{% trans 'Modify' %}': function() { var $inputs = $('#modify_exercise :input'); var post_values = {}; $inputs.each(function() { post_values[this.name] = $(this).val(); }); post_values.action = 'validate_form'; //XXX: how to get the exercise name here? post_values.exercise_name = 'foobar'; $.post('{{ request.path }}', post_values, function(data) { if( data.status == 'invalid' ) { $('#modify_exercise').html(data.content); } else { location.reload(); } }, "json" ); } } }); Here's some markup to show how the code relates to the structure: <div id="modify_exercise" class="dialog" title="{% trans 'Modify exercise' %}"> </div> <ul> {% for exercise in exercises %} <li> <a class="exercise" href="#" title="{{ exercise.description }}"> {{ exercise.name }} </a> </li> {% endfor %} </ul>

    Read the article

  • Why unchecked jQuery UI radio button's label appears "checked" after refresh in FF and IE?

    - by Daj pan spokój
    I've got 2 radio buttons with labels: button A is checked by default in HTML (checked="checked"). They're then processed with jQuery UI Radio Button. When I check button B and refresh the page, B's label is displayed as checked (it has CSS ui-state-active class). And A's label is displayed as unchecked, even though it's A button that is actually checked. It happens in Firefox (3) and IE (8). In Chrome (5) it works fine - after refresh A's label is displayed as checked. <input class="ui-helper-hidden-accessible" id="show-all-hotels" name="radio" CHECKED="CHECKED" type="radio"> <label aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" aria-pressed="false" for="show-all-hotels"> <span class="ui-button-text">All tours</span> </label> <input class="ui-helper-hidden-accessible" id="show-availability" name="radio" type="radio"> <label aria-disabled="false" role="button" aria-pressed="true" class="UI-STATE-ACTIVE ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" for="show-availability"> <span class="ui-button-text">Only available at</span> </label> Do You know why is it happening and how to make checked button label appear as checked in all browsers?

    Read the article

  • jQuery: is there a way to make a recursive child selector?

    - by gsquare567
    instead of checking only the immediate children of an element, i would like to recursively check all children of the element. specifically, something like $("#survey11Form>input[type=text]:visible").val(); with the html: <form id="survey11Form" name="survey11Form" action="#" method="post"> <div id="survey11Div"> <fieldset> <legend>TEST'TEST"TEST</legend> <div class="label"> <label test="" title="TEST'TEST" for="answer15"> TEST'TEST"TEST </label></div> <div class="fieldWrapper text required"> <div style="width: 146px;" class="cellValue"> <input type="text" title="TEST'TEST" value="" id="survey11answer15" name="survey11answer15"> should give me the value of that input. the jquery i've come up with does not. any ideas as to what would work in this situation (and all recursive situations)? thanks!

    Read the article

  • jquery how to create a new div, assign some attributes, and create an id from some other elements at

    - by Ronedog
    How can I accomplish this...what I've tried below is not working and I'm unsure how to make it work. What I'm trying to do is create a div and assign it some attributes, then append this div to all the < li elements that are the on the last node of my unordered list. And lastly, but most important I want to retrieve the value of the attribute called "p_node" from the < li that is being appended to and insert it in as part of the ID of the newely created div Here's my current jquery code: $('<div />,{id:"'+ $("#nav li:not(:has(li))").attr("p_node").val() +'_p_cont_div", class:"property_position"}').appendTo("#nav li:not(:has(li))"); Here's the HTML before the div creation: <ul> <li p_node="98" class="page_name">Category A</li> </ul> <ul> <li p_node="99" class="page_name">Category B</li> </ul> Here's what I want it to look like after the new div creation: <ul> <li p_node="98" class="page_name">Category A</li> <div id="98_p_cont_div" class="property_position"></div> </ul> <ul> <li p_node="99" class="page_name">Category B</li> <div id="99_p_cont_div" class="property_position"></div> </ul> Thanks for your help.

    Read the article

  • How to make speed of scrolling more slower in this jQuery scrolling script?

    - by Jitendra Vyas
    Currently in example speed and step both are are 1. but i need much slower speed of scrolling. How to get full control over speed. I want the clouds to move much slower Example http://jsfiddle.net/cHZG6/1/ Code (function($) { $.fn.scrollingBackground = function(options) { // settings and defaults. var settings = options || {}; var speed = settings.speed || 1; var step = settings.step || 1; var direction = settings.direction || 'rtl'; var animStep; // build up a string to pass to animate: if (direction === 'rtl') { animStep = "-=" + step + "px"; } else if (direction === 'ltr') { animStep = '+=' + step + "px"; } var element = this; // perform the animation forever: var animate = function() { element.animate({ backgroundPosition: animStep + " 0px" }, speed, animate); }; animate(); }; })(jQuery); $("#header").scrollingBackground({ speed: 1, step: 1, direction: 'ltr' }); $("#header-2").scrollingBackground({ speed: 1, step: 1, direction: 'rtl' });

    Read the article

  • HTML converted to jQuery collection not searchable with selectors?

    - by jimp
    I am trying to dynamically load a page using $.get(), parse the return with var $content = $(data), and ultimately use selectors to find only certain parts of the document. Only I cannot figure out why the jQuery collection returned from $(data) does not find some very basic selectors. I set up a jsFiddle to illustrate the problem using a very small string of HTML. <html> <head> <title>See Our Events</title> </head> <body><div id="content">testing</div></body> </html> I want to find the <title> node. var html = "<html>\n"+ "<head>\n"+ " <title>See Our Events</title>\n"+ "</head>\n"+ "<body><div id=\"content\">testing</div></body>\n"+ "</html>"; var $content = $(html); console.log($content.find('title').length); // Logs 0. Why? If I wrap a <div> around the HTML, then the selector works. (But if you look at the jsFiddle, other variations of the selector still do not work!) var html = "<div><html>\n"+ "<head>\n"+ " <title>See Our Events</title>\n"+ "</head>\n"+ "<body><div id=\"content\">testing</div></body>\n"+ "</html></div>"; var $content = $(html); console.log($content.find('title').length); // Logs 1. Please look at the jsFiddle, too. It contains more examples than my code here to keep the post easier to read. Why does my otherwise very basic selector not return the title node?

    Read the article

  • How to traverse table in Jquery and add a class?

    - by SWL
    I have a simple table of two rows. The first column is required, but the others are not; however, I would like them to be required in pairs. So if the user enters a value for Quantity3, then Size3 should also now be required. As a fiddle: http://jsfiddle.net/NaRts/7/ <tr> <td><input name="qty1[492]" class="qty required" type="text"></td> <td><input name="qty2[492]" class="qty" type="text"></td> <td><input name="qty3[492]" class="qty" type="text"></td> </tr><tr> <td><input name="size1[492]" type="text" class="size required" ></td> <td><input name="size2[492]" type="text" class="size" ></td> <td><input name="size3[492]" type="text" class="size" ></td> </tr> And the simple jQuery I have is: $('.qty').keyup(function() { var s = $(this).attr('name'); // = qty3[418] var qtyID = s.replace(/[^1-9\[\]]/g, ""); // = 3[418] var SizeID = "size" + qtyID; var $sizeInput = $(this).closest('tr').next().find(SizeID); $sizeInput.css('background-color', 'green'); $sizeInput.addClass('required'); //I tried this too but it didn't work //$(this).parent().find(SizeID).addClass('required'); });? ? Any help is much appreciated.

    Read the article

  • How do I do client-side form validation in jQuery?

    - by marcamillion
    I am trying to use this plugin: http://docs.jquery.com/Plugins/Validation Where #user_new is the id for my form, this is what my code looks like: $('#user_new').validate({ rules: { user[username]: "required", user[email]: { required: true, email: true } }, messages: { user[username]: "Please specify your name", user[email]: { required: "We need your email address to contact you", email: "Your email address must be in the format of [email protected]" } } }) Where these are how my input fields look when the page is rendered (generated by Rails): <input class="clearField curved" id="user_f_name" name="user[f_name]" size="30" type="text" value="First Name" /><br /> <input class="clearField curved" id="user_l_name" name="user[l_name]" size="30" type="text" value="Last Name" /><br /> <input class="clearField curved" id="user_username" name="user[username]" size="30" type="text" value="Username" /><br /> <input class="clearField curved" id="user_password" name="user[password]" size="30" type="password" value="Password" /><br /> <input class="clearField curved" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="Password" /><br /> <input class="clearField curved" id="user_email" name="user[email]" size="30" type="text" value="Email Address" /><br /> I was just trying to validate username & email first. Then take it from there. For the life of me, I can't figure out how to specify the syntax and the rules for working with this plugin. Help!

    Read the article

  • jQuery: How to reverse sortable('serialize') arrays from last to first?

    - by Binyamin
    The discussion begins http://stackoverflow.com/questions/654535/jquery-what-to-do-with-the-list-that-sortableserialize-returns/2920760#2920760 How to reverse it from last to first, updateList.php?id[]=5&id[]=4&id[]=3&id[]=2&id[]=1&&action=update? <ul> <li id="oreder-5">5</li> <li id="oreder-4">4</li> <li id="oreder-3">3</li> <li id="oreder-2">2</li> <li id="oreder-1">1</li> <ul> My code: $(document).ready(function(){ order=[]; $('#list ul').children('li').each(function(idx, elm) { order.push(elm.id.split('-')[1]) }); $.post('updateList.php', {'order[]': order, action: 'update'}); function slideout(){ setTimeout(function(){ $("#response").slideUp("slow", function () {}); }, 2000); } $("#response").hide(); $(function() { $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() { var order = $(this).sortable("serialize") + '&action=update'; $.post("updateList.php", order, function(theResponse){ $("#response").html(theResponse); $("#response").slideDown('slow'); slideout(); }); }}); }); });

    Read the article

  • Any reason why my $.ajax success callback is not executed in Jquery?

    - by arma
    Hello, Today i discovered that my dev version of my website do not execute success callback, but all other javascript and jquery code is running good. Even my ajax request is performed and i can see response in firebug. $('#login').submit(function(){ var email = $('#l_email').val(); var pass = $('#l_pass').val(); if(email && pass != ''){ var str = decodeURIComponent($(this).serialize()); $.ajax({ type: "POST", url: "login.php", data: str, success: function(msg){ if(msg == 'OK'){ window.location = 'index.php' }else if (msg == 'NOT_OK'){ if(lang == 'lv'){ alert(message); }else if(lang == 'ru'){ alert(message); } }else if (msg == 'EMAIL_NOT_VALID'){ if(lang == 'lv'){ alert(message); }else if(lang == 'ru'){ alert(message); } } } }); }else{ alert('That form is empty.'); } return false; }); The thing is $.ajax part executes fine and i can see response in firebug "OK". But redirect is not happening and even if i replace that redirect with something like alert or console.log nothing comes up. What could cause this? It's really hard to track since firebug gives no errors.

    Read the article

  • JQuery: Live <a> tag partially working second time around.

    - by BPotocki
    I have the following jquery code: $("a[id*='Add_']").live('click', function() { //Get parentID to add to. var parentID = $(this).attr('id').substring(4); //Get div. var div = $("#CreateList"); //Ajax call to refresh "CreateList" div with new XML. div.load("/AddUnit?ParentID=" + parentID); }); Basically, contained within the div is a nested unordered list with several "Add_#" links. Clicking the links uses an ajax call to recreate the list with a new node. It clears all the add links, but they are added again by the ajax call. This is why I used the .live method so newly added "Add_#" links still have the binding. This works in most cases. If I click "Add_1", the div refreshes with the new info. If I then click "Add_2", it works again as expected. The problem I'm having happens when I click "Add_1", then the page refreshes (and creates a new "Add_1" link), then I click the re-rendered "Add_1" again. It's the same link, but it was refreshed during the ajax call. When I do that, the javascript function still gets called, but the .load method doesn't work. Any ideas why this might be happening? Thanks.

    Read the article

  • Getting JQuery UI Sortable to work on asp.net ListView items?

    - by Xaisoft
    I have the following ListView in which I am using the JQuery UI sortable function to be able to sort the items in the ListView. The problem is that I can't put a sortable class on the table in the ItemTemplate because it does not work, if I put a class="sortable" on the outer div, it works, but it allows me to sort everything within the ListView, I just want to be able to move sort the tables. Here is the markup <div> //Works here, but hr's become sortable too. <asp:ListView ID="lvwDocuments" runat="server"> <LayoutTemplate> <h3> Documents</h3> <asp:PlaceHolder ID="itemPlaceHolder" runat="server"> </asp:PlaceHolder> </LayoutTemplate> <ItemTemplate> <table class="sortable"> //Does not work Here <tr> <td> <p class="title"> <a runat="server" href='<%#Eval("url") %>'> <%#Eval("title") %></a></p> <br /> <p> <%#Eval("description") %></p> </td> </tr> </table> </ItemTemplate> <ItemSeparatorTemplate> <hr /> </ItemSeparatorTemplate> </div> Also, How can I preserve the sort order even after the page is refreshed.

    Read the article

  • Struts2 jQuery Plugin Autocompleter renders HTML with style attributes <== changing this?

    - by Tim
    I'm using the Struts2 jQuery plugin 2.1 and render an autocompleter in my JSP. Here's the code: <s:form id="search-form" action="search" theme="simple"> <s:url id="remoteurl" action="jsonlanguages"/> <div> <sj:autocompleter cssClass="bgstandardelement empty" id="languages" name="echo" href="%{remoteurl}" delay="50" value="Search..." /> <input type="submit" id="search-button" value="GO" /> </div> </s:form> No matter what theme I set the autocompleter-form to, the HTML rendered for the list I output is always an unordered list with a style element that I cannot override. It has the following stype-attribute: style='z-index: 1; top: 242px; left: 926px; display: none; width: 256px'; As I want another outfit for my list, this doesn't work. Putting in the following attribute has no effect: cssStyle="width:115px!important;" What can I do?

    Read the article

  • How to create a HTML Table with in Jquery Modal .

    - by Derby
    I am looking to have the Html table with 4 rows with in jquery modal but it is not fitting the corners of Modal.Iam opening the modal when i click on a button. it looks like we have the table inside the modal .How can i overcome that Javascript: $(document).ready(function(){ $("#dialog1").dialog({ autoOpen: false, height: 390, width :480, resizable: false, modal: true }); $("#button1").click(function (){ $('#dialog1').dialog('open'); $("#dialog1").dialog( "option", "closeOnEscape", false ); }); )}; HTML: <div id="dialog1" style="display:none"> <table width ="100%" border = "1" align='center'> <tr><td align = 'center'>tesstttt</td></tr> <tr><td>testin gggggg.</td></tr> <tr><td align = 'center'><img src="sp.gif" border="0" align="center" hspace="12"/></td> </tr> <tr><td> errors:????</td></tr> </table> </div>

    Read the article

  • jQuery fade li elemet and cycle it when mouse hovered.

    - by Pennf0lio
    I'm trying to recreate an effect in jQuery, where an element(<li> <img>) will be cycled and has a fading effect when hovered. The '<li>' contains '<img>' (image screenshots). when the mouse is on top of element it will keep cycling all that are in '<ul>' with a fading effect. when the mouse is away it will stop cycling the list. I also want to add a pager where you can navigate to the list. My Existing Code: link text My Problem: The current code has some problem with the pagination, it added all images that can be seen on the code. instead of 1-8 only, it continued to add another 1-8 and another. Second problem is, It also start cycling and fading when the page loads. The cycling and fading should only be working when the mouse is on top of the element. I don't know if the 'Cycle Plugin' is really required on this approach, I wan't it to be minimal as much as possible. I just use 'Cycle Plugin' because it's a quick answer to my problem. The effect i'm trying to achieve: link text (WARNING: Contains some Pornography), Sorry of my example, I tried finding other alternative but no luck. Thanks and merry xmas!

    Read the article

  • jquery problem with toggle event only fireing on the 2nd click...

    - by Ronedog
    Can anyone explain why the following jquery only fires the 2nd toggle event and how to fix it? Specifically, every time I click the nested < a element it brings up the alert "2nd click". I tested the selector to make sure it was selecting the element properly and it does, or at least it inserted a class without any problems. The selector is selecting the very last node in the unordered list that has an anchor tag. $("#nav li:not(:has(li)) a").toggle(function() { //1st click alert("1st Click"); }, function() { //2nd click alert("2nd Click"); }); Nested HTML structure that fails: <ul id="nav"> <li> <span>stuff</span> <a href="#">Cat 1</a> <ul> <li> <span>stuff</span> <a href="#">Subcat1</a> <ul> <li> <span>Stuff</span> <a href="#">Subcat Details</a> </li> </ul> </li> </ul> </li> </ul> However, this works right and fires both click events: <ul id="nav"> <li> <span>stuff</span> <a href="#">Cat 1</a> </li> </ul>

    Read the article

  • How to use multiple instances of a usercontrol (with jquery) on the same page

    - by Julian
    Hi All, I've been working on an usercontrol with a jquery timer in it. At first I had the jquery within the usercontrol. But when I add 2 of those controls to my page the second usercontrol isn't showing it's data very well. Now I've put the jquery into the mainpage and the usercontrol only uses the id's of the jquery. Here is my usercontrol: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %> <style type="text/css"> #mainpanel { width: 145px; height: 123px; } </style> <div id="mainpanel"> <div> test</div> <div id="shortly" style="background-color: #FFFFFF"> </div> <button id="resetButton"> Reset </button> </div> Mainpage: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>hoi</title> <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> <link href="Css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script type="text/javascript" src="Scripts/jquery.countdown.js"></script> <script type="text/javascript"> $(document).ready(function () { $(function() { $("#mainpanel"); }); shortly = new Date(); shortly.setSeconds(shortly.getSeconds() + 5.5); $('#shortly').countdown({ until: shortly, onExpiry: liftOff, layout: '{sn}', }); $('#resetButton').click(function () { $('#mainpanel').effect("highlight", {}, 700 ); $('#shortly').effect("highlight", {}, 700 ); shortly = new Date(); shortly.setSeconds(shortly.getSeconds() + 5.5); $('#shortly').countdown('change', { until: shortly }); }); function liftOff() { // refresh the page window.location = window.location; } }); </script> </head> <body> <uc1:WebUserControl ID="WebUserControl1" runat="server" /> </body> </html> But still my usercontrols are acting weird, now my question is: "How can I make the SAME usercontrols work properly on ONE page?" Both of those use the same jquery code but the buttons etc. should only work within the usercontrol itself.

    Read the article

  • Combining mousedown and mousemove events together with Javascript (JQUERY?)

    - by webzide
    Dear experts, I would like to combine a the mousedown and mousemove and mouseup events together. Basically the application of this would be making a UI for selecting elements. Like selecting icons in windows when the mouse is clicked down and as you move it, a dotted border dynamically moves with it. I know this is possible with the predefined UI of Jquery. But I am building a web application that requires the integration of this and would like to know the technique. I spend hours on this and it just doesn't work. here's is the code i have so far and the logic behind it: $(document).bind('mousedown', function (evt) { evt = (evt) ? evt : event; startX = evt.clientX; startY = evt.clientY; div = document.createElement("div"); div.style.position = "absolute"; div.style.left = startX + "px"; div.style.top = startY + "px"; div.style.border = "1px dotted #DDDDDD"; $(document).bind('mousemove', function(evt){ evt=(evt) ? evt: event; alert("TESTING OF THIS WORKS"); }); }); $(document).bind('mouseup',function(evt) { var evt = (evt) ? evt : event; var endX = evt.clientX; var endY = evt.clientY; difX = (endX - startX); difY = (endY - startY) if ((difX || difY) > 0) { div.style.width = difX + "px"; div.style.height = difY + "px"; document.body.appendChild(div); } $(this).unbind('mousemove'); }); As you can see I have placed an event binding of mousemove into the event function of mousedown so that it can only be invoked when the mouse is down. but the problem is, once that event is binded, it does not come off. The borders does not move dynamically as expected. Maybe my logic is entirely messed up. If anyone could point me the the right direction that would be great. THanks in advance.

    Read the article

  • Jquery hiding all descendents of a ul tag...showing child elements as tree menu...

    - by Ronedog
    I want to hide all the descendents of the "ul" for my tree menu when the page loads up, then as each "main" "li" link is clicked display the direct child, and if the direct child has children (grandchild), when the the "Child" is clicked I want it to show the "grandchild" elements. should be simple, but some how I screwed things up and when i click on the main "li" (Heading 1) it displays all of the descendents (Including the "Sub page A - 1"), instead of just the direct children ("Sub Page A"). Which I think means the children, grandchildren, etc. were never hidden to begin with with the .hide(). What I really want to happen is to hide all the descendents (except the main top-level headings) and as I walk down the tree display the children as needed. Any tips on how to make this work? Here's the HTML: <ul id="nav"> <li>Heading 1 <ul> <li>Sub page A <ul> <li>Sub page A - 1</li> <li>Sub page A - 3</li> <li>Sub page A - 2</li> </ul> </li> <li>Sub page B</li> <li>Sub page C</li> </ul> </li> <li>Heading 2 <ul> <li>Sub page D</li> <li>Sub page E</li> <li>Sub page F</li> </ul> </li> <li>Heading 3 <ul> <li>Sub page G</li> <li>Sub page H</li> <li>Sub page I</li> </ul> </li> Here's my Jquery: $(function(){ $('#nav ul').hide(); //Supposed to Hide all <ul> tags for all descendents, but doesn't work $('#nav>li').mouseover(function(){ $(this).addClass("a_hand") }); //Add the class that displays the hand $('#nav>li').toggle(function() { $(this).find('ul').slideDown(200); }, function() { $(this).find('ul').slideUp(200); });//END TOGGLE });//END MAIN FUNCTION thanks.

    Read the article

  • What's the best way to return stuff from a PHP function, and simultaneously trigger a jQuery action?

    - by Jack Webb-Heller
    So the title is a tad ambiguous, but I'll try and give an example. Basically, I have an 'awards' system (similar to that of StackOverflow's badges) in my PHP/CodeIgniter site, and I want, as soon as an award is earned, a notification to appear to the user. Now I'm happy to have this appear on the next page load, but, ideally I'd like it to appear as soon as the award is transactioned since my site is mostly Ajax-powered and there may not be page reloads very often. The way the system works currently, is: 1) If the user does something to trigger the earning of an award, CodeIgniter does this: $params['user_id'] = $this->tank_auth->get_user_id(); $params['award_id'] = 1; // (I have a database table with different awards in) $this->awards->award($params); 2) My custom library, $this->awards, runs the award function: function award($params) { $sql = $this->ci->db->query("INSERT INTO users_awards (user_id, award_id) VALUES ('".$params['user_id']."','".$params['award_id']."') ON DUPLICATE KEY UPDATE duplicate=duplicate+1"); $awardinfo = $this->ci->db->query("SELECT * FROM awards WHERE id = ".$params['award_id']); // If it's the 'first time' the user has gotten the award (e.g. they've earnt it) if ($awardinfo->row('duplicate') == 0) { $params['title'] = $awardinfo->row('title'); $params['description'] = $awardinfo->row('description'); $params['iconpath'] = $awardinfo->row('iconpath'); $params['percentage'] = $awardinfo->row('percentage'); return $params; } } So, it awards the user (and if they've earnt it twice, updates a useless duplicate field by one), then checks if it's the first time they've earnt it (so it can alert them of the award). If so, it gets the variables (title of the award, the award description, the path to an icon to display for the award, and finally the percentage of users who have also got this award) and returns them as an array. So... that's that. Now I'd like to know, what's the best way to do this? Currently my Award-giving bit is called from a controller, but I guess if I want this to trigger via Ajax, then the code should be placed in a View file...? To sum it up: I need the returned award data to appear without a page refresh. What's the best way of doing this? (I'm already using jQuery on my page). Thanks very much everybody! Jack

    Read the article

  • asp.net/jquery - Countdown timer not working

    - by Julian
    Here is the full code: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <style type="text/css"> @import "jquery.countdown.css"; </style> <script type="text/javascript" src="Scripts/jquery.countdown.js"></script> <script type="text/javascript"> $('#shortly').countdown({ until: shortly, onExpiry: liftOff, layout: "{ps} seconds to go" }); $(document).ready(function () { shortly = new Date(); shortly.setSeconds(shortly.getSeconds() + 5.5); $('#shortly').countdown('change', { until: shortly }); }); function liftOff() { // refresh the page windowwindow.location = window.location; } </script> </head> <body> <form id="form1" runat="server"> <span id="shortly"></span> </form> </body> </html> I've got the jquery.countdown.js in the Scriptsmap of visual studio. Also the stylesheet "jquery.countdown.css" is in the project. Don't have a clue about what the problem could be. I'm kind of new to jquery and trying to learn it.

    Read the article

  • JQuery - Slide Example

    - by gav
    Hi All, I want to perform a simple slide motion on an HTML element. JQuery is already available on the site in question so the next logical step for me was to look at their documentation. JQuery - Slide down When I check out their demo however, it doesn't seem to be functioning. In firebug they have an error; missing ) after argument list wyciwyg://0/http://docs.jquery.com/UI/Effects/Slide Line 18 Whilst the error seems simple, I can't work out how to correct it (On thier site by editing the JS). On my own site using the same example an error is found in the JQuery 1.4.2 script itself; jQuery.easing[specialEasing || defaultEasing] is not a function file:///home/gav/ee-workspaces/web/site/php/jquery-1.4.2.js Line 5854 I don't mean to sound lazy / rude but what's going on? Is the JQuery site and newest release actually broken, I doubt it, what am I doing wrong? I'm a CS grad with no real web dev experience so I'm not used to this method of debugging, where should I start with this? Thanks, Gav

    Read the article

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

< Previous Page | 76 77 78 79 80 81 82 83 84 85 86 87  | Next Page >