Jump to content

Search the Community

Showing results for tags 'jquery'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Calendars

  • Community Calendar

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. How can I select all SPAN elements in current webpage which contain a property "foobar"? The assigned value is unimportant. So elements like the following should be matched: <span aaa="bbb" foobar="23452345" .....>...</span> I tried: $('span[foobar^=""]').remove(); but it didn't work
  2. I've decided to share my post from the JavaScript forum here in case this is the more appropriate place. It's involving MODALS with Bootstrap & JQuery and my question is below. Thank you.
  3. I'm trying to refactor this javascript from this : var modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementsByClassName("myImg"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } And this is my attempt but i am stuck : ( function( $ ) { var modal = $('#myModal'); var img = $('.myImg'); var modalImg = $('#img01'); var captionText = $("#caption"); $("img").click(function(){ modal.style.display = "block"; modalImg.src = $this.src; captionText.innerHTML = $this.alt; }); var span = $("close")[0]; $("span").click(function(){ modal.style.display = "none"; }); } ( jQuery ) );
  4. Hi, I am a beginner and I've only the basic knowledge of html and CSS. But now I want to learn Jquery language from basic to advance. Can any one please guide me how I can learn it in advance. Is there an w3schools official YouTube channel available from where I can learn it? And Also after my research I see that w3schools offering paid course: https://courses.w3schools.com/courses/jquery to learn JQuery language. Please any one can tell me is this a complete course from basic to advance or just here I can get only basic knowledge of JQuery language?
  5. Hi, I'm creating a search form that is appearing full screen when clicking on a "search" icon. The code I have for the HTML is : <!--SEARCH OVERLAY--> <div class="search-overlay"> <i class="close-search fas fa-times"></i> <form> <input type="search" id="search" name="search" class="searchbox" placeholder="Rechercher sur le site..."> </form> </div> and the JQuery // Search bar if($(".search-icon").click(function(){ $(".search-overlay").addClass("open-search"); $(".searchbox").focus(); })); if($(".close-search").click(function(){ $(".search-overlay").removeClass("open-search"); })); What I don't understand is that the .focus() is not working at all, but the rest of the code is correct. I tried with a console.log and it just seems to pass through this line like if it doesn't exist. I tried everything like setTimeOut, placing the focus in another function, etc. Thank you for your help
  6. Hi there, I was following this a tutorial about adding a page fade-in once the page has loaded. It is set up so it works even if javascript is disabled, which is ideal. https://www.abeautifulsite.net/a-clean-fade-in-effect-for-webpages However i am trying to add another class the snippet to the script tag that appears immediately after the opening <body> tag: <script>document.body.className += ' fade-out'; $(".wrap").addClass(" fade-out");</script> However I am getting the following error: "Uncaught ReferenceError: $ is not defined". I am assuming this is because I am not calling in jquery in the header? But why then does it work fine without my additional snippet? Maybe I am taking the wrong approach here, let me know if this could work. Thanks
  7. Newbie alert... I am an experienced Un*x sysadmin and programmer. However, JavaScript and its huge ecosystem can be overwhelming. My main target now is Node.js. I have been locating, downloading and installing a lot of packages: npm install this npm install that npm install the-other npm install one-more The input is always whole directories. I just found out that jQuery is very important, so I decided to install it. The problem is that in the official site they offer one single file. It is ASCII with the extension *.js https://jquery.com/download/ That doesn't feel right. A rather large system, contained in one text file? TIA, -Ramon F. Herrera JFK Numbers
  8. I have a problem with .load() of jquery, or use of frame; I need to load in a div a page that loads its data dynamically through javascript, in particular I have my html page which through a js in a function uses the .load of jquery: this is an example of my problem: <!doctype html> <html lang="it"> <head> <script defer class="sezioni"></script> <script src="assets/js/jquery.js"></script> <!--META--> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div#ese_div_book { position: absolute; width: 100px; height: 100px; background: midnightblue; } </style> </head> <body> <div id="ese_div_book" class="ese_button ese_quiz ese_colorBT2"> <img id="ese_book" class="myButton" src="assets/img/Bt_Book.svg"> </div> <div id="contenitore_libro" style="position: fixed;width: 100%;height:100%;top: 0%;left: 0%;z-index: 999999999;visibility: hidden;"> <iframe id="frame" src="" style="width: 100%;height: 100%;"> </iframe> <button id="button_book" class="ese_button ese_quiz ese_colorBT1 ese_norm" style="visibility: hidden;position: fixed;top: 95%;width: 5%;height: 5%;left: 95%;background-color: lightskyblue;"> <img id="ese_back" class="myButton" src="assets/img/menu/IndietroW.svg"> </button> </div> </body> <script> $("#ese_div_book").click(function() { $("#contenitore_libro").css("visibility", "visible"); $("#button_book").css("visibility", "visible"); // console.log("ARRIVA VALORE", _nQuest); $("#frame").attr("src", "../librohtml/index.html?id=" + _nQuest.Libro3 + "&=yes&lis=AB"); }); $("#button_book").click(function() { $(this).css("visibility", "hidden"); $("#contenitore_libro").css("visibility", "hidden"); return false }) </script> </html> with Frame not function correctly in Apple device; if I try to use the .load() of jquery not load the div sezioni that was a js loaded dinamically by <script defer class="sezioni"></script> and other file .js, Any ideas to load the page in a div with all his js??
  9. Hello Community! Here’s a conundrum… I have two elements that I need on a page that just won’t play nice with each other: a mega-menu (required for the main site navigation) and a simple mailchimp signup form (in the footer). See them both on this page here: https://cms.ucd.ie/geary2020/research/ The problem is that the mailchimp form (in the footer) won’t accept submissions unless the following line is removed: <script>var plugin_path = '/t4cms/';</script> This code is however is needed by the mega-menu, so I have to keep it there. If I remove the above line - then the Mailchimp form will accept submissions BUT the mega-menu is broken! I have tried reordering the sequence of the .js files - that didn’t work. Also, I have downloaded and stored locally the mailchimp js file: mc-validate-geary.js - so I can make any suggested edits directly in this file. I suspect the solution will be found by editing this file. Any advice much appreciated!
  10. Select the statement that is correct about Jquery Events: a) All the events are available for all the HTML elements. b) All Events are specially for a particular HTML Element. c) Some Events are available for all HTML elements d) Some events cannot be attached to any HTML element.
  11. hi everyone, i am basically new to this forum so i didn't really know where to post this question, basically what happened i made a site. on this site is a particular commenting system where i used php ajax on the jquery way, my teacher saw my website and wanted to test something so he left a comment with <b>exampe</b> and his comment turned out to be bold text. to me and the safety of my site it is a dangerous thing as peope are required to leave their email in the form (not shown in actual comment but saved in the db) he also said that with his knowlege he could use <script>alert(document.cookie)</script> to make me use his cookie to log in to phpmyadmin, esentially granting him acces to all my databases. now is my question "how can i use htmlentities() on ajax?" he suggested "$comment = htmlentities( $_POST['comment'] );"but since all of my fields are written like this: $commentId = isset($_POST['comment_id']) ? $_POST['comment_id'] : ""; $comment = isset($_POST['comment']) ? $_POST['comment'] : ""; $commentSenderName = isset($_POST['name']) ? $_POST['name'] : ""; $date = date('Y-m-d H:i:s'); there is no way i can figure out where to put it... these are my php files, take a loo if you wish, but i removed my db.php database password and replaced my database name in the form (for security reasons) (you may lso see comments.php as index.php since i already had index so i renamed it to something else comment-add.php comment-list.php comments.php comment-add.php comment-list.php comments.php db.php
  12. i want my code to be work as when i press arrowkey at checkbox 4, it should focus the submit button element in the next div. but now it is focusing the first checkbox.How to modify it? <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div> <input type="checkbox" autofocus/>1 <input type="checkbox" />2 <input type="checkbox" />3 <input type="checkbox" />4 <br/> <input type="button" value="mycheckbox"> <input type="button" value="mycheckbox"> </div> <script> $(document).ready(function () { $('input').keydown(function (event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == 13) { clickCheckBox(this); } if (keycode == 39) { if($(this).nextAll('input').length === 0) { $('input:enabled:first').focus();// first textbox } else { $(this).nextAll('input:first').focus(); } } if (keycode ==37) { if($(this).prevAll('input').length === 0) { $('input:enabled:last').focus(); } else $(this).prevAll('input:first').focus(); } event.stopPropagation(); }); }); function clickCheckBox(box) { var $box = $(box); $box.prop('checked',!$box.prop('checked')); } </script> </body> </html>
  13. Could you please run the following html test case, to help figure out how to make bootstrap 4 tooltip go away when a button is disabled while the tooltip is over the button? All the details concerning my question are in the source code for display when the HTML is displayed. Any help appreciated. Thanks <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Tooltip Persists, Looks Terrible</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Bootstrap 4 Tooltip Persists, Looks Terrible</h3> <br> "Other button disabled" scenario works fine. <br> First, hover over buttons. Look at tooltips while hovering. <br> Then, click button A to disable button B. Works fine: <br> - Button B is disabled, and no tooltip. <br> - Tooltip still works correctly on button A. <br> <br> <button type="button" id="button_a" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button B" onclick='change_button ("button_b", true);'> Button A </button> <button type="button" id="button_b" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disabled by Button A"> Button B </button> <br> <br> <hr> <br> "Same button disabled" scenario fails. <br> First, hover over Button C. Look at the tooltip. <br> Then, click button C to disable button C. Messes up: <br> - Button C is disabled, so that part is OK. <br> - But Button C tooltip persists, looks terrible. <br> <br> <button type="button" id="button_c" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button C" onclick='change_button ("button_c", true);'> Button C </button> <button type="button" id="button_d" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Enables Button C" onclick='change_button ("button_c", false);'> Button D </button> <br> <br> <hr> <br> So if a button is disabled while the cursor is hovering over it, the tooltip persists. <strong> Could you please explain how to make tooltip go away when Button C is disabled? </strong> I would prefer if tooltip went away when Button C disabled, since that is default behavior of bootstrap disabled buttons. And disabled button may later get enabled again, so I do not want to delete title attribute. Basically I want bootstrap to behave the same way as when Button B is disabled. I have looked around and cannot find how to fix this problem, and have tried various things, with no success. There are real instances where a button carries out an action, and then the button needs to be disabled, so I appreciate the help. Thanks </div> <script> $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();}); function change_button (button_id, bool_val) { var button_obj = document.getElementById (button_id); button_obj.disabled = bool_val; } </script> </body> </html>
  14. Hey there, the TiYs on the jQuery event_load.asp are broken since you're using jQuery >= 3.0. Note from jQuery: This API has been removed in jQuery 3.0; please use .on( "load", handler ) instead of .load( handler ) and .trigger( "load" ) instead of .load(). -- Have a nice day
  15. hello all i am trying to use 'keydown' function to move through html rows. but i could not succeed. here is what i tried-- $("body").on("keyup", function(e) { if ($("#mid").find(".maintable tr[data-selected='Y']").length == 0) { $("#mid").find(".maintable tr").first().data("selected", 'Y').addClass("thisrow"); } else { if (e.which === 40) { $("#mid").find(".maintable tr[data-selected='Y']").next().data("selected", 'Y').addClass("thisrow"); $("#mid").find(".maintable tr[data-selected='Y']").first().data("selected", 'N').removeClass("thisrow"); } else if (e.which === 38) { $("#mid").find(".maintable tr[data-selected='Y']").prev().data("selected", 'Y').addClass("thisrow"); $("#mid").find(".maintable tr[data-selected='Y']").last().data("selected", 'N').removeClass("thisrow"); } } }) in the above code, '#mid' is a div that holds data retrieved from jQuery.ajax function. below is the backend code data from which is attached to the '#mid' div. $data = "<table class='maintable'>"; $sn = 0; while ($r = $q->fetch_object()) { $sn++; $name = $r->name; $aid = $r->aid; $ac_id = $r->ac_id; $ob = $r->ob; $data .= " <tr data-target='acregister.php?aid=$aid&m=e' data-selected='N'> <td>$name</td> <td style='width: 150px;'>$ac_id</td> <td style='width: 150px;'>$ob</td> </tr>"; } $data .= "</table>"; echo $data; here i want to use up and down arrows to move through the rows retrieved from ajax function. on the rows i've attached 'data-selected' value to know which row is selected. and on each keydown function i want change the 'data-selected' value of next row to 'Y' and change its value to 'N' for the previous one. the above code worked only once. it changed the value for new row but didnot change the value for the previous one and hence when i press down arrow, it selects first row but does not move to next row on another down arrow press. please guide me, what i missed?
  16. $(function() { $("#demo").keyup(function(){ var len = $("#demo").val(); if(len.length>8){ var el = $("<p></p>").html(""); $("#holder").append(el); //$("p").addClass("alert alert-warning"); var x = $("<span></span>").html(" Too long"); $("p").append(x); $("span").addClass("glyphicon glyphicon-alert"); stop(); } else if(len.length<=8){ $("#holder p").children().remove(); } }); });
  17. Hi, I’m having a problem with the implementation of google maps within my phonegap build. I have this problem in the browser on my pc and on the Phone itself. When I have the code in isolation it works and shows a map but when I have it within the rest of the code nothing seem te happen. Please help me with this. <!doctype html> <html> <head> <title>Huisartspraktijk app</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- /jquery links en scripts. NIET VERWIJDEREN!! --> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.4.5.js"></script> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery-ui.js"></script> <style> /* css styes for the maps */ #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style> <!-- Script for the geolocation, Stack Overflow --> <script> $(document).ready(function () { document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //onDeviceReaddy initMap(); //Google map navigator.geolocation.getCurrentPosition(displayAndWatch, locError); } // user Current Position function displayAndWatch(position) { setCurrentPosition(position); watchCurrentPosition(); } function setCurrentPosition(pos) { var image = 'img/ic_CurrentLocationmap.png'; currentPositionMarker = new google.maps.Marker({ icon: image, map: map, position: new google.maps.LatLng( pos.coords.latitude, pos.coords.longitude ), title: "Current Location" }); map.panTo(new google.maps.LatLng( pos.coords.latitude, pos.coords.longitude )); } function watchCurrentPosition() { var positionTimer = navigator.geolocation.watchPosition( function (position) { setMarkerPosition( currentPositionMarker, position ); }); } function setMarkerPosition(marker, position) { marker.setPosition( new google.maps.LatLng( position.coords.latitude, position.coords.longitude) ); var center = { lat: position.coords.latitude, lng: position.coords.longitude } map.setCenter(center); } function locError(error) { // the current position could not be located } }); </script> </head> <body> <!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps --> <div data-role="page" id="mobiel"> <!-- /header --> <div data-role="header"> <h1>SPOED</h1> <div data-role="navbar"> <ul> <li><a href="#main">Mainpage</a></li> <li><a href="#chat">Chat met de arts</a></li> <li><a href="#consult">Consultaanvraag</a></li> <li><a href="#doorverwijzing">Doorverwijzing</a></li> <li><a href="#bloedonderzoek">Bloedonderzoek</a></li> <li><a href="#berichten">Berichten</a></li> <li><a href="#epd">EPD</a></li> <li><a href="#medicijnen">Mijn medicijnen</a></li> </ul> </div> </div> <!-- /content --> <div role="main" class="ui-content" align="center"> <h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2> <div style="background-color: lightyellow"> <br> <h3> Huisartsenpraktijk Gideonse en Boekhout </h3> <p>Meteorenstraat 4<br> 2024 RK, Haarlem</p> <p>Telefoon<br> 023 - 525 36 00 </p> <p>Keuze 1: Spoed <br> Keuze 2: Herhaalrecepten <br> Keuze 3: Assistentie</p> <br> <!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. --> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap" async defer></script> </div> <a href="#spoedEisend" class="ui-btn ui-shadow ui-corner-all">Terug</a> </div> <!-- /footer --> <div data-role="footer"> <h2>&copy; 2019 Huisartsapp</h2> </div> </div><!-- /page --> </body> </html>
  18. Hei Guys, w3schools is so awesome. I learned a lot About webdesign but now I've been comming to an end. On my Webpage I got a Nav-bar with jquery-buttons that hide/Show divs. So here Comes my Question. Is there any solution to save the visibility Status of These divs when user adds my page to bookmarks? Is there any solution to make last Status of divs available via browser button BACK? I was reading About this Problems some time ago but was not able to figure out were. I'm really open to any solution. Even a complete redesign of the page is possible if the solution is better. Thanks a lot. Manuel
  19. The example of the AutoComplete Textbox on W3Schools does not work when as entry has an apostrophe in it. It populates the textbox with the characters before the apostrophe but not after. This is a bug. How do you fix this issue? To reproduce this issue, go to the following link. https://www.w3schools.com/howto/howto_js_autocomplete.asp Type in the text box the letter T and try to select "Timor L'Este Thanks
  20. Hi every one, My name is Antoine and I am trying to get all the pictures from a Facebook Page and Instagram Page. I've tried to make a jquery request like $('exemple').load('https://www.facebook.com/pg/stuffedfoxes/photos/ #id'); But it's not working because i don't have any direct id (embedded on the img container). My goal is to get all the 'http' directory of the images and to put them on my web page with my own css code. /* I don't want to use any API*/ Is it possible to load the entire page and filter all the information i need and erased all the others ? /* I'm open to all the solutions excepted if they are using API*/ THANKS PS( sorry for my miss takes im FR ; )
  21. Hello Everyone, I'm a beginner in CSS, HTML and Java Script/jQuery. I actually do not code, but i found a solutiuon for my problem with a simple CSS animation. I did not know, that the @keyframes animation still has some difficult stuff. I know they are hardcoded, but i need the help of jquery for dynamic change of the keyframes-selector. I have searched several threads for my problem. Some do sound similar to my, but i just can not apply it into my code, it does not work. I am trying to code dynamic keyframes with jquery. I got the following code below in a code snippet. It does not apply the animation yet. HTML code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <h1>My Code</h1> <hr> <form> <span style="display:inline-block; height: 20px;"></span> <b><font size="4">amplitude:</font></b><br> <input type="range" id="amp" name="amplitude" oninput="myFunction2()" placeholder="0" min="156" max="484" value="320" step="1"> <br> <span style="display:inline-block; height:20px;"></span> <b><font size="4">phase:</font></b><br> <input type="range" id="pha" oninput="myFunction()" name="phase" min="181" max="681" value="181" step="1"> <br> <span style="display:inline-block; height:20px;"></span> <b><font size="4">phase2:</font></b><br> <input type="range" id="pha2" oninput="myFunction3()" name="phase2" min="681" max="1181" value="781" step="1"> </form> <p id="print1"></p> <p id="print2"></p> <p id="print3"></p> <p id="print4"></p> <input class="toggle" type="checkbox"> <div id="up-triangle1"></div> <div id="down-triangle1"></div> <div id="rectangle1"></div> <div class="arrow21"></div> <div class="arrow22"></div> </body> CSS code: body {background-color: wight;} h1 {color: black; text-align: center; font-family: LM Roman 12;} p {font-family: LM Roman 12; font-size: 20px;} .toggle{ position: absolute; margin: -120px 150px; width: 300px; color: white; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.5); font-size: 2.5em; cursor: pointer; z-index: 5; } .toggle:after { position: absolute; display: block; padding: 10px 0; width: 300px; border: 1px solid #76011b; border-radius: 8px; background: green; content: "Start"; z-index: 5; } .toggle:checked:after { background: red; content: "Stop"; } .toggle:checked ~ #up-triangle1 { -webkit-animation-name: up-triangle; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-name: up-triangle; animation-duration: 2s; animation-direction: forward; animation-iteration-count: 100; animation-timing-function: linear; } .toggle:checked ~ #down-triangle1 { -webkit-animation-name: down-triangle; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-name: down-triangle; animation-duration: 2s; animation-direction: forward; animation-iteration-count: 100; animation-timing-function: linear; } .toggle:checked ~ #rectangle1 { -webkit-animation-name: rectangle; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-name: rectangle; animation-duration: 2s; animation-direction: forward; animation-iteration-count: 100; animation-timing-function: linear; } .toggle:checked ~ .arrow21 { -webkit-animation-name: arrow21; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-name: arrow21; animation-duration: 2s; animation-direction: normal; animation-iteration-count: 100; animation-timing-function: linear; } .toggle:checked ~ .arrow22 { -webkit-animation-name: arrow22; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-name: arrow22; animation-duration: 2s; animation-direction: reverse; animation-iteration-count: 100; animation-timing-function: linear; } #up-triangle1 { position: absolute; top: 320px; left: 168.5px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 45px solid #01ADAB; } @keyframes up-triangle { 0% {top:320px;} 25% {top:420px;} 75% {top:220px;} 100% {top:320px;} } #down-triangle1 { position: absolute; top: 607px; left: 168.5px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 45px solid #01ADAB; } @keyframes down-triangle { 0% {top:607px;} 25% {top:707px;} 75% {top:507px;} 100% {top:607px;} } #rectangle1 { position: absolute; top: 365px; left: 181px; height: 242px; width: 5px; background-color: #01ADAB; } @keyframes rectangle { 0% {top:365px;} 25% {top:465px;} 75% {top:265px;} 100% {top:365px;} } .arrow21 { position: absolute; top: 540px; left: 181px; height: 332px; /* 332 */ width: 5px; background-color: #80D0CF; } @keyframes arrow21 { 0% {top:320px;} 25% {top:420px;} 75% {top:220px;} 100% {top:320px;} } .arrow22 { position: absolute; top: 320px; left: 681px; height: 332px; width: 5px; background-color: #80D0CF; } @keyframes arrow22 { 0% {top:320px;} 25% {top:420px;} 75% {top:220px;} 100% {top:320px;} } #print1 { position: absolute; top: 111px; left: 182px; width: 50px; height: 10px; } #print2 { position: absolute; top: 58px; left: 110px; width: 50px; height: 10px; } #print3 { position: absolute; top: 151px; left: 182px; width: 50px; height: 10px; } #print4 { position: absolute; top: 170px; left: 200px; width: 50px; height: 10px; } Java/jQuery code: var supportedFlag = $.keyframe.isSupported(); $.keyframe.debug = true; var start = temp; var start_100 = temp + 100; var start_200 = start_100 + 100; <script type='text/javascript'> $(document).ready(function(){ $('.arrow21').resetKeyframe(function() { switch (animation) { case 'normal': $('.arrow21').animate({ name: 'arrow21-move', '0%': start, '25%': start_100, '75%': start_200;, '100%': start }); }); }); function play(animation) { $('.arrow21').playKeyframe({ switch (animation) { if document.getElementById("pha").value < 180 then case 'normal': name: 'arrow21-move', duration: "4s", timingFunction: 'linear', iterationCount: '100', direction: 'normal', fillMode: 'forwards', }); break; else case 'reverse': $('.arrow21').playKeyframe({ name: 'arrow21-move', duration: "4s", timingFunction: 'linear', iterationCount: '100', direction: 'reverse', fillMode: 'forwards', }); function pause() { $('.arrow21').pauseKeyframe(); } function resume() { $('.arrow21').resumeKeyframe(); } /* phase */ function myFunction() { x = parseInt(document.getElementById("pha").value); document.getElementsByClassName('arrow21')[0].style.left = x; document.getElementsByClassName('arrow21')[0].style.top = 460 + (80 * Math.sin(0.0111 * (x-20))); temp = 460 + (80 * Math.sin(0.0111 * (x-20))); document.getElementById("print1").innerHTML = Math.round((x - 181) / 2.78); document.getElementById("print4").innerHTML = 460 + (80 * Math.sin(0.0111 * (x-20))); } /* amplitude */ function myFunction2() { y = parseInt(document.getElementById("amp").value); document.getElementsByClassName('arrow21')[0].style.height = y; document.getElementById("print2").innerHTML = y; document.getElementsByClassName('arrow22')[0].style.height = y; document.getElementById("ball").style.top = y + 100; } /* phase2 */ function myFunction3() { z = parseInt(document.getElementById("pha2").value); document.getElementsByClassName('arrow22')[0].style.left = z; document.getElementById("print3").innerHTML = Math.round((z - 181) / 2.78);; } The animation with the Start Button (checkbox) works fine for me. This should also be the resume button to continue the animation, if it once started. The shapes are moving in a proper way. My Problem is, i do not kwow how can i get the current value from amplitude and apply it as a start condition to the shape. It is a dynamic value because of the range slider. This value changes the top position of the shape. The animation must begin from this current value shown at print1. So if you change the value, the animation should change either and start from the same value where the range slider is. I need an updated animation, so if the animation is running and the amplitude is changed, it should be directly updated. (or after clicking start/stop) This should be possible for each value you set at the range. Also the animation should change from normal to reverse at the edge of 180 from phase range. How can i achieve this? I tried already something, maybe it just have to be slightly modified. Thanks in advance.
  22. I have an autocomplete() function connected to a MYSQL database. The jquery is completely run of the mill: $(function() { $(".choose_venue").autocomplete({ source: "list_venues.php", minLength: 1 }); }); ...and if I manually add a query such as "list_venues.php?term=Ku" onto the URL of list_venues.php, then that page gives a appropriate response (such as the following): [{"name":"Fonderie Kugler"},{"name":"Kulturhaus Helferei"},{"name":"Kunstraum Walcheturm"}]So, a simple `input` such as the following *should* be working: <input type="text" style="width:270px;" class="choose_venue"/> However, the output I get is a window containing no text, but just a number of faint lines. I first thought that this might be something in my CSS, but the problem persists even when ALL css modifications have been removed. My next thought was that it might be a browser issue (I use Safari), but Chrome behaves exactly the same way. The only other idea I had was that the jquery files I was calling were out of date or that there was some other problem, but I tried multiple links and I always get the same result. As of my most recent attempts I am linking to the following files: <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> It appears that the number of these grey lines corresponds to the number of text values that should be returned. But beyond that, I have no idea what is causing this.
  23. I'm sure that there is probably a simple answer to my question but I haven't been able to find it. I have a php web site that I've built for a local community chorus. Its primary purpose is to provide access to mp3 rehearsal files. For this purpose, I built a html5 audio player that works well in IE11, Firefox, Chrome and Safari. In order to limit access to my sites coding, I'm using an axis call to another php file to gather data from an underlying SQL database to build and insert main page content. In this manner, a ctrl-u of the main page will not show the underlying code. During development, my process has been to first build a part in the main web page until I get it working and then transfer the code to my axis call page. This has worked immensely well until now. The last part of this effort was to build the actual audio player, get it working and transfer it to the axis call page. It worked well when the content was on the main page. However, when I transferred the content to the axis call page, those parts of the player operated by jquery functions stopped working. Parts of the player operated by ordinary javascript functions continue to work just fine. Only those parts operated by jquery functions stopped working. My question is why have the jquery functions stopped working while the javascript functions continue to work just fine? Specifically, the jquery functions that have stopped working dynamically change the underlying cascading style sheets (css) for a number of elements that show loading progress, playing progress and playbackRate. They do this by dynamically adjusting the width of each progress bar based upon the amount loaded, played and the playbackRate. I've looked closely at the results coming back from the axis call and the only differences are: Double quotes have been replaced with single quotes; Single quotes nested inside of double quotes have been replaced with "&quot;" (These nested quotes are not used in the affected elements and the elements they are used in seem to be working just fine.; and The returned insert is nested within a <div> not normally used in the main web page. I should add that I've tested the main page code with this nested <div> and found that the application worked just fine. For some reason, the jquery functions are unable to access and change the underlying css when the elements affected are inserted from an axis call but not when they are directly on the main web page. I'd share some code but there doesn't seem to be any way to do that in this forum.
  24. Hello, i am currently building something that uses this example below in order to filter names, hiding everything that is not being searched into the search bar. My issue is that the JQuery hides the Table Heads, instead of only hiding the none related names to the search. https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filters_table I basically copied pasted the example there, with the difference that I have 3 different tables, they all filter correctly. The only issue is that it also hides the TH. What can i do to stop it form hiding the THs (Room, Sillas, Videos)? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="mystyle2.css"> <link rel="icon" href="favicon.png" /> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> <title>Room Locator CRSSC</title> <!-- Creado por Adrian Velez Salas QA Dept - Octubre 2018 --> </head> <body> <!-- alerta para mancos y ciegos --> <div class="row"> <div class="col-lg-12"> <div class="alert alert-info alert-dismissible"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> <strong>Importante:</strong> Escribe abajo el nombre del room que buscas. Da click en el texto para ver el mapa. </div> </div> </div> <!-- el header/navbar aqui abajo --> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-body">Room Locator CRSSC <input id="myInput" type="text" placeholder="Search.."></div> </div> </div> </div> </div> <!-- Identifica el piso (Piso 1) --> <!-- <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-body">Piso 1 <input id="myInput" type="text" placeholder="Search.."></div> </div> </div> </div> --> <!-- inicia el grid de 3: Edificio 1, 2, y 3 - Piso 1 --> <!-- Columna Edificio A --> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio A</div> <div class="panel-body"> <!-- Columna Piso 1 Edificio A --> <div class="well">Piso 1 </div> <div class="container"> <!-- Tabla Piso 1 Edificio A --> <table class="table table-striped" id="myTable"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Los Quetzales</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Poás</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Isla Uvita</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Irazú</td> <td>7</td> <td>Yes</td> </tr> <tr> <td>Cahuita</td> <td>7</td> <td>Yes</td> </tr> <tr> <td>Chirripó</td> <td>12</td> <td>Yes</td> </tr> <tr> <td>T. Room A</td> <td>15</td> <td>Yes</td> </tr> <tr> <td>T. Room B</td> <td>15</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- Columna Edificio B --> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio B</div> <div class="panel-body"> <!-- Columna Piso 1 Edificio B --> <div class="well">Piso 1</div> <div class="container"> <!-- Tabla Piso 1 Edificio B --> <table class="table table-striped" id="myTable"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Carara</td> <td>4</td> <td>No</td> </tr> <tr> <td>Turrialba</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Arenal</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Braulio Carrillo</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Cabo Blanco</td> <td>5</td> <td>Yes</td> </tr> <tr> <td>Las Baulas</td> <td>5</td> <td>Yes</td> </tr> <tr> <td>Corcovado</td> <td>7</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- Columna Edificio C --> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio C</div> <div class="panel-body"> <!-- Columna Piso 1 Edificio C --> <div class="well">Piso 1</div> <div class="container"> <!-- Tabla Piso 1 Edificio C --> <table class="table table-striped" id="myTable"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Guayabo</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Monteverde</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Ostional</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Training Room D</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Training Room E</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Tortuguero</td> <td>12</td> <td>Yes</td> </tr> <tr> <td>Training Room E</td> <td>18</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- Identifica el piso (Piso 2) --> <!-- <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-body">Piso 2</div> </div> </div> </div> --> <!-- inicia el grid de 3: Edificio 1, 2, y 3 - Piso 1 --> <div class="row"> <div class="col-lg-12"> </div> </div> <!-- Columna Edificio A --> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio A</div> <div class="panel-body"> <!-- Columna Piso 1 Edificio A --> <div class="well">Piso 2</div> <div class="container"> <!-- Tabla Piso 1 Edificio A --> <table class="table table-striped" > <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Cahuita</td> <td>6</td> <td>Yes</td> </tr> <tr> <td>Irazu</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Corcovado</td> <td>8</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- Columna Edificio B --> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio B</div> <div class="panel-body"> <!-- Columna Piso 2 Edificio B --> <div class="well">Piso 2</div> <div class="container"> <!-- Tabla Piso 1 Edificio B --> <table class="table table-striped"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Cahuita</td> <td>6</td> <td>Yes</td> </tr> <tr> <td>Irazu</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Corcovado</td> <td>8</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- Columna Edificio C --> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio C</div> <div class="panel-body"> <!-- Columna Piso 2 Edificio C --> <div class="well">Piso 2</div> <div class="container"> <!-- Tabla Piso 2 Edificio C --> <table class="table table-striped" id="myTable3"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Cahuita</td> <td>6</td> <td>Yes</td> </tr> <tr> <td>Irazu</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Corcovado</td> <td>8</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!-- JS para el search bar --> </body> </html>
  25. I would like to call the jquery text() method with a string argument that includes the HTML character entity for the copyright symbol (&copy;). I've tried numerous variations of the following theme: $('#copyright').text('&copy; ' + date.getFullYear() + ' John Doe'); So far, nothing I've tried has produced the desired result. Specifically, the HTML "& copy;" entity is not getting translated into the copyright symbol. Is it possible to pass an HTML character entity in this way?
×
×
  • Create New...