Search Results

Search found 17655 results on 707 pages for 'jquery animate'.

Page 254/707 | < Previous Page | 250 251 252 253 254 255 256 257 258 259 260 261  | Next Page >

  • I'm having trouble traversing a newly appended DOM element with jQuery

    - by culov
    I have a form that I want to be used to add entries. Once an entry is added, the original form should be reset to prepare it for the next entry, and the saved form should be duplicated prior to resetting and appended onto a div for 'storedEntries.' This much is working (for the most part), but Im having trouble accessing the newly created form... I need to change the value attribute of the submit button from 'add' to 'edit' so properly communicate what clicking that button should do. heres my form: <div class="newTruck"> <form id="addNewTruck" class='updateschedule' action="javascript:sub(sTime.value, eTime.value, lat.value, lng.value, street.value);"> <b style="color:green;">Opening at: </b> <input id="sTime" name="sTime" title="Opening time" value="Click to set opening time" class="datetimepicker"/> <b style="color:red;">Closing at: </b> <input id="eTime" name= "eTime" title="Closing time" value="Click to set closing time" class="datetimepicker"/> <label for='street'>Address</label> <input type='text' name='street' id='street' class='text' autocomplete='off'/> <input id='submit' class='submit' style="cursor: pointer; cursor: hand;" type="submit" value='Add new stop'/> <div id='suggests' class='auto_complete' style='display:none'></div> <input type='hidden' name='lat' id='lat'/> <input type='hidden' name='lng' id='lng'/> ive tried using a hundred different selectors with jquery to no avail... heres my script as it stands: function cloneAndClear(){ var id = name+now; $j("#addNewTruck").clone(true).attr("id",id).appendTo(".scheduledTrucks"); $j('#'+id).filter('#submit').attr('value', 'Edit'); $j("#addNewTruck")[0].reset(); createPickers(); } the element is properly cloned and inserted into the div, but i cant find a way to access this element... the third line in the script never works. Another problem i am having is that the 'values' in the cloned form revert back to the value in the source of the html rather than what the user inputs. advice on how to solve either of these issues is greatly appreciated!

    Read the article

  • Converting a list into a select with jquery

    - by Davemof
    I'm trying to convert the following list into a select list so it can be submitted via a form - the element within the lists will become the value of each option: <ul class="selected connected-list ui-sortable" style="height: 279px;"> <li class="ui-helper-hidden-accessible" style=""></li> <li title="Owner Name 1 - " class="ui-state-default ui-element ui-draggable" style="display: block; position: relative; top: 0px; left: 0px;"><span class="ui-icon-arrowthick-2-n-s ui-icon"></span>Owner Name 1 - <em class="thenumber">4.4796E+11</em><a class="action" href="#"><span class="ui-corner-all ui-icon ui-icon-minus"></span></a></li> <li title="David Moffat - " class="ui-state-default ui-element" style="display: block; position: relative; top: 0px; left: 0px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>David Moffat - <em class="thenumber">07730423005</em><a class="action" href="#"><span class="ui-corner-all ui-icon ui-icon-minus"></span></a></li> </ul> This should convert to the following format: <select style="display:none" class="selectoption" name="p_num[]" multiple="multiple"> <option value="">4.4796E+11</option> <option value="">07730423007</option> </select> I have tried the following jquery code, but after many hours I'm pulling my hair out: $('a.sendform').click(function(){ $('ul.selected').each(function() { var $select = $('<select />'); $(this).find('li').each(function() { var $option = $('<option />'); $option.attr('value', $(this).('em')).html($(this).html()); $select.append($option); }); $(this).replaceWith($select); }); }); Any help might save my remaining hair. Many thanks David

    Read the article

  • Lining up Divs, while using JQuery

    - by user630581
    I am trying to create a flash header like element in JQuery, that has three images that fade to other images. I have each group of images in a div, but the divs line up vertically down the page, I want them to line up horizontally in a row. Currently my css code is: div#demos{ width:940px; border:0; } .s1{ float:left; display:inline; background-color:#000000; width:225px; margin:0; } .s2{ float:right; display:inline; background-color:#000000; width:225px; margin:0; } .s3{ float:left; display:inline; background-color:#000000; width:225px; margin:0; } and my markup is: <div id="demos"> <div id="s1" class="pics"> <img src="Image1.jpeg" width="200" height="200" /> <img src="Image2.jpeg" width="200" height="200" /> <img src="Image3.jpeg" width="200" height="200" /> </div> <div id="s2" class="pics"> <img src="Image4.jpeg" width="200" height="200" /> <img src="Image5.jpeg" width="200" height="200" /> <img src="Image6.jpeg" width="200" height="200" /> </div> <div id="s3" class="pics"> <img src="Image7.jpeg" width="200" height="200" /> <img src="Image8.jpeg" width="200" height="200" /> <img src="Image9.jpeg" width="200" height="200" /> </div> <div style="clear:both"></div> </div>

    Read the article

  • Jquery-UI tabs : Double loading of the default tab with

    - by Stephane
    I use jqueryui-tabs to display a tabbed UI. here is how my markup looks in a MasterPage: <div id="channel-tabs" class="ui-tabs"> <ul class="ui-tabs-nav"> <li><%=Html.ActionLink("Blogs", "Index", "Blog", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, new{ title="Blog Results" }) %></li> <li><%=Html.ActionLink("Forums", "Index", "Forums", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> <li><%=Html.ActionLink("Twitter", "Index", "Twitter", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li> </ul> <div id="Blog_Results"> <asp:ContentPlaceHolder ID="ResultPlaceHolder" runat="server"> </asp:ContentPlaceHolder> </div> If the content is loaded via ajax, I return a partial view with the content of the tab. If the content is loaded directly, I load a page that include the content in the ContentPlaceHolder. somewhat like this : <asp:Content ID="Content2" ContentPlaceHolderID="BlogPlaceHolder" runat="server"> <%=Html.Partial("Partial",Model) %> </asp:Content> //same goes for the other tabs. With this in place, if I access the url "/Forums" It loads the forum content in the Blog tab first, trigger the ajax load of the Blog tab and replace the content with the blog content. I tried putting a different placeholder for each tab, but that didn't fix everything either, since when loading "/Forums" it will sure load the forum tab, but the Blog tab will show up first. Furthermore, when using separate placeholders, If I load the "/Blogs" url, It will first load the content statically in the Blog contentplaceholder and then trigger an ajax call to load it a second time and replace it. If I just link the tab to the hashtag, then when loading the forum tabs, I won't get the blog content... How would you achieve the expected behaviour? I feel like I might have a deeper probelm in the organization of my views. Is putting the tabs in the masterpage the way to go? Maybe I should just hijax the links manually and not rely on jquery-ui tabs to do the work for me. I cannot load all tabs by default and display them using the hash tags, I need an ajax loading because it is a search process that can be long. So to sum up : /Forum should load the forum tab, and let the other tabs be loaded with an ajax call when clicking on it. /Twitter should load the twitter tab and let the other tabs.... the same goes for /Blogs and any tabs I would add later.

    Read the article

  • manipulate variable made up of html before adding it to the dom (new in jQuery 1.4???)

    - by pedalpete
    I thought I had seen this in the first announcement of jQuery 1.4, but can't seem to find anything now. I have a calendar table which is built dynamically from a json ajax response. The table is built in a variable called putHtml. Currently, once the table is added to the DOM, I run a showEvents function which takes each event and adds it to the appropriate cell in the table. Unfortunately, when I have 100 events, that means I am updating the DOM 100 seperate times. Which is getting rather slow. I use the showEvents function to add events dynamically, so it would be really nice if I could just use the same function, and specify to look in the DOM for the cell to add the event to, or look in the variable (assuming I've got it right, and you can actually do this with jQuery). The code I use currenlty is this jQuery('div#calendars').append('putHtml.join('')); for(var e in thisCal.events){ showEvent(thisCal.events[e]); } What I had attempted to do instead was for(var e in thisCal.events){ showEvent(thisCal.events[e],putHtml); } jQuery('div#calendars').append('putHtml.join('')); the showEvents function looks like this function showEvents(event){ var eventDate=event.date; var eventTime=event.time; var eventGroup=event.group; var eventName=event.name; var eventType=event.type; var whereEvent=jQuery('div.a'+eventDate, 'table.'+eventGroup); var putEvent='<div class="event" id="a+'eventDate+'_'+eventTime+'">'+eventName+'</div>' jQuery(whereEvent, 'div#calendar').append(putEvent); if(eventType2){ jQuery(whereEvent, 'div#listings').append(putEvent); } } when attempting to manipulate the variable putHtml before adding to the dom, I was passing putHtml into the showEvent function, so instead of '(whereEvent, 'div#calendar'), I had (whereEvent, putHtml), but that didn't work. of course, the other method to accomplish this would be that when I make each cell, I iterate over the events json, and apply the appropriate html to the cell at the time, but that means repetitively running over the entire json in order to get the event to put in the cell. Is there another/better way to do something like this?

    Read the article

  • jQuery nextUntill id < num or alternative

    - by Volmar
    Hi, i'm using jQuery to show/hide different LI-elements based on their classes. Look at this example. <li id="1" class="fp de1"></li> <li id="2" class="fp de1"><button onclick="hide(2,2);"></li> <li id="3" class="fp de2"><button onclick="hide(3,3);"></li> <li id="4" class="fp de3"><button onclick="hide(4,4);"></li> <li id="5" class="fp de4"></li> <li id="6" class="fp de3"></li> <li id="7" class="fp de3"></li> <li id="8" class="fp de1"><button onclick="hide(8,2);"></li> <li id="9" class="fp de2"><button onclick="hide(9,3);"></li> <li id="10" class="fp de3"><button onclick="hide(10,4);"></li> <li id="11" class="fp de4"></li> You se that some of these have a button with a hide funcion. what i want is that when you press the hide button The following elements the have a highernumber in the .de# class should be hidden untill it reaches a LI with the same .de#-class. so if you press the hide(), i want LIs with ids 3,4,5,6,7 to be hiden. if i press the next on i want 4,5,6,7, and the thirs i want id 5 to be hidden. so this is the Javascript i made for it: function hide(id,de){ var de2 = de-1; $('#'+id).nextUntil('li.de'+de2).hide(); } The problem is that this function is not working exactly as i want. it would work correctly in the first hide()-function and the thirs but not in hide()function number two. here it will hide IDs: 4-8. so i want to do something. so i want the nextuntill() to hide elements untill it reaches a LI-element with the same .de# or a lower .de#. i hope i didn't complicate it to much in my description of the problem. if you have better idea than using nextUntill i'm all ears.

    Read the article

  • Dynamically loaded jQuery with GreaseMonkey inconsistent on pages (refreshing seems to fix it)... do

    - by uprightnetizen
    Hi, I want a custom page analysis footer on every site I visit... so I've used a method to attach JQuery to unsafeWindow. I then create a floating footer on the page. I want to be able to call commands in a menu, do some processing, then put the results in the footer. Unfortunately it sometimes works, sometimes it doesn't. At least two alerts should happen in the printOutput function. Sometimes it only fires one, then it (crashes?) without error? On other pages, both alerts fire and it finds the element, but it doesn't add the extra text. (e.g. www.linode.com) Refreshing the page, then running the printOutput command again seems to always work. Does anyone know what's going on??? The userscript can be installed at: http://www.captionwizard.com/test/page_analysis.user.js // ==UserScript== // @name page_analysis // @namespace markspace // @description Page Analysis // @include http://*/* // ==/UserScript== (function() { // Add jQuery var GM_JQ = document.createElement('script'); GM_JQ.src = 'http://code.jquery.com/jquery-1.4.2.min.js'; GM_JQ.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(GM_JQ); var jqueryActive = false; //Check if jQuery's loaded function GM_wait() { if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); } else { $ = unsafeWindow.jQuery; letsJQuery(); } } GM_wait(); function letsJQuery() { jqueryActive = true; setupOutputFooter(); } /******************************* Analysis FOOTER Functions ******************************/ function printOutput(someText) { alert('printing output'); if($('div.analysis_footer').length) { alert('is here - appending'); $('div.analysis_footer').append('<br>' + someText); } else { alert('not here - trying again'); setupOutputFooter(); $('div.analysis_footer').append('<br>' + someText); } } GM_registerMenuCommand("Test Output", testOutput, "k", "control", "k" ); function testOutput() { printOutput('testing this'); } function setupOutputFooter() { $('<div class="analysis_footer">Page Analysis Footer:</div>').appendTo('body'); $('div.analysis_footer').css('position','fixed').css('bottom', '0px').css('background-color','#F8F8F8'); $('div.analysis_footer').css('width','100%').css('color','#3B3B3B').css('font-size', '0.8em'); $('div.analysis_footer').css('font-family', '"Myriad",Verdana,Arial,Helvetica,sans-serif').css('padding', '5px'); $('div.analysis_footer').css('border-top', '1px solid black').css('text-align', 'left'); } }());

    Read the article

  • Show/hide jQuery

    - by Banderdash
    Not much experience with JavaScript, hopefully one of you gurus can help. <div id="themes"> <h2>Research Themes</h2> <ul> <li><a href="">Learn about our approach to the <strong>environment</strong></a><span><a href="#">Expand</a></span></li> <ul class="tier_2 hide"> <li><a href="">Project name numero uno goes here</a></li> <li><a href="">Project name numero dos goes here</a></li> <li><a href="">Project name numero tres goes here</a></li> </ul> <li><a href="">Learn about our approach to <strong>human health</strong></a><span><a href="#">Expand</a></span></li> <ul class="tier_2 hide"> <li><a href="">Project name numero uno goes here</a></li> <li><a href="">Project name numero dos goes here</a></li> <li><a href="">Project name numero tres goes here</a></li> </ul> <li class="last"><a href="">Learn about our approach to <strong>national defense</strong></a><span><a href="#">Expand</a></span></li> <ul class="tier_2 hide"> <li><a href="">Project name numero uno goes here</a></li> <li><a href="">Project name numero dos goes here</a></li> <li><a href="">Project name numero tres goes here</a></li> </ul> </ul> </div><!-- // end themes --> This is my markup. As you can see under each of the first tier of li's there are ul's with classes of tier_2 and hide. I've been trying to create some simple jQuery that on click will remove the hide class from it's child ul, but at the same time check that no other ul's with class of tier_2 are shown (aka the other's have the hide class). This should keep a visitor from expanding so many items at once that it will make the layout look funky. Just not sure how to accomplish this, any ideas?

    Read the article

  • jQuery - Sorting an array?

    - by Probocop
    Hi, I'm using Ajax to get some XML, and then filling in some fields on a form with the results. There is a numerical field on the form and I would like to sort the results by this number (highest first). How would I go about doing this in jQuery? My js function code is currently: function linkCounts() { ws_url = "http://archreport.epiphanydev2.co.uk/worker.php?query=linkcounts&domain="+$('#hidden_the_domain').val(); $.ajax({ type: "GET", url: ws_url, dataType: "xml", success: function(xmlIn){ results = xmlIn.getElementsByTagName("URL"); for ( var i = 0; i < results.length; i++ ) { $("#tb_domain_linkcount_url_"+(i+1)).val($(results[i].getElementsByTagName("Page")).text()); $("#tb_domain_linkcount_num_"+(i+1)).val($(results[i].getElementsByTagName("Links")).text()); } $('#img_linkcount_worked').attr("src","/images/worked.jpg"); }, error: function(){$('#img_linkcount_worked').attr("src","/images/failed.jpg");} }); } The Links tag is the one I'm wanting to sort it on. Thanks For reference the XML that's getting returned is like the following: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <Response> <ResponseCode>1</ResponseCode> <ResponseStatus>OK</ResponseStatus> <ReportId>2</ReportId> <UrlChecked /> <MaxLinks>75</MaxLinks> <PagesFound>121</PagesFound> <URLs> <URL> <Page>http://www.epiphanysolutions.co.uk/blog</Page> <Links>78</Links> </URL> <URL> <Page>http://www.epiphanysolutions.co.uk/blog/</Page> <Links>78</Links> </URL> <URL> <Page>http://www.epiphanysolutions.co.uk/blog/author/daniel-peden/</Page> <Links>78</Links> </URL> <URL> <Page>http://www.epiphanysolutions.co.uk/blog/author/daniel-peden/page/2/</Page> <Links>78</Links> </URL> </URLS> </Response>

    Read the article

  • jQuery mobile ajax login form authentication

    - by Jakub Zak
    I know i already asked simillar question, but now when I work with jQuery Mobile I can't figure it out. So I have this form: <div data-role="page" data-theme="a" id="login_page"> <div data-role="header" data-position="fixed"> <h1>****</h1> </div> <div data-role="content"> <form id="login_form" method="POST" data-ajax="false"> <label for="basic">Username:</label> <input type="text" name="name" id="username" value=""/> <label for="basic">Password:</label> <input type="password" name="password" id="password" value=""/> <input type="submit" value="Login" id="login" name="login"/> </form> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"></div> </div> </div> And I need to submit Username and Password to php script, where php replies and send "success" or "failed". Here is php: <?php session_start(); $username = $_POST["name"]; $password = $_POST["password"]; include('mysql_connection.php'); mysql_select_db("jzperson_imesUsers", $con); $res1 = mysql_query("SELECT * FROM temp_login WHERE username='$username' AND password='$password'"); $count=mysql_num_rows($res1); if($count==1){ echo "success"; }else{ echo "failed"; } ?> And to do all this I want to use this script: $(document).ready(function() { $("form").submit(function(){ $.mobile.showPageLoadingMsg(); $.ajax({ url: "http://imes.jzpersonal.com/login_control.php", type: "POST", dataType: "jsonp", jsonp: "jsoncallback", data: $("form#login_form").serialize(), success: function( response ){ $.mobile.changePage( "http://imes.jzpersonal.com/user_panel.html"); } }); return false; }); }); But I can't make it work, I know I must have mistakes in there, I just can't find them, or better way to do it. Thank you in advance for any help.

    Read the article

  • I get an `Cannot read property 'slice' of undefined` message when I use the scrollTo jQuery plugin inside this function

    - by alexchenco
    I'm using the jQuery scrollTo plugin. I get this error in my JS Console: 16827Uncaught TypeError: Cannot read property 'slice' of undefined d.fn.scrollToindex.html.js:16827 jQuery.extend.eachindex.html.js:662 d.fn.scrollToindex.html.js:16827 jQuery.extend.eachindex.html.js:662 jQuery.fn.jQuery.eachindex.html.js:276 d.fn.scrollToindex.html.js:16827 popupPlaceindex.html.js:18034 (anonymous function)index.html.js:17745 jQuery.extend._Deferred.deferred.resolveWithindex.html.js:1018 doneindex.html.js:7247 jQuery.ajaxTransport.send.script.onload.script.onreadystatechange When I place $(".menu").scrollTo( $("li.matched").attr("id"), 800 ); inside it. function popupPlace(dict) { $popup = $('div#dish-popup'); $popup.render(dict,window.dishPopupTemplate); if(typeof(dict.dish) === 'undefined') { $popup.addClass('place-only'); } else { $popup.removeClass('place-only'); } var $place = $('div#dish-popup div.place'); var place_id = dict.place._id; if(liked[place_id]) { $place.addClass('liked'); } else { $place.removeClass('liked'); } if(dict.place.likes) { $place.addClass('has-likes'); } else { $place.addClass('zero-likes'); } var tokens = window.currentSearchTermTokens; var tokenRegex = tokens && new RegExp($.map(tokens, RegExp.escape).join('|'), 'gi'); $.each(dict.place.products, function(n, product) { $product = $('#menu-item-'+product.id); if(liked[place_id+'/'+product.id]) { $product.addClass('liked'); } if(tokens && matchesDish(product, tokens)) { $product.addClass('matched'); $product.highlight(tokenRegex); } else { $product.removeClass('matched'); $product.removeHighlight(); } if(product.likes) { $product.addClass('has-likes'); } else { $product.addClass('zero-likes'); } }); $('#overlay').show(); $('#dish-popup-container').show(); // Scroll to matched dish //$("a#scrolll").attr("href", "#" + $("li.matched").attr("id")); //$("a#scrolll").attr("href", "#" + $("li.matched").attr("id")); //$("a#scrolll").trigger("click"); $(".menu").scrollTo( $("li.matched").attr("id"), 800 ); // Hide dish results on mobile devices to prevent having a blank space at the bottom of the site if (Modernizr.mq('only screen and (max-width: 640px)')) { $('ol.results').hide(); } $(".close-dish-popup").click(function() { $("#overlay").hide(); $("#dish-popup-container").hide(); $('ol.results').show(); changeState({}, ['dish', 'place', 'serp']); }); showPopupMap(dict.place, "dish-popup-map"); } Any suggestion to fix this?

    Read the article

  • jQuery: load refuses to get dynamic content in IE6

    - by user260157
    jQuery refuses to load my dynamic content in IE6. All in FireFox & Safari works fine. Only IE6 is being a pain. When I try the a html with <p>Hello World</p> that works. Properly. But when loading a PHP it doesn't work! As you can see it's doing multiple things. <script type="text/javascript"> // When the document is ready set up our sortable with it's inherant function(s) $(document).ready(function() { // Sort list & amend in database function sortTableMenuAndReload() { var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); $("#menuList").load("PLUGINS/SortableMenu/sortableMenu_ajax.php"); } function sortTableOrder() { var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); } function sortTableOrderAndRemove(removeID) { $('#listItem_'+removeID).remove(); var order = $('#menuList').sortable('serialize'); $.post("PLUGINS/SortableMenu/process-sortable.php",order); $("#menuList").load("PLUGINS/SortableMenu/sortableMenu_ajax.php"); } $("#menuList > li > .remove").live('click', function () { var removeID = $(this).attr('id'); $.ajax({ type: 'post', url: 'PLUGINS/SortableMenu/removeLine.php', data: 'id='+removeID, success: sortTableOrderAndRemove(removeID) }); }); $("#menuList > li > .publish").live('click', function () { var publishID = $(this).attr('id'); $.ajax({ type: 'post', url: 'PLUGINS/SortableMenu/publishLine.php', data: 'id='+publishID, success: sortTableOrder }); }); $('#new_documents > li').draggable({ addClasses: false, helper:'clone', connectToSortable:'#menuList' }); $("#menuList").droppable({ addClasses: false, drop: function() { var clone = $("#menuList > li#newArticleTYPE1"); $(clone).attr("id","listItem_newArticleTYPE1"); } }); $("#menuList").sortable({ opacity: 0.6, handle : '.handle, .remove', update : sortTableMenuAndReload }); }); </script>

    Read the article

  • Why jQuery selector can't work but getElementById works in this scenario?

    - by Stallman
    Here is the HTML: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="access.js"></script> </head> <body> <button id="trigger"></button> <img id= "testElement" style= "position: absolute; border-color: white; top:340px; left:615px;" width="34px" height= "34px" /> </body> </html> And the access.js file is: $(document).ready( function(){ $('#trigger').click(function(){ $('#testElement').src="success.png"; //THIS WON'T WORK. document.getElementById('testElement').src= "success.png"; //BUT THIS WORKS. }); }); I know that if I use $, the return object is a jQuery object. It's not the same as getElementById. But why the jQuery selector can't work here? I need the jQuery object to make more operations like "append/style"... Thanks. UPDATE Too much correct answers appear at almost the same time... Please give more explanations to let me decide who I should give the credit, thanks!!! Sorry for my poor understanding of your correct answer... I just want more detail. Are all the attribute nodes(src/width/height...) not the property of jQuery object? So does the jQuery selector only select DOM Element Node like ? Thank you! 3. List item

    Read the article

  • index seems to be out of sync for jquery .keydown and .click methods

    - by Growler
    I'd like to navigate images using both keyboard and mouse (clicking left and right arrow images). I'm using Jquery to do this, but the shared imgIndex seems to be off from the .keydown function and the .click function... Whenever .keydown function -- or ++ the imgIndex, isn't that changed index also used in the click function? So shouldn't they always be on the same index? keydown function: <script type="text/javascript"> var imgArray = [<?php echo implode(',', getImages($site)) ?>]; $(document).ready(function() { var img = document.getElementById("showimg"); img.src = imgArray[<?php echo $imgid ?>]; var imgIndex = <?php echo $imgid ?>; alert(imgIndex); $(document).keydown(function (e) { var key = e.which; var rightarrow = 39; var leftarrow = 37; var random = 82; if (key == rightarrow) { imgIndex++; if (imgIndex > imgArray.length-1) { imgIndex = 0; } img.src = imgArray[imgIndex]; } if (key == leftarrow) { if (imgIndex == 0) { imgIndex = imgArray.length; } img.src = imgArray[--imgIndex]; } }); click function: Connected to left and right clickable images $("#next").click(function() { imgIndex++; if (imgIndex > imgArray.length-1) { imgIndex = 0; } img.src = imgArray[imgIndex]; }); $("#prev").click(function() { if (imgIndex == 0) { imgIndex = imgArray.length; } img.src = imgArray[--imgIndex]; }); }); Just so you have some visibility into the getImages php function: <?php function getImages($siteParam) { include 'dbconnect.php'; if ($siteParam == 'artwork') { $table = "artwork"; } else { $table = "comics"; } $catResult = $mysqli->query("SELECT id, title, path, thumb, views, catidFK FROM $table"); $img = array(); while($row = $catResult->fetch_assoc()) { $img[] = "'" . $row['path'] . "'"; } return $img; } ?> Much appreciated! Snapshot of where the script is on "view image.php"

    Read the article

  • Need simple Twitter API v1.1 example to show timeline using jQuery or C# ASP.NET

    - by Ken Palmer
    With Twitter turning off the API 1.0 faucet on 6/11/2013, we have several sites that now fail to display timelines. I've been looking for an "If you did that, now do this" example. Here was Twitter's announcement. https://dev.twitter.com/blog/api-v1-is-retired Here is what we were originally doing to show the Twitter timeline via API 1.0. <div id="twitter"> <ul id="twitter_update_list"></ul> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/companytwitterhandle.json?callback=twitterCallback2&amp;count=1"></script> <div style="float:left;"><a href="https://twitter.com/companytwitterhandle" target="_blank">@companytwitterhandle</a> | </div> <div class="twitterimg">&nbsp;</div> </div> Initially I tried changing the version in the JavaScript reference URL like so, which did not work. <script type="text/javascript" src="http://api.twitter.com/1.1/statuses/user_timeline/companytwitterhandle.json?callback=twitterCallback2&amp;count=1"></script> Then I looked at the Twitter API documentation (https://dev.twitter.com/docs/api/1.1/overview) which lacks a clear transition example. I don't have 4 or 5 hours to delve into that, or into this disheveled FAQ (https://dev.twitter.com/docs/faq#17750). Then I found this API documentation regarding the user timeline. So I changed the URL again as shown below. https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline <script type="text/javascript" src="https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=companytwitterhandle&amp;count=1"></script> That did not work. Using jQuery or C# ASP.NET MVC, how can I transition that interface from Twitter API 1.0 to Twitter API 1.1? My first preference would be for a browser client side implementation if that is possible. Please include a code example. Thanks.

    Read the article

  • How to capture child links clicked using jquery?

    - by user244394
    I am trying to capture the event when a child element link is clicked and add class called "highlightchild" to it. Also I want to check if there are any child element link exist or not, if no child element exits ie "third level" highlight with "highlightparent" the parent. How can I do that using jquery? $(document).ready(function() { $('.menu ul').hide(); $('.menu .arrowUp').click(function() { $('.menu ul').hide(); $(this).find(".third-level").toggle(); }); }); html <ul class="menu"> <li class="arrowUp"><a href="#">link1</a> <ul class="third-level" > <!-- third level non-active --> <li class="arrowUp"><a href="/somelink/">Some Link</a></li> </ul> </li> <li class="arrowUp"><a href="#">link2</a> <ul class="third-level" > <!-- third level non-active --> <li class="arrowUp"><a href="/links2/">some Links 2</a></li> </ul> </li> <li class="arrowUp"><a href="#">link3</a> <ul class="third-level" > <!-- third level non-active --> <li class="arrowUp"><a href="/Agri/">Agricultural</a></li> <!-- third level non-active --> <li class="arrowUp"><a href="/sugar/">Sugar</a></li> <!-- third level non-active --> <li class="arrowUp"><a href="/bbc/">Coffee</a></li> <!-- third level non-active --> <li class="arrowUp"><a href="/cnn/">Energy</a></li> <!-- third level non-active --> <li class="arrowUp"><a href="funstuff">Fun stuff</a></li> </ul> </li> <li class="arrowUp"><a href="#">link4</a></li> <li class="arrowUp"><a href="#">link5</a></li> <li class="arrowUp"><a href="#">link6</a></li> </ul>

    Read the article

  • jQuery Sales Tax

    - by CKallemeres
    Hello everyone! I have created a function (see below) that calculates a 7.5% sales tax. Now I need help doing the following: Have totalTax() take in 2 arguments one for the price and one for the tax. On submit (use the onSubmit event handler to call this function) have the function process the price and the tax by manipulating the arguments you passed in. Have the sales tax on the page update dynamically with what ever the sales tax is that you defined for the function 7.5 percent sales tax: Instead of using .innerHTML use jQuery to access these document elements and write to them: document.getElementById('requestedAmount' ).innerHTML = priceInput; document.getElementById('requestedTax' ).innerHTML = salesTax; document.getElementById('requestedTotal' ).innerHTML = totalAmount; Original Code: <script type="text/javascript"> $().ready(function() { // validate the comment form when it is submitted $("#inputForm").validate(); $("#priceInput").priceFormat({ prefix: '', limit: 5, centsLimit: 2 }); }); function totalTax(){ var priceInput = document.getElementById( 'priceInput' ).value; var salesTax = Math.round(((priceInput / 100) * 7.5)*100)/100; var totalAmount = (priceInput*1) + (salesTax * 1); document.getElementById( 'requestedAmount' ).innerHTML = priceInput; document.getElementById( 'requestedTax' ).innerHTML = salesTax; document.getElementById( 'requestedTotal' ).innerHTML = totalAmount; } </script> <body> <form class="cmxform" id="inputForm" method="get" action=""> <p> <label for="priceInput">Enter the price: </label> <input id="priceInput" name="name" class="required"/> </p> <p> <input class="submit" type="submit" value="Submit" onclick="totalTax();"/> </p> </form> <div>Entered price: <p id="requestedAmount"></p> </div> <div>7.5 percent sales tax: <p id="requestedTax"></p> </div> <div>Total: <p id="requestedTotal"> </p> </div>

    Read the article

  • With jQuery and I need help getting individual table row titles attributes from an xml file

    - by bfsarmi
    I'm usig tablesorter jQuery to parse this xml file <?xml version="1.0" encoding="iso-8859-1"?> <CATALOG> <CD> <TITLE>Title 01</TITLE> <ARTIST>Artist 01</ARTIST> <COUNTRY>Country 01</COUNTRY> <PRICE>10.00</PRICE> <YEAR>2010</YEAR> <INFO>Tooltip Info 01</INFO> </CD> <CD> <TITLE>Title 02</TITLE> <ARTIST>Artist 02</ARTIST> <COUNTRY>Country 02</COUNTRY> <PRICE>9.00</PRICE> <YEAR>2009</YEAR> <INFO>Tooltip Info 02</INFO> </CD> <CD> <TITLE>Title 03</TITLE> <ARTIST>Artist 03</ARTIST> <COUNTRY>Country 03/COUNTRY> <PRICE>8.00</PRICE> <YEAR>2008</YEAR> <INFO>Tooltip Info 03</INFO> </CD> </CATALOG> and with this code <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type: "GET", url: "file.xml", dataType: "xml", success: function(xml){ $(xml).find("CD").each(function(){ $("#tablebody").append('<tr><td>' + $(this).find("TITLE").text() + '</td><td>'+ $(this).find("ARTIST").text() + '</td><td>'+ $(this).find("COUNTRY").text() + '</td><td>'+ $(this).find("PRICE").text() + '</td><td>'+ $(this).find("YEAR").text() + '</td></tr>'); }); } }); }); </script> I'm new at javascript and have been trying with no luck for a couple of hrs to get the text from the INFO/INFO tags in the xml file to show as title attributes for each table row. The reason for that is that I need to have individual popup tooltips on mouse-over each table row. Many Thanks in advance for any kind of help or suggestions!

    Read the article

  • Jquery question : maintain focus upon appending a row?

    - by PoppySeedsAndAppleJuice
    The function below checks whether the id entered is already in the database, and if it is, then it adds some html to the table. I'm not sure if it's directly related to my issue or not, but, essentially, a user will place the focus on the id input field and enters an id. Using ajax, it posts to a php script and returns data if rows are found and nothing if it doesn't. If the user then tabs over to the next input field (zipcode), or clicks in another input field, they essentially have to do so twice. The cursor "flashes" in the field briefly and then focuses out. I tried adding in a focus(), but the behavior didn't change. So, the html looks like this: <table id="tableSearchData" class="searchlist" style="width: 789px;"> <thead> <tr> <th>ID</th> <th>Zip Code</th> <th>Radius (in miles)</th> </tr> </thead> <tbody> <tr class="odd"> <!-- PROBLEM is described below --> <!-- User clicks in <input name="id[]"> and ID is checked --> <!-- User presses "tab" or clicks in <input name="zipcode[] (in the *same* row) and cursor flashes, then goes out of focus so that the user has to click in the field again --> <td class="center sorting_1"><input type="text" value="" name="id[]"></td> <td class="center"><input type="text" value="" name="zipcode[]"></td> <td class="center"><input type="text" value="" name="radius[]"></td> </tr> </tbody> </table> Here's the jquery function... Like I said, I'm not sure if it's directly related to the problem I'm having, but, thought I should include it because I suppose it's likely there is something happening there... $("#tableSearchData > tbody > tr > td > input[name=id[]]").focusout(function() { var row = $(this).closest("tr").get(0); var sData = $(this).serialize(); $.ajax({ type: "POST", url: "checkid.php", data: sData, success: function(html) { $(row).replaceWith(html); $(".preset").each(function() { $(this).attr("disabled", true); }); $(row).closest("input[name=zipcode[]]").focus(); } }); });

    Read the article

  • Jquery: Incrimentation for each set of elements in more than 1 div

    - by Jack
    I'm making a Jquery slideshow. It lists thumbnails, that when clicked on, reveal the large image as an overlay. To match up the thumbs with the large images I'm adding attributes to each thumbnail and large image. The attributes contain a number which matches each thumb to its corresponding large image. It works when one slideshow is present on a page. But I want it to work if more than one slideshow is present. Here's the code for adding attributes to thumbs and large images: thumbNo = 0; largeNo = 0; $(this + '.slideshow_content .thumbs img').each(function() { thumbNo++; $(this).attr('thumbimage', thumbNo); $(this).attr("title", "Enter image gallery"); }); $(this + '.slideshow_content .image_container .holder img').each(function() { largeNo++; $(this).addClass('largeImage' + largeNo); }); This works. To make the incrementation work when there are two slideshows on a page, I thought I could stick this code in an each function... $('.slideshow').each(function() { thumbNo = 0; largeNo = 0; $(this + '.slideshow_content .thumbs img').each(function() { thumbNo++; $(this).attr('thumbimage', thumbNo); $(this).attr("title", "Enter image gallery"); }); $(this + '.slideshow_content .image_container .holder img').each(function() { largeNo++; $(this).addClass('largeImage' + largeNo); }); }); The problem with this is that the incrimenting operator does not reset for the second slideshow div (.slideshow), so I end up with thumbs in the first .slideshow div being numbered 1,2,3 etc.. and thumbs in the second .slideshow div being numbered 4,5,6 etc. How do I make the numbers in the second .slideshow div reset and start from 1 again? This is really hard to explain concisely. I hope someone gets the gist.

    Read the article

  • Simple jquery Fade Slideshow fails on certain browsers

    - by cmay
    So I have a simple slideshow on my website which just shows one image then shows another until it reaches the end or the user hits skip in which case it shows index.html. The site is served on apache2 with Django. The slideshow works perfectly on most machines, but certain machines it shows some images twice and other images not at all and the timing is off. I am using jquery 1.4.3. Below is the section of html where I push the image urls from the database to the javascript {% for image in latest_images %} {% thumbnail image.image_file "800x600" crop="center" as im %} <script>FadeImageList.push("{{im.url}}");</script> {% endthumbnail %} {% endfor %} Below is the full javascript file var FadeImageList = []; var fadeDuration = 2000; var fadeImgID = '#slideShow'; var homePageID = '#homePage'; var menuID = '#menu'; var skipFlag = 0; $(document).ready(function(){ $(homePageID).fadeOut(50); PlaySlideshow(FadeImageList); }); var PlaySlideshow = function(FadeImageList){ var newImgSrc = FadeImageList.shift(); $('#skip').click(function(){$('#loader').show();skipFlag = 1;}); if(((typeof(newImgSrc) !== "string") || (skipFlag === 1))){ EndSlideShow(); return; } else{ $(fadeImgID).fadeOut(fadeDuration,function(){ $(fadeImgID).attr('src', newImgSrc); $(fadeImgID).fadeIn(fadeDuration,function(){ PlaySlideshow(FadeImageList); }); }); } }; var EndSlideShow = function(fadeSettings){ $(fadeImgID).fadeOut(400,function(){ $(homePageID).fadeIn(400); $("#skip").fadeOut(400); $('#loader').hide(); }); }; The strange thing is I've had it work and fail on identically version numbered browsers on the same os but on different machines. It consistently either works or fails on a machine. I've had it fail in ie 7,8 firefox 3.6.3 and chrome. I've also had it succeed in ie6,7,8 firefox 3.6.3,3.4.2,3.1 and chrome.

    Read the article

  • Access multiple objects/arrays in JSON in jQuery $.each

    - by user2880254
    I am trying to build a simple page to view messages saved in a mysql db via JSON and jQuery. My JSON IS {"unread_msgs":[{"id":"6","title":"33333","user1":"19","timestamp":"1383747146","client_id":"Generic"},{"id":"5","title":"42142","user1":"19","timestamp":"1383740864","client_id":"Generic"}],"read_msgs":[{"id":"4","title":"test to addnrow","user1":"19","timestamp":"1383676647","client_id":"Generic"},{"id":"2","title":"kll","user1":"19","timestamp":"1383675548","client_id":"Generic"},{"id":"1","title":"jkjljklj","user1":"19","timestamp":"1382539982","client_id":"Generic"}],"urm_t":2,"rm_t":3} My JS <script type="text/javascript"> function GetClientMsgs () { $.post("assets/server/client_msgs.php",{ client_id:local_client_id } ,function(data) { var MsgData = $.parseJSON(data); console.log("Msg json data parsed"); $.each(MsgData, function(key, value) { console.log(value); $('#unread_row').append('<td><a href="#read_pm" onClick="ReadMsg('+value.unread_msgs.id+'); return false;">'+value.unread_msgs.title+'</a></td><td><a href="#profile">'+value.unread_msgs.studioname+'</a></td><td>'+value.unread_msgs.timestamp+'</td><td><a href="#delete_msg" onClick="DeleteMsg('value.unread_msgs.id+'); return false;">X</a></td>'); $('#read_row').append('<td><a href="#read_pm" onClick="ReadMsg('+value.read_msgs.id+'); return false;">'+value.read_msgs.title+'</a></td><td><a href="#profile">'+value.read_msgs.studioname+'</a></td><td>'+value.read_msgs.timestamp+'</td><td><a href="#delete_msg" onClick="DeleteMsg('+value.read_msgs.id+'); return false;">X</a></td>'); }); }); } </script> PHP $msgs = array('unread_msgs' => $dn1s, 'read_msgs' => $dn2s, 'urm_t' => $unread_msgs, 'rm_t' => $read_msgs); $json = json_encode($msgs); I am trying to post values returned such as unread_msgs.title or .id and am not able to access any of the objects. I have searched on here and could not find something specific to my structure. Thanks alot.

    Read the article

  • JQuery not copying state dropdown list 1 to DDL2 on checkbox change

    - by user1001411
    I've looked at similar posts on the subject but none of the recommended solutions have worked for me so I'm not sure where I'm going wrong. I have a billing and shipping address form with a dropdown list for the state. Upon checking/unchecking the "billing address same as shipping" everything copies over except the state dropdown list. The state dropdown list is populated from a SQLDataSource state table. Here's my code: <script type="text/javascript" language="javascript" src="../Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('input:checkbox[id*=chkCopy]').change(function () { if ($(this).is(':checked')) { $('input:text[id*=TextBox5]').val($('input:text[id*=TextBox1]').val()); $('input:text[id*=TextBox7]').val($('input:text[id*=TextBox2]').val()); $('input:text[id*=TextBox9]').val($('input:text[id*=TextBox3]').val()); $('input:text[id*=TextBox12]').val($('input:text[id*=TextBox4]').val()); $('select#DropDownList6').val($("select#DropDownList1").val()); $('input:text[id*=TextBox14]').val($('input:text[id*=TextBox6]').val()); } else { $('input:text[id*=TextBox5]').val(''); $('input:text[id*=TextBox7]').val(''); $('input:text[id*=TextBox9]').val(''); $('input:text[id*=TextBox12]').val(''); $('select#DropDownList6').val(''); $('input:text[id*=TextBox14]').val(''); } }); }); and here is my SQL for the DDL: <asp:DropDownList ID="DropDownList1" runat="server" DataTextField="Descr" DataValueField="ID" DataSourceID="SqlDataSource1" Width="254"> </asp:DropDownList> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ASPNETDBConnectionString1 %>" SelectCommand="SELECT * FROM [xrefState]"> </asp:SqlDataSource> the other one: <asp:DropDownList ID="DropDownList6" runat="server" DataTextField="Descr" DataValueField="ID" DataSourceID="SqlDataSource5" Width="254"> </asp:DropDownList> <asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:ASPNETDBConnectionString1 %>" SelectCommand="SELECT * FROM [xrefState]"> </asp:SqlDataSource>

    Read the article

  • Should I HttpCombine Google Jquery Hosted File?

    - by chobo2
    Hi I am using something called HttpCombiner: http://code.msdn.microsoft.com/HttpCombiner An HTTP handler that combines multiple CSS, Javascript or URL into one response for faster page load. It can combine, compress and cache response which results in faster page load and better scalability of web application It's a good practice to use many small Javascript and CSS files instead of one large Javascript/CSS file for better code maintainability, but bad in terms of website performance. Although you should write your Javascript code in small files and break large CSS files into small chunks but when browser requests those javascript and css files, it makes one Http request per file. Every Http Request results in a network roundtrip form your browser to the server and the delay in reaching the server and coming back to the browser is called latency. So, if you have four javascripts and three css files loaded by a page, you are wasting time in seven network roundtrips. Within USA, latency is average 70ms. So, you waste 7x70 = 490ms, about half a second of delay. Outside USA, average latency is around 200ms. So, that means 1400ms of waiting. Browser cannot show the page properly until Css and Javascripts are fully loaded. So, the more latency you have, the slower page loads. You can reduce the wait time by using a CDN. Read my previous blog post about using CDN. However, a better solution is to deliver multiple files over one request using an HttpHandler that combines several files and delivers as one output. So, instead of putting many or tag, you just put one and one tag, and point them to the HttpHandler. You tell the handler which files to combine and it delivers those files in one response. This saves browser from making many requests and eliminates the latency. This Http Handler reads the file names defined in a configuration and combines all those files and delivers as one response. It delivers the response as gzip compressed to save bandwidth. Moreover, it generates proper cache header to cache the response in browser cache, so that, browser does not request it again on future visit. Now I am wondering since it can handle adding links should I put in it the jquery file? The reason I am not sure is if it gets combined with my other files I think I might close the advantages of it being hosted on googles servers such as caching(my thinking is if it gets combined it will look different so even if a user has it in it's cache I am not sure if it will use the one for the cahce or not). So should I combine it or only the finals that I am using locally?

    Read the article

  • jQuery .load(), don't show new content until images loaded

    - by Jarred
    Hi. I have been working on a jQuery photo slideshow. It scales the images to the browser size, and slides them left and right. There is no pre-determined size or aspect ratio, the script does everything on the fly. It requires that all images be fully loaded, so it can custom resize each individual image based on it's own aspect ratio ( width():height(), etc ), calculate the width of containing div, and calculate the slide distance from one image to another. As a stand-alone, it works pretty well (despite my lack of skills)! I simply hide the slideshow containing div at (document).ready, allow the images to load, then run the slideshow prep scripts at (window).load. Once this is done, it only then makes the slideshow divs, images, etc appear, properly sized, positioned and ready to roll. The ultimate goal is to be able to load in any number of slideshows without refreshing the page. The point of this is to be able to play uninterrupted background music. I know music on websites is annoying, but the target market likes it, a lot! I am using (target).load(page.php .element, function prepInsertNewShow() { //Prepare slideshow resizeImages(); slideArray(); //Show slideshow (target).fadeIn(); }); and it definitely works! The problem is that I cannot find a way to hold off on preparing and showing the new content until the images have finished loading. It is running the slideshow prep scripts (which are totally dependent on the images being fully loaded), before the images are loaded. This results in a completely jacked up show! What I want to do is this - (target).load(page.php .element, function prepInsertNewShow() { //Wait until images are loaded $('img').load( function() { //Prepare slideshow resizeImages(); slideArray(); //Show slideshow (target).fadeIn(); } }); But this doesn't seem to work, the new content is never shown. You can see a live version here. The initial gallery loads correctly, everything looks good. The only nav link that works is Galleries Engagement, which will load a new show (a containing div with multiple <img> tags). You will see that the images are not centered, the containing div and slide distances are much too small, as they were calculated using images that were not actually loaded. Is there any way I can delay handling and showing new content until it is fully loaded? Any suggestions would be most appreciated, thanks for your time! PS - It just occurred to me while typing this that a decent solution may be to insert "width=x" height="x" into the <img> tags, so the script can work from those values, even if the images have not loaded...hmm...

    Read the article

< Previous Page | 250 251 252 253 254 255 256 257 258 259 260 261  | Next Page >