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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 770 results

  1. iwato

    Matomo - A Mixed Blessing?

    BACKGROUND: It would be a long exercise in the grammar of the English language to explain what you can more readily understand by going directly to the relevant pages for which I provide the needed annotation below. gate7.html On this page you will find code that is identical in structure to six other pages similarly organized but with different content called gate1.html, gate2.html, gate3.html, gate4.html, gate5.html, gate6.html. The Javascript on this page and the other aforementioned pages performs two important functions: one, call a jQuery plug-in called $.colorbox that creates a gallery of iframes; and two, send an HTTP request to the Matomo application signalling a change of iframe. In addition, the gallery in question consists of four pages called gate7a.html, gate7b.html, gate7c.html, and gate7d.php. It should be noted that the other aforementioned six pages including gate1.html through gate6.html all perform similar tasks using nearly identical code. What makes gate7.html is the extension of the last iframe that it calls -- namely, gate7d.php. None of the other pages call an iframe with a PHP extension. overview.html After landing on this page you will find in the navigation bar on your left several options under the subheading Visitor Profile. I would like to draw your attention to two of them -- namely, Event Profiles and Splash Panel. These two panels report similar information obtained from the Matomo database -- albeit via differently constructed PHP cURL calls. Event Profiles: Once the panel fills, click anywhere where it says by Category and what will appear is an entry for all of the seven gates, but the one in question. Splash Panel: Click on any of the items under the heading By Category, and you will discover the same. The absence of data for the Gate Seven gallery. Click on any of the items under the heading By Named Event, and you will discover that the Javascript for Matomo is collecting the desired data. Indeed, you will find listed gate7a, gate7d, and title 7; all of these pages are tracked with the same category tag -- namely, Gate Seven. CAUTION: The Matomo application is extremely slow in my current server environment. You must be patient for the data to fill. Soon, I will have upgraded to a scalable cloud with my own dedicated IP address, and this problem is expected to go away. Also, note that the splash panel consists of some 47 individually constructed webpages eight of which contain Javascript using the same $.colorbox plug-in. INSTRUCTION: After you load the overview.html page open your web console. Then, click on the heading Splash Panel under Visitor Profile, open your Network tab in your web console, and look for a file called sevengates_splashpanel.php. Check the AJAX parameters sent to this page and notice that Gate Seven is among them. Then, check the pages Response section and notice the format of the 21 returned items. The pattern object, object, array occurs six times. For the last three items -- what should contain the information from Gate Seven -- are three empty arrays. QUESTION: How would you explain the aforementioned anomaly of three empty arrays? Roddy
  2. JJJorgensen

    Membership created/controlled pages

    I have no idea where to put this topic so if it's in the wrong place, please forgive me. We have committees/teams in our organization (membership login on website) who should be able to create and edit certain pages of our website online. These are really novice users so basically all they'll be adding is text and pictures but they'll want to make it "pretty". I'm currently using WYSIWYG 14 and CoffeeCup editor to build the website. WYSIWYG has a CMS function in it but I can't get the editors to work properly once I publish it. WYSIWYG doesn't officially support them so I can't really get an answer on what I'm doing wrong. The pages these people would be editing have a boiler plate frame so they're only editing one 'block' of the page. My question is, what is the easiest way to manage this? Or can you point me to online resources that will help me decide which direction to go? I tried searching and all I get is either CMS stand alone options (I cannot add programs to my computer) or 'how to build a membership website'. Considerations: Persons editing will change 1 or 2 times per year, very limited number of editors (5 or 6 tops) and limited number of pages (4 at this time and I don't see that changing much), ease of use for editors, archiving possibilities.
  3. iwato

    Working with the Matomo Cookie

    OBJECTIVE: Suppress my site's splash panel for repeat visitors using a mechanism similar to the one that I use to suppress the panel for visitors whose viewports are too small to handle it properly. BACKGROUND: As I have instructed Matomo not to recognize me when I access the application I have no way of testing whether my code is working. According to a friend who has experimented with his own computer it does not. Although I am able to retrieve the cookie set by Matomo, I am now uncertain about how to handle it. NOTE: The cookie that Matomo appears to set is not set until the page has The COOKIE Sent by Matomo Array ( [_pk_id_1_28d8] => b1dccabc0123a611.1529214805.24.1530731060.1530731060. [_pk_ses_1_28d8] => * ) The PHP that Recovers the COOKIE and Assigns It to a Javascript Variable if (isset($_COOKIE['_pk_id_1_28d8'])) { $cookie_set = 1; } The JAVASCRIPT on the Same Page as the PHP var cookie_set = <?php echo $cookie_set;?>; The JAVASCRIPT on a Loaded Script Page that Controls the Splash Panel if ((!refer_type && !navtype && (viewportWidth > 360)) || !cookie_set) { [the code that sets the splash panel] } QUESTION: Can you see anything in the above logic or design that could be showing the splash panel when it is not desired? Roddy
  4. BACKGROUND: I would like to insert a jQuery UI widget into my code. In order to make the widget work, however, it appears to require a more recent version of jQuery. Should I implement the widget, the HTML in which it resides, the controlling Javascript including the new version of jQuery, as well as the CSS would all be called dynamically when the widget is inserted. My concern is that the new inserted version of jQuery might interfere with the rest of the page not included in the insert. QUESTION: Do I have reason to be concerned? Please explain your answer.
  5. BACKGROUND: Having recently learned about localStorage and familiarized myself with its methods I would now like to apply it as suggested by one of W3Schools' mentors for the purpose of identifying return visitors. Searching on the internet turned up little that was very satisfying. QUESTION: Is there a standard routine for identifying return visitors or must I develop my own? Roddy
  6. I am working on a new website for my wife. I tried to make it mobile responsive by using the w3css collapsible navbar with its accompanying javascript and it was working fine. I later tried to make the navbar sticky to improve on the user experience. On introducing the sticky navbar with its accompanying javascript, it becomes sticky on both desktop and mobile but the menu button on mobile stopped working although it is displayed. file.html
  7. BACKGROUND: I would like to use the following HTTP Request query string, but substitute the empty quotes with something like null or undefined. What are acceptable non-values in this instance? "https://www.nudge.online/_utilities/php/matomo/index.php?module=API&action=index&method=Events.getCategory&url=www.grammarcaptive.com&idSite=1&period=year&date=today&segment=''&expanded=''&secondaryDimension=''&format=json&token_auth=363130ebb19736863e42030f91269e40"; Roddy
  8. I want to use a gif I made for my sprite (it would be nice if the gif only played when the character moved) So far, I have a rectangle with choppy character movements. (It would also be nice if I could make the character movement smoother. I watched tons of tutorials but I couldn't find anything that shows how to do what I want to do. Here is the code <!DOCTYPE html> <html> <head> <style type="text/css"> #backgroundColor { width: 100px; height: 100px; background-color: white; animation-name: backgroundChange; animation-duration: 45s; animation-iteration-count: infinite; } @keyframes backgroundChange { 0% {background-color: white;} 3.3% {background-color: #ffc5c5;} 6.6% {background-color: #f78a8a;} 10% {background-color: #f95d5d;} 13.3% {background-color: #f73737;} 16.6% {background-color: red;} 20% {background-color: #b70303;} 23.3% {background-color: #8c0202;} 26.6% {background-color: #5a0202;} 30% {background-color: #310101;} 33.3% {background-color: black;} 36.6% {background-color: #292929;} 40% {background-color: #3c3c3c;} 43.3% {background-color: #757575;} 46.6% {background-color: #d0d0d0;} 50% {background-color: white;} 53.3% {background-color: #ffc5c5;} 56.6% {background-color: #f78a8a;} 60% {background-color: #f95d5d;} 63.6% {background-color: #f73737;} 66.6% {background-color: red;} 70% {background-color: #b70303;} 73.3% {background-color: #8c0202;} 76.6% {background-color: #5a0202;} 80% {background-color: #310101;} 83% {background-color: black;} 86.6% {background-color: #292929;} 90% {background-color: #3c3c3c;} 93.3% {background-color: #757575;} 96% {background-color: #d0d0d0;} 100% {background-color: white;} } #canvas{ height: 540px; width: 6350px; position:absolute; top:50%; left:52%; transform: translate(-50%,-50%); box-shadow: 0 0 16px 2px rgba(0,0,0,0.4); background-color: #FFF; } </style> <title>Bermuda Triangle</title> </head> <body id="backgroundColor"> <img id="character" style="height: 40px; width: 40px;" src="https://piskel-imgstore-b.appspot.com/img/9478ea0f-79c8-11e8-b58c-67762e4a73c8.gif"> <canvas id='canvas' style="background-image:url(https://preview.ibb.co/fEanjo/realroom.jpg); height: 540px; width: 635px;"></canvas> <script> var canvas = document.querySelector('#canvas'); var context = canvas.getContext('2d'); var xPos = 0; var yPos= 0; context.rect(xPos, yPos, 40, 40); context.stroke(); function move(e) { //alert(e.keyCode); if(e.keyCode==83){ yPos+=10; } if(e.keyCode==87){ yPos-=10; } if(e.keyCode==65){ xPos-=10; } if(e.keyCode==68){ xPos+=10; } canvas.width=canvas.width; context.rect(xPos, yPos, 40, 40); context.stroke(); } document.onkeydown = move; </script> </body> </html>
  9. This code works perfectly on a desktop or laptop, and on non-iOS mobile devices. It takes a thumbnail sample of an edited image and displays it at full size in a new canvas. On iOS, I just see a blank screen where the canvas should be. function click5() { document.getElementById("preview").style = "visibility:visible;"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPreview"); var contextP = cP.getContext("2d"); var cO = document.getElementById("cOriginal"); var contextO = cO.getContext("2d"); var imgData = contextO.getImageData(0,0,cO.width,cO.height); var data = imgData.data; //read full size image //similar image read/write code works fine in another image filter so this does not appear to be the issue for (i = 0; i < data.length; i += 4) { red[i] = imgData.data[i]; green[i] = imgData.data[i+1]; blue[i] = imgData.data[i+2]; alpha[i] = imgData.data[i+3]; } //set adjustments represented by user interaction with thumbnails for (i = 0; i < data.length; i += 4) { red[i] = red[i] + finalRedAdjust; if (red[i] < 0) red[i] = 0; if (red[i] > 255) red[i] = 255; green[i] = green[i] + finalGreenAdjust; if (green[i] < 0) green[i] = 0; if (green[i] > 255) green[i] = 255; } //write full size image with adjustments to memory for (i = 0; i < data.length; i += 4) { imgData.data[i] = red[i]; imgData.data[i+1] = green[i]; imgData.data[i+2] = blue[i]; imgData.data[i+3] = alpha[i]; } //write image in memory to file contextP.putImageData(imgData, 0, 0); //add borders for canvases. document.getElementById('cOriginal').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:hidden; display:none;"; document.getElementById('cPreview').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:visible; display:block;"; //Scroll page to preview image location.hash = "null"; location.hash = "previewAnchor"; } // End Table Click Event Functions I have tried this with small images, so dimensions and file size do not appear to be the issue. Thank you
  10. Hi everyone, I'm wondering it is possible to have few checkbox checked but count as one? For example, I put three checkbox on html, then checked two of three, but will count as one. Suppose I have group of checkbox, but considered count one from three checkbox checked. it will be very appreciate if you can help. Thanks, Gary
  11. BACKGROUND: The following piece of code is a little tricky, because it requires insight into more than what is shown. So, please allow me to show and tell, rather than only tell, and invite you to click on the menu option Sponsor Overview under the subheading Visitor Profile in the navigation bar of the Grammar Captive mainpage. Once arrived click on either of the two items entitled Visits per Number of Pages or Visits per Time Spent and then click again on the same item. What shows and what disappears are different. Now, I well understand why this occurs, but everything that I have tried to correct for it has failed. Indeed, I would like the toggle to effectuate a complete disappearance of both explanation and data, rather than just the explanation. The CODE $(".so_clarify, #visits_per_number_pages, #visits_per_duration").css('margin', '1em 0').hide(); $(".so_param").mouseenter(function() { $(this).css({"cursor":"pointer","font-weight": "800","color":"#ffffff"}); }); $(".so_param").click(function(event) { var index = $(".so_param").index(this); $(".so_clarify").eq(index).slideToggle(function() { if (index == 8) { $("#visits_per_number_pages").show(); } else if (index == 9) { $("#visits_per_duration").show(); } }); }); $(".so_param").mouseout(function() { $(this).css({"cursor":"none","font-weight": "normal","color":"#fadb9d"}); }); Roddy
  12. Hello I have a problem when it comes to traversing through DOM nodes and accessing their data(values). Please have a look at the following code HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="js.js"></script> </head> <body> <div id="div1" class="div1"> <img src="1.png" style="width:100px;height:100px;"/> <h1>This is a Heading1</h1> <p>This is a paragraph1.</p> <button onclick="a(0);">Press me</button> </div> <div id="div1" class="div1"> <img src="2.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading2</h1> <p>This is a paragraph2.</p> <button onclick="a(1);">Press me</button> </div> <div id="div1" class="div1"> <img src="3.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading3</h1> <p>This is a paragraph3.</p> <button onclick="a(2);">Press me</button> </div> </body> </html> JAVASCRIPT var elements = document.getElementsByClassName("div1"); function a(index) { var d = elements[index].childNodes[3].nodeValue; alert(d); } Okay so according to my understanding if I want to access and alert the first div's h1 text value which is "This is Heading1" then my JavaScript code should be var d = elements[index].childNodes[1].nodeValue; However I do not get the text value? Also nodeValue gives me NULL if I use innerHTML I get the text value but at childNodes[3] and not childNodes[1] where you'd expect it to be? Also this example contradicts everything you find at https://www.w3schools.com/js/js_htmldom_navigation.asp Can someone please elaborate on this as it is very important to understand and I am tearing my hair out trying to figure this out.
  13. Is it possible to use this lightbox code with multiple galleries? At the moment, when using it with different galleries, lightbox will pop up, but it only show first gallery, and the others won't display. I have implemented this lightbox code with my PHP code and for the first gallery, everything is fine, but when I click others, only those gallery thumbnails will show up, but the currentSlide isn't and I understand that code changes only in the first gallery. My code: <div class="row"> <div class="row-inner" id="ajax-posts"> <?php while( $refs->have_posts() ): $refs->the_post(); // get_template_part('content/content', 'reference'); $galleryarray = get_post_gallery_ids($post->ID); ?> <div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>"> <a> <div class="bg_img cursor"<?php if ( $thumbnail_id = get_post_thumbnail_id() ) { if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) ) printf( ' style="background-image: url(%s);"', $image_src[0] ); } ?> onclick="openModal(<?php echo $i; ?>);currentSlide(<?php echo $id ?>)"> </div> <h3><?php the_title(); ?></h3> <p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p> </a> </div> <!-- Modal --> <div id="myModal-<?php echo $i; ?>" class="modal"> <span class="close cursor" onclick="closeModal(<?php echo $i; ?>)">&times;</span> <div class="modal-content"> <?php foreach ($galleryarray as $index => $id) { $image = wp_get_attachment_image_src( $id, ‘thumb’ ); /* $attachment_meta = wp_get_attachment( $id );*/ $number = $index+1; ?> <div id="img-<?php echo $id; ?>" class="mySlides"> <div class="numbertext"><?php echo $number; ?> / <?php echo count($galleryarray); ?></div> <img id="<?php echo $id; ?>" src="<?php echo $image[0]; ?>" style="width:100%"> </div> <?php } ?> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <?php foreach ($galleryarray as $index => $id) { $image = wp_get_attachment_image_src( $id, ‘thumb’ ); /* $attachment_meta = wp_get_attachment( $id );*/ $alt = get_post_meta( $id, '_wp_attachment_image_alt', true); $number = $index+1; ?> <div class="column"> <img id="<?php echo $id; ?>" class="demo cursor" src="<?php echo $image[0]; ?>" style="width:100%" onclick="currentSlide(<?php echo $number ?>)" alt="<?php echo $alt; ?>"> </div> <?php } ?> </div> </div> <?php $i++; endwhile; ?> </div> </div> function openModal(i) { document.getElementById('myModal-'+i).style.display = "block"; document.getElementById('pageHeader').style.zIndex = "0"; document.getElementById('pageFooter').style.zIndex = "0"; document.getElementById('pageContainer').style.textAlign = "left"; } function closeModal(i) { document.getElementById('myModal-'+i).style.display = "none"; document.getElementById('pageHeader').style.zIndex = "10"; document.getElementById('pageFooter').style.zIndex = "9"; document.getElementById('pageContainer').style.textAlign = "center"; } 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("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length;} console.log(slideIndex); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } Is it possible to change that code somehow to get it working, or maybe better solution is to sum up every gallery array to one, and make one Modal, where those galleries pop up only when clicking on the right gallery?
  14. I copied the code straight from https://www.w3schools.com/nodejs/shownodejs_cmd.asp?filename=demo_events_open open.js var fs = require('fs'); var readStream = fs.createReadStream('./demofile.txt'); /*Write to the console when the file is opened:*/ readStream.on('open', function () { console.log('The file is open'); }); Upon executing "node open.js" in the terminal, "The file is open" appears in the terminal, then the program terminates. It always happens, even if I don't have demofile.txt open in Notepad or any other program. Not sure why this is happening? When I instead use the string 'close', the console never prints anything out, regardless as to demofile.txt is open or closed. This behavior has happened on both my Windows machine and Raspberry Pi. Tried putting the above code inside a http.createServer statement, but then I get no output at all in the console. Although I suppose that would be unnecessary.
  15. iwato

    Failed Button Alert

    BACKGROUND I have created two functions both of which have been tested and function as expected -- so well, in fact, that one of them can be used to enhance the output of the other. The problem arises when I seek to call these functions with separate button alerts provided below in the order given. Both functions are defined in a jQuery ready statement. BUTTON ALERTS <script> var num = 5; </script> <button onclick="alert(num.annotate('sec'));">Alert!</button> <script> var sec_num = 59039; </script> <button onclick="alert(secTranslate(sec_num));">Alert!</button> DILEMMA: Although the first button-alert works, the second fails with the following error message: "ReferenceError: secTranslate is not defined." with a reference to the onclick attribute. QUESTION: How does one explain this phenomenon? Roddy
  16. QUESTION: Does Javascript called from a cached file behave the same as Javascript called in a freshly loaded file? Roddy
  17. I have 3 files: html that is displaying data from json file using AngularJS, json file containing the data, script.js that stores the scripts. HTML file also has a form, from which I want to add data to my json file (onsubmit="insertData()"). insertData function is going to be in script.js I know, I may use .push method for this, but I don't know how to apply to the json file in this case. script.js var prg = angular.module('ajsprogram', []); prg.controller("outercont", function($scope, $http) { //function to display json file information $http.get('airlines.json').success(function(data){ $scope.info = data; $scope.airlineorder = 'airline'; }); }); function newairline(an,hb,ur,cs){ //new function to insert a data } airlines.json [ { "airline" : "British Airways", "hub" : "LHR", "url" : "http://britishairways.com", "callsign":"SPEEDBIRD" }, { "airline" : "Air France", "hub" : "CDG", "url" : "http://airfrance.com", "callsign":"AIRFRANS" }, { "airline" : "Virgin Atlantic", "hub" : "LGW", "url" : "http://virginatlantic.com", "callsign":"VIRGIN" }, { "airline" : "RyanAir", "hub" : "DUB", "url" : "http://ryanair.com", "callsign":"RYANAIR" }, { "airline" : "Emirates", "hub" : "DXB", "url" : "http://emirates.com", "callsign":"EMIRATES" } ]
  18. DILEMMA: I have a fairly complex JSON object that is introduced via an AJAX call. Unfortunately, my control panel tells me that it is undefined. Is this because it has no value? Or, is it because I do not know how to read the value properly? {"lastVisits"[{"firstVisit":{"prettyDate":"Monday, May 14, 2018"}}]} The name of the variable into which it is read is visitor_data. Am I reading the value of correctly? visitor_data.lastVisits[0].firstVisit.prettyDate Roddy
  19. DILEMMA: Visitors to the mainpage of my website can fill the middle section of the page from the page's navigation bar in either of two ways. Both ways employ Javascript: one, copy a div already on the page into another div on the same page; and two, copy the contents of a div on a another page into same. What I would like to do now is to copy the contents of a div already on the page with a call from the contents of a div that was previously on another page. QUESTION: How does one get a div to replace its own content when the div whose contents needs to be replaced has been filled with content from another page? Roddy
  20. The DILEMMA: Recently I discovered how to enable responsive design on my website's main page. Although the page itself is now responsive, the splash panels that are associated with it are largely dysfunctional. Having experimented in various ways to make these latter responsive as well, I have decided to simply eliminate them on mobile devices. What is the best way to do this? Already I have combined PHP and Javascript to suppress the splash panels in the same session. So, my question is what is the best way to recognize any mobile device? Roddy
  21. BACKGROUND: Working with Matomo has compelled me to dig deeper into the way that information gets passed over the internet. Up until now I have assumed that I can pass just about anything in a query string. In fact, this is exactly what I have been doing. What I am beginning to realize is that the PHP $_POST and $_GET variables have been doing work of which I was not aware. I have come to this conclusion with my new encounter of the encodeURI(), encodeURIComponent(), decodeURI(), and decodeURIComponent() functions. Indeed, I have read that no information can be passed in an HTTPRequest that is not in ASCII format. Is this true? QUESTION: Is it true that when working with PHP the values of PHP HTTPRequests are automatically URL encoded and URL decoded, and that when working with Javascript the same values must be manually encoded and decoded? Roddy
  22. Hello I have the following javascript code.It is suppose to execute when the html page is done loading but in stead it executes and then nothing happend (the page seems like it is loading something but nothing ever happens) Here is my code : function LoadXML() { if(window.XMLHttpRequest) { var xmlhttp = new XMLHttpRequest(); } else{ var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (this.readyState == 0) { alert("im here 0"); } if (this.readyState == 1) { alert("im here 1"); } if (this.readyState == 2) { alert("im here 2"); } if (this.readyState == 3) { alert("im here 3"); } if (this.readyState == 4) { alert("im here 4"); PopulateImages(this); } }; xmlhttp.open("GET", "person.xml", true); xmlhttp.send(); } Feels like I created an infinite loop. The alert message is for debugging purposes. I get the alert message "im here 1"(not 0,2,3,4 just 1) and then the page just keeps on loading and loading and nothing is happening. Cannot open developer tools to check what code is bugging out(if I do than no resources at yet been loaded so there is nothing I can check to try and figure out the problem). I know the code will have worked if my PopulateImages function is called but it is never called.
  23. I'm using somewhat unusual navigation, as seen here. When a user mouses over the bars, they slide out into view. All of that is working fine. The problem is, I cannot find the CSS to make the buttons align left of the edge of the screen (as seen in the image), regardless of the display dimensions. I originally tried: <style> #container {width: 600px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}"; </style> Which worked perfectly. But only on my screen. I thought that position:absolute inside position:relative would work regardless of screen dimensions, but I was obviously wrong. I then tried several variations on dynamically adjusting the screen width in the container <div> with a function that runs onload: function populateArrays() { // populate arrays for (i = 0; i <= 5; i++) { position[i] = -340; bar[i] = document.getElementById("bar" + i.toString()); id[i] = i; } // Add a dynamically built style sheet var sheet = document.createElement('style'); var sWidth = screen.width; var lWidth = sWidth - 1024 // 1024px is width of the page body. The result, 342, works perfectly at my resolution of 1366: 1366 - 1024 = 342 (I use -342). sheet.innerHTML = "#container {width: " + sWidth + "px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: " + -(lWidth) + "px;}"; document.body.appendChild(sheet); } But this also did not work. Perhaps I should be using a formula other than screen.width - 1024 = -(lWidth)? All I know is it doesn't work at other resolutions. What is the correct way to align the images to the far left, partially (mostly) off screen, regardless of dimensions? I've lost an entire day's work to this. Thank you very much
  24. i want to build a bar chart with chartJS and database mysql with two different query, but bar chart not showing. can anyone help me to correct the code? this my query and javascript: <?php $a = mysqli_query("select count(a) as total1 from tbl"); $b = mysqli_query("select count(b) as total2 from tbl"); ?> <body> <div> <canvas id="chart"></canvas> </div> <script> var ctx = document.getElementById("chart"); var chartdata = { labels: 'CHART', datasets: [{ label: "A", data: [<?php while ($data1 = mysqli_fetch_array($a)) {echo '"''.$data1['total1'].'",';}?>], backgroundColor: "#000000" },{ data: [<?php while ($data2 = mysqli_fetch_array($b)) {echo '"''.$data2['total2'].'",';}?>], backgroundColor: "#ffffff" }] }; var chart = new Chart(ctx, { type: 'bar', data: chartdata }); </script> </body>
  25. Please find below the Javascript insertion <script> tag that Matomo uses to track user behavior on a webpage. <!-- 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 --> I would like to clarify the meaning of the final line of the above function -- namely, g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s); QUESTION ONE: Can the script attributes async and defer work indepedently of each another? What is the purpose of each and does their role change when they are imlpemented together? QUESTION TWO: Given the statement s=d.getElementsByTagName('script')[0]; does the statement s.parentNode.insertBefore(g,s); read: "Find the parent node of s and prepend g before s where s is the first node of all script nodes within the document including the node containing this function"?