Jump to content

Search the Community

Showing results for tags 'jQuery'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 287 results

  1. 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?
  2. 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?
  3. 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>
  4. 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;}
  5. 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.
  6. newbees

    Checkbox Problem

    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.
  7. 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).
  8. 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!!
  9. 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[]" />>
  10. <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...
  11. 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
  12. 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;}
  13. 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!
  14. evy0311

    PHP Database Server

    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!
  15. 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
  16. 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" }}
  17. 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(); }?>
  18. 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!
  19. 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
  20. <!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??
  21. I can't seem to get the last slide to go back to the first slide. I also have a problem when clicking on previous slide the next slide goes below the current slide for a second. If anyone has any suggestions it would be much appreciated. Unfortunately don't have the site uploaded so here's the code: var main = function() { $('.next-arrow').click (function() { var currentSlide = $('.active-slide'); var nextSlide = currentSlide.next(); var currentDot = $('.active-dot'); var nextDot = currentDot.next(); if(nextSlide.length == 0) { nextSlide = $('.slide').first(); nextDot = $('.dot').first(); }; currentDot.removeClass('active-dot'); nextDot.addClass('active-dot'); currentSlide.fadeOut(500).removeClass('active-slide'); nextSlide.fadeIn(500).addClass('active-slide'); }); $('.prev-arrow').click(function() { var currentSlide = $('.active-slide'); var prevSlide = currentSlide.prev(); var currentDot = $('.active-dot'); var prevDot = currentDot.prev(); if(prevSlide.length == 0) { nextSlide = $('.slide').last(); nextDot = $('.active-dot').last(); }; currentDot.removeClass('active-dot'); prevDot.addClass('active-dot'); currentSlide.fadeOut(500).removeClass('active-slide'); prevSlide.fadeIn(500).addClass('active-slide'); }); }; <div class="carousel"> <div class="slide active-slide"> <div class="pic"> <img src="pic1.png" width="1000" height="360"> <div class="carousel-text"> <h1>Welcome to the Shabby to Chic Workshop.</h1> </div> </div> </div> <div class="slide"> <div class="pic"> <img src="pic2.png" width="1000" height="360"> <div class="carousel-text"> <h1>We make custom furmiture.</h1> </div> </div> </div> <div class="slide"> <div class="pic"> <img src="pic3.png" width="1000" height="360"> <div class="carousel-text"> <h1>Come visit us today!</h1> </div> </div> </div> <div class="s-bar"> <a href="#" class="prev-arrow"><img src="la.png" width="20" height="40"></a> <ul class="s-dots"> <li class="dot active-dot"><img src="dot.png" width="10" height="40"></li> <li class="dot"><img src="dot.png" width="10" height="40"></li> <li class="dot"><img src="dot.png" width="10" height="40"></li> </ul> <a href="#" class="next-arrow"><img src="ra.png" width="20" height="40"></a> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src="main.js"></script> .s-bar { text-align: center; position: relative; background-color: transparent;}.s-dots { list-style: none; display: inline-block; padding: 0; margin: 0;}.s-dots > li { list-style: none; display: inline;}.active-dot { opacity: 0.5;}.prev-arrow, .next-arrow { width: 20px; height: 40px;}.carousel-text { font-family: 'Dancing Script', cursive; text-align: left; font-size: 1.8em; color: #ffffff; position: absolute; left: 30px; top: 30px;}.slide { display: none; background: transparent; position: absolute; top: 80; left: 50%; ; width: 1000px; height: 360px;}.active-slide { left: 0; display: block; position: relative; text-align: center; margin-left: auto; margin-right: auto; width: 1000px; height: 360px; z-index: -1; }
  22. Since some webpages of W3Schools discuss which browsers (e.g. Google Chrome, Internet Explorer) support certain features, I think that W3Schools should note in its jQuery AJAX tutorials that Google Chrome cannot be used to import files (e.g. .html files) from one's own hard drive, whereas Internet Explorer and Mozilla Firefox can. This would have saved me much time that I spent finding out the hard way, and based on other online forums, other people seem to be confused by Google Chrome's incompatibility and do not know the reason.
  23. Hi everybody! I just made this slider in an object oriented fashion. I would like to know how I can improve the script. Thank you! var Slideshow = function(element) { var totalWidth = 0; this.slider_wrap = element.find('.slider_wrap'); this.slider = element.find('.slider'); this.slide = element.find('.slide'); this.first_slide = element.find('.slide:first'); this.slider_controls_prev = element.find('.slider_controls_prev'); this.slider_controls_next = element.find('.slider_controls_next'); this.all_slides = this.slide.each(function(){ totalWidth = totalWidth + jQuery(this).outerWidth(true); }); this.maxScrollPosition = totalWidth - this.slider_wrap.outerWidth(); this.toSliderItem = function(jQuerytargetItem){ if(jQuerytargetItem.length){ this.newPosition = jQuerytargetItem.position().left; if(this.newPosition <= this.maxScrollPosition){ jQuerytargetItem.addClass('active'); jQuerytargetItem.siblings().removeClass('active'); this.slider.animate({ left : - this.newPosition }); } else { this.slider.animate({ left : - this.maxScrollPosition }); }; }; }; this.slider.width(totalWidth); this.first_slide.addClass('active'); this.buttons(); } Slideshow.prototype.buttons = function() { var that = this; this.slider_controls_prev.click(function() { var jQuerytargetItem = that.slider.find('.active').prev(); that.toSliderItem(jQuerytargetItem); }); this.slider_controls_next.click(function() { var jQuerytargetItem = that.slider.find('.active').next(); that.toSliderItem(jQuerytargetItem); });}var speakers = new Slideshow(jQuery('.slider-1'));}); The HTML: <div class="slider_wrap"> <div class="slider clearfix"> <div class="slide">Slide Content</div> </div> <div class="slider_controls clearfix"> <div href="#" class="slider_controls_prev"> ◄ </div> <div href="#" class="slider_controls_next"> ► </div> </div></div>
  24. Hi, I am trying to make this webpage for posting and viewing news. It will be shown on a big screen in our Hub. I've been having a super hard time with putting a proper slideshow in the HubWeb_HubPage.php one. I've tried copying in code from two other pre-made slideshows, but best I've got was a misaligned slideshow that didn't fit the top right area properly. And I made an embedded YouTube video appear and reappear on top of it periodically. So I decided to learn and do a simple one myself. What could go wrong if I'm writing the thing inside my webpage myself, right? Nothing happens. See for yourself. It's driving me mad already. My goal for the top right slideshow area is to have at least 5 images or videos sliding and autoplaying with the top right area filled as much as possible, though keeping normal proportions (to not stretch the image). So the whole webpage with news must be responsive and fill the screen it's on. The slideshow area is 70%/70% of the screen width (the webpage will be put on fullscreen on the display in Hub). But I can't even get the images sliding! Please download the zipped folder from this link and check out the code and the page: http://s000.tinyupload.com/index.php?file_id=60798650373352387766 I've also attached just the HubPage that has the slideshow code on it. This one is how far I could get it modifying the CSS values. Thank you for your help! <!DOCTYPE html><?phpif (!empty($_POST)) {file_put_contents('NewsLines.txt', $_POST['newsline'] . "____" . date("d.m") . "____" . "^^^^" . PHP_EOL, FILE_APPEND);}?><html> <head> <!-- load jQuery --> <script src="jquery-1.11.3.min.js"></script> <link rel="stylesheet" type="text/css" href="HubWeb_CSS.css"> </script> <script type="text/javascript"> window.onload = function() { fullClock(); newscaster(); updater(); } $(document).ready(function() { var currentPosition = 0; var slideWidth = 500; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 3000; slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float' : 'left' }); $('#slidesHolder').css('width', slideWidth * numberOfSlides); function changePosition() { if(currentPosition == numberOfSlides - 1) { currentPosition = 0; } else { currentPosition++; } moveSlide(); } function moveSlide() { $('#slidesHolder') .animate({'marginLeft' : slideWidth*(-currentPosition)}); } }); function fullClock() { var today=new Date(); var mon=today.getMonth(); var d=today.getDate(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); var timeOfDay=(h<12)?"AM":"PM"; var period = ""; if (h == 8 && m >= 55 && m <= 59) { period = "Registration"; } else if (h == 9) { period = "Period 1"; } else if (h == 10) { period = "Period 2"; } else if (h == 11 && m < 15) { period = "Break"; } else if ((h == 11 && m >= 15) || (h == 12 && m < 15)) { period = "Period 3"; } else if ((h == 12 && m >= 15) || (h == 13 && m < 15)) { period = "Period 4"; } else if (h == 13 && m >= 15 && m < 50) { period = "Lunch"; } else if ((h == 13 && m >= 50) || (h == 14 && m < 50)) { period = "Period 5"; } else if ((h == 14 && m >= 50) || (h == 15 && m <= 35)) { period = "Period 6"; } else { period = ""; } mon = mon + 1; mon = checkTime(mon); d = checkTime(d); m = checkTime(m); s = checkTime(s); document.getElementById('date').innerHTML = d+"."+mon; document.getElementById('clock').innerHTML = h+":"+m+":"+s; document.getElementById('AMPM').innerHTML = timeOfDay; document.getElementById('period').innerHTML = period; var t = setTimeout(function(){fullClock()},500); } function checkTime(i) { if (i<10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } // VIDEO-------------------------------------------------------------------------------------------------------------------- function updater() { setInterval(function() { newscaster() }, 1000); } function newscaster() { $.ajax({ url: 'NewsLines.txt', type:'POST', success: function(m){ allLines = m; allLines = allLines.split("r"); // Splice loop reverse because splice messes up the index of the original array the loop is looking up for (var i = allLines.length-1; i >= 0; i--) { checkLine = allLines[i].split("____"); if (checkLine[0].length <= 1) { allLines.splice(i, 1); } } textline = allLines[allLines.length - 1].split("____"); document.getElementById('news1').innerHTML = textline[0]; document.getElementById('date1').innerHTML = textline[1]; textline = allLines[allLines.length - 2].split("____"); document.getElementById('news2').innerHTML = textline[0]; document.getElementById('date2').innerHTML = textline[1]; textline = allLines[allLines.length - 3].split("____"); document.getElementById('news3').innerHTML = textline[0]; document.getElementById('date3').innerHTML = textline[1]; } }); } // clicking on a line or image in the Hub Page deletes that IMG in the directory or text line from the News Lines file function deleteLine(Nr) { var answer = confirm("Delete News Line " + Nr + "?"); if (answer) { search = document.getElementById('news' + Nr).innerHTML + "____" + document.getElementById('date' + Nr).innerHTML; $.post('HubWeb_Deleter.php', {search}); } } </script> </head> <body> <div id="slideshow"> <div id="slideshowWindow"> <div class="slide"> <img src="Slideshow/banner01.jpg" /> </div><!--/slide--> <div class="slide"> <img src="Slideshow/banner02.jpg" /> </div><!--/slide--> <div class="slide"> <img src="Slideshow/banner03.jpg" /> </div><!--/slide--> </div><!--/slideshowWindow--> </div><!--/slideshow--> <div id="side"> <div id="sideclock1" onclick="window.location='HubWeb_StaffPage.php';"> <p id="date"></p> <p id="clock"></p> </div> <div id="sideclock2" onclick="window.location='HubWeb_StaffPage.php';"> <p id="AMPM"></p> <p id="period"></p> </div> </div> <!-- add current time and period number on side section, say if Student WiFi is ON? --> <div = id="bottom"> <div id="line1" onclick="deleteLine('1')"> <img src="Contents/GreenStar.svg" id="star1"> <marquee id="news1" scrollamount=5>News line 1</marquee> <p id="date1">01.01</p> </div> <div id="line2" onclick="deleteLine('2')"> <img src="Contents/GreenStar.svg" id="star2"> <marquee id="news2" scrollamount=5>News line 2</marquee> <p id="date2">02.02</p> </div> <div id="line3" onclick="deleteLine('3')"> <img src="Contents/GreenStar.svg" id="star3"> <marquee id="news3" scrollamount=5>News line 3</marquee> <p id="date3">03.03</p> </div> </div> </body></html> HubWeb_HubPage.php HubWeb_CSS.css
  25. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="js/jquery-1.9.0.min.js"></script> <script src="js/jquery.validate.min.js"></script> </head> <body> <form id="loginForm" method="post"> Enter Name<input type="text" name="txtname"><br /> Enter Email<input type="text" name="txtemail"><br /> Enter ######:<input type="radio" name="gender" value="male">male <input type="radio" name="gender" value="female">female<br> <input type="submit" value="Login" /> </form> <script> $(document).ready(function(){ $('#loginForm').validate({ rules:{ txtname:{ required:true, minlength:1, maxlength:40 }, txtemail:{ required:true, email:true }, gender:{ required:true, }, }, messages:{ txtname:{ required:"Name required", minlength:"Name at least 1 char long", maxlength:"Name max 40 char long" }, txtemail:{ required:"Email Required", email:"Invalid Emal" }, gender:{ required:"gender is required", } } }); }); </script> </body> </head> </html>
  • Create New...