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 286 results

  1. 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!
  2. 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??
  3. 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.
  4. 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
  5. 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>
  6. 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
  7. 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?
  8. $(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(); } }); });
  9. 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>
  10. 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>
  11. 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
  12. 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
  13. 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 ; )
  14. 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.
  15. 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.
  16. 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>
  17. 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.
  18. 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?
  19. 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
  20. 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 !!!!!!
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  • Create New...