Jump to content

Search the Community

Showing results for tags 'Javascript'.

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


  • Community Calendar




Website URL








Found 721 results

  1. BACKGROUND: I found the appended script on the net and am inclined to believe that it could prove very useful. i would like to share it with you in the hope that those better versed in Javascript than I might provide insight into its proper use. The annotation enclosed as follows /* ... */ is mine and may be inaccurate. /* * Brief Description: A script for tracking in real time. * Date: 20 February 2018 (downloaded from internet) * Source: Neezer at Stackoverflow * Link: https://stackoverflow.com/users/32154/neezer */ /**************************************************************************************** Gets element by class name, assigns each to an element of an array, and returns the array. Apparently, the class name is trackit. ****************************************************************************************/ if (document.getElementsByClassName === undefined) { document.getElementsByClassName = function(className) { var hasClassName, allElements, results, element; hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); allElements = document.getElementsByTagName("*"); results = []; for (var i = 0; (element = allElements[i]) !== null; i++) { var elementClass = element.className; if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) { results.push(element); } } return results; }; } /**************************************************************************************** * The function that is called when a tracked element is clicked and sets the tracking in motion. ****************************************************************************************/ function addTracker(obj, type, fn) { // adds a tracker to the page, like $('xxx').event if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.addEventListener) { obj['e' + type + fn] = fn; obj[type + fn] = function() { obj['e' + type + fn]( window.event ); }; obj.attachEvent('on' + type, obj[type + fn]); } } /**************************************************************************************** * Creates a query string with the tracked information and assigns it to a relative path leading to a PHP processing file. ****************************************************************************************/ function save_click(passed_object) { // this function records a click var now, then, path, encoded, to, from, name, img; now = new Date(); path = '/lib/click.php'; from = (window.decode) ? window.decodeURI(document.URL) : document.URL; to = (window.decodeURI) ? window.decodeURI(passed_object.href) : passed_object.href; name = (passed_object.name && passed_object.name != '') ? passed_object.name : '[No Name]'; // timestamp the path! path += '?timestamp=' + now.getTime(); path += '&to=' + escape(to) + '&from=' + escape(from) + '&name=' + name; // compile the path with the recorded information img = new Image(); img.src = path; // when we call the image, we poll the php page; genius! while (now.getTime() < then) { now = new Date(); // resets the timer for subsequent clicks } } /************************************************************************************************* * Fetches the targeted links by their class assignment and attaches the event handler save_click() *************************************************************************************************/ function get_targeted_links(target) { var links, link; if (document.getElementsByClassName) { links = document.getElementsByClassName(target); for (var i = 0; i < links.length; i++) { link = links[i]; if (link.href) { addTracker(links[i], 'mousedown', save_click(links[i])); } } } } /************************************************************************************************* * The Function Call - Calls the addTracker() function and loads the get_targeted_links() function. *************************************************************************************************/ addTracker(window, 'load', get_targeted_links('trackit')); The following is my understanding of the script and my confusion with same. I am requesting that you help to unravel my confusion, so that I might easily implement the script. SET UP 1) The class name 'trackit' is assigned to those elements on a page that the users wishes to track. 2) The entire script is loaded into the page at the outset by a <script> tag in the <head> element of the document. 3) In the document's jQuery ready( ) function is inserted the call to the addTracker( ) function. 4) When the page is loaded the activity of the elements to which the class name 'trackit' has been assigned is tracked. 5) Each time a click event takes place, the gathered information is assigned to a query string and appended to a relative path that points to a PHP processing file. WHAT I DO NOT UNDERSTAND 1) Although it appears that the tracked elements are stored in an array called results, the relationship between the activity that is tracked for each element of the array and the array itself is unclear. In effect, the user can easily know which elements are being tracked, but to what use is this information when all of the tracking information is stored in a query string? 2) There appears to be know mechanism for sending the query string to the designated relative path -- namely, .../lib/click.php. For example, when sending form data to a PHP processing file, the type-submit, input control initiates the HTTPRequest. 3) The author has added the comment "adds a tracker to the page, like $('xxx').event". I simply do not understand the meaning or use of the expression $('xxx').event in this context. is it not enough to simply assign the class name 'trackit' to each element that the user wishes to track. HAVE I UNDERSTOOD THE FOLLOWING CORRECTLY timestamp // When the click event takes place. from // the URL of the document on which the click event takes place. to // the address of the document called when the click event takes place. name // a property of the passed event object that identifies the object -- perhaps, the value of a name or id attribute. Finally, please comment on my annotations, if you feel that they do not properly explain the role of the function. Roddy Good documentation is a somewhat rare commodity on the internet.
  2. I've built a static site with over 40,000 pages using Jekyll. I am trying to implement a live search into it without a database. I tried the w3schools live search example with a xml file I created from my site. It is very slow. Does anyone know of a faster way to parse xml files or am I wasting time. I enabled gzip compression on the entire site also, What would be the fastest way to search a lot of records and return a result? Thanks in advance.
  3. 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
  4. 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
  5. SET-UP: Please find below three items including; one, the relevant form elements of a much larger form; two, the Javascript that determine what data will be sent to a PHP processing page via a $_POST variable, and three, The actual implementation of the code. The question follows the presentation of the code. The HTML <div id='language_options' style='clear:both;'> <label for='nl_tongue'>Native Tongue:<span class="formlabel">*</span></label> <span class="rightfloat"> <select id="nl_tongue" name="language" style="width:150px;"> <option selected value="0">Select Language</option> <optgroup label='africa [east]'> <option value='mg'>Malagasy</option> <option value=sw>Swahili</option> </optgroup> <optgroup label='africa [central]'> <option value=ny>Chichewa</option> <option value=sn>Shona</option> </optgroup> <optgroup label='Not found?'> <option value='other_tongue'>Click and enter!</option> </optgroup> </select> </span> </div><!-- end div#language_options --> <div id='nl_other'> <span class="rightfloat"><input id='nl_other_input' type='text' name='other' value=''></span> </div><!-- end div#nl_other --> <label id="nl_tongue_error" class="error" for="nl_tongue">This field is required.</label> The JAVASCRIPT $.get('./newsletter_filler.html', function(data) { $('#main').html(data); $('#nl_other').hide(); var tongue = ''; $('#nl_tongue').change(function() { if ($('#nl_tongue').val() == 'other_tongue') { $('#nl_other').show(); } }); }).done(function(){ $('.error').hide(); $(".button").click(function() { --- Other Code --- /********************************* The language Variable *********************************/ var language = $("select#nl_tongue").val(); if (language == "0") { $("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please select your first language! Or, click on the <span style='font-weight:bold;'>\"Not found?\"</span> option at the bottom of the list of languages.</p>").show().css('float','left'); $("select#nl_tongue").focus().focusout(function() { $("label#nl_level_error").hide(); }); return false; } if (language == 'other_tongue') { language = $("#nl_other input").val(); if($("#nl_other input").val() == '') { $("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please enter your first language.</p>").show().css('float','left'); $("nl_other_input").focus().focusout(function() { $("label#nl_tongue_error").hide(); $("#nl_other_input).hide(); }); return false; } } }); --- More Code --- }); IMPLEMENTATION: Sequence of Events Go to the Grammar Captive mainpage and do the following: Click on the word Subscribe under the heading Info/Newsletter. Click on the final <option> Click and enter! under the Not Found? <optgroup> at the bottom of the Select Language list. Enter a language of some sort. Click where it says Not found? and select a different language. Submit the form. The Outcome: The selected language takes precedence over the entered language, and the former is sent to the data base. DILEMMA: In order to correct this problem I have experimented in a variety of ways, but to know avail. What would you recommend and why? Roddy
  6. 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(); };
  7. Multiple Slideshows (more than 2)

    Hi there, Sorry but my JS-Knowledge is very bad. I tried to implement multiple slideshows wthin one website. I used this tutorial. But I'm not able to create more than two slideshows without bugs. I tried to adjust the JS code but wasn't successful. At least I have to implement 4 slideshows. My Code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0} .mySlides1, .mySlides2 {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */ .prev:hover, .next:hover { background-color: #f1f1f1; color: black; } </style> </head> <body> <h2 style="text-align:center">Multiple Slideshows</h2> <div class="slideshow-container"> <div class="mySlides1"> <img src="images/gallery/fulls/06.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="images/gallery/fulls/05.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <div class="slideshow-container"> <div class="mySlides2"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/02.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/01.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div> <div class="slideshow-container"> <div class="mySlides3"> <img src="images/gallery/fulls/07.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/05.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div> <script> var slideIndex = [1,1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> </body> </html> Standard code from https://www.w3schools.com/howto/howto_js_slideshow.asp (only JS): var slideIndex = [1,1]; /* Class the members of each slideshow group with different CSS classes */ var slideId = ["mySlides1", "mySlides2"] showSlides(1, 0); showSlides(1, 1); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } Thank you for any help
  8. BACKGROUND: Using AJAX I have successfully filled a <div> element with HTML that contains a <form> element whose action attribute points to a $_SERVER_REQUEST superglobal in the same filled <div> element. I have also set the target attribute of the <form> element to _self. Unfortunately, when the <input type='submit'> form control is clicked the entire page is replaced. I want only that the contents of the <div> element is replaced. DILEMMA: I want to suppress this replacement behavior, but still process the form data with the PHP contained within the <div> element. Although I have managed to suppress the replacement, I do not know how to process the form data within the <div> element. The CODE: .click(function() { $("#main").html(''); $.ajax({ url: './_utilities/php/newsletter_filler.php', method: 'GET', data: {name : 'personal', length : 200}, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, success: function(jsonData) { console.log(jsonData); $.getScript('./_utilities/javascript/wordcount.js', function(data) { $.each(jsonData, function(subfield, obj) { setWordConstraint(obj.id, obj.length); }); }); } }); $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/newsletter_filler.css" }).appendTo("head"); $.get('./newsletter_filler.html', function(data) { $('#main').html(data); }).done(function(){ var tongue = ''; $('#tongue').change(function() { if ($('#tongue').val() == 'other_tongue') { $('#other').show(); } }); $("#sevengates").submit(function(e){ return false; }); }); The jQuery object $("#sevengates") refers to the id of the <form> element. $("#sevengates").submit(function(e){ return false; }); QUESTION: How can I have my cake and eat it too? Or, how do I set the $_POST superglobal without leaving the filled <div>? Roddy
  9. addoption syntax

    I am trying to adapt some code I found online and I don't understand one (actually more) of the lines of code. The code is from a function to generate dropdown lists that depend on previous dropdown lists. The line says "echo "addOption(document.drop_list.Category, '$nt1[cat_id]', '$nt1[category]');";" What does the $nt1 mean and why are there two different values for it? Can someone explain this to me in novice language? I can't find any reference to addOption in the Javascript reference. I'm trying to substitute my table fields into the code, but can't figure out which goes where.
  10. Regarding JS capabilities

    Hi, I would like to know if it's possible to use javascript (specially on Anki; if you know what it is) to format a text line into a html table. Basically, what I want is to copy the definition of an online dictionary (japanese in this case): 長/long, leader/ながい、おさ/チョウ And have the javascript read the first "/", select what's behind it, put in a <th>, select what's between first and second /, put in a <td>, and so forth. I have the CSS set up already. All of this in real time, like, when the software tries to show the line above, the JS will format it to show the stylized table to me. Is this even possible? Does the w3s guide teach this kind of stuff at some point?
  11. 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:
  12. Easy tutorial: HTML5 Canvas + pure JavaScript http://slicker.me/fractals/animate.htm
  13. 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>
  14. HTTP and HTTPS Compatibility

    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
  15. Need help with a loop in SQL

    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
  16. 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.
  17. 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
  18. 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";}
  19. 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.
  20. 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.
  21. W3.JS Tabs, Accordions etc...

    Is there any complete W3.JS solution for Tabs, Accordions, SlideShows etc?
  22. Hello, my name is Miguel

    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
  23. 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
  24. 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!
  25. 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.