Jump to content

Search the Community

Showing results for tags 'javascript'.

  • 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








  1. Easy tutorial: HTML5 Canvas + pure JavaScript http://slicker.me/fractals/animate.htm
  2. 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>
  3. BACKGROUND: Sometimes I believe that I will never launch my project. The reason for this doubt is clear. Each time that I believe that I have got everything right, I make a small change that i am told will make everything better, and I finish by having to redo much of what I have already done simply to make it work as it did before with the new feature. What keeps me going on the other hand is that I have always somehow been able to overcome each of these sorts of major hurdles. No wonder it has taken me 14 months just to be able to get where I have gotten. DILEMMA: In order to observe the issue that I am having you are requested to follow the steps below. Mind you, the result of the experiment appears to be the same no matter the browser. I have tried it with Chrome, Safari, and Firefox. Step 1: Using the http:// protocol open to the following splash page: http://www.grammarcaptive.com Step 2: Click on the Freeman. This should open to a page with two preceding splash pages Step 3: When the 2nd splash page opens, you should see what appears to be a frame with a series of frames in which each frame is still another set of frames. _______ Step 4: Using the https:// protocol open to the following splash page: https://www.grammarcaptive.com. Step 5: Click on the Freeman. This should open to a page with two preceding splash pages. Step 6: When the 2nd splash page opens, however, the nested sets of frames have disappeared. _______ DISCUSSION: Now, I have made what I believe to be a fairly thorough check for the presence of the https:// prefix on all pages that refer to a link containing Javascript that might influence the behavior of the splash pages in question. I suspect that by having changed the prefix from http:// to https:// that I have, at least for some pages, introduced new code that is no longer compatible with the Javascript code that I am using. My Javascript console tells me that the jQuery variable is missing. Any ideas? Roddy
  4. Hi, can anyone help me to understand where to put the "while" function in the code so i can display more than one row from the table please. This is the code i use: <?php $data_sheet = false; $datasheet_query = $db->Execute("SELECT TECHLINK_ID, TECHLINK_INCODE, TECHLINK_URLID, TECHLINK_products_id, TECH_URL, TECH_TITLE FROM FTECHLINK LEFT JOIN FTECHSHEET_URL ON TECH_ID = TECHLINK_URLID WHERE TECHLINK_products_id = ".(int)$_GET['products_id'].""); if (!$datasheet_query->EOF){ $data_sheet = true; $pdf_title = $datasheet_query->fields['TECH_TITLE']; $pdf_file = $datasheet_query->fields['TECH_URL']; $pdf_path = "acrobat/".$pdf_file; $image_name = str_ireplace('.pdf','.jpg',$pdf_file); $image_path = "acrobat/".$image_name; $tech_image = '<div class="download_image_container"><a href="' . $pdf_path . '"target="_blank">' . zen_image($image_path, $products_name, "173", "245", 'class="box_image_pdf"') . '</a></div>'; $tech_title = '<div class="download_title_container"><a class="document_title"href="' . $pdf_path . '"target="_blank">' . $pdf_title . '</a></div>'; } ?> <?php if ($data_sheet == true) { ?> <div id="datasheet" class="tab-pane"> <div class="product-tab"> <?php echo $tech_image; echo $tech_title; ?> </div> </div> <?php } ?> and the table looks like the image i attached, i know that the SQL query is working but i can't seem to display all the rows. Much appreciated for the help. Kind regards
  5. 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.
  6. GREETING: I hope that everyone who celebrated the American holiday of Thanksgiving this past week spent a wonderful holiday full of cheer, good food and drink, and restored family ties and friendships. My celebration was short, alone, but very well spent. And, in the quiet of the office, abandoned by nearly everyone for the holiday break, I was able to finish nearly three weeks of study, investigation, and experimentation with the grammar of the MySQL database. You may discover the results by clicking on any direct reference to a specific podcast on the Grammar Captive Weekly Podcast webpage that is itself not a referenced podcast. This includes requests for a specific podcast coming from remote third parties. Not only do the referenced podcasts appear, where before they did not, but only that number of podcasts actually referenced fills the page. Important in your regard is that I have W3Schools to thank for helping me to realize what for me has been a major feat. Many thanks! BACKGROUND: In the same spirit of good coding practice I have another question related to coding strategy. All of the Click and Listen panels are created from a subsection of the same HTML template that is included into a PHP template generator before being dumped into the host HTML webpage as a dynamically filled <div> of the Grammar Captive Weekly Podcast page. QUESTION: Where, how, and, of course, when is the best place and time to enter the CSS styling? On the HTML template, the final hosting page, or dynamically via PHP before the page is dumped into the host page. In answering these question please explain your logic for recommending the strategy that you do. Roddy
  7. Hello, I've been adapting the code from the Slideshow how-to (https://www.w3schools.com/howto/howto_js_slideshow.asp) for my site. However, I would like for the previous arrow to be hidden in the first image and for the next arrow to be hidden in the last image. In other words, no looping. This is for the manual slideshow. I'm not a coding expert, I adapt already existing code, so I'm not sure where to begin. Thank you! The JavaScript from the how-to page is: var slideIndex = 1;showSlides(slideIndex);function plusSlides(n) { showSlides(slideIndex += n);}function currentSlide(n) { showSlides(slideIndex = n);}function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";}
  8. Cu.import("resource://gre/modules/NewTabUtils.jsm"); var { links: gLinks, allPages: gAllPages, linkChecker: gLinkChecker, pinnedLinks: gPinnedLinks, blockedLinks: gBlockedLinks, gridPrefs: gGridPrefs } = NewTabUtils; and the scipt of NewTabUtils.jsm is /** * Singleton that provides the public API of this JSM. */ this.NewTabUtils = { a_Property_is_here: false, Some_Method_A: function Some_Method_A() { } Some_Method_B: function Some_Method_A() { } And_so_on: function And_so_on() { } links: Links, allPages: AllPages, linkChecker: LinkChecker, pinnedLinks: PinnedLinks, blockedLinks: BlockedLinks, gridPrefs: GridPrefs, placesProvider: PlacesProvider, activityStreamLinks: ActivityStreamLinks, activityStreamProvider: ActivityStreamProvider }; What does the part "var{properties}=NewTabUtils;" mean? I understand if that's "NewTabUtils={properties};" And another minor question is about the second script, in the Class-like JS methods, properties are asigned at bottom of the script, also bottom of the file. I guess that's because it is easy to read, but not sure the reason. Would somebody know these questions? thanks.
  9. Hello, this is my first post on the forums after learning HTML and JavaScript for the past 2 weeks. I have a suggestion to make for the JavaScript Functions tutorial, specifically learning how to call a function. The tutorial is very good overall and I am enjoying learning about HTML & JavaScript. As this is my first exposure to coding, my suggestion may be out of place or unusual that I did not know this particular information. However, the JavaScript tutorial never to my knowledge taught me how to call a function the way Exercise 1 at the bottom of the Function tutorial (https://www.w3schools.com/js/js_functions.asp) asked me to do. The answer to call the function as Exercise 1 asks you to do is to insert the code "myFunction();" after the curly bracket however all throughout the JavaScript and particularly the Function tutorial, the user had been taught to call functions by inserting the code "document.getElementById("demo").innerHTML = myFunction();" after the curly bracket. The "return" statement was not used in Exercise 1 as I had felt I was most comfortable using. I would suggest strongly that some line or section be inserted in the JavaScript Function tutorial to teach the method of using "myFunction();" to call a function, as I did not understand that functionality and thought the Exercise was impossible to figure out without looking at the answer. Maaaybe the Exercise is designed to teach you to call a function using "myFunction();" but if that is true, in my opinion it is a poor way to teach that tool. Thank you for your time and in general a great website.
  10. Is there any complete W3.JS solution for Tabs, Accordions, SlideShows etc?
  11. NOTE: The rooster has come home to rest. BACKGROUND: My recent ventures in SESSION variables and AJAX calls has opened up whole new worlds in the life of this unaspiring, inspired web developer. So, far I have used each to satisfy different, but similar tasks -- namely, fill differently the same section of my podcast host page with data from the same data base using both external ($_GET and $_SESSION variables) and internal $.ajax( ) triggers. It is now time to combine the results of these two procedures in the achievement of a third task. At the top of my podcast host page is a PHP if-statement that checks for the receipt of two $_GET variables. It cares not about the source of these variables and performs the same way whether they are received from an external HTTP request using a fully specified URL or my newly acquired knowledge of the href='?..." query specification. Both cause the page load. Neither method cares whether the page has already been loaded or not. QUESTION: How do I suppress the reload function of a HTTP request without sacrificing the other features commonly associated with HTTP requests. BY WAY OF ILLUSTRATION: In the event that more clarity is required. 1) EXTERNAL REQUEST: Click on the following link: http://www.grammarcaptive.com/podcast_dev_copy.php?hash=30a6836a3f7c5fc57751a61098e5c221&podcast_no=21 View the center section of the page that opens. The contents of this section is inserted using a PHP script located at the top of the opened page. The difference between a normal loading and what you observe when you click the above link can be easily seen by by omitting the query string -- namely, http://www.grammarcaptive.com/podcast_dev_copy.php. 2) INTERNAL REQUEST: What I would like to do is open similarly generated content using different data, from the same page. To observe this please do the following: Click on the word Chronology in the navigation bar of the opened page. Click on the phrase Podcast Index ... Click on any of phrase that reads Discover more ... Click on the phrase Click and Listen. Look at the result and you will discover similarly formatted, but different content in the center section of the page. I would like to achieve the same without having to reload the page. Could this be achieved with an event object such as event.preventDefault() PLEASE ADVISE. Roddy
  12. Hello everyone, my name is Miguel, I am new to the fantastic world of programming and I have many doubts. I just want to learn and I'm doing it self-taught, so I have to ask a lot of questions. Thank you very much and I hope it does not become annoying for the members of this forum. Regards and sorry for my spelling, I have to make use of the Google translator. Thank you
  13. function createCookie(name,value,days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + (days*24*60*60*1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + escape(value) + expires + "; path=/"; } function user_login() { var uname = document.getElementById('input-loginname-homepage').value; var psw = document.getElementById('input-loginpassword-homepage').value; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { if(this.responseText != "ERR") { var array = this.responseText.split("|"); createCookie("cookie_user_uname",array[0],365); createCookie("cookie_user_psw",array[1],365); } } } xmlhttp.open('POST', 'ajax/login.php?uname=' + uname + '&psw=' + psw, true); xmlhttp.send(); } Other browser working fine. Chrome just seems to not create the cookies. Chrome Version 61.0.3163.100 And no I am not trying to access the page locally (file://...) It`s an up an running website on the web. (https://...) Returned stuff via AJAX from login.php ist like "randomusername|$2y$12$bH/yQet2GxEae00PUUKmIedtkxaHZCiR5csyAzz3/3J..." Thank you!
  14. BACKGROUND: I am loading dynamic HTML and its content via the success function of a $.ajax( ) call. After it has been loaded I would like to give the user the opportunity to manipulate it using Javascript. In order to achieve my goal I foresee the use of both Javascript and CSS. QUESTION: Where and when in the document should the Javascript be entered? For example, in the $(document).ready() function? Please explain why.
  15. Hi, I've made an html page that invokes a function automatically ( using the parentheses b/4 & after ) to make a table from an XML file. It worked great with a little help from you guys. I then made another one to read a different XML file and that worked great. I want to put both tables on the same page so I made a couple of 'divs' and positioned each in a column formation. That part seems to work well, but I am calling the 2 functions to make the tables consecutively and it doesn't work as I wanted. When I open this file in a browser, as it is here, I get only the second table in the second column correctly; and if I comment out the second table, I get only the first table in the first column correctly. I've included the code below; I hope someone can tell me how to do this. Also just a sample of the 2 XMLs I'm trying to display. Do I need a wrapper function with the others invoked from it, or something like that. Thanks <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Service Club Collections</title> <style> .wholePage { position: relative; width: 1350px; height: 2000px; border: 2px solid red; margin:auto;} .scColl { position:absolute; top:0; left:0; width:1050px; height:2000px; border:2px solid red;} .scTot { position: absolute; top: 0; right: 0; width: 250px; height: 2000px; border: 2px solid red;} #collections { position:absolute; top:0; left:0;} #totals { position:absolute; top:0; right:0;} table, th, td { border: 1px solid red; border-collapse: collapse;} th, td { padding: 7px 10px;} th { font-size:14px; color: firebrick;} td { font-size:12px; color: darkolivegreen; text-align: center;} </style> </head> <body> <a href="ringerinfo.html" type="button">Return</a> <div class="wholePage"> <div class="scColl"> <table id="collections"></table> </div> <div class="scTot"> <table id="totals"></table> </div> </div> <script> (function loadXMLCollDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xmlhttp.open("GET", "datafiles/servClubColl.xml", true); xmlhttp.send(); })(); function myFunction(xmlcoll) { var i; var xmlDoc = xmlcoll.responseXML; var table ="<tr><th>Service Club</th><th>Ring Date</th><th>Location</th><th>Start Time</th><th>End Time</th><th>Total Bills</th><th>Total Coins</th><th>Total Checks</th><th>Total Kettle</th></tr>"; var x = xmlDoc.getElementsByTagName("scCollections"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("RingerName")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("RingDate")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("Location")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("SchedStart")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("SchedEnd")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("Bills")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("Coins")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("Checks")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("AmountCollected")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("collections").innerHTML = table; } (function loadXMLTotDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xmlhttp.open("GET", "datafiles/scTotals.xml", true); xmlhttp.send(); })(); function myFunction(xmltot) { var i; var xmlDoc = xmltot.responseXML; var table = "<tr><th>Service Club</th><th>Seasonal Total</th></tr>"; var x = xmlDoc.getElementsByTagName("Totals"); for (i = 0; i < x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ServClub")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TotalAmount")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("totals").innerHTML = table; } </script> </body> </html> Here is just a sample of the XML data files *********************************** <?xml version='1.0' encoding='utf-8'?> <dataroot> <scCollections> <RingerName>1st National bank scotia</RingerName> <RingDate>Dec 12 - Mon</RingDate> <Location>Price Chopper Niskayuna Left Door</Location> <SchedStart>9:00 am</SchedStart> <SchedEnd>9:00 pm</SchedEnd> <Bills>$ 243</Bills> <Coins>$ 27</Coins> <Checks>$ 00</Checks> <AmountCollected>$ 270</AmountCollected> </scCollections> <scCollections> <RingerName>Advisory Board</RingerName> <RingDate>Dec 9 - Fri</RingDate> <Location>Co-Op Nott St Niskayuna</Location> <SchedStart>9:00 am</SchedStart> <SchedEnd>1:00 pm</SchedEnd> <Bills>$ 131</Bills> <Coins>$ 15</Coins> <Checks>$ 00</Checks> <AmountCollected>$ 146</AmountCollected> </scCollections> <scCollections> <RingerName>Beukendall Eastern Star</RingerName> <RingDate>Dec 7 - Wed</RingDate> <Location>Price Chopper Glenville Main Dr</Location> <SchedStart>9:00 am</SchedStart> <SchedEnd>7:00 pm</SchedEnd> <Bills>$ 283</Bills> <Coins>$ 64</Coins> <Checks>$ 100</Checks> <AmountCollected>$ 447</AmountCollected> </scCollections> <scCollections> <RingerName>Beukendall Eastern Star</RingerName> <RingDate>Dec 8 - Thu</RingDate> <Location>Price Chopper Glenville Main Dr</Location> <SchedStart>9:00 am</SchedStart> <SchedEnd>7:00 pm</SchedEnd> <Bills>$ 415</Bills> <Coins>$ 38</Coins> <Checks>$ 00</Checks> <AmountCollected>$ 453</AmountCollected> </scCollections> </dataroot> AND ********************************* <?xml version='1.0' encoding='utf-8'?> <dataroot> <Totals> <ServClub>1st National bank scotia</ServClub> <TotalAmount>$ 270</TotalAmount> </Totals> <Totals> <ServClub>Advisory Board</ServClub> <TotalAmount>$ 146</TotalAmount> </Totals> <Totals> <ServClub>Beukendall Eastern Star</ServClub> <TotalAmount>$ 900</TotalAmount> </Totals> <Totals> <ServClub>Corps Band</ServClub> <TotalAmount>$ 190</TotalAmount> </Totals> <Totals> <ServClub>General Electric Volunteers</ServClub> <TotalAmount>$ 2505</TotalAmount> </Totals> </dataroot>
  16. Hello. I made a WordPress plugin with a JQuery-AJAX/JSON code in a php file like this: $(document).ready(function(){ $.post(“/wp-content/plugins/SLMS/UserRecord.php”, { saveUserBtn: “Save”, FName: fname, LName: lname, UNumber: unumber, address: address, contact: contact, email: email }, function(data, status){ document.getElementById(‘userr-page-notice’).innerHTML = data; if(data.includes(“New record saved.”)) { document.getElementById(“userRecord”).reset(); } }); }); /** end of code */ I also notice that any user can view my javascript code with their own browser. I also noticed that any user/unauthorized user can copy these JQuery-AJAX/JSON code and pass/save/modify data to MySQL database using the link to my php file. I will also write the code for my php file: if(isset($_POST[‘saveUserBtn’]) and $_SERVER[‘REQUEST_METHOD’] == “POST”) { insertRecord(); } elseif(isset($_POST[‘searchUNBtn’]) and $_SERVER[‘REQUEST_METHOD’] == “POST”) { searchUNRecord(); } elseif(isset($_POST[‘updateUserBtn’]) and $_SERVER[‘REQUEST_METHOD’] == “POST”) { updateRecord(); } /** codes to access MYSQL Database */ /** end of code */ I notice that many developers also used these kind of JQuery-AJAX/JSON codes. I want to know what is the code to block unauthorized users to access/pass data to my php file when unauthorized users use JQuery/JSON code. I will also mention “web host cpanel File Permission” to see if this web server configuration can help.
  17. BACKGROUND: I have created a PHP routine that gathers data from a MySQL database. The data that it gathers depends on the value of an HTTP request that uses the $_GET superglobal as its transfer mechanism. The routine further organizes the retrieved information into a nested array such that each element of the array corresponds to a different table row, and each element of each nested array corresponds to a subset of the table fields. Once the nested array has been completed the json_encode() function converts the array into a JSON string and readies it for transport. The PHP <?php if(isset($_GET['podType']) { define('_HOST_NAME','...'); define('_DATABASE_NAME','...'); define('_DATABASE_USER_NAME','...'); define('_DATABASE_PASSWORD','...'); $mysqli_obj = new MySQLi(_HOST_NAME,_DATABASE_USER_NAME,_DATABASE_PASSWORD,_DATABASE_NAME); if($mysqli_obj->connect_errno) { die("ERROR : -> ".$mysqli_obj->connect_error); } $tbl_name = 'rss2_podcast_item'; $podcast_items = []; $result_obj = $mysqli_obj->query("SELECT * FROM " . $tbl_name); while($row = $result_obj->fetch_assoc()) { foreach($row as $key => $value) { $item_arr[$key] = $value; } $items[] = $item_arr; } //Creates a nested array whose subarrays consist of the four indicated elements. foreach ($items as $sub_arr => $element) { $podcast_item[] = $element['podcast_no_item']; $podcast_item[] = $element['item_title']; $podcast_item[] = $element['item_description']; $podcast_item[] = $element['item_pubdate']; $podcast_items[] = $podcast_item; $podcast_item = []; } echo json_encode($podcast_items, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_NUMERIC_CHECK); } ?> The Javascript <script> $(document).ready(function() { $('li.podDex').each(function(){ var podType = $(this).attr('id'); //Causes the weight of the font to change when the mouse passes over the text. $('#'+podType).mouseover(function() { $(this).css({"cursor": "pointer", "font-weight":"800"}); }) .mouseout(function() { $(this).css("font-weight", "normal"); }); //Causes the weight of the font to change, displays the hidden text to appear in the #main <div> element, and brings about a change in color. $('#'+podType).mouseover(function() { $(this).css({"cursor": "pointer", "font-weight":"800"}); }) .click(function() { $.getJSON({ url: "../exp1/ajax_data.php", data: podType, success: function(json_data){ var data_array = $.parseJSON(json_data); alert(data_array[0]['podcast_no_item']); } }); }) .mouseup(function() { $(this).css({"color": "#fadb9d","font-weight": "normal"}); $('body, html').animate({scrollTop: $('#main').offset().top},800); }); }); }); </script> The HTML <ul> <li id='linear' class='podDex'>Linear Analysis</li> <li id='clausal' class='podDex'>Clausal Analysis</li> <li id='inversion' class='podDex'>Socratic Inversion</li> <li id='chronology' class='podDex'>Chronology</li> </ul> The Console Error Message is You are welcome to try it yourself. Please go to Grammar Captive and click on any of the four designated <li> elements. QUESTION: What might be causing the $.getJSON() call to fail? NOTE: A similar, but not identical, result occurs on my local test server.
  18. Hi! I'm Vincent from Matters. I am transitioning from PHP to JavaScript. I wanted to give back to the community so I wrote an article about it: https://blog.matters.tech/migrating-from-php-to-javascript-with-node-js-155534498b58 I hope it will be useful to some! Feedback warmly welcome https://twitter.com/cold_lestat
  19. Loading time of my website( interpool ) is comparatively high. results are showing that around 29% of viewers will lose. loading time increase because of javascript and CSS rendering. If i block some of the javascript and css does it affect in search. what is the simple remedy.
  20. Hello everyone I want to make a login page and I want to connect it with loptop or mobile fingerprint scanner and people can login with their fingerprint. Can anyone help me what should I do?
  21. Hello world! First post. I am trying to get some code working to my liking that I found on the internet. I am in CS1 programming class but I do not know enough about Javascript to fix it. I am determined to finish this however. I would appreciate any help I can get. Here is the code: <!doctype html> <html> <head> <title>Security/BabyCam Revisited</title> <style type="text/css"> #container { /* center the content */ margin: 0 auto; text-align: center; } </style> </head> <body> <div id="container"> <img src="/?action=stream" /><br> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><br /> <input type="range" min="10" max="170" value="85" step="1" onchange="showValue(this.value)/> <span id="range">10-170</span> <script type="text/javascript"> function showValue(newValue) { document.getElementById("range").innerHTML=newValue; } </script> <button onclick="servos.move('P', 5)">Left</button> <button onclick="servos.move('P', -5)">Right</button> <button onclick="servos.move('T', -5)">Down</button> <button onclick="servos.move('T', 5)">Up</button> </div> </body> <script> var servos; $( document ).ready(function() { servos = moveServos(); }); function moveServos() { // Store some settings, adjust to suit var panPos = 70, tiltPos = 90, tiltMax = 170, tiltMin = 45, panMax = 170, panMin = 20; return { move:function(servo, adjustment) { var value; if(servo == 'P') { if(!((panPos >= panMax && adjustment > 0) || (panPos <= panMin && adjustment < 0))) { // Still within allowed range, "schedule" the movement panPos += adjustment; } value = panPos + 'P'; } else if(servo == 'T') { if(!((tiltPos >= tiltMax && adjustment > 0) || (tiltPos <= tiltMin && adjustment < 0))) { // Still within allowed range, "schedule" the movement tiltPos += adjustment; } value = tiltPos + 'T'; } // Use AJAX to actually move the servo $.get('' + value); }, } } </script> </html> This code has 4 buttons that work the two pan/tilt servos. I want to use a slider for left/right and another slider for up/down and in 1 degree increments rather than 5 degrees. You can see the output at I added a slider, but I do not know Javascript enough to hook it into the actions. Once this is over, I will be writing a very clear tutorial on how everyone can make this from scratch like I did for Samba here: http://devestechnet.com/NewTech/PiSamba Thank you!
  22. Dear W3schools community, I want to check if a required input is empty (has more then 0 characters). You guys have any idea what I'm doing wrong? Thanks in advance! If there is no character in input (id="vname") I still get a red "bar" Here's my code: function foobar() { var vname = document.getElementById('vname').value; if (vname.length > 0 && vname != '' && vname != null) { document.getElementById('contact-response').style.color = 'green'; document.getElementById('contact-response').innerHTML = "foo"; } else { document.getElementById('contact-response').style.color = 'red'; document.getElementById('contact-response').innerHTML = "bar"; } } I also tried length, null and '' separately. I also tried doing it with isEmpty(). Also I tried using || instead of &&. Nothing worked yet. Heres my HTML: <div id="wrapper-contact"> <form> <input type="text" id="vname" placeholder="*Vname" required="yes"> <input type="button" onclick="foobar()" value="Senden"> <p id="contact-response"></p> </form> </div>
  23. I am displaying data from one page in another page in the following way: <script> $(document).ready(function(){ $( "#2017" ).load( "data.html .2017" ); $( "#2016" ).load( "data.html .2016" ); }); </script> <div id="2017"></div> <div id="2016"></div> ...BUT I also need to be able to hide (onload) certain div classes from within the linked file... <script> $(document).ready(function(){ $('.private-files').hide(); }); </script> I know that the code above will hide divs by class if they are contained in the main page, but how can I make it so that divs of class 'private-files' in 'data.html' will also be hidden?
  24. Good day everyone! I will admit right off the hop that I know very little about javascript programming but I hope that with your help, I can learn something today. I've looked on w3 and elsewhere to find my answer but I have not been successful. I think what I'm trying to do is simple... Using w3.css, I am trying to create a navigation menu that will include more than one dropdown menu. I have the menu working to a point. Right now if I click on the three links with sub menus, the sub menus will display. However, they do not 'hide' unless I click on the top-menu link. That is, if I click on 'Training', the sub menu appears but will only disappear if I click on 'Training' again. Of course I want the sub-menu to disappear if I click anywhere outside the sub-menu or have another sub-menu appear if I click on its top-menu link. I've attached my html file for you to have a look. Any help and guidance would be greatly appreciated. Thanks so much! Have a great day! <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <div class="w3-container"> <ul class="w3-navbar w3-light-grey"> <li><a href="#">Home</a></li> <li class="w3-dropdown-click"> <a onclick="myFunction()" href="#">Manuals <i class="fa fa-caret-down"></i></a> <div id="sub-menu" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Power Unit/Truck/Bus Safety Inspections and Standards</a> <a href="#">School Bus Safety Inspections and Standards</a> <a href="#">Trailer/Semi-Trailer Safety Inspections and Standards</a> <a href="#">Motorcycle Safety Inspections and Standards</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction2()" href="#">Forms <i class="fa fa-caret-down"></i></a> <div id="sub-menu2" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Supply Form</a> <a href="#">Backup Forms</a> <a href="#">Station Application</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction3()" href="#">Training <i class="fa fa-caret-down"></i></a> <div id="sub-menu3" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </li> <li><a href="#">Who to Call</a></li> </ul> </div> <script> function myFunction() { var x = document.getElementById("sub-menu"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction2() { var x = document.getElementById("sub-menu2"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction3() { var x = document.getElementById("sub-menu3"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> test.html
  25. Estoy subiendo un archivo csv en una página llamada procesar, el problema es que me hace un POST y me envía a otra página y me muestra el resultado de ¡La importación del archivo se subió satisfactoriamente!, pero yo necesito que eso me lo muestre en la misma página. Éste es el código que tengo. <script type="text/javascript" > $(function(){ $("#btnEnviar").click(function(){ $("#cuerpoPagina").load('procesar.php',$("#frmAsignar").serialize()); }) }); function subirArchivoExcel() { if (document.frmSubirArchivo.excel.value == "") { alert("¡Error!. ¡Debe subir un archivo!"); document.frmSubirArchivo.excel.focus(); return false; } document.frmSubirArchivo.action="procesar.php"; document.frmSubirArchivo.submit(); } </script> <?php echo '<form name="frmSubirArchivo" action"procesar.php" method="post" enctype="multipart/form-data"> <table border="1" id="TablaFormularioOpaco"> <tr> <td aling="center" id="TituloTablaVerde">Archivo excel</td> </tr> <tr> <td><input type="file" name="excel" /> </td> </tr> <tr> <td><input type="button" name="btnEnviar" id="btnEnviar" value="Subir Archivo" onclick="subirArchivoExcel();" ></td> </tr> </form>'; Ahora acá es el resto del código: include 'Conexion.php'; if (isset($_FILES['excel']) && !empty($_FILES['excel']) && substr($_FILES['excel']['name'],-3)=="csv") { $fecha = date('Y-m-d'); $hora = time("HH:MM:SS"); $carpeta = "Ejemplo"; $carpeta = ""; $excel = $fecha."-".$hora."-".$_FILES['excel']['name']; move_uploaded_file($_FILES['excel']['tmp_name'], "$carpeta$excel"); //echo "$carpeta$excel"; //print_r($_FILES); $contador = 0; $row = 1; $fp = fopen("$carpeta$excel", "r"); $meses = array( 'ENERO' => '01', 'FEBRERO' => '02', 'MARZO' => '03', 'ABRIL' => '04', 'MAYO' => '05', 'JUNIO' => '06', 'JULIO' => '07', 'AGOSTO' => '08', 'SEPTIEMBRE' => '09', 'OCTUBRE' => '10', 'NOVIEMBRE' => '11', 'DICIEMBRE' => '12'); //echo $dias; //fgetcsv. obtiene los valores que estan en el csv y los extrae while ($data = fgetcsv($fp, 1000, ";")) { //Si la línea es igual a 5 no guardamos porque serian los títulos de la hoja de excel if ($row >= 7) { //print_r("<pre>Row: ".$row); //print_r($data); //print_r("</pre>"); // TEXTO: jueves, 01 de junio de 2017 21:38 $laFecha = explode(",", $data[1]); if(count($laFecha) == 2) { $fecArchivo = explode(" ", $laFecha[1]); //print_r($fecArchivo); $anno = $fecArchivo[5]; $mes = $meses[strtoupper($fecArchivo[3])]; $dia = $fecArchivo[1]; $hora = $fecArchivo[6]; $fechaReal = $anno."-".$mes."-".$dia; //echo $fechaReal; //echo $contador." - "; $sql_guardar = 'INSERT INTO registros ( Dia, Hora, Tipo_Acceso, Puerta, Tipo, Tarjeta, Nombres, Apellidos, Documento, Empresa)'; $sql_guardar .= 'VALUES( "'.$fechaReal.'", "'.$hora.'", "'.$data[2].'", "'.$data[3].'", "'.$data[6].'", "'.$data[7].'", "'.$data[8].'", "'.$data[9].'", "'.$data[10].'", "'.$data[12].'")'; $contador++; //echo "7: ->".$data[7]."<- 10:->".$data[10]."<-"; if ($data[7] != '') { //echo $sql_guardar; //print_r("<pre>"); // print_r($sql_guardar); //print_r("</pre>"); mysql_query($sql_guardar) or die(mysql_error()); if (!$sql_guardar) { echo '<div>¡Hubo un problema al momento de importar el archivo! <br>¡Por favor vuelva a intentarlo!</div>'; exit; } } } } $row++; } fclose($fp); echo '<div>¡La importación del archivo se subió satisfactoriamente!</div>'; exit; } ?>
  • Create New...