Search the Community

Hi, I have the below jQuery script that should list relevant country flag before the name of flag's country. The flags are named "flags", and are of PNG format. Everything is working fine, except flags are missing. I would appreciate showing me what to change in the code to make the flags appear. function createDropDown(){ var $form = $("div#country-select form"); $form.hide(); var source = $("#country-options"); source.removeAttr("autocomplete"); var selected = source.find("option:selected"); var options = $("option", source); $("#country-select").append('<dl id="target" class="dropdown"></dl>') $("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>') $("#target").append('<dd><ul></ul></dd>') options.each(function(){ $("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>'); }); }

Hi, For all pages, there is a language link in the header that is created with the help of a jQuery link. For only one page, however, there is another jQuery link (besides the first jQuery) to make a text collapsible/uncollapsible. I placed both links along with their associated js files before the closing body tag. All pages are fine, except the one having the two jQuery links--it has resulted in the disappearance of a text of another anchor link in the header not related to any function of the jQueries. It seems that the jQuery affecting the language link (anchor) is also affecting the other anchor of the header. How to make the second jQuery link not affect the other anchor link? Links are listed below. <script type= "text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script type= "text/javascript" src= "./js/collabsible.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script src="js/languageswitcher.js"></script>

Hi, I am currently trying to implement the posting of a canvas image to a Twitter wall.Below, first you see the JS I came up with.What I can't figure out is how am I supposed to get the keys and tokens provided in the PHP function below that code. Such PHP function is contained in the uploadFile.php file.JS: var base64img = canvas.toDataURL().split(',')[1]; $.ajax({ url: "uploadFile.php", type: "POST", data: base64img, processData: false, contentType: "application/octet-stream", }).done(function(respond) { alert(respond); }); PHP: function _microsite_last_tweets($search) {define('CONSUMER_KEY', 'my key');define('CONSUMER_SECRET', 'my key');define('ACCESS_TOKEN', 'my key');define('ACCESS_TOKEN_SECRET', 'my key');$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);$content = $connection->get("account/verify_credentials");if ($search[0] == '@' && strpos($search,' ') == false) {$user = substr($search, 1);$tweets = $connection->get("statuses/user_timeline", array("screen_name" => $user, "count" => "4"));}else {$search = urlencode($search);$tweets = $connection->get("search/tweets", array("q" => $search . '+exclude:retweets', "result_type" => "recent","count" => "4"));}return $tweets;}

<php at the top of page> <followed by an html tags, then by below php> <?php include ('./includes/footer.html'); ?> <script type= "text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script type= "text/javascript" src= "./js/collabsible.js"></script> For one odd page of the website I wanted to have collapsible/uncollapsible text using jQuery, so I placed the relevant scripts at the bottom of the page as seen above. It works. But in a previous communication it was stated that the ideal place for inclusion of js/jQuery scripts is before the closing tag of the body. The footer file, included before the scripts, closes the body and html tags, which means the scripts are placed even after the closed html. If scripts are placed before inclosure of the footer file, it would then be before some html tags. I cannot place them in the footer file before closure of the body tag because I need scripts in this page only while footer is also in the rest of site pages. It seems I have only two options: leaving them as seen above or make one additional footer page for this page only where I can place the scripts before body closure tag. Any help or guidance will be appreciated.

Dear all: I have just started learning js and jQuery. I am confused about browser support to js. On one hand, there seems to be a general agreement that js is the most popular language for website design. On the other hand, It's stated that js is not equally supported by browsers, especially old browsers, and that some user browsers might even turn down js. jQuery is a better alternative for browser support. Is this true about problems in js' browser support? And if it is, how could a language with such a draw back become the most popular?

Dear all: I know it is not usually normal to make double links of any file, however, since jQuery library can be linked to the page via the internet or locally, can we do both linking to achieve guaranteed loading if one fails and to make sure that getting the first link of the two would mean a faster loading? Is there any harm of doing so?

Dear all: I am linking jQuery from the internet as well as linking a local js file. Both the code and js file content are shown below. To test if it is loading or not, the alert function is used. Despite having a jQuery release 2.1.4 already, it loads with release 1.7.1 or earlier only. Why is it not loading with subsequent releases? <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="http://google.com/jsapi"></script> <script src="js/scripts.js"></script> </head> <body> </body> </html google.load('jquery','1.7.1'); google.setOnLoadCallback(function(){alert('Loaded!'); });

Dear all: I am intending to use jQuery for an FAQ collapsible/uncollapsible text. Because my FAQ will contain essential information, I am keen to have it visible to everybody. Is there any limitation in relation to browser support of jQuery that I should be aware of?

Hey so I have this code, and I start out with my homepage on the screen. If I hover over some images they glow and the source shows up beneath them. Later, if I click the homepage button on my sidebar, it shows the homepage again. This time when I hover over the images they glow, but don't show the image source. Is there something wrong with this code? Please help <script>$(document).ready(function(){ $('.homepage').click(function(){ $('.body').empty(); $('.body').append("<div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div>"); $('img').mouseenter(function(){ $(this).css('border', '2px solid yellow'); }); $('img').mouseleave(function(){ $(this).css('border', '2px solid black'); }); $('.aimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.aimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.bimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.bimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.cimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.cimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.dimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.dimg').mouseleave(function(){ $('.imagesource').empty(); }); }); $('img').mouseenter(function(){ $(this).css('border', '2px solid yellow'); }); $('img').mouseleave(function(){ $(this).css('border', '2px solid black'); }); $('.aimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>"); }); $('.aimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.bimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.bimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.cimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.cimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.dimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.dimg').mouseleave(function(){ $('.imagesource').empty(); });});</style> <body> <div class = 'page'> <div class = 'header'>Hacking the School Computer System</div> <div class = 'sidebar'> <button class = 'homepage'>Homepage</button> <button class = 'page2'>Page 2</button> <button class = 'page3'>Page 3</button> <button class = 'page4'>Page 4</button> </div> <div class = 'body'> <div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div> <div class = 'imagesource'></div> </div> <div class = 'footer'>Created by Brooke Simmerman</div> </div></body>

So, I do not have a specific code, but I just want to understand collision. I guess an example that I am thinking of is agar.io. I have read many examples about collision, or how in agar.io the cells eat eachother, and it just doesn't make sense. Could anybody please explain it to me, and use it in an extremely simple code. I am very much a beginner. I have learned about html, javascript, and jquery using codecademy, but I am not experienced!! Could someone please give me a simple explanation of how to make 'cells eat eachother' using a simple code. Again, I am a beginner! Thanks for any help.

Hi Sir/Ma'am,Good day!I made a checkbox and I use jquery on displaying one textbox if the user check the Yes checkbox but if the user check the no the textbox will be hide. It works fine now but when the checkbox has vale from the database and which is no the textbox was displayed so that I made a if condition that only if the checkbox is Yes or '' but I noticed that when I check the Yes the textbox was not display because from the database the value of textbox is No. $(document).ready(function() {$(".ticket").change(function () { //check if its checked. If checked move inside and check for others value if (this.checked && this.value === "Yes") { //add a text box next to it $("#destination_data").show(); } else if (this.checked && this.value === "No") { //remove if unchecked $("#destination_data").hide(); } });});if($ticket == ''){?> #destination_data {display: none; display:}<?php}?> <tr> <td class="row_leaveform">Travel Tickets:</td> <td class="row_leavedata"> <input type="checkbox" class="ticket" name="ticket" value="Yes" <?php if($ticket=="Yes") echo 'checked="checked"'; ?>>Yes <input type="checkbox" class="ticket" name="ticket" value="No" <?php if($ticket=="No") echo 'checked="checked"'; ?>>No </td> </tr> <tr id="destination_data"> <?php if($ticket=="Yes" || $ticket=='') { ?> <td class="row_leaveform">Destination </td> <td class="row_leavedata"><b>Doha</b> to <input type="text" name="destination" id="destination" value="<?php echo $nationality; ?>" size="31"></td> <?php } ?> </tr>it works fine when $ticket == '';but when in terms of update and the $ticket has value of Noin this code the destination was not display but when I try to check the Yes the destination was not display. I want it to display once I click the Yes if need to update my data.if my remove the if condition even the value of ticket is No the destination was display :(I want to happen is if$ticket == '' or $ticket == 'Yes' the destination display$ticket == 'No' destination not display but when I click the Yes the destination should be displayThank you.

Hi, I created a simple badge generator app here. I am using the html5 file input and <canvas> to display a badge template and the user has to select the picture. The problem is that sometimes (randomly?), as soon as the image is selected, it doesn't show up in the pixels I designated it to appear in. A quick debug made clear that, when this occurs, the image object is there but it has width 0 and height 0 (see screenshot below).

Hi w3 Community i want to learn how to replicate this effect on the main screen of this website https://overv.io/ The traget(booklets) starts off somewhere fixed and translate/rotates towards 0 once it's reached it's original location, scrolling further down won't change any location scrolling back up with move the items back towards the location it stated. Here's something which i think it should look like.. window.onscroll = function() {var speed = 1; //this should be adapted to the height of divvar startdeg = 130; //var startx = 300;var starty =-300;var scroll = $(window).scrollTop(); //using scrolling as variablevar deg = (startdeg - scroll) / speed;var translatex = startx - scroll/ speed;var translatey = starty - scroll/ speed;//Here should be some conditioner or maybe a do-while loop to stop transforming once it reached it's original location?$(".logo").css({"transform": "translate("translatex+"px,"translatey+"px) rotate("+deg+"deg)",}); }; https://jsfiddle.net/aavelyn/ktccxr6j/1/ PS: I'm fairly basic with javascript,jquery though i can fully understand the code presented. Thanks a lot!!

Hello friends, im using following code to insert data in database using dynamic text box. its work excellent but now i want to submit data in database without refresh page.kindly advise what and where i change my code.plz help. thanks in advance output.php<?phpinclude('connection.php');include('links.php'); if(isset($_POST['save'])){ $conn = mysql_connect("localhost","root","");mysql_select_db("esol",$conn); $itemCount = count($_POST["item_name"]);$itemValues=0; $query = "INSERT INTO invoice (name,description,quantity) VALUES ";$queryValue = "";for($i=0;$i<$itemCount;$i++) { if(!empty($_POST["item_name"][$i]) || !empty($_POST["item_price"][$i]) || !empty($_POST["quantity"][$i])) { $itemValues++; if($queryValue!="") { $queryValue .= ","; } $queryValue .= "('" . $_POST["item_name"][$i] . "', '" . $_POST["item_price"][$i] . "', '" . $_POST["quantity"][$i] . "')"; }}$sql = $query.$queryValue;if($itemValues!=0) { $result = mysql_query($sql); if(!empty($result)) $message = "Added Successfully."; } }?> <FORM name="frmProduct" method="post" action=""> <input type="button" name="add_item" value="Add More" onClick="addMore();" /> <input type="button" name="del_item" value="Delete" onClick="deleteRow();" /> <input type="submit" id="save" name="save" value="Save" /> </form> <SCRIPT src="http://code.jquery.com/jquery-2.1.1.js"></SCRIPT><script> function addMore() { $("").load("input.php", function() { $("#product").append($(this).html()); }); } function deleteRow() { $('DIV.product-item').each(function(index, item){ jQuery(':checkbox', this).each(function () { if ($(this).is(':checked')) { $(item).remove(); } }); }); }</script> INPUT.PHP<DIV class="product-item float-clear" style="clear:both;"> <input type="checkbox" name="item_index[]" /> <input type="text" name="item_name[]" /> <input type="text" name="item_price[]" /> <input type="text" name="quantity[]" />>

<head> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.isotope.js"></script> </head> <div class="container"> <div class="categories"> <ul class="cat"> <li class="pull-left"><h4>PHOTOS</h4></li> <li class="pull-right"> <ol class="type"> <li><a href="#" data-filter="*" class="active">ALL</a></li> <li><a href="#" data-filter=".childhood">CHILDHOOD</a></li> <li><a href="#" data-filter=".concerts">CONCERTS</a></li> </ol> </li> </ul> <div class="clearfix"></div> </div> <div id="lightbox" class="row"> <div class="col-md-4 childhood"> <div class="portfolio-item"> <img src="img/photos/childhood/img5.jpg" class="img-responsive" alt="Childhood Images "> </div> </div> <div class="col-md-4 childhood"> <div class="portfolio-item"> <img src="img/photos/childhood/img2.jpg" class="img-responsive" alt="Childhood Images "/> </div> </div> <div class="col-md-4 childhood"> <div class="portfolio-item"> <img src="img/photos/childhood/img3.jpg" class="img-responsive" alt="Childhood Images /> </div> <div class="col-md-4 concerts"> <div class="portfolio-item"> <img src="img/photos/concerts/img1.jpg" class="img-responsive" alt="Concert Images"> </div> </div> <div class="col-md-4 concerts"> <div class="portfolio-item"> <img src="img/photos/concerts/img1.jpg" class="img-responsive" alt="Concert Images"> </div> </div> </div> </div> <script type="text/javascript"> $(window).load(function() { var $container = $('#lightbox'); $container.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.cat a').click(function() { $('.cat .active').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); </script> </body> </html> I am using bootstrap and for the image gallery filtering i'm using jquery.isotope.js.This perfectly works in chrome and images are rersponsive.But in IE and firefox,images will not be responsive when window is smaller than 760px.Tried a lot.If I make it responsive ie.smartresize fn,then flitering does not work.Also tried new version of isotope.Then filtering doesn't work,images stay responsive. How to resolve the problem?Pl someone help me...

Hi, I am building an extremely basic jQuery Slideshow plugin (code below). I have two issues: 1) I have to duplicate variables because "click" creates a new scope. How do I pass arguments to the click function? 2) How can I make the plugin multi-instance with pure jQuery? Can I avoid JS classical/prototypal inheritance? $('.article-previous').click(function(e) {var inner = $('.interaction-tab .inner');var article = $('.interaction-tab .inner article');var total_width = inner.width();var slide_width = article.width();if(inner.position().left < 0) { $('.interaction-tab .inner').css({ 'left' : '+=' + slide_width + 'px' });}e.stopPropagation();});$('.article-next').click(function(e) {var inner = $('.interaction-tab .inner');var article = $('.interaction-tab .inner article');var total_width = inner.width();var slide_width = article.width();var max_pos = total_width - slide_width;if(-inner.position().left < max_pos) {$('.interaction-tab .inner').css({ 'left' : '-=' + slide_width + 'px' });}e.stopPropagation();}); Thanks

Hi, I am trying to come up with a preloader. The problem is none of the animations start. What I am trying to achieve is the following sequence: preloader_wrapper fade in, then fade out as soon as the document is loaded. JS: jQuery(document).ready(function($) {/* * Preloader */$('#preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('#preloader_wrapper').addClass('preloader_fadeout');$('header *').css({ -webkit-animation-play-state: 'running'; -moz-animation-play-state: 'running'; -o-animation-play-state: 'running'; animation-play-state: 'running';});});}); CSS: .preloader_wrapper { position: absolute; top: 50%;}.preloader_fadein { -webkit-animation: preloader_fadein 2s ease; -moz-animation: preloader_fadein 2s ease; animation: preloader_fadein 2s ease;}@keyframes preloader_fadein { from { opacity: 0; left: 45%; } to { opacity: 1; left: 50%; }}.preloader_fadeout { -webkit-animation: preloader_fadeout 2s ease; -moz-animation: preloader_fadeout 2s ease; animation: preloader_fadeout 2s ease;}@keyframes preloader_fadeout { from { opacity: 1; left: 50%; } to { opacity: 0; left: 55%; }}.header * { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;}

Hello Forum! I have a little problem. What I have is a registration page. I want to validate the input of the user in real time. I use JQuery. $("#inputUsername").change(checkUsername); $("#inputEmail").change(checkEmail); $("#inputPassword").change(checkPassword); $("#inputPasswordConfirm").change(checkPasswordConfirm); I check if something was changed. For example like this: function checkUsername() { $(this).popover({placement:"right", container:'body'}); var username = $(this).val(); if(username == '') { $(this).data('bs.popover').options.content = 'Please enter a username'; $(this).popover("show"); } else if(username.length < 5 || username.length > 20) { $(this).data('bs.popover').options.content = 'Please enter a username with 5-20 characters'; $(this).popover("show"); } else { $(this).popover("destroy"); } } Now when the user submits the form, I thought I could use something like this: $("#registerForm").submit(function( event ) { if(!checkUsername || !checkEmail || !checkPassword || !checkPasswordConfirm) { event.preventDefault(); } }); Obviously the functions don't have return types. But even with it doesn't work. With it doesn't work I mean that submit event isn't ignored even if there are errors in the form. I might be doing something wrong with JavaScript as I'm not used to it! Before someone suggests a plugin, I don't have enough control with them. Thanks!

Hello. I'm currently developing an app in the Intel XDK for my local high school. One of the features I would like to add is something where school administrators (such as the athletic director) can login and then submit data into an HTML5 form, which is then submitted to a server and stored in a database. Then, after it is stored, I would like the information to be able to be viewed by regular users of the app, in something such as an HTML page. THe purpose of this would be for the school admins to submit scores from the games such as football, etc. My question is, how do I setup the server (im assuming would run PHP) to be able to store the submitted data, and then would edit an HTML page to include the new text? Any help is appreciated! Thanks!

Hi, i am playing a game and there is a user in chat that bothers me and other players a lot but he does not break any game rule... i was wondering if there is a way i could block or mute his text with a JavaScript if so, does anyone have a tutorial on how to code something like this? the chat have no ID but every chat message is put out like this. <table border="0" padding="0" cellspacing="0" width="100%"> <tbody> <tr> <td width="90" class="chat"> <div id="202525"></div> 2015-08-24 06:06:00 </td> <td style=""> <a href="javascript:newmsg('The Martyr','')" style="">The Martyr:</a> " so I starting to give up" </td> </tr> </tbody></table> and it looks like this in chat: 2015-08-24 06:06:00 The Martyr: so I starting to give up i was thinking i could use the user name 'The Martyr' in some way to block that user i would love to code something that would just remove the lines from the chat box. and any other line the user typed and will type. i just have no idea where to start. any kind of help would be appreciated thanks

im trying to output a json file to an expandable tree using html and jquery. its working, but the nesting and nodes within the tree are misplaced. any idea what that is? for example. mainstation 2 is coming out as a child of mainstation 1, while they should be siblings. it should be a logic error html code:<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: "converted39.json", dataType: 'json', success: function(tree) { traverse($('#treeView'), tree) $('#treeView li:has(li)').addClass("Max").click(function(e) { $(this).toggleClass("Max Min"); $(this).children("ul").toggle(); e.stopPropagation(); }) $("[href]").addClass("Blue").click(function(e){ $(this).toggleClass("Purple"); e.stopPropagation(); window.location.href = $(this).attr("href") }) $('#treeView li').click(function(g) { var mytree2 = $(this); mytree2.children('li').toggle(); g.stopPropagation(); }) } }) }); function traverse(node, o) { for (var i in o) { if(i == "__text" || i == "_href" ) continue; if (o !== null && typeof(o)=="object") { if(o.__text){ var ul = $("<ul>").appendTo(node) var node=$('<li>').appendTo(ul) if(o._href){ var n = $("<span>").appendTo(node) $(n).text(o.__text).attr("href", o._href) } else{ $(node).text(o.__text) } } } traverse(node,o); } else{ var ul = $("<ul>").appendTo(node) if(o.__text){ var li = $('<li>' + o._text + '</li>').appendTo(ul) if(o._href){ var n = $("<span>").appendTo(node) $(n).text(o.__text).attr("href", o._href) } }else{ $('<li>' + o + '</li>').appendTo(ul) } } } } </script> JSON CODE:{ "MAIN": { "MainStation": [ { "Substation": [ { "Control": "Control1n", "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control2" }, "PushButton": { "__text": "PushButton1", "_attr": "successnDatffffffffffffffffffffffffffffffffffffffffffffffffffffffffe:17july" }, "_href": "http://google.com", "__text": " Substation1nnnnnnn" }, { "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control1", "_attr": "Control1 woohoo" }, "Control": "Control2", "PushButton": "PushButton1", "__text": " Substation2nnnnnnn" }, { "Control": [ "Control1", "Control2", "Control3", "Control4" ], "__text": " Substation3nnnnnnnnn" }, { "PushButton": [ "PushButton1", "PushButton2" ], "__text": " Substation4nnnnn" } ], "__text": " Mainstation1nnnnnnnnn" }, { "Substation": [ { "Control": [ "Control1", "Control2" ], "PushButton": "PushButton1", "__text": " Substation1nnnnnnn" }, { "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control1" }, "Control": "Control2", "PushButtonExpandable": { "MiniPushButton": [ "MiniPushButton1", "MiniPushButton2" ], "__text": "PushButton1" }, "__text": " Substation2nnnnnnn" } ], "__text": " Mainstation2nnnnn" } ], "ElectricStation": { "Substation": [ { "Control": [ "Control1", "Control2" ], "PushButton": "PushButton1", "__text": " Substation1nnnnnnn" }, { "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control1" }, "Control": "Control2", "PushButtonExpandable": { "MiniPushButton": [ "MiniPushButton1", "MiniPushButton2" ], "__text": "PushButton1" }, "__text": " Substation2nnnnnnn" } ], "__text": " ElectricStation1nnnnn" }, "__text": " MAINnnnnnnn" }}

