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

  1. State management with React

    We had a ton of problems with React to handle our states. We adopted Redux, and after a short period we could finally just focus on producing features and not bugs Here is a video of the last meetup we did in San Francisco: Using Redux at scale. Here is the source medium article for those who cannot listen to the video: https://blog.matters.tech/10-redux-tips-from-the-trenches-55e06ed1c0a8
  2. I tried including the 'tab.html' and ‘content.html’ into my 'index.html' (using w3school code: how to include HTML, found at: https://www.w3schools.com/howto/howto_html_include.asp), but the javascript and css elements do not work. The buttons don't work as intended. Look at: https://rads-198409.appspot.com If you minimize the browser window, the tab is supposed to change to a drop-down menu, but the button does not work at all. I have checked the individual pages and they seem to work just fine, just not when they are combined. Am I doing something wrong? Could someone help? All the code I used is from w3school and I have only modified the file names (tab.html and content .html to point to the right files). Below are links to the code: Code for ‘tab.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav Code for ‘content.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol Code for ‘index.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2
  3. I have a form written using HTML5 and CSS3, final validation is performed on submit with JavaScript. Then, the form will be sent to the server, most likely using PHP's mail() function. I don't recall how to include two items such as these in a form's action="...", I'd deeply appreciate if someone could refresh my memory! Thank you
  4. Tutorials

    Suggestion 1: I had an idea for w3school for a very long time and this idea will help people learn better and even make school suggest it more. Add in a tutorial where people will have to figure how how to fix codes like it's almost like the try-it-out but you have to go through courses and learn programming through that, almost like khan academy almost except with programming except khan academy only teaches html and not PHP. And also it wouldn't hurt to show videos of how to understand PHP more. And also how to create websites like facebook and youtube and have interactive videos as well like khan academy and those interactive videos on there was actually cool, I was amazed of how they did that when I first learned html. W3school.com actually taught me more about html and CSS more than khan academy. I just hope this forum in connecting to the website I am talking about. But w3school did have a link to this forum so I am guessing so. Suggestion 2: Also I notice some websites has custom context menus and wondering if somehow they can teach how to create that as well because I tried searching how and had to program it and I looked at other websites and it was accurate and w3school shows more accurate html and CSS. Can it be added
  5. I'm trying to use Base64 to compare two images to see if they are identical. The images are accessed using: var thumb5Original = ""; var thumb5Edited = ""; thumb5Original = canvas5.toDataURL('image/png'); thumb5Edited = canvas5.toDataURL('image/png'); I then check them using this: if (thumb5Original.toString() == thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Original Image"; if (thumb5Original.toString() != thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Edited Image"; The problem is, I'm getting "Edited Image" even when the images are identical. Is there an error in the way I'm comparing the images? Thank you
  6. Hello, I may post this in the wrong forum and if I do then I'm sorry. I recently looked at the ToDoList tutorial on w3schools, and it is fine and works amazing but its one thing that I wanna add. When I add a item to the list I want that item to stay there forever, so even if I for example refresh the page it will still be there. And even if I go out of chrome it will still be there. I don't know if this is possible but if it is then please answer this. Thanks in advance!
  7. 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!
  8. REQUEST: Please compare the results in the middle panel of the following two actions: ACTION ONE: Click on the phrase Weekly Podcasts under the heading Products in the navigation bar of the Grammar Captive mainpage. Scroll to the bottom of the page and view how the middle panel exceeds the height of the navigation bar and side panel. ACTION TWO: While on the same page with the same panel open click on the phrase Click and Listen. This will bring you to a different document in the same window. Notice that the middle panel does not exceed the height of the navigation bar and side panel. Also, note that the panel's scroll functionality is well in place. Now return to the Grammar Captive mainpage and perform the following: Find the phrase Q&A under the heading Search Grammar Captive in the navigation bar and click on it. Notice the absence of a border around the middle panel. Enter the word Frage in the search box and click on the Search button. (Do not hit the ENTER/RETURN key, else you will be blown away) Notice that middle content is now enclosed in a border and that the height of the content is nearly that of the navigation bar and side panel. (I acknowledge that there are some problems with the CSS, and I believe that I know how to fix them.) Click on the phrase The Answer ... wherever you would like and notice that the content of the middle panel fill below either of the two side panels. Click on the phrase Click and Read below the answer on watch the role of digital toilet paper unravel. It is this phenomenon that I am seeking to prevent with the introduction of scroll functionality. The Javascript that works for ACTION TWO on the Podcast hostpage refuses to work on the Grammar Captive mainpage. if (status === 'success') { var aside_height = $('aside').height(); $('#main').css('min-height', aside_height); $('#pagn').show(); } This, no matter the placement or alteration. Adding the property-value pair 'overflow-y' : 'scroll' achieves nothing. $('#main').css({'min-height':aside_height,'overflow-y':'scroll'}); Any ideas? Roddy
  9. I need to create variable names in a loop (part of this seems to be working) and then get 26 of the 39 variables to perform simple math (for example: variable -= 10). Getting the variables recognized as variables, and not text, seems to be the issue. This works properly, it accesses 13 canvases named canvas1 through canvas13: for (i = 1; i < 14; i++) { c = document.getElementById("canvas" + i.toString()); context = c.getContext("2d"); ... } However, when I try to dynamically create canvas names, and dynamically create 2 variables in the same line, the variables are created as text. for (i = 1; i < 14; i++) { document.getElementById('canvas' + i).style.filter = "brightness((bright" + i + " -= 10)%) contrast((cont" + i + " -= 10)%)"; } Probably a dozen variations on this theme have failed. In a nutshell, the variables bright1 and cont1 through bright13 and cont13 are not recognized as variables that can be manipulated with math, they're recognized as text. Right now I'm typing out 13 lines of code: document.getElementById('canvas1').style.filter = "brightness(" + (bright1 -= 10) + "%) contrast(" + (cont1 -= 10) + "%)"; ... document.getElementById('canvas13').style.filter = "brightness(" + (bright13 -= 10) + "%) contrast(" + (cont13 -= 10) + "%)"; which is inefficient, to say the least. So, what is the proper syntax to use so that bright1 through bright13 and cont1 through cont13 are variables instead of text? Thank you!
  10. REQUEST: Please compare the following two links: one works and the other does not. LINK ONE (functional): This link is accessed by going to the Grammar Captive mainpage and clicking on the words Weekly Podcast under the Products heading in the navigation bar. When the panel opens find the phrase Click and Listen. You should be redirected to the podcast_hostpage. LINK TWO (dysfunctional): This is accessed by going to the mainpage and clicking on the word Podcasts under the heading Search Grammar Captive in the navigation bar. When the panel opens search for the single word podcast. A list of options should become available. Click on the phrase Discover more ... under any of them. When the hidden data appears click on the phrase Click and Listen. Nothing happens. DISCUSSION: Both links (LINK ONE and LINK TWO) are identical in every way, but the query strings. One works, the other does not. With the exception to some problematic links to Facebook created by jSocials the console indicates no error. Interestingly, in the dysfunctional case the timer runs as if an infinite loop had been created. Careful scrutiny of the code yields no common source of error. QUESTION: What is likely causing LINK TWO to fail? (function() { $(".SearchButton").click(function() { /******************************************************* Displays error message, if no input is present when the submit button is clicked. Hides the error message when a proper search is initiated. *******************************************************/ var search_podcast_input = $("#podcast_input").val(); if (search_podcast_input == "") { $("#podcast_input_error").show().append('<br />'); $("#podcast_input").focus().focusout(function() { $("#podcast_input_error").hide(); }); return false; } var dataString = 'search_input=' + search_podcast_input; $.ajax({ type: "POST", url: './_utilities/php/search_podcast.php', data: dataString, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, success: function (jsonData){ $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/podcast_list.css" }).appendTo("head"); $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/podcast_select.css" }).appendTo("head"); $('#podcast_matches').html(''); $('#podcast_matches').css({'background-color':'#fff','background-image':'none'}).html("<p>Your Search Results for [ <span style='font-weight:bold;'>" + search_podcast_input + "</span> ] in descending order of matched relevance are:</p>"); $.each(jsonData, function(key, object){ $('#podcast_matches').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 /><span class='pubdate'>" + object.item_pubdate + "</span></div></div><div class='pod_describe'>" + object.item_description + "</div><div class='discover'><span class='discover_text'>Discover more ...</span></div><div class='hidden_info'><div class='podcast_link'><a href='podcast_hostpage.php?hash=" + object.item_guid + "&podcast_no=" + object.podcast_no_item + "' title='' target='_self'>Click and Listen</a></div><div class='duration'>Duration: " + object.itunes_duration + "</div><div class='summary'><h2>Summary</h2>"+ object.itunes_summary + " </div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->"); }); var collection = $(".paginate"); var collNum = collection.length; var perPage = 3; collection.slice(perPage).hide(); $('#podcast_matches').append("<div id='pagn'></div><!-- end div#pagn -->"); $("#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(); $('body, html').animate({scrollTop: $('#podcast_matches').offset().top},800); } }); /******************** BEGIN PODCAST INSERT ********************/ $("div.discover").mouseover(function() { $(this).find("span.discover_text").css({"cursor": "pointer","line-height":"1.6em","font-size":"1.4em"}); }); $("div.discover").click(function() { $(this).next("div.hidden_info").slideToggle(800, function() { $('.podcast_link').find('a').on('click', function(event){ event.preventDefault(); var attribute = $(this).attr('href'); var href_arr = attribute.split('?'); var query_str = href_arr[1]; var pairs = query_str.split('&'); var data = []; $.each(pairs, function(i, v){ var pair = v.split('='); var key = pair[0]; var value = pair[1]; var data_arr = [key, value]; data.push(data_arr); }); }); }); $(this).mouseup(function() { $(this).css({"color": "#ccc", "font-weight": "normal"}); }); $('body, html').animate({scrollTop: $(this).offset().top},800); }) .mouseout(function() { $("span.discover_text").css({"cursor":"auto","line-height":"1.6em","font-size":"1em"}); }); /******************** END PODCAST INSERT ********************/ }, complete: function(jqXHR, status) { if (status === 'success') { var aside_height = $('aside').height(); $('#main').css('min-height', aside_height); $('#pagn').show(); } selfSearchResults_Podcast = $('#main').html(); } }); }); })(); Please advise. Roddy
  11. This should be so simple... I am using a canvas variable here (i) without any problems: for (i = 1; i < 10; i++) { c = document.getElementById("canvas" + i.toString()); context = c.getContext("2d"); context.drawImage(image,0,0,c.width,c.height); } But I cannot seem to get it right here: function clicked(thumbNumber) { //drawImage() in canvas5 using canvas1 as the source var canvasNumber = "canvas" + thumbNumber.toString(); canvas5.getContext('2d').drawImage(canvasNumber, 0, 0); } When I step into it and pass ""canvas" + thumbNumber.toString()" it's correct (for example, "canvas1"). But when it hits the next line, where "canvas1" is used, it grinds to a halt with the error: "color.html:332 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at clicked (color.html:332) at HTMLTableCellElement.onclick (VM548 color_balance.html:769) So, apparently it's not recognizing "canvas1" which is on line 332. If I hard code "canvas1" it works fine, but that's not practical here. I have tried at least a half dozen variations on a theme at "canvas5.getContext('2d').drawImage(canvasNumber, 0, 0);" but nothing seems to make any difference, I'm not giving the browser (Chrome Version 64.0.3282.186 (Official Build) (64-bit) on Windows 7 Pro) what it wants to see. Thank you in advance
  12. Hello , I have a problem , I want to wirte HTML code that only refreshes the <div> test , so just the code between de <div>...</div> I was thinking to use some Javascript but I'm not sure this works in PHP , because my in HTML div there's PHP code. My HTML code: <HTML> <HEAD> </HEAD> <BODY> <div id = "other div"> </div> <div id="test"> <?php refresh this code ?> </div> </BODY> </HTML>
  13. Listbox ... java...Help?

    Ok, I might be in the wrong place, pardon if I am. It's been awhile since I coded anything let alone Java and I need a real quick refresher. Quick outline: Online Monthly newsletter. I want user to select Year and month, and display type then hit submit button which will then open a new window with the corresponding Newsletter in the corresponding format. These are all 1 page html documents. Listbox1 has the months, listbox2 has the years. Button1, Button2, Button3 are Show as PDF, Show as Word, Show in Browser respectively. Filenames are Month Year Newsletter.EXTension So it should be something like: <script> function myFunction() { var x = document.getElementById("frm1"); var text = ""; var i; for (i = 0; i < x.length ;i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text; } </script> but this is not on a form, would it be easier to create a form? I just have them as listboxes on a page. Like I said, I can do it, just rusty.
  14. show and hide next element

    FIXED IT! I placed my script a little lower on the document! Worked... no clue why tho :/
  15. 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.
  16. 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.
  17. 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
  18. 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
  19. 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
  20. 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(); };
  21. 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
  22. 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
  23. 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.
  24. 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?
  25. 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: