Search Results

Search found 27917 results on 1117 pages for 'jquery methods'.

Page 53/1117 | < Previous Page | 49 50 51 52 53 54 55 56 57 58 59 60  | Next Page >

  • jquery addresses and live method

    - by Jay
    //deep linking $.fn.ajaxAnim = function() { $(this).animW(); $(this).html('<div class="load-prog">loading...</div>'); } $("document").ready(function(){ contM = $('#main-content'); contS = $('#second-content'); $(contM).hide(); $(contM).addClass('hidden'); $(contS).hide(); $(contS).addClass('hidden'); function loadURL(URL) { //console.log("loadURL: " + URL); $.ajax({ url: URL, beforeSend: function(){$(contM).ajaxAnim();}, type: "POST", dataType: 'html', data: {post_loader: 1}, success: function(data){ $(contM).html(data); $('.post-content').initializeScroll(); } }); } // Event handlers $.address.init(function(event) { //console.log("init: " + $('[rel=address:' + event.value + ']').attr('href')); }).change(function(event) { evVal = event.value; if(evVal == '/'){return false;} else{ $.ajax({ url: $('[rel=address:' + evVal + ']').attr('href'), beforeSend: function(){$(contM).ajaxAnim();}, type: "POST", dataType: 'html', data: {post_loader: 1}, success: function(data){ $(contM).html(data); $('.post-content').initializeScroll(); }}); } //console.log("change"); }) $('.update-main a, a.update-main').live('click', function(){ loadURL($(this).attr('href')); return false; }); $(".update-second a, a.update-second").live('click', function() { var link = $(this); $.ajax({ url: link.attr("href"), beforeSend: function(){$(contS).ajaxAnim();}, type: "POST", dataType: 'html', data: {post_loader: 1}, success: function(data){ $(contS).html(data); $('.post-content').initializeScroll(); }}); return false; }); }); I'm using jquery addresses to update content while maintaining a useful url. When clicking on links in a main nav, the url is updated properly, but when links are loaded dynamically with ajax, the url address function breaks. I have made 'click' events live, allowing for content to be loaded via dynamically loaded links, but I can't seem to make the address event listener live, but this seems to be the only way to make this work. Is my syntax wrong if I change this : $.address.change(function(event) { to this: $.address.live('change', function(event) { or does the live method not work with this plugin?

    Read the article

  • Jquery Cycle issue or css issue in Chrome/Safari for Mac

    - by Mark
    Hi i have used the jquery cycle plugin to create multiple simple sliding galleries. In Chrome/Safair on Mac the browser is not loading the images. Here is the link the js i am using is here, although it could be a css issue..? I am struggling to find the real problem. $(document).ready(function() { $('.slides').each(function() { var $this = $(this), $ss = $this.closest('.slideshow'); var prev = $ss.find('a.prev'), next = $ss.find('a.next'); $this.cycle({ prev: prev, next: next, fx: 'scrollLeft', speed: 'fast', timeout: 0 }); }); }); CSS .slideshow { width:476px; height:287px; float:left; margin-right:30px; position:relative; z-index:0; margin-bottom:20px; } .slides { position:absolute; top:0; left:0; z-index:1; } a.prev { display:block; width:23px; height:22px; background:red; position:absolute; z-index:1000; background: url(../images/next_prev.png) no-repeat 0 0; top:133px; left:-11px; } a.next { display:block; width:23px; height:22px; background:red; position:absolute; z-index:1000; background: url(../images/next_prev.png) no-repeat -23px 0; top:133px; right:-11px; } Markup: <div class="slideshow"> <div class="slides"> <img src="images/chief_st_1.jpg" alt="CHIEF stationery + literature" /> <img src="images/chief_st_3.jpg" alt="CHIEF stationery + literature" /> <img src="images/chief_st_2.jpg" alt="CHIEF stationery + literature" /> </div> <a class="prev" href="#"></a> <a class="next" href="#"></a> </div> Any help would be appreciated. thanks

    Read the article

  • jQuery remove div

    - by oshirowanen
    Hello, I have the following script jquery here: <script type="text/javascript"> $(function() { $(".column").sortable( { connectWith: '.column' }, { handle: '.widget-header' }, }); $(".widget").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".widget-header") .addClass("ui-widget-header ui-corner-all") .prepend('<span class="ui-icon ui-icon-minusthick"></span>') .end() .find(".widget-content"); $(".widget-header .ui-icon").click(function() { $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); $(this).parents(".widget:first").find(".widget-content").toggle(); }); $(".column").disableSelection(); }); </script> html here: <div class="divWidgets"> <div class="column" id="column_1"> <div class="widget" id="Widget_1"> <div class="widget-header" id="Widget_1_Header">widget one</div> <div class="widget-content" id="Widget_1_Content">widget one content goes here</div> </div> <div class="widget" id="Widget_0"> <div class="widget-header" id="Widget_0_Header">widget zero</div> <div class="widget-content" id="Widget_0_Content">widget zero content goes here</div> </div> </div> <div class="column" id="column_2"> <div class="widget" id="Widget_3"> <div class="widget-header" id="Widget_3_Header">widget three</div> <div class="widget-content" id="Widget_3_Content">widget three content goes here</div> </div> <div class="widget" id="Widget_5"> <div class="widget-header" id="Widget_5_Header">widget five</div> <div class="widget-content" id="Widget_5_Content">widget five content goes here</div> </div> </div> </div> As you can see, this script places a "minus" button on the widgets, which will minimize the appropriate widget when clicked. How do I replace this "minus" icon with a "delete" which will totally delete the appropriate div when clicked?

    Read the article

  • set radio button in jquery dialog

    - by RememberME
    I have the following if/else on another form and it works perfectly. I've now put it on a form which shows as a jquery dialog. Every alert along the way shows the correct assignment, but when the dialog opens, neither button is selected. $("#create-company").click(function() { alert($('#primary_company').val().length); if ($('#primary_company').val().length > 0) { alert("if secondary"); $('#secondary').attr('checked', 'true'); var id = $("input:radio[name='companyType']:checked").attr('id'); alert(id); } else { alert("else primary"); $('#primary').attr('checked', 'true'); $('#sec').hide(); var id = $("input:radio[name='companyType']:checked").attr('id'); alert(id); } var id = $("input:radio[name='companyType']:checked").attr('id'); alert(id); $('#popupCreateCompany').dialog('open'); }); Dialog: $('#popupCreateCompany').dialog( { autoOpen: false, modal: true, buttons: { 'Add': function() { var dialog = $(this); var form = dialog.find('input:text, select'); $.post('/company/post', $(form).serialize(), function(data) { if (data.Result == "success") { var id = $("input:radio[name='companyType']:checked").attr('id'); if (id == "primary") { $('#company').append($('<option></option>').val(data.company_id).html(data.company_name).attr("selected", true)); $('#primary_company').append($('<option></option>').val(data.company_id).html(data.company_name).attr("selected", true)); $('#company_id').append($('<option></option>').val(data.company_id).html(data.company_name).attr("selected", true)); } else { $('#company_id').append($('<option></option>').val(data.company_id).html(data.company_name)); } dialog.dialog('close'); alert("Company " + data.company_name + " successfully added."); } else { alert(data.Result); }; }, "json") }, 'Cancel': function() { $(this).dialog('close'); } } }); Radio buttons: <label>Company Type:</label> <label for="primary"><input onclick="javascript: $('#sec').hide('slow');$('#primary_company').find('option:first').attr('selected','selected');" type="radio" name="companyType" id="primary" />Primary</label> <label for="secondary"><input onclick="javascript: $('#sec').show('slow');" type="radio" name="companyType" id="secondary" />Subsidiary</label> <div id="sec"> <fieldset> <label for="primary_company">Primary Company:</label> <%= Html.DropDownList("primary_company", Model.SelectPrimaryCompanies, "** Select Primary Company **") %> </fieldset> </div>

    Read the article

  • DOM Elements with same id and jQuery

    - by Steve
    Hi I have multiple elements with the same structure in my application. Second div element's id varies as per the comment id in the db which is unique. There are elements with the id 'vote_up' and 'vote_down'. This gets repeated for each comment.What happens is that, as I mentioned, there are multiple comments. I want to perform an Ajax request. First of this structure functions properly using ajax, but the rest does an http request. Btw I am developing a rails application and I am using jQuery. <div id="post_comment"> john<i> says </i> Comment<br/> <div id="comment_10_div"> **<form action="/comments/vote_up" id="vote_up" method="post">** <div style="margin:0;padding:0;display:inline"> <input name="authenticity_token" type="hidden" value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho=" /> </div> <input id="Comment_place_id" name="Comment[post_id]" type="hidden" value="3" /> <input id="Comment_id" name="Comment[id]" type="hidden" value="10" /> <input id="Comment_user_id" name="Comment[user_id]" type="hidden" value="2" /> <input name="commit" type="submit" value="Vote up" /> </form> <label id="comment_10">10</label> **<form action="/comments/vote_down" id="vote_down" method="post">** <div style="margin:0;padding:0;display:inline"> <input name="authenticity_token" type="hidden" value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho=" /> </div> <input id="Comment_place_id" name="Comment[place_id]" type="hidden" value="3" /> <input id="Comment_id" name="Comment[id]" type="hidden" value="10" /> <input id="Comment_user_id" name="Comment[user_id]" type="hidden" value="2" /> <input name="commit" type="submit" value="Vote Down" /> </form> </div> Can you please help me to solve this Thanks

    Read the article

  • jquery ui tabs redirecting to ASPX page on postbacks

    - by neoneo007
    I am being redirected to the actual aspx page when I submit the form. How to avoid the redirection. Tabs.aspx <div id="container-1"> <ul> <li><a href="Survey.aspx?group=1"><span>HR</span></a></li> <li><a href="Survey.aspx?group=2"><span>Sales</span></a></li> <li><a href="Survey.aspx?group=3"><span>Finance</span></a></li> </ul> jquery code in tabs.aspx <script type="text/javascript"> $(function() { $('#container-1 > ul').tabs(); </script> Survey.aspx <form id="form1" runat="server"> <div> <asp:Label ID="lblHeading" runat="server"></asp:Label><br /> <asp:HiddenField ID="hdnGroupId" runat="server" /> <br /> 1) Question 1 <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList>     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> 2) Another question:  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /> <br /> <br /> <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" /><br /> <div id="Result">Click here for the time.</div> <asp:Label ID="lblMessage" runat="server"></asp:Label></div> </form> Survey page Code behind protected void btnSave_Click(object sender, EventArgs e) { if (groupId > 0) { switch (groupId) { case 1: lblMessage.Text = "HR data is saved."; break; case 2: lblMessage.Text = "Sales data is saved."; break; case 3: lblMessage.Text = "Finance data is saved."; break; default: break; } } }

    Read the article

  • jqModal and jquery widget long shot

    - by rod
    Hi All, I just started playing around with jquery widgets within my jqmodals in my mvc app. I know this may be a long shot but I'll take it. Initially, I can click the Add link, get the alert ("which is the prize", watching too much tv), next click cancel to close modal and get the desired results. I can, then, click the Edit link and get the same desired results. However, if I click Edit link first then I try to click the Add link, "forget about it" I don't get the alert (which means my widget did not init). But I can still go back and click Edit and get the prize (the alert message). ajax: "/Home/EditPrintAdLine" and ajax: "/Home/AddPrintAdLine" render the same web user control Any ideas? <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server"> Home Page </asp:Content> <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> <h2><%= Html.Encode(ViewData["Message"]) %></h2> <p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. </p> <div id="printAdLineEditDialog" class="jqmWindow"></div> <div id="printAdDialog" class="jqmWindow"></div> <table> <tr><td><a id="printAdLineItem" href="#">Add a Line Item</a></td></tr> <tr><td><a id="editPrintAdLine" href="#">Edit</a></td></tr> </table> <script type="text/javascript"> $(document).ready(function() { $.widget("ui.my_widget", { _init: function() { alert("My widget was instantiated"); } }); // Add line $('#printAdLineItem').click(function(e) { $('#printAdDialog').jqmShow(this); e.preventDefault(); }); $('#printAdDialog').jqm({ ajax: "/Home/AddPrintAdLine", onLoad: function(hash) { $('#PrintAdLine_RunDate').my_widget(); } }); // Edit line $('#editPrintAdLine').click(function(e) { $('#printAdLineEditDialog').jqmShow(this); e.preventDefault(); }); $('#printAdLineEditDialog').jqm({ ajax: "/Home/EditPrintAdLine", onLoad: function(hash) { $('#PrintAdLine_RunDate').my_widget(); } }); }); </script> </asp:Content>

    Read the article

  • not able to get a processed list in jquery variable

    - by Pradyut Bhattacharya
    I have html list <ol id="newlist"> <li>Test <ol> <li>1</li> <li>2</li> <li>3</li> </ol> </li> <li>Another test <ol> <li>1</li> </ol> </li> <li>Cool Test <ol> <li>1</li> <li>2</li> </ol> </li> </ol> Now i have hidden the list using the css... #newlist li { display:none; list-style: none; } I want to display the list and the only the descendants which have greater than 1 descendants... the output should be... Test 1 2 3 Another test Cool Test 1 2 I have used jquery and able to get the output... the code i used... $("ol#newlist > li").show(); for (var i = 0; i < $("ol#newlist > li").length; i++) { if ($("ol#newlist > li:eq(" + i + ") ol > li").length > 1) $("ol#newlist > li:eq(" + i + ") ol > li").show(); } the sample page here Now i want all the list in a single variable like i can get the lis in a variable... var $li = $("ol#newlist > li"); but the code $li.add($("ol#newlist > li:eq(" + i + ") ol > li")); is not working... the sample page here Please help... Thanks Pradyut India

    Read the article

  • Issues loading Jquery (Galleria) script from inside an i-frame (beginner javascript?)

    - by 103188530284789248582
    Hello, first of all - I'm not entirely new to javascript, but am not fluent in it as I am with html and css, and am especially new to jQuery... so please excuse me if this questions seems easy or obvious, but after days of google I still have no solution to the problem... using jQuery 1.4.2.min, jQuery-ui-1.8.1 .... the site in question: http://homecapture.ca/sets/project_index.html The scenario: I have a tabbed menu generated from an unordered list, when a menu item is clicked it reveals an iframe which links to the page containing an image gallery. I am using jQuery UI tabs for the tabbed menu, and the galleries to which I'm linking are jQuery Galleria pages, automatically generated with Jalbum. The problem: The galleria plug-in only works normally from inside of the containing iframe in Chrome, has inconsistent behaviour in IE8 (seems to work in my local copy, but won't load properly online), and is not loaded properly in Firefox. Instead of displaying a thumbnail area and the first large image, the Galleria page shows the first thumbnail only, then when it is clicked the image it links to, but if you right-click and go Back, the iframe content shows up as a properly rendered Galleria page. Jalbum generates more script in the < head of the page in addition to linking to jquery and the galleria plug-in. All of it seems to be in charge of the gallery navigation , and I have relocated it to the < body of the page, in an effort to make it load after the parent page scripts, and together with the gallery content. At this point I am not sure what else I could do to solve the problem, without digging around in all or some of the library and pluging .js files (which I am not knowledgeable enough to do without some pointers). Has anyone dealt with a similar issue? I'm seeing some solutions for manipulating iframe content from a parent page with jQuery on here, is that what I should be researching instead? Thanks in advance for all the help! ps. I tried posting some code, but it seems I do not have enough 'reputation' for things to work right on here either :)

    Read the article

  • jquery How to refresh pages when resize happens?

    - by Maju
    I have some indicator displays settings which float above a menu. Problem is when someone resizes the 'indicators stays on the same place', the page needs to 'refreshed to position correctly'. How to have a page refresh by itself when it detects the page is being resized? or is there any better way to do it? jQuery function findPosY(b) { var a = 0; if (b.offsetParent) { while (1) { a += b.offsetTop; if (!b.offsetParent) { break } b = b.offsetParent } } else { if (b.y) { a += b.y } } return a } function findPosX(b) { var a = 0; if (b.offsetParent) { while (1) { a += b.offsetLeft; if (!b.offsetParent) { break } b = b.offsetParent } } else { if (b.x) { a += b.x } } return a } function setNotifications() { $("#shortcut_notifications span").each(function () { if ($(this).attr("rel") != "") { target = $(this).attr("rel"); if ($("#" + target).length > 0) { var a = findPosY(document.getElementById(target)); var b = findPosX(document.getElementById(target)); $(this).css("top", a - 31 + "px");//-24 $(this).css("left", b + 83 + "px")//+60 } } }); $("#shortcut_notifications").css("display", "block") } CSS #shortcut_notifications { display:none; } .notification { color:#fff; font-weight:700; text-shadow:1px 0 0 #333; background:transparent url(../images/bg_notification.png) no-repeat center; position: absolute;/*absolute*/ width:37px;/*37*/ height:37px; display:block; text-align:center; padding-top:17px; color:#ffffff; } #nav li { display:block; float:right; padding:19px 21px; text-align: left; position:relative; height:24px; font-size:16px; } HTML <li class="settings"><a class="settings" href="#">Settings</a> <ul> <li><a href="#">Game Settings</a></li> <li><a href="#">Transactions </a></li> </ul> </li>

    Read the article

  • incremental OL using letters (jQuery)

    - by jquery n00b
    Hi, I'm trying to dynamically add a span to an ol, where the counter should be in letters. eg: A result B result C result etc etc I've got this code which is great for using numbers but I've no idea what to do to it to make the numbers into letters jQuery(document).ready( function() { jQuery('.results ol').each(function () { jQuery(this).find('li').each(function (i) { i = i+1; jQuery(this).prepend('<span class="marker">' + i + '</span>'); }); }); }); Any help is greatly appreciated!

    Read the article

  • How to match multiple substrings in jQuery combobox autocomplete

    - by John R
    I found more than a couple examples of this with a plain jquery autocomplete but not in a way that will work with the autocomplete included in the combobox code from the demo because the structure of the code is structured so differently. I want to match every item that has all of the search tokens anywhere in any word. I don't need to match the start of any word, any part of it is fine. I don't care if the search strings are highlighted in the autocomplete list if that makes things too complicated. Desired search/result combos: (please excuse the spacing) "fi th" "fi rst second th ird" "rs on" "fi rs t sec on d third" "ec rd" "first s ec ond thi rd" but not limited to any max/min length or number of tokens. EDIT I figured part of it out using the code structure from the other autocorrect I had working. source: function( requestObj, responseFunc ) { var matchArry = $("select > option").map(function(){return this.innerHTML;}).get(); var srchTerms = $.trim(requestObj.term).split(/\s+/); // For each search term, remove non-matches $.each (srchTerms, function (J, term) { var regX = new RegExp (term, "i"); matchArry = $.map (matchArry, function (item) { if( regX.test(item) ){ return{ label: item, value: item, option: HTMLOptionElement } ? item :null; } } ); }); // Return the match results responseFunc (matchArry); }, and select: function( event, ui ) { ui.item.option.selected = true; self._trigger( "selected", event, { item: ui.item.option }); $("destination").val(ui.item.value); // I added this line }, but I can't get both multiple words AND being able to click to select working at the same time. If I remove the } ? item :null; on the return in the map function I can click to select an item. If I leave it I can type multiple words, but I can't click any of the items... Is that the problem or the option: this? I've tried replacing it with HTMLOptionElement and null and I'm stuck. I am able to set the value of another field with ui.item.value within the select label but that doesn't put the value in the search box or close the dropdown menu. Fiddle of current code: http://jsfiddle.net/eY3hM/

    Read the article

  • passing data from a client form via jquery ajax dinamicly

    - by quantum62
    i wanna insert specification of members that enter in textboxs of form in the database .i do this operation with jquery ajax when i call webmetod with static value the operation do successfully.for example this code is ok. $.ajax({ type: "POST", url:"MethodInvokeWithJQuery.aspx/executeinsert", data: '{ "username": "user1", "name":"john","family":"michael","password":"123456","email": "[email protected]", "tel": "123456", "codemeli": "123" }', contentType: "application/json; charset=utf-8", dataType: "json", async: true, cache: false, success: function (msg) { $('#myDiv2').text(msg.d); }, error: function (x, e) { alert("The call to the server side failed. " + x.responseText); } } ); but when i wanna use of values that enter in textboxes dynamically error occur.whats problem?i try this two code <script type="text/javascript"> $(document).ready( function () { $("#Button1").click( function () { var username, family, name, email, tel, codemeli, password; username = $('#<%=TextBox1.ClientID%>').val(); name = $('#<%=TextBox2.ClientID%>').val(); family = $('#<%=TextBox3.ClientID%>').val(); password = $('#<%=TextBox4.ClientID%>').val(); email = $('#<%=TextBox5.ClientID%>').val(); tel = $('#<%=TextBox6.ClientID%>').val(); codemeli = $('#<%=TextBox7.ClientID%>').val(); $.ajax( { type: "POST", url: "WebApplication20.aspx/executeinsert", data: "{'username':'username','name':name, 'family':family,'password':password, 'email':email,'tel':tel, 'codemeli':codemeli}", contentType: "application/json;charset=utf-8", dataType: "json", async: true, cache: false, success: function(msg) { alert(msg); }, error: function (x, e) { alert("The call to the server side failed. " + x.responseText); } } ); } ) }) </script> or $(document).ready( function () { $("#Button1").click( function () { var username, family, name, email, tel, codemeli, password; username = $('#<%=TextBox1.ClientID%>').val(); name = $('#<%=TextBox2.ClientID%>').val(); family = $('#<%=TextBox3.ClientID%>').val(); password = $('#<%=TextBox4.ClientID%>').val(); email = $('#<%=TextBox5.ClientID%>').val(); tel = $('#<%=TextBox6.ClientID%>').val(); codemeli = $('#<%=TextBox7.ClientID%>').val(); $.ajax( { type: "POST", url: "WebApplication20.aspx/executeinsert", data: '{"username" : '+username+', "name": '+name+', "family": '+family+', "password": '+password+', "email": '+email+', "tel": '+tel+' , "codemeli": '+codemeli+'}', contentType: "application/json;charset=utf-8", dataType: "json", async: true, cache: false, success: function(msg) { alert(msg); }, error: function (x, e) { alert("The call to the server side failed. " + x.responseText); } } ); } ) })

    Read the article

  • Jquery hover with animation

    - by Brian
    anyone know how to stop a .hover happening again before the mouseout animation has finished? I have the following code which has 4 anchors. Once hovered over the anchor the related anchor slides in using animation. My problem is you hover out and in quickly, before the square has been set back to 0px it increases the slide distance. <body class="home"> <div id="container"> <a class="page-link homet" id="anim-1"></a> <a class="page-link about" id="anim-2"></a> <a class="page-link portfolio" id="anim-3"></a> <a class="page-link contacts" id="anim-4"></a> <div id="header"> <div id="logo"> </div> <ul id="navigation"> <li><a id="1"></a></li> <li><a id="2"></a></li> <li><a id="3"></a></li> <li><a id="4"></a></li> </ul> </div> <div id="main"> <div id="left-content"> </div> <div id="main-content"> </div> </div> </div> </body> </html> Jquery var cc = { displayAnim : function () { actionLink = $("#container #header #navigation li a"); movePosition = "0"; $("#container a.page-link").css({ position:"absolute", right: 0}); $(actionLink).hoverIntent( function() { circleToReveal = $(this).attr('id'); switch (circleToReveal) { case "1" : movePostion = "386" break; case "2" : moveposition = "514" break; case "3" : movePosition = "643" break; case "4" : movePosition = "400" break; default : movePosition = "772" }; /* console.log(movePosition); */ $("#container #anim-" +circleToReveal+ "").stop().animate({"right": "+="+ movePosition +"px"}, "slow"); }, function() { $("#container #anim-" +circleToReveal+ "").stop().animate({"right": "-="+ movePosition +"px"}, "slow"); } ); } }; $(window).load (function () { $("body").addClass('js'); $("a.pagelink").hide(); cc.displayAnim(); });

    Read the article

  • Saving JQuery Draggable Sitemap Values Correctly

    - by mdolon
    I am trying to implement Boagworld's Sitemap tutorial, however I am running into difficulty trying to correctly save the child/parent relationships. The HTML is as follows, however populated with other items as well: <input type="hidden" name="sitemap-order" id="sitemap-order" value="" /> <ul id=”sitemap”> <li id="1"> <dl> <dt><a href=”#”>expand/collapse</a> <a href=”#”>Page Title</a></dt> <dd>Text Page</dd> <dd>Published</dd> <dd><a href=”#”>delete</a></dd> </dl> <ul><!–child pages–></ul> </li> </ul> And here is the JQuery code: $('#sitemap li').prepend('<div class="dropzone"></div>'); $('#sitemap li').draggable({ handle: ' > dl', opacity: .8, addClasses: false, helper: 'clone', zIndex: 100 }); var order = ""; $('#sitemap dl, #sitemap .dropzone').droppable({ accept: '#sitemap li', tolerance: 'pointer', drop: function(e, ui) { var li = $(this).parent(); var child = !$(this).hasClass('dropzone'); //If this is our first child, we'll need a ul to drop into. if (child && li.children('ul').length == 0) { li.append('<ul/>'); } //ui.draggable is our reference to the item that's been dragged. if (child) { li.children('ul').append(ui.draggable); }else { li.before(ui.draggable); } //reset our background colours. li.find('dl,.dropzone').css({ backgroundColor: '', backgroundColor: '' }); li.find('.dropzone').css({ height: '8px', margin: '0' }); // THE PROBLEM: var parentid = $(this).parent().attr('id'); menuorder += ui.draggable.attr('id')+'=>'+parentid+','; $("#sitemap-order").val(order); }, over: function() { $(this).filter('dl').css({ backgroundColor: '#ccc' }); $(this).filter('.dropzone').css({ backgroundColor: '#aaa', height: '30px', margin: '5px 0'}); }, out: function() { $(this).filter('dl').css({ backgroundColor: '' }); $(this).filter('.dropzone').css({ backgroundColor: '', height: '8px', margin: '0' }); } }); When moving items into the top-level (without parents), the parentid value I get is of the first list item (the parent container), so I can never remove the parent value and have a top-level item. Is there a no-brainer answer that I'm just not seeing right now? Any help is appreciated.

    Read the article

  • Jquery Text Slide in Effect

    - by user3718016
    I want to make text animation like this slide in from left. There are three text fields Sports Cargo Bag $14 Sale $25 I want these text to be set from jquery and slide in from the left like this link. This is my code JsFiddle html <div id="mainContainer"> <div id="logdo"> <img src="http://i.share.pho.to/7346a9ca_o.gif"/> </div> <div id="images"> <img id="introImg" src="http://i.share.pho.to/9064dfe4_o.jpeg"/></div> <div id="headlineText"> <p id="headline1Txt" ></p> <p id="headline2Txt" ></p> <p id="headline3Txt" ></p> </div> <button class="btn btn-primary" id="ctaBtn" type="button">SHOP NOW</button> </div> css * { margin:0; padding:0; } #mainContainer{ text-align: center; width:160px; height:600px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:5px solid #BACAE4; overflow: hidden; position: fixed; } #images{ position:absolute; top:200px; left:3px; right:1286px; Width:130px; height:152px; } #introImg{ position:absolute; top:40px; left:7px; right:11px; } #headlineText p { text-align: center; position: absolute; top:60px; left:-120px; Width:120px; height:269px; line-height:1.0; overflow:hidden; } #ctaBtn{ position:absolute; top:540px; left:26px; right:0px; Width:106px; height:28px; }

    Read the article

  • Select Elements in nested Divs using JQuery

    - by PIKP
    I have the following html markup inside a Div named item and I want to select all the elements (inside nested divs) and clear the values. As shown in following given Jquery I have managed to access elements in each Div by using.children().each(). But the the problem is .children().each()goes one level down at a time from the parent div, so I have repeated the same code block with multiple .children() to access the elements inside nested Divs, can anyone suggest me a method to do this without repeating the code for N number of nested divs . html markup <div class="item"> <input type="hidden" value="1234" name="testVal"> <div class="form-group" id="c1"> <div class="controls "> <input type="text" value="Results" name="s1" maxlength="255" id="id2"> </div> </div> <div class="form-group" id="id4"> <input type="text" value="Results" name="s12" maxlength="255" id="id225"> <div class="form-group" id="id41"> <input type="text" value="Results" name="s12" maxlength="255" id="5"> <div class="form-group" id="id42"> <input type="text" value="Results" name="s12" maxlength="255" id="5"> <div class="form-group" id="id43"> <input type="text" value="Results" name="s12" maxlength="255" id="id224"> </div> </div> </div> </div> </div> My Qjuery script var row = $(".item:first").clone(false).get(0); $(row).children().each(function () { updateElementIndex(this, prefix, formCount); if ($(this).attr('type') == 'text') { $(this).val(''); } if ($(this).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) { $(this).val(''); } if ($(this).attr('type') == 'file') { $(this).val(''); } if ($(this).attr('type') == 'checkbox') { $(this).attr('checked', false); } $(this).remove('a'); }); // Relabel or rename all the relevant bits $(row).children().children().each(function () { updateElementIndex(this, prefix, formCount) if ($(this).attr('type') == 'text') { $(this).val(''); } if ($(this).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) { $(this).val(''); } if ($(this).attr('type') == 'file') { $(this).val(''); } if ($(this).attr('type') == 'checkbox') { $(this).attr('checked', false); } $(this).remove('a'); });

    Read the article

  • jQuery upload file using jQuery's ajax method (without plugins)

    - by Daniil Harik
    Hello, At moment I want to implement picture upload without using any plug-ins. My upload form looks like this <form action="/Member/UploadPicture" enctype="multipart/form-data" id="uploadform" method="post"> <span style="display: none;"> <div class="upload" id="imgUpl"> <h3>Upload profile picture</h3> <div class="clear5"></div> <input type="file" name="file" id="file" /> <button class="btn-bl" id="upComplete"><span>Upload</span></button> </div> </span> </form> And my jQuery code is: $('#upComplete').click(function () { $('#up').hide(); $('#upRes').show(); var form = $("#uploadform"); $.ajax({ type: "POST", url: "/Member/UploadPicture", data: form.serialize(), success: function (data) { alert(data); } }); $.fancybox.close(); return false; }); If I open firebug, I can see that ajax() method does simple form post (not multi-part) and POST content is empty Is it possible to do files upload using jQuery ajax() method or should I do this in any other way? Thank You very much

    Read the article

  • jQuery add() function and the context of jQuery objects

    - by patrick
    Given the following HTML example... <div id='div1'>div one</div> <div id='div2'>div two</div> ...I found that the following jQuery code... $('#div1').click(function() { var $d = $(this); // Using 'this' instead of '#div1' $d.add('#div2').remove(); }); ...would not add #div2 to the set referenced by $d, but this code... $('#div1').click(function() { var $d = $('#div1'); // Using '#div1' instead of 'this' $d.add('#div2').remove(); }); ...successfully added #div2. Upon consulting firebug, I found that using $(this) gave the jQuery object a context of #div1, but doing $('#div1') gave the object a context of document. Given this information I tried... var $d = $(this, document); ...and the add() function worked as expected. So here's the question. Could someone please explain to my why a different context is assigned when using $(this) vs $('#div1')? Thanks much!

    Read the article

  • how can we store php variables in jquery variables in jquery part

    - by surya
    $('#b').bind('click',function(){ alert('hii'); var slide_start=slider_content.indexOf(0); if(slide_start==2) { $('#reg_rem_form').hide(); } var show=1+slide_start; var show_first='#'+show; **var value_to_insert=<?php echo $value;? >=$(show_first).val();** <?php /* 1. Date of birth 2. gender 3. Unvi1 4. Unvi2 5. highest degree unvi1 6. highest degree unvi2 7. Year of passing unvi1 8. Year of passing unvi2 9. Current working 10. Work experience */ ?> Just as we store php variables in jquery variables , same thing but in reverse i want to store jquery variables in php variables ??? The highlighted part is the main line. how to do that , above code giving me the error === missing ";" before statement. Is this right way to do this =$('#bold').val();

    Read the article

  • jQuery and jQuery UI (Dual Licensing)

    - by John Hartsock
    OK I have read many posts regarding Dual Licensing using MIT and GPL licenses. But Im curious still, as the wording seems to be inclusive. Many of the Dual Licenses state that the software is licensed using "MIT AND GPL". The "AND" is what confuses me. It seems to me that the word "AND" in the terms, means you will be licensing the product using both licenses. Most of the posts, here on stackoverflow, say you can license the software using one "OR" the other. JQuery specifically states "OR", whereas JQuery UI specifically States "AND". Another Instance of the "AND" would be JQGrid. Im not a lawyer but, it seems to me that a legal interpretation of this would state that use of the software would mean that your using the software under both licenses. Has anyone who has contacted a lawyer gotten clarification or a definitive answer as to what is true? Can you use Dual licensed software products that state "AND" in the terms of agreement under either license?

    Read the article

  • Using JQuery in an AJAX control and avoiding conflicts

    - by Rich Andrews
    Hi, I am using JQuery within a custom AJAX user control (part of a home grown toolkit) and I need to ensure that JQuery is present on the hosting page. There can be multiple instances of the control on a page and some controls may need to use different versions of JQuery. At the moment I am using the following code to load in JQuery when the control initializes... Page.ClientScript.RegisterClientScriptInclude(Page.GetType(), "jquery-1.4.4.min.js", this.ResolveUrl("TextControlPlugin/lib/jquery-1.4.4.min.js")); This works because the scriptmanager handles not putting multiple copies of the same script into he page. Problems... I cannot use JQuery statically in the calling page (I may not have a control on the page but need to use JQuery) The scriptmanager appears to handle only duplicate URL's and I will need to deploy it from potentially 2 different URL's (the calling page's copy and the controls copy) So, is there a way to isolate a version of JQuery to the context of my control that doesnt interfear with any use of JQuery from the calling page? The developer writing the page may not have access to the internals of the control. I have looked at JQuery.noConflict() but cannot seem to get it to work correctly - I believe I'm having problems with the order in which the scripts are injected into the page - I keep getting JQuery is undefined errors. Any help would be much appreciated

    Read the article

  • jQuery trigger custom event synchronously?

    - by Miguel Angelo
    I am using the jQuery trigger method to call an event... but it behaves inconsistently. Sometimes it call the event, sometimes it does not. <a href="#" onclick=" $(this).trigger('custom-event'); window.location.href = 'url'; return false; ">text</a> The custom-event has lots of listeners added to it. It is as if the trigger method is not synchronous, allowing the window.location.href be changed before executing the events. And when window.location.href is changed a navigation occurs, interrupting everything. How can I trigger events synchronously? Using jQuery 1.8.1. Thanks! EDIT I have found that the event, when called has a stack trace like this: jQuery.fx.tick (jquery-1.8.1.js:9021) tick (jquery-1.8.1.js:8499) jQuery.Callbacks.self.fireWith (jquery-1.8.1.js:1082) jQuery.Callbacks.fire (jquery-1.8.1.js:974) jQuery.speed.opt.complete (jquery-1.8.1.js:8991) $.customEvent (myfile.js:28) This proves that jQuery trigger method is asynchronous. Oohhh my... =\

    Read the article

  • ASP.NET MVC: Using jQuery context menu with tables

    - by DigiMortal
    I needed to add context menus to some tables of my intranet application. After trying some components I found one that does everything I need and has no overhead. In this posting I will show you how to use jQuery context menu plug-in and how to attach it to tables. I found context menu plug-in by Chris Domigan and it was very easy to integrate to my application (when comparing some other plug-ins that work only on demo pages and in simple scenarios). Thanks, Chris, for great work! Now let’s use this context menu plug-in with table. Before we go on let’s see what we are trying to achieve. The following screenshot fragment shows simple context menu that we want to attach to our table. And when we click some menu option then something should happen too. :) Installing context menu plug-in Download plug-in (if download link is broken then open demo page and I think you know how to get plug-in from there). Copy jquery.contextmenu.js to your scripts folder. Include it in your masterpage or in the page where you plan to use context menus. Make sure plug-in is included correctly (use Firebug or some other tool you like). Save the page. Defining context menu Now let’s define context menu. Here is fragment on context menu definition from my code. <div class="contextMenu" id="myMenu1">     <ul>     <li id="email"><img src="/img/e-mail.png" />E-mail</li>     <li id="homepage"><img src="/img/homepage.png" />Homepage</li>     </ul> </div> div with id myMenu1 is container of context menu. Unordered list inside container defines items in context menu – simple and elegant! Adding context menu to table I have table with persons. It is simple HTML. I omitted commands column from this and the next table to keep them simple and more easily readable. <table>   <tr>     <th>Name</th>     <th>Short</th>     <th>Address</th>     <th>Mobile</th>     <th>E-mail</th>   </tr>   <% foreach(var person in Model.Results) { %>   <tr>     <td><%=person.FullName %></td>     <td><%=person.ShortName %></td>     <td><%=person.FullAddress %></td>     <td><%=person.Mobile %></td>     <td><%=person.Email %></td>   </tr>   <% } %> </table> To get context menu linked to table rows first cells we need to specify class for cells and ID. We need ID because we have to know later which ID has the row on which user selected something from context menu. <table>   <tr>     <th>Name</th>     <th>Short</th>     <th>Address</th>     <th>Mobile</th>     <th>E-mail</th>   </tr>   <% foreach(var person in Model.Results) { %>   <tr>     <td class="showContext" id="<%= person.Id %>"><%=person.FullName %></td>     <td><%=person.ShortName %></td>     <td><%=person.FullAddress %></td>     <td><%=person.Mobile %></td>     <td><%=person.Email %></td>   </tr>   <% } %> </table> Now we have only one thing to do – we have to write some code that attaches context menu to table cells. Catching context menu events Now we will make everything work. Relax, it is only couple of lines of code, thank to jQuery. <script type="text/javascript">   $(document).ready(function () {     $('td.showContext').contextMenu('myMenu1', {         bindings: {         'email': function (t) {           document.location.href = '/contact/sendmail/' + t.id;         },         'homepage': function (t) {           document.location.href = '/contact/homepage/' + t.id;         }       }     });   }); </script> I think that first lines doesn’t need any comments. Take a look at bindings. We gave ID to table cells because it is carried also to bound events. We can use also more complex ID-s if we have more than one table with context menus on our form. Now we are done. Save all files, compile solution, run it and try out how context menu works. Conclusion We saw than using jQuery with context menu component allows us easily create powerful context menus for our user interfaces. Context menu was very easy to define. We were also able to attach context menu to table and use ID of current row entity also in events of context menu. To achieve this we needed only some minor modifications in view and couple of lines of JavaScript.

    Read the article

  • Where does jQuery fit-in with frameworks like JavaScriptMVC, BackboneJS, SproutCore and Knockout?

    - by Prisoner ZERO
    I have been happily using JQuery for the last 2 years and have been quite sucessful creating some really cool functionality with it...so I am very comfortable with it. I also beleive the future of the web will continue on the current client-side path. However... The next challenge seems to be coming in the form of various controller frameworks: KnockoutJS, BackboneJS, SproutCore, JavaScriptMVC (the list goes on). Additonally, there are some great AMD Loader tools for use like RequireJS or LabJS etc. However, jQuery now has define and then capabilities baked-in. It's getting harder-and-harder to keep track of it all... And now, my task seems to be to evaluate/decide-on a strategic-direction for using some form of either an MVC or MVVM framework client-side...but I have so many questions. Where does JQuery fit-in with the various controller-frameworks mentioned above? Is JQuery used alongside each or do some of them have their own 'JQuery-styled version' baked-in? Are tools like RequireJS still needed if you implement one of the various controller-frameworks mentioned above? Does the define and then capabilities baked-into JQuery now supercede the AMD Loader mentioned above? Which one seems most modular? (see notes below) NOTES: One thing I don't want in any future-framework is the requirement of having to take-in vast amounts of functionality that I don't use. Meaning, I would rather use a framework that is truly modular. For example, to use jQuery UI you have to take-in a lot other core libraries that you might not actually use. I will be experimenting with each one, but some REAL feedback would be great. I've seen some 'similar' questions, but none have really answered the above skew. Thanks in advance!

    Read the article

< Previous Page | 49 50 51 52 53 54 55 56 57 58 59 60  | Next Page >