Hi,Good day!I created a search box and my problem is when I type Employee ID the auto list displayed is Employee Name, I need to display on the list is based on what I type. I don't know if it is possible that in one search box I can search Employee name then the list of names will display, when I type Employee ID, employee id list will display. same with Passport no and res id.Now, when I type Employee Id or Passport No or res id and employee name. the displayed list is employee name.this is my code: <script type="text/javascript" src="js/jquery.js"></script> <script type='text/javascript' src='js/jquery.autocomplete.js'></script> <link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" /><script type="text/javascript">//----auto complete emp no--//$().ready(function() { $("#search_data").autocomplete("get_emp_info.php", { width: 237, minLength: 3,//search after three characters matchContains: true, mustMatch: true, selectFirst: false }); });</script> <table> <tr> <td style="border: none;color:#80600a;font-weight:bold;">Search:</td> <td><input type="text" name="search_data" id="search_data" value="" size="35" autofocus></td> </tr> </table> <?phpob_start();include('includes/connection.php');$q = strtolower($_GET["q"]);if ($q == '') { header("HTTP/1.0 404 Not Found", true, 404);}//else (!$q) return;else{$sql = "SELECT pe.employee_no, pe.employee_name, pe.passport_no, gov.res_id FROM tbl_personal_info AS pe JOIN tbl_public_info AS pu ON (pe.employee_no = pu.employee_no) JOIN tbl_e_government_info AS gov ON (pu.employee_no = gov.employee_no) WHERE pe.employee_no LIKE '%".$q."%' OR pe.employee_name LIKE '%".$q."%' OR pe.passport_no LIKE '%".$q."%' OR gov.res_id LIKE '%".$q."%'";$result = $conn->query($sql);if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { $pid = $row["employee_no"]; $employee_name = $row["employee_name"]; $passport_no = $row["passport_no"]; $res_id = $row["res_id"]; echo "$employee_name|$pid|$passport_no|$res_idn"; }} else { echo "0 results";}$conn->close(); }?>

I've been making tons of progress on my vehicle fit guide. I've made a drop down box dynamically populate based on previous selections, and now I need those selections to search the xml file and return my results. My old code only searched by the vehicle year, and that returned all vehicles with the same year. I'm trying to parse my XML using multiple variables, and now can't get any results to return. how am I able to search for models, then search for years within the model? here are my code snippets below, which currently only search the whole XML file for similar years: <!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="xmlcss.css"><script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript">jQuery(document).ready(function($){ var $xml; var make = $('#make'); var model = $('#model'); var year = $('#year'); var front1 = $('#Front_Location_1'); var frontsize1 = $('#Front_Size_1'); $.get('fitguide3.xml', function(data){ $xml = $(data); var rows = $(data).find('ROWSET ROW'); var makes = []; $.each(rows, function(index, element){ var _make = $(element).find('MAKE').text(); makes.push('<option value="' + _make + '">' + _make + '</option>'); }); makes = $.unique(makes); make.append(makes.join('n')); }, 'xml'); $('#make').on('change', function(){ var _value1 = $(this).val(); var _models = $xml.find('ROWSET ROW:contains("'+_value1+'")'); var models = []; console.log(_models); $.each(_models, function(index, element){ var _model = $(element).find('Model').text(); models.push('<option value="' + _model + '">' + _model + '</option>'); }); models = $.unique(models); model.find('option').remove(); model.append(models.join('n')); }); $('#model').on('change', function(){ var _value2 = $(this).val(); var _years = $xml.find('ROWSET ROW:contains("'+_value2+'")'); var years = []; console.log(_years); $.each(_years, function(index, element){ var _year = $(element).find('YEAR').text(); years.push('<option value="' + _year + '">' + _year + '</option>'); }); years = $.unique(years); year.find('option').remove(); year.append(years.join('n')); }); // $('#make').val() // $('#model').val() // $('#year').val() $('#year').on('click', function(){ var _value3 = $(this).val(); var finalmodel = $('#model').val(); var _front1 = $xml.find('ROWSET ROW:contains("'+_value3+'")'); console.log(_front1); <!-- $("#Front_Location_1").html(""); --> $.each(_front1, function(index, element){ var _front = $('#frontspeakers').val(); var front = []; front.push('<p>' + element + '</p>'); front = $.unique(front); front1.append(element); }); })});</script></head><body><p id="test"></p><select id="make"><option value='0'>---Select Make---</option></select><select id="model" name="model"></select><select id="year"></select><table style="width:100%"><tr><td>Front Location 1</td></tr><tr><td id="frontspeakers"></td></tr><tr><td id="Front_Location_1"></td></tr></table> And this is how my XML file is set up: <?xml version="1.0"?><ROWSET><ROW><MAKE>ACURA</MAKE><Model>CL</Model><YEAR>2001-2003</YEAR><Front_Location_1>Door</Front_Location_1><Front_Size_1>6 1/2</Front_Size_1><Front_Location_2>Sail Panel</Front_Location_2><Front_Size_2>1 </Front_Size_2><Rear_Location_1>Deck</Rear_Location_1><Rear_Size_1>6 x 9</Rear_Size_1><Rear_Location_2></Rear_Location_2><Rear_Size_2></Rear_Size_2><Other_Speakers></Other_Speakers></ROW><ROW><MAKE>ACURA</MAKE><Model>CL</Model><YEAR>1999-1999</YEAR><Front_Location_1>Door</Front_Location_1><Front_Size_1>6 1/2</Front_Size_1><Front_Location_2>Sail Panel</Front_Location_2><Front_Size_2>1 </Front_Size_2><Rear_Location_1>Deck</Rear_Location_1><Rear_Size_1>6 x 9</Rear_Size_1><Rear_Location_2></Rear_Location_2><Rear_Size_2></Rear_Size_2><Other_Speakers></Other_Speakers></ROW> This searches for them, but returns every model with the same years. Work-in-progress version located HERE Any help would be great!

I am trying to use fancybox with filter and that is working fine. But there is a problem with waypoints: When I am scrolling down there appears a red border on the rightside. In this border there should fadein a vertical text-image when this border reaches the top of the viewport. This all works fine. At the end the text image should fadeOut when the red border ends. This works well untill the fancybox filter is used (and the fancybox page is getting smaller). When the filter is used the text image won't fadeOut, I think because it doesn't reach the waypoint. The waypoint is set to "bottom in view" on the page where the contact slider is located. Could anyone tell me why the waypoint isn't moving up when the filter is used and how I can solve this? A link to the side is: http://main-site.nl/peter/ Thanx

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>To do list</title><link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'> <h1>To Do List</h1> <style>button {margin-left: 30px;}h1 {font-family:'Arvo', slab-serif; font-size: 25pt; margin-left:30px;} div { display: none; margin-left: 30px; padding:5px; <!--to give space between each button--> } p { font-weight: bold; background-color: #fcd; }</style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <button>Add</button><div> <form> <input type="text"> <button>Completed</button> </form></div> <script>function add() { $( "div" ).show( "fast" );}$( "button" ).click(function(){ $("div").append("$("input"); $( "form" ).submit(function( event ) { if ( $( "input" ).val() === "yes" ) { $( "p" ).show( 4000, function() { $( this ).text( "Ok, DONE! (now showing)" ); }); } $( "div" ).hide( "fast" ); // Prevent form submission event.preventDefault();});</script> </body></html> It's not javascript but I was hoping to get a feedback with the problem I have. I'm trying to make it so that everytime I click "add" button, input box adds on. I used .append but not working at all. any suggestions??