Jump to content

Ingolme

Moderator
  • Posts

    14,894
  • Joined

  • Last visited

  • Days Won

    176

Everything posted by Ingolme

  1. The first thing you need to be aware of is that this file cannot display comments because you've set the content-type of the document as an image. The comment needs to be loaded in a different file. Once you're writing code in a different file, you do not need $_GET['comment'] at all. The comment you're looking for is identified by which image it's attached to, which is why you only need the image's ID. The code would be almost the same as the normal image code, but instead of selecting the image data, you're selecting the comment instead. <?php require_once "db.php"; if(isset($_GET['image_id'])) { // I'm adding this line because it's the bare minimum you need to prevent people from hacking your website with SQL injection. // You REALLY should be using prepared statements which are taught in the PHP tutorial. $_GET['image_id'] = (int) $_GET['image_id']; // In this query, we select the comment field, but use imageId in the WHERE clause. $sql = "SELECT comment FROM output_images WHERE imageId=" . $_GET['image_id']; // Get the result $result = mysqli_query($conn, $sql) or die("<b>Error:</b> Problem on Retrieving Image BLOB<br/>" . mysqli_error($conn)); $row = mysqli_fetch_array($result); // Print the comment echo $row['comment']; } mysqli_close($conn); ?>
  2. I'm not entirely sure what you're asking for. Do you want the cursor to appear on the video itself or on this <a> element? Do you actually want the cursor image to update or do you just want to update value of the text inside the <a> element? Are you trying to have the <a> element follow the mouse pointer? Since I don't know what you're really looking for, I can only make guesses. Guess 1: Making the video cursor change This code will change which cursor is displayed when hovering over the video. No <a> element is needed, the cursor is shown on the video itself. This is the simplest code which could fit one of your requirements. <video id="video"> ... </video> <script> setInterval(updateCursor, 1000); function updateCursor() { const cursors = [ "url(point/Percent00.cur)", "url(point/Percent01.cur)", "url(point/Percent02.cur)", "url(point/Percent03.cur)", "url(point/Percent04.cur)", "url(point/Percent05.cur)", "url(point/Percent06.cur)", "url(point/Percent07.cur)", "url(point/Percent08.cur)", "url(point/Percent09.cur)", "url(point/Percent00.cur)", ]; // Get a reference to the video let video = document.getElementById("video"); // Get a value from 0 to 10 based on how far the video has played let index = Math.floor(10 * video.currentTime / video.duration); // Select a cursor based on the index and assign it to the video element video.style.cursor = cursors[index]; } </script> Guess 2: Showing video percentage on the page This code will update some text on the page indicating what percentage of the video has been played. If you want this text to follow the mouse cursor while hovering over the video, it can be done but the code is much more complicated. <video id="video"> ... </video> <br> <a class="clocktime">Video Clock: <a id="clock">00.00</a>%</a> <script> // When the video plays, begin a timer to update the percentage var video = document.getElementById("video"); video.addEventListener("play", () => { setTimeout(updateClock, 500); }); function updateClock(e) { let video = document.getElementById("video"); // Calculate the percentage let percentage = 100 * video.currentTime / video.duration; // Show the percentage in the <a id="clock"> element with two digits of precision document.getElementById("clock").innerHTML = percentage.toFixed(2); // Continue updating the clock if the video is playing if(!video.paused) { setTimeout(updateClock, 500); } } </script>
  3. Using the addEventListener() function to listen for events is a better way to check for clicks than an "onclick" attribute because it has access to a lot more useful information and it keeps the HTML clean. When you want Javascript to affect multiple elements in the same way, class is better than id. I added a class to the links because there are two links that do the same thing, but if you only need one link you can use an id attribute instead. You can have more than one class on an element, you just need to separate the class names with spaces like this: <!-- This link has these classes: repeatbutton, changepointer and align-right --> <a class="repeatbutton changepointer align-right"> To cancel the the looping, you just need to set the video's data-loopcount attribute to 0. If you also want the video to stop when the cancel link is pressed, you can call video.stop(). <a id="cancelbutton" data-video="myVideo">Cancel</a> <script> let link = document.getElementById("cancelbutton"); link.addEventListener("click", cancelLoop); function cancelLoop(e) { let videoId = e.currentTarget.getAttribute("data-video"); let video = document.getElementById(videoId); video.setAttribute("data-loopcount", "0"); // Optionally you can stop the video by adding this line video.stop(); } </script>
  4. The loop property is a boolean, true to loop infinitely or false to never loop. If you want it to loop a specific number of times then you have to have Javascript tell it to play again each time it ends until a certain count has been reached. Here's an example: <video id="VideoExample"> <source src="video/video.mp4" type="video/mp4"> </video> <a class="repeatbutton" data-times="1" data-video="VideoExample">Repeat Once (Play Twice)</a> <a class="repeatbutton" data-times="2" data-video="VideoExample">Repeat Twice (Play Three Times)</a> <script> // Set up the event listener on the video element var video = document.getElementById("VideoExample"); video.loop = false; // It shouldn't automatically loop, we have to make it loop ourselves. video.addEventListener("ended", repeatVideo); // Each time the video ends, run this code. // Listen for button clicks var buttons = document.getElementsByClassName("repeatbutton"); for(let i= 0; i < buttons.length; i++) { buttons[i].addEventListener("click", beginLooping); } // Function definitions function beginLooping(e) { let button = e.currentTarget; let videoId = button.getAttribute("data-video"); let loopCount = button.getAttribute("data-times"); let video = document.getElementById(videoId); video.setAttribute("data-loopcount", loopCount); video.play(); } function repeatVideo(e) { let video = e.currentTarget; let count = Number(video.getAttribute("data-loopcount")); // Keep the video repeating as long as the loop count is greater than zero if(count > 0) { count--; video.setAttribute("data-loopcount", String(count)); video.play(); } } </script>
  5. One of the many Javascript files that your website is including is setting the width and height of the <iframe> elements to zero. I suspect it might be one of the lazy loading scripts, but I don't have a way to find out which script.
  6. Unfortunately, I don't fully understand it because I never put the time into researching it. It wasn't worth the trouble for me. It does seem kind of redundant to have to call setObjectPrototype() and then later manually assign the prototype. Perhaps you could try to search on Google for a clear explanation on how this technique works and why.
  7. I did not work much with inheritance in old Javascript because it was unnecessarily complicated and I did not need it that badly. Fortunately, now you can just use the class and extends keywords so I would recommend using that. It seems I wasn't correct in my previous post. It looks like changing A to A.prototype is not the solution, A itself works but there is one additional step needed to properly inherit a class in old Javascript. The prototype of B has to be assigned an instance of a copy of A. In the code shown in stackoverflow, they named the copy "__()" and they set the value of its constructor to A's constructor. If you do the same, your original code works: Object.setPrototypeOf(B,A); // Assign an instance of a copy of A() to B's prototype (function() { function __() { this.constructor = A; } __.prototype = A.prototype; B.prototype = new __(); })(); I now remember reading about using a dummy class for inheritance a long time ago, but I never end up memorizing how to do it. In the above code "__()" is the dummy class, I've wrapped it in an anonymous function so that it doesn't occupy the global scope.
  8. I've tested the code I wrote and it is correctly distinguishing odd and even values of $x. If you've changed the code then I'll have to see what changes you made to find out why it's not working.
  9. Variables are not global in PHP, so your function does not have access to $x. Because of that, $x is undefined, which is equivalent to 0. You should pass the variable into the function if you want to use it, like this: <?php $x = 11; var_dump ($x & 1); echo "<br>"; // // var_dump is showing int(0) or int(1) for even or odd but function below is always saying even??? // class calculations { public static function OddorEven($value) { if ($value & 1) { echo "x is odd";} else { echo "x is even";} } } // Call static method calculations::OddorEven($x); ?>
  10. You could use the lock on an empty file to determine whether a person has permission. The flock() operation is atomic, so there won't be any race conditions. It isn't perfect, but here's a possible implementation: define('TEMP_LOCK_FILE', 'templock.txt'); // Which file represents the lock define('TEMP_LOCK_TIME', 1); // How long to lock the file // Create the lock file if it does not exist if(!file_exists(TEMP_LOCK_FILE)) { file_put_contents(TEMP_LOCK_FILE, ''); } // Check the file to see if it's locked $fp = fopen(TEMP_LOCK_FILE, 'w'); $fail = !flock($fp, LOCK_EX|LOCK_NB, $is_locked); if ($fail || $is_locked) { // The file was locked by somebody else or we failed to acquire a lock for some other reason exit; } // We have successfully locked the file which means we have permission to get the file contents $data = file_get_contents('otherfile.txt'); echo $data; // Make the other 99 users wait for a short amount of time, then we can release the lock. sleep(TEMP_LOCK_TIME); fclose(); // Closing the file releases the lock The minor problem with the above script is that it makes the user who actually had permission to view the file wait approximately second after the read operation has finished, but it guarantees that other people won't run the code within the time limit.
  11. No, not likely. I would assume a majority, if not all simultaneous requests are coming from different people.
  12. There are ways to solve the problem, but without more information about the primary objective, I cannot recommend any specific approach.
  13. Sessions would only prevent the same user from opening the file 100 times. It wouldn't stop 100 different users from opening the file because each session is tied to an individual. Databases are slower than filesystem access, so it wouldn't be wise to use a database to keep track of how many times a file has been opened, it would actually be faster to use a file itself. Again, if only 1 in 100 users can access the file then only that person will actually get to see the contents of the file and everybody else would see nothing.
  14. I'm not sure what you mean. If file_get_contents() is not executed, then the user will not see anything. If you can explain why you don't want to call file_get_contents() more than once we might be able to find a proper solution.
  15. All you need to do is add a border to an inline-block. Any element will do. If they link to anywhere, an <a> element will work. .tag { display: inline-block; padding: 4px; color: #FFF; border: 1px solid #FFF; border-radius: 10px; } <a href="/" class="tag">Legendado</a> For the filled block, you can give it a background-color and change the color to black.
  16. Checking MDN, the second argument of setPrototypeOf() has to be an actual prototype. To make it work, your code just needs to change to this: Object.setPrototypeOf(B, A.prototype);
  17. The canvas itself is transparent by default. The globalAlpha property determines the alpha of the elements that are going to be drawn next onto the canvas. If you set it to 0.0, nothing you draw will be visible. I'd recommend putting the <script> tags outside of the <canvas> element. There usually shouldn't be anything between the <canvas></canvas> tags.
  18. The rectangle's position is always within the area reserved by the <svg> element, so if you want the <svg> image itself to appear somewhere random on the page then you will have to do that with CSS. If all you want is a rectangle, you don't even need SVG for that, any element with borders will work. SVG is useful if you want more complicated shapes. Here's a simple example to place a rectangle at a random location on the page: <!-- This goes in the head of the document --> <style> .rect { position: absolute; width: 12px; height: 12px; border-radius: 2px; /* rx */ border: 2px solid rgb(255,0,255); /* "Stroke" color and width */ background: #000; /* "Fill" color */ } </style> <!-- The body --> <div class="rect"></div> <script> var rect = document.querySelector(".rect"); rect.style.left = String( Math.floor(Math.random() * 101)) + "vw"; rect.style.top = String( Math.floor(Math.random() * 101)) + "vh"; </script> If you really want to use SVG instead, just replace the <div> with an <svg> picture. <!-- This goes in the head of the document --> <style> .rect { display: block; position: absolute; } </style> <!-- The body --> <svg class="rect" width="14" height="14"> <rect x="1" y="1" width="12" height="12" fill="#000" stroke="#F0F"></rect> </svg> <script> var rect = document.querySelector(".rect"); rect.style.left = String( Math.floor(Math.random() * 101)) + "vw"; rect.style.top = String( Math.floor(Math.random() * 101)) + "vh"; </script>
  19. What does your current HTML look like? Vertical centering can be done in a few different ways depending on the situation.
  20. The width and height of the <svg> tag indicates how big your drawing area is. The width and height of the <rect> tag indicates how big the rectangle should be within the drawing area. It looks like your <rect> tag is missing the x and y attributes. You need to use them to specify where the top left corner of the rectangle should be within the drawing area. The reason that the line thicknesses vary is because the lines are not aligned with your screen's pixels, the problem is called aliasing. Setting the x and y coordinates will fix that because any integer value for x and y will align the rectangle with the pixels grid.
  21. The canvas.js file that you attached is empty. It seems you've renamed the function canvas1() to myGraph() so you need to account for that when copying the Javascript function to another file. Also make sure that your Javascript files are in the right location. Your page has a redundant <script> tag. As long as the files are in the right location, this works for me: aggregate1-new.html <!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <img onload="myGraph()" hidden id="graph" src="chart1015.png" alt="The Graph" width="6" height="4"> <canvas id="canvas1">Your browser does not support the HTML canvas tag.</canvas> <script src="../js/canvas.js"></script> </body> </html> canvas.js function myGraph() { let w = window.innerWidth; let h = window.innerHeight; let wc = w - 20; let hc = h - 25; let wi = 1389; let hi = 889; let hwr = w / h; if (hwr < 1.00 ) { window.alert("Height to Width ratio greater than or equal to 1.00 not recommended!"); } document.getElementById("canvas1").width=wc; document.getElementById("canvas1").height=hc; var c = document.getElementById("canvas1"); var ctx = c.getContext("2d"); ctx.scale(wc / wi, hc / hi); var img = document.getElementById("graph"); ctx.drawImage(img,15,0); document.getElementById("button").style.display='none'; }
  22. You can use the nth-child selector to choose any element and give it a different background color. .select-items div:nth-child(1) { background-color: #F00; } .select-items div:nth-child(2) { background-color: #0F0; }
  23. What do you want the text to do if it doesn't fit? You may be able to use the CSS word-break or overflow-wrap properties to solve the problem.
  24. The behavior you're describing does not occur when I test this code. The error must be occurring in part of the code which you haven't shown here.
  25. This is why I said that the HTML validation errors need to be fixed. If you fix these validation errors, then it will work correctly: https://validator.w3.org/nu/?doc=https%3A%2F%2Fcodestudy.w3spaces.com%2Fmcafeev2-2021-10-29.html The opening and closing tags aren't matching properly. Extra closing </div> tags in your code are causing the wordpress layout to break. If you indent your code it will become apparent: <div class="columns"> <div class="tab"> <ul class="price"> ... <!-- <div> cannot be a direct child of <ul> --> <div id="c11" class="tabcontent content1"> <!-- <li> cannot be a child of </div> --> <li class="fee"></li> ... ... </ul> <!-- Unexpected closing </ul> tag --> </div><!-- Unexpected closing </div> tag --> <div id="c12" class="tabcontent content1"> <ul class="price"> <li class="fee"></li> ... ... </ul> </div> </div><!-- <div class="columns"> ended here --> </div><!-- This <div> tag is messing with the wordpress theme --> <!-- Even more mismatched tags are happening below here --> <div class="columns"> <div class="tab"> <ul class="price">
×
×
  • Create New...