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

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

  1. 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.
  2. 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>
  3. 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?
  4. Sigmahokies

    Frame changing by link

    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
  5. 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 !!!!!!
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. Gilbert

    passing variables in jQuery

    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>
  12. 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
  13. 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
  14. 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!
  15. rootKID

    show and hide next element

    FIXED IT! I placed my script a little lower on the document! Worked... no clue why tho :/
  16. iwato

    Failure to Transfer Focus

    The PROBLEM: The problem can be observed on the internet at overview.html. After the page opens: Find the words Weekly Podcasts in the page's navigation bar and click on them. After the page opens find the Seven Gates subscription form. Find the select control called Select a Language and click on it. Scroll to the bottom of the list until you arrive at the Not found? option and click where it says Click and enter! If the focus transfers to the newly opened window, then you can see something that I cannot. This failure to transfer focus is the problem. QUESTION: Why does the following code fail to realize the aforesaid mentioned transfer of the focus from the window containing the phrase Click and enter! to the newly opened, blank window? In effect, users cannot enter a missing language without first placing the cursor into the newly opened window. They cannot simply being typing after they click on the words Click and enter!. Alas. HTML <div id='pc_language_options' style='clear:both;'> <label for='pc_tongue'>Native Tongue:<span class="formlabel">*</span></label> <span class="rightfloat"> <select id="pc_tongue" name="language" style="width:auto;"> <option selected value="0">Select Language</option> ... <optgroup label='oceania'> <option value=mi>Maori</option> <option value=haw>Hawaiian</option> <option value=sm>Samoan</option> </optgroup> <optgroup label='Not found?'> <option id="not_found" value='other_tongue'>Click and enter!</option> </optgroup> </select> </span> </div><!-- end div#pc_language_options --> <div id='pc_other' style='margin-top:0.8em;'> <span class="rightfloat"><input id='pc_other_input' type='text' name='other' value=''></span> </div><!-- end div#pc_other --> <label id="pc_tongue_error" class="error" for="pc_tongue">This field is required.</label> JAVASCRIPT $('#pc_other').hide(); $('#pc_tongue').change(function() { if ($('#pc_tongue').val() == 'other_tongue') { $('#pc_other').show().focus(); } else { $('#pc_other').hide().focusout(function(){ $("label#pc_tongue_error").hide(); }); } }); By the way, this is hardly where my experimentation stopped. I have tried many ways using different combinations of the show(), hide(), focus(), focusin(), blur(), and focusout() functions -- and these, both with and without callback functions. Unfortunately, to no avail. I have learned, in effect, many different ways to mess up what already works, but I simply cannot get it to work with the desire enhancement -- a transfer of focus. Roddy
  17. iwato

    Is It a Case of Bubbling?

    UNDERSTANDING THE PROBLEM: Probably the best way to understand the problem that the following piece of code produces is to observe the problem in action. Please do the following: Open to the Grammar Captive podcast_hostpage.php. Look for the following path in the navigation bar on your left: Podcast Archives/Concept/Podcast Index ... Click on the words Podcast Index ... Run your mouse over the list stopping at various places within the list until the following effect is produced. An unending back and forth opening and closing of the <li> elements of a particular <ul> element. Caution: only the first three <li> elements are active. The RELEVANT CODE $("#main").html(concept_var); $("#main").find('.cat_list').children().hide(); $("#main").find('.cat_list').each(function(){ $(this).hover(function(){ $(this).children().show(400); $(this).find('li').mouseenter(function(){ $(this).css('cursor','pointer'); }).click(function(){ ... }); }); }, function(){ $(this).children().hide(400); } ); }); QUESTION: How does one insure that one list is closed before another is open, and that no two lists or sublists is open at the same time" Roddy
  18. QUESTION: What is the best way to trigger a script stored in a fetched file. BACKGROUND: I send a query string via an HTTPRequest to a file that upon confirmation loads a script containing AJAX calls. I want to know the best way to get the AJAX calls to run when the file in which they are contained is loaded into the file that contains the HTTPRequest. PROPOSAL: Someone on the internet suggested that the code be placed in an anonymous function that is triggered with the ( ) operator. //data.js function() { code to trigger } $.getScript('data.js', function(data) { (); } Does this make sense? What would you recommend? Roddy
  19. im editting a javascript of an audio player for HTML5, and it doesnt have any shuffle option, i wanted to add it manually and be activated by default. In the code i show, i show the functions that plays o passes to the next song, so you can see the function names im using. im actually studying web design (basic level) and i havent seen javascript yet, so i understand so basic how it works, so i can edit a few things from a copied source. I obviously googled what im asking here, but i couldnt find any answer that i can understand, or make it work, just found some stuff that make things harder, using strings in the names or things like that to shuffle the songs, adding a lot of (i think) unnecesary code. I need a function that skips a song a random number of times, or such. but i dont know how to do it Code: function playAudio() { song.play(); tracker.slider("option", "max", song.duration); $('.play').addClass('hidden'); $('.pause').addClass('visible'); } function stopAudio() { song.pause(); $('.play').removeClass('hidden'); $('.pause').removeClass('visible'); } // play click $('.play').click(function (e) { e.preventDefault(); playAudio(); }); // forward click $('.fwd').click(function (e) { e.preventDefault(); stopAudio(); var next = $('.playlist li.active').next(); if (next.length == 0) { next = $('.playlist li:first-child'); } initAudio(next); }); //autoplay window.onload = function(e) { playAudio(); };
  20. Please consider the following code and see if you can find anything wrong. The appended <link> does not appear to register the information contained in the stylesheet. You can observe the failure by clicking on the menu item Weekly Podcasts under Products in the page's navigation bar (left column) and then passing your cursor across the blank area between the subtitle "Weekly Podcast Host Page" at https://www.grammarcaptive.com/overview.html $("#podcasts").mouseover(function() { $(this).css({"cursor": "pointer", "font-weight":"800"}); }) .click(function() { $("#main").load("podcast_filler.html #podcasts_div"); $("<link/>", { rel: "stylesheet", type: "text/css", href: "_utilities/css/podcast_filler.css" }).appendTo("head"); $.ajax({ url: './_utilities/php/most_recent_podcast.php', // context: '#main', dataType: 'JSON', success: function(jsonData) { $.each(jsonData, function(key, object) { var podcast_number = jsonData.podcast_no_item; var podcast_title = jsonData.item_title; var podcast_desc = jsonData.item_description; var podcast_guid = jsonData.item_guid; var podcast_pubdate = jsonData.item_pubdate; $('#main span#pc_title').html(podcast_title); $('#main span#pc_desc').html(podcast_desc); $('#main span#pc_num').html(podcast_number); $('#main span#pc_pubdate').html(podcast_pubdate); var click_listen = 'podcast_hostpage.php?hash=' + podcast_guid + '&podcast_no=' + podcast_number; $('#pc_click_listen').attr('href', click_listen); }); } }); }) .mouseup(function() { $(this).css({"color": "#fadb9d","font-weight": "normal"}); $('body, html').animate({scrollTop: $('#main').offset().top},800); }); Roddy
  21. I have a process that runs every 30 seconds and i want my script to check if it is finished. this way my user doesn't have to wait an arbitrary 30 seconds if the request is submitted closer to the 30 second mark (5 seconds to process instead of the max 30). I tried a while loop and sending $.post within it but from my console logging it doesn't appear to process the while loop as intended var iii = 1; while(iii < 30){ console.log("Checking rcon queue for " + characterID + " (" + iii + ")"); //Code to wait 1 second before continuing. var start = new Date().getTime(); var end = start; while(end < start + 1000) { end = new Date().getTime(); } //Code to $.post to check the the queue is cleared $.post('scripts/rcon_queue.php', {cID: characterID}, function(response){ if(response == "1"){ console.log("Queue is not cleared."); } else { console.log("Queue is clear."); iii = 30; } }); iii++; } console.log("Loading info for character: " + characterID); Now i would expect this to end the while loop response is anything but "1". Which happened after 7 attempts in my most recent test. But this is not happening:
  22. I am trying to build a basic tool to display someones congress representative via zipcode. The API that I am trying to use is offered for free via: https://whoismyrepresentative.com The link to get the data via zipcode is: https://whoismyrepresentative.com/getall_mems.php?zip=31023 It can also be formatted for json like this: https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json I have read a ton of articles on how to display this data but the trouble I am having is getting the data to show up at all. My first attempt was based off w3schools example. When the button is clicked it should display the result in the empty div but when I replace the URL, it does not display. When you visit the URL directly the data is there. My JavaScript knowledge is fairly low so I will go line by line and maybe I am just misunderstanding something. $(document).ready(function(){ Gets the document ready for some jquery $("button").click(function(){ Sets up click function on `<button>` $.getJSON("https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json", function(results){ I hope this is what gets the data from the API URL $.each(results, function(i, field){ I'm not sure what this does but I am thinking this displays the field for 'results' $("div").append(field + " "); This will display the data in the empty `<div>` Full index.php code <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Find Your Representative</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.getJSON("https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json", function(results){ $.each(results, function(i, field){ $("div").append(field + " "); }); }); }); }); </script> </head> <body> <button>Get JSON data</button> <div></div> </body> </html>
  23. absolutebeginner

    Accordion Javascript to change button text

    I have some W3.CSS accordions on a webpage based on this tutorial. They work fine, but I'd like to change the button text too (not just show/hide the div) When shown, I'd like the button to show "Click for details". When hidden, I'd like the button to show "Hide details". Thanks in advance for any assistance/advice you can give me.
  24. GOAL: Use one <select> element to determine the selected option of another <select> element without destroying the ability of the second <select> element to override the selection made by the first <select> element. BACKGROUND: My biggest difficulties in my attempt to achieve the above goal are: reading the value of the first <select> element's manually (not the automated) selected option. forcing the second <select> element to perform as if it were manually selected. Please consider the following two select statements and answer the following question with jQuery. <h4>The <em>from</em> Select Input Control</h4> <select id='item_podtype_exp' form='rss2_feed' name='item_podtype'> <option value='' selected='selected'>Select a type</option> --> <option value='1'>Concept</option> <option value='2'>Form and Use</option> <option value='3'>Clausal Analysis</option> <option value='4'>Linear Analysis</option> <option value='5'>Socratic Inversion</option> </select> <h4>The <em>to</em> Select Input Control</h4> <select id='itunes_podtype_exp' form='rss2_feed' name='itunes_podtype'> <option value='' selected='selected'>Select a type</option> <option value=1>Concept</option> <option value=2>Form and Use</option> <option value=3>Clausal Analysis</option> <option value=4>Linear Analysis</option> <option value=5>Socratic Inversion</option> </select> QUESTION: How does one go about achieving the above goal? Your response will hopefully answer many more questions than I have room for here. Roddy
  25. BACKGROUND: I have successfully integrated both pagination and the simplePagination paginator into my website. Now I must fine tune the integration so as to overcome several associated non-optimal conditions. In order to achieve it appears that I need to understand better the use of the variables and functions utilized with the AJAX request. Please consider the following pieces of code and answer the questions below. The JAVASCRIPT: .click(function() { $.ajax({ url: '_utilities/php/ajax_data_dscr.php', dataType: 'JSON', data: { 'podType': podType }, statusCode: { 404: function() { alert( "Page not found" ); }}, success: function (jsonData){ console.log(jsonData) $('#main').html(''); $.each(jsonData, function(key, object){ $('#main').append("<div class='paginate'><div class='item_info podcast_item'><div class='pod_num'>" + object.podcast_no_item + "</div><div class='pod_title'>" + object.item_title + "<br />" + object.item_pubdate + "</div></div><div class='pod_describe'>" + object.item_description + "</div></div>"); }); var collection = $(".paginate"); var collNum = collection.length; var perPage = 10; collection.slice(perPage).hide(); $("#pagn").pagination({ items: collNum, itemsOnPage: perPage, cssStyle: "light-theme", onPageClick: function(pageNum) { var start = perPage * (pageNum - 1); var end = start + perPage; // console.log(event); // console.log(pageNum); collection.hide().slice(start, end).show(); } }); } The HTML: <div id='main'>...</div><!-- end div#main --> <div id='pagn'>&nbsp;</div><!-- end div#pagn --> BACKGROUND: From the above code you can probably notice that the #main DIV is emptied before it is dynamically filled via jQuery's .append() method. The heading of the newly filled #main DIV should vary with the kind of information that is entered. To this end I created the following switch. Unfortunately, however, I cannot get it to work. Either the value of the podType variable is not being read, or the code itself has not been properly set into the AJAX routine. The following is an example of one of my attempts. beforeSend: function(podType) { $('#main').html(''); switch (podType) { case clausal: $('#main').html('<h1>Clausal Analysis</h1>'); break; case linear: $('#main').html('<h1>Linear Analysis</h1>'); break; case inversion: $('#main').html('<h1>Socratic Inversion</h1>'); break; case chrono: $('#main').html('<h1>All Categories</h1>'); break; } } QUESTION ONE: How do I access the key-value pair entered as the value of the data property? QUESTION TWO: How would you go about insuring that a new list heading is entered with each different value of podType. NOTE: You can visit the page by clicking on the words PROXY LINK at the bottom of http://www.grammarcaptive.com/sender_proxy.php In the navigation bar on the page that opens find the word Chronology, click on it, and then click on the phrase Podcast index ... This will show you a successful implementation of simplePagination and provide you with a visual understanding of what I am able and not able to achieve. Roddy
×