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


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 841 results

  1. This seems so simple: var aC = document.getElementById("arrowCanvas"); var context = aC.getContext("2d"); var img = document.getElementById("arrowImage"); context.drawImage(img, 225, 225); context.rotate(90 * Math.PI / 180); But the canvas never rotates. Also tried: var aC = document.getElementById("arrowCanvas"); var context = aC.getContext("2d"); var img = document.getElementById("arrowImage"); context.rotate(90 * Math.PI / 180); context.drawImage(img, 225, 225); But here, the canvas never even shows up. I could use some help with the correct syntax. Thank you!
  2. I'm having a problem determining if a given control has focus. It seems to me that: if (form.password.focus() == true) ... should tell me if the form's password control has focus. But, it's returning "false" even while I'm typing into the control. So, what is the correct way to determine whether a control has focus? Thank you!
  3. 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!
  4. BACKGROUND: Earlier I posted a script from Matomo that serves as a counter for page hits and various other bits of information gleaned from a user's behavior on a webpage that bears the script. Although I now understand what the code does, I would like to understand its purpose. In particular, I would like to understand the probable reason for assigning to a variable another variable with the same name. The full code is given as: <!-- Matomo --> <script type="text/javascript"> var _paq = _paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//{$PIWIK_URL}/"; _paq.push(['setTrackerUrl', u+'piwik.php']); _paq.push(['setSiteId', {$IDSITE}]); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> The code of interest is var _paq = _paq || []; I find this piece of code problematic for three reasons: It assumes that this variable could already exist, but I have no idea where it could come from. It it does already exist what happens to the pre-existent with the same name. How does it know which value to choose? Is there a latent selection mechanism that tells the assignment operator to choose the second value when the first is undefined? Please advise. Roddy
  5. smus

    Array cloning

    Sorry for stupid question. I can't understand the purpose of cloning an array in JS. Why do we need it? What is the difference between: let a = []; let b = a; and: let a = []; let b = a.slice(0);
  6. Although by no means fully recovered from a recent machine failure, I am back on the road in a much weakened condition. Please consider the following piece of code and correct me where my interpretation of the code is in error. <!-- Matomo --> <script type="text/javascript"> var _paq = _paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//{$PIWIK_URL}/"; _paq.push(['setTrackerUrl', u+'piwik.php']); _paq.push(['setSiteId', {$IDSITE}]); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> My interpretation of same var _paq = _paq || []; _paq is an array that is initialized as empty or some preassigned value. _paq.push(['trackPageView']); Add a new element to _paq whose key-value pair is 'trackPageView' : undefined var u="//{$PIWIK_URL}/"; Create a variable called called u and assign to it the following string "// + some.domain.name + /". _paq.push(['setTrackerUrl', u+'piwik.php']); Add a new element to _paq whose key-value pair is 'setTrackerUrl' and u + piwik.php, respectively. var d=document, g=d.createElement('script'),s=d.getElementsByTagName('script')[0]; Create three variables named d, g and s whose values are d: the DOM document g: the name of a newly created element called 'script' s: an empty index array called 'script' g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s); The resulting script tag should appear as follows: <script text='javascript' async='true' defer='true' src= 'u + piwik.js'></script> function()(); Run the function upon loading the document in which it is contained. Roddy
  7. Hello I need to get the value of a CSS Filter, Hue in this case, that's currently being applied to a canvas. I tried this: var hue = document.getElementById('canvas1').style.filter('hue-rotate'); and it did not work, several variations on that theme also failed. What is the correct syntax? Thank you very much PS: this could apparently also work var hue = getComputedStyle(canvas1).filter But it will not retrieve just the hue. Thank you
  8. I am going to create a Extension for internet explorer but i am not able to understand how to start creating Extension for internet explorer.
  9. I have searched in vain for an answer to this problem, but I am getting no where. Here is the issue: I have a search form that works fine as a desktop application. On mobile devices there is a problem. If a user starts typing in the search input, and then taps one of the words that pops up in predictive text (such as on an iphone), this word then fills the input. The search form returns no matches because, as I have discovered, the only thing being submitted is what the user actually typed before tapping the predictive hint. For example, if they start typing Pennsylvania but only type "Pennsy" and then tap the suggestion, the only value in the input is "Pennsy," not the whole word. I have seen some suggestions: for example, setting the input type to 'password' prevents predictive suggestions (and thus requiring the user to type out the entire term), but this also triggers hiding the text submitted (as if it were a password). I have also seen some suggest that you could use setTimeout() before ajax submits the form to the server, but this did not work either and I am not quite sure of the logic behind this solution anyway. Is there a way for javascript / jquery to "read" the value of an input that the user filled by means of tapping predictive text? Thanks in advance' reveret
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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!
  17. 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!
  18. 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
  19. 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
  20. 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>
  21. 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.
  22. FIXED IT! I placed my script a little lower on the document! Worked... no clue why tho :/
  23. 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.
  24. 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.
  25. 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
×
×
  • Create New...