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


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

Found 281 results

  1. 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
  2. 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?
  3. $(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(); } }); });
  4. 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>
  5. 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>
  6. 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
  7. 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
  8. 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 ; )
  9. 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.
  10. 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.
  11. 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.
  12. 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>
  13. 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?
  14. Hi everyone, inside PhpStorm, seem tag of frame has been strike, it might mean it is not support. I want to create like paginate data, but I just want to have page inside frame on page, so I can leave video on left, then other column can be change page by link. Anyone can help? Thanks, Gary
  15. sir/madam, I try to making a project that can "Allow only 3 items to add from one list to another" here IS MY CODE:- HTML CODE:- <!DOCTYPE html> <html> <head> <title>jQuery click UI</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style-click.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> <script src="click.js"></script> </head> <body> <h1>jQuery click UI</h1> <div id="left"> <h2>Available today</h2> <ul id="available"> <li id='2'>bananas</li> <li id='10'>strawberries</li> <li id='11'>mangoes</li> <li id='12'>raspberries</li> </ul> <div class="instructions" id="instructions-remove"> Click to remove fruits from available list </div> </div> <div id="right"> <h2>Out of stock</h2> <ul id="out-of-stock"> <li id='1'>apples</li> <li id='3'>grapes</li> <li id='4'>pomegranates</li> <li id='5'>pineapples</li> <li id='6'>coconuts</li> <li id='7'>oranges</li> <li id='8'>cherries</li> <li id='9'>kiwi fruit</li> </ul> <div class="instructions" id="instructions-add"> Click to add fruits to available list </div> </div> </html> JS CODE:- $(document).ready(function() { // begin document ready $('#instructions-add').hide(); $('#instructions-remove').hide(); $("ul#available").mouseover(function() { $('#instructions-remove').show(); $('#instructions-add').hide(); }); $("ul#out-of-stock").mouseover(function() { $('#instructions-add').show(); $('#instructions-remove').hide(); }); $(document).on('click', '#available li', function() { // begin left side click var id = $(this).attr('id'); var available = 'no'; $(this).remove(); $("#out-of-stock").append(this); $.ajax({ // begin ajax url: "ajax/click.ajax.php", type: "GET", data: { 'id': id, 'available' : available }, }); // end ajax }); // end left side click $(document).on('click', '#out-of-stock li', function() { // right side click var id = $(this).attr('id'); var available = 'yes'; $(this).remove(); $("#available").append(this); $.ajax({ // begin ajax url: "ajax/click.ajax.php", type: "GET", data: { 'id': id, 'available' : available }, }); // end ajax }); // end right side click $('li').on('mouseover',function() { $(this).css( { 'backgroundColor' : 'black', 'color' : 'white' } ); }).on('mouseout' ,function() { $('li').css( { 'backgroundColor' : '', 'color' : '' } ) }); }); // end document ready Problem occur:- If I click one by one item from "out of stock" list, then it's possible to add more than 3 even all items in the "Available today" list. What I Need:-I need that user can't add more than 3 items in the "Available today" list from "out of stock". PLEASE HELP ME !!!!! THANK YOU !!!!!!
  16. Greetings to all the users and administrators of w3scools invisionzone forum. I would love to get some constructive criticism on this web development tutorial site namely webtrickshome. It's been around for slightly more than a year but I redesigned it recently. Any feedback regarding the design and contents would be highly appreciated. Thankyou
  17. Hi everyone, I'm wondering it is possible to have few checkbox checked but count as one? For example, I put three checkbox on html, then checked two of three, but will count as one. Suppose I have group of checkbox, but considered count one from three checkbox checked. it will be very appreciate if you can help. Thanks, Gary
  18. BACKGROUND: The following piece of code is a little tricky, because it requires insight into more than what is shown. So, please allow me to show and tell, rather than only tell, and invite you to click on the menu option Sponsor Overview under the subheading Visitor Profile in the navigation bar of the Grammar Captive mainpage. Once arrived click on either of the two items entitled Visits per Number of Pages or Visits per Time Spent and then click again on the same item. What shows and what disappears are different. Now, I well understand why this occurs, but everything that I have tried to correct for it has failed. Indeed, I would like the toggle to effectuate a complete disappearance of both explanation and data, rather than just the explanation. The CODE $(".so_clarify, #visits_per_number_pages, #visits_per_duration").css('margin', '1em 0').hide(); $(".so_param").mouseenter(function() { $(this).css({"cursor":"pointer","font-weight": "800","color":"#ffffff"}); }); $(".so_param").click(function(event) { var index = $(".so_param").index(this); $(".so_clarify").eq(index).slideToggle(function() { if (index == 8) { $("#visits_per_number_pages").show(); } else if (index == 9) { $("#visits_per_duration").show(); } }); }); $(".so_param").mouseout(function() { $(this).css({"cursor":"none","font-weight": "normal","color":"#fadb9d"}); }); Roddy
  19. BACKGROUND: I have now tried a number of ways to make two cURL calls within the same Javascript (jQuery) routine. For each new way, I have discovered what I believe to be a reasonable explanation for my failure. For my most recent attempt, however, a good explanation is not forthcoming. To be sure, single AJAX calls with a single cURL call for each yield the desired results. Simply I cannot seem to combine these results simultaneously on the same page. The scenario given below, for example, returns the desired outcome for the second cURL call, but not the first. JAVASCRIPT: $.ajax({ url: '.../VisitsSummary.php', method: 'GET', data: {methodName : '_get', methodName : '_getSumVisitsLengthPretty'}, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, success: function(visitsSummary_data) { console.log(visitsSummary_data); var tv = visitsSummary_data.nb_visits; var uv = visitsSummary_data.nb_uniq_visitors; var visits_per_unique_visitor = Math.round(tv/uv * 10)/10; $('#so_total_visits').html(visitsSummary_data.nb_visits); $('#so_unique_visitors').html(visitsSummary_data.nb_uniq_visitors); $('#visits_per_visitor').html(visits_per_unique_visitor); $('#so_average_time_spent').html(visitsSummary_data.avg_time_on_site); } }); PHP: if (isset($_GET['methodName'])) { $method_name = $_GET['methodName']; if ($_GET['methodName'] == '_get') { $url = 'https://.../index.php?module=API&action=index&method=VisitsSummary.get&idSite=1&period=year&date=today&format=json&token_auth=&token_auth=...'; $curl_request = curl_init(); curl_setopt($curl_request, CURLOPT_URL, $url); curl_setopt($curl_request, CURLOPT_RETURNTRANSFER, false); curl_exec($curl_request); if(curl_errno($curl_request)) { echo 'Curl error: ' . curl_error($curl_request); } curl_close($curl_request); } if ($_GET['methodName'] == '_getSumVisitsLengthPretty') { $url = 'https://.../index.php?module=API&action=index&method=VisitsSummary.getSumVisitsLengthPretty&idSite=1&period=year&date=today&format=json&token_auth=&token_auth=...'; $curl_request = curl_init(); curl_setopt($curl_request, CURLOPT_URL, $url); curl_setopt($curl_request, CURLOPT_RETURNTRANSFER, false); curl_exec($curl_request); if(curl_errno($curl_request)) { echo 'Curl error: ' . curl_error($curl_request); } curl_close($curl_request); } } QUESTION: Can you find anything wrong with the above strategy? If so, what would you recommend to replace it? Roddy
  20. DILEMMA: Visitors to the mainpage of my website can fill the middle section of the page from the page's navigation bar in either of two ways. Both ways employ Javascript: one, copy a div already on the page into another div on the same page; and two, copy the contents of a div on a another page into same. What I would like to do now is to copy the contents of a div already on the page with a call from the contents of a div that was previously on another page. QUESTION: How does one get a div to replace its own content when the div whose contents needs to be replaced has been filled with content from another page? Roddy
  21. trying to learn .post method in jQuery - is there a way to pass a variable to the code to use in the 'data' argument of the function. The 'try it yourself' example from w3schools has the data hard-coded in, but I would like to use a variable that I got from a form, or something to do the post. I tried a few things but to no avail. Here is the code from the example: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("demo_test_post.asp", { name: "Donald Duck", city: "Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); }); </script> </head> <body> <button>Send an HTTP POST request to a page and get the result back</button> </body> </html> I tried this but it didn't work. I tried with and without the braces. How can you pass a variable to a jQuery method? should I use a global variable. please be explicit. Thanx <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var myName = "Donald Duck"; var myCity = "Duckburg"; var myData = "{name:" + myName + ", city:" + myCity + "}"; $.post("demo_test_post.asp", myData, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); }); </script> </head> <body> <button>Send an HTTP POST request to a page and get the result back</button> </body> </html>
  22. I have searched in vain for an answer to this problem, but I am getting no where. Here is the issue: I have a search form that works fine as a desktop application. On mobile devices there is a problem. If a user starts typing in the search input, and then taps one of the words that pops up in predictive text (such as on an iphone), this word then fills the input. The search form returns no matches because, as I have discovered, the only thing being submitted is what the user actually typed before tapping the predictive hint. For example, if they start typing Pennsylvania but only type "Pennsy" and then tap the suggestion, the only value in the input is "Pennsy," not the whole word. I have seen some suggestions: for example, setting the input type to 'password' prevents predictive suggestions (and thus requiring the user to type out the entire term), but this also triggers hiding the text submitted (as if it were a password). I have also seen some suggest that you could use setTimeout() before ajax submits the form to the server, but this did not work either and I am not quite sure of the logic behind this solution anyway. Is there a way for javascript / jquery to "read" the value of an input that the user filled by means of tapping predictive text? Thanks in advance' reveret
  23. The following script was found on StackOverflow. It is suppose to simulate a button click with the up-tick of an Enter key. $("#id_of_textbox").keyup(function(event) { if (event.keyCode === 13) { $("#id_of_button").click(); } }); Now, I am not using it for a textbox, but for a search box. In order to get it to work I have tried the following: Used the <form> element as the selector for the keyup() function. Used the <input> element of the search box as the selector for the keyup() function Entered the code in various places within my script including the html and the called javascript documents that make the search engine work. To no avail. Now, it is true that I have not been entirely methodological in my selection of HTML elements and code placement. Still, ss many times as I have tried, however, you would think that Lady Luck would be on my side. Any hints? Please advise. Roddy
  24. hey w3s... so i have this code: <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 class="font-weight-bold text-center">WORK</h2> <div class="border"></div> <br /> </div> </div> </div> <div class="container main_wrapper"> <section> <div class="container"> <div class="row" id="work-grid"> <?php $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC"; $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink)); if( mysqli_num_rows($result_1) > 0 ) { while( $row_1 = mysqli_fetch_array($result_1) ) { $video_id = $row_1['video_id']; $video_title = $row_1['video_title']; $video_link = $row_1['video_link']; $video_director = $row_1['video_director']; $video_text = $row_1['video_text']; ?> <div class="col-sm-4 col-xs-12 work_panels"> <div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>"> <div class="panel-thumbnail"> <a href="#" title="Video" class="thumb"> <img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo"> </a> </div> <div class="panel-body"> <p class="work-name"><?php echo $video_director; ?></p> <p class="work-video-text"><?php echo $video_text; ?></p> </div> </div> </div> <?php } } else { // hvis der ikke er EN række i udtrækket, vises en fejlbesked echo 'Ingen videoer at vise i nu.'; } ?> </div> </div> </section> <div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title customModal_2">Video Title 1</h3> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> <div class="modal-footer"> <h4 class="customModal_3">Video Title 2</h4> <p class="customModal_4"> Video in here. </p> <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>--> </div> </div> </div> </div><!-- //.modal-Youtube_1 --> </div> <script> $('[class^=Panel_ModalVideoID-]').click(function(event) { event.preventDefault(); // Step 1 - The Variables //----------------------------------------------- var e = $(this); // e = event of the function happening via class/id "class^=Panel_ModalVideoID-*" (working?) var modal = $('.customModal_1'); var modalTitle = $('.customModal_2'); var videoTitle = $('.customModal_3'); var videoEmbed = $('.customModal_4'); var modal_body = $('.modal-body'); var INSERTDATA_modalTitle; $('a.thumb').click(function() { INSERTDATA_modalTitle = $(this).Attr( 'title' ); }); //var INSERTDATA_modalTitle = e.$('a.thumb').Attr("title"); // working? // Step 2 - Clear different areas //----------------------------------------------- modal_body.empty(); // empty area // Step 3 - insert data into different areas //----------------------------------------------- $(modalTitle).html(INSERTDATA_modalTitle); // Step 4 - show the modal //----------------------------------------------- $(".customModal_1").modal({ show: true; }); }); </script> Currently i'm using bootstrap 4 and trying to make a modal appear. So far it is working BUT i am trying to edit the following inside of the modal: Modal title, and the 2 <p> items inside modal-footer for youtube embed and youtube title etc. All of the replacements at different areas should come from the "while loop" at the upper of the page coding with php. Can you help me somehow? Not sure what to do with js/jquery really, a little bit of a newbie... even after years, i still dont get much of it :/ Hoping you guys can help me out a bit. If more information is needed, please ask. Using jQuery 3.2.1, included ALL of the bootstrap 4 bundle etc, so i know that is not the problem here. Maybe it is the way i am using my JS/jQuery code. Thanks a lot. And ohh... the title should be from the "a.thumb -> title attribute", saying video... will edit it later with php so that it will be dynamic. Hope you can help. Thanks!
  25. FIXED IT! I placed my script a little lower on the document! Worked... no clue why tho :/
×
×
  • Create New...