Jump to content

Ingolme

Moderator
  • Posts

    14,890
  • Joined

  • Last visited

  • Days Won

    174

Everything posted by Ingolme

  1. You need to set the encoding in your text editor. The <meta> tag doesn't set the encoding, it just tells the browser which encoding the file is currently using. If the <meta> tag's encoding isn't the same as the document's encoding then the page will appear broken when certain characters are shown.
  2. What does the error message say? You really need to fix your SQL to prevent people from hacking your website with SQL injection. You should never have variables in SQL strings. Use prepared statements instead. Here's the tutorial page for prepared statements: https://www.w3schools.com/php/php_mysql_prepared_statements.asp
  3. There are two things you need to take into account: id attributes must be unique, so they can never go inside a loop since that would create multiple elements with the same id. Only things that need repeating should go in the loop. The modal box does not need to be repeated, so it must be outside of the loop. This code will solve the problem: <?php require_once "db.php"; $sql = "SELECT imageId,comment FROM output_images ORDER BY imageId DESC;"; $result = mysqli_query($conn, $sql); ?> <!-- Make one single modal window by keeping it outside of the PHP loop --> <div id="myModal" class="modal"> <span id="close-modal" class="close">&times;</span> <img class="modal-content" id="img01"> </div> <!-- Each image in the loop uses a class instead of an id, because ids must be unique --> <?php while($row = mysqli_fetch_array($result)) { ?> <img class="preview" src="imageView.php?image_id=<?php echo $row["imageId"]; ?>" /><br/> <?php } ?> <script> // Add event listener to the close button document.getElementById("close-modal").addEventListener("click", closeModal); // Add event listeners to all the images var images = document.getElementsByClassName("preview"); for(let i = 0; i < images.length; i++) { let img = images[i]; img.addEventListener("click", showImage); } /** Declare event handlers **/ // Close the modal function closeModal(e) { var modal = document.getElementById("myModal"); modal.style.display = "none"; } // Open the modal and show an image function showImage(e) { var img = e.currentTarget; var modal = document.getElementById("myModal"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); modalImg.src = img.src; captionText.innerHTML = img.alt; modal.style.display = "block"; } </script>
  4. CSS cannot cause elements to focus, this has to be done with Javascript. You cannot replace the browser's default cursor. You could possibly position a blinking element in front of the field with CSS but it's not going to be very useful: <style> .textfield-wrapper { position: relative; } .textfield-wrapper::after { pointer-events: none; position: absolute; top: 0; left: 50px; display: block; content: "*"; animation: 1s blink infinite; } @keyframes blink { 0% {opacity: 0;} 49% { opacity: 0;} 50% { opacity: 1;} 100% { opacity: 1;} } </style> <div class="textfield-wrapper"> <input type="text"> </div> The problem is that you need Javascript to somehow measure the width of the text that the user has typed and then move the element to that position which is very complicated. You can target elements which are not focused using the :not() selector: input[type=text]:not(:focus) { } CSS does not currently have a selector for empty fields. There's a possible future selector ":blank" but browsers haven't implemented it yet. For now, you will need to use Javascript to find and modify empty fields.
  5. You can ask any question on the forums and if somebody knows the answer they'll reply to the thread.
  6. Javascript is not a server-side language. It's available to you in the browser, so none of the code is hidden. Javascript code is usually very complex, so you might not understand it when you look at a website's source code, but it is there. Often, websites will load Javascript from a separate js file using a <script src="..."> tag, you can see the Javascript code in that file. Here's the example you're talking about: https://www.w3schools.com/js/tryit.asp?filename=tryjs_statements All of the code in that example is visible. The tutorial pages themselves don't show all of the code, just the parts that they're talking about because it would be hard to highlight the part of the code they want you to focus on if the entire program was there. You can always click the green "Try it Yourself" button to see the missing code. Even those these small pieces of code seem useless, they are the basics. You need to learn them because the more advanced tutorials won't make any sense without this knowledge. The part of the tutorial that tells you how to modify things on the page is in the HTML DOM section but you need to know all of the basics like variables, functions and object before you can understand how to use the HTML DOM. If you would like to see real world applications and try to understand them for yourself, W3Schools has a whole series of examples in their How To section.
  7. It's not that each rectangle is replacing the previous one, it's that you're changing the position of the same rectangle 1000 times over. In your second code example, the square brackets just create an array of size 1 with that single element in it. There's only one element on the page named <div class="rect"> right now, but even if there were more, document.querySelector() only selects the first one. To select multiple elements, you need to use document.querySelectorAll(). What you want, though, is not to select elements which already exist on the page, but to generate new ones. You can create copies of the first one by using the cloneNode() method. Here's how you would do that: <script> // Set the source rectangle's position let rect = document.querySelector(".rect"); rect.style.left = String( Math.floor(Math.random() * 101)) + "vw"; rect.style.top = String( Math.floor(Math.random() * 101)) + "vh"; // Make 1000 copies of the source rectangle for (let count = 0; count < 1000; count++) { // Create a copy. The "true" value meand that we want to copy the element's children as well. let copy = rect.cloneNode(true); // Set the position of the copied rectangle copy.style.left = String( Math.floor(Math.random() * 101)) + "vw"; copy.style.top = String( Math.floor(Math.random() * 101)) + "vh"; // Add the copy to the document as a child of the source rectangle's parent rect.parentNode.appendChild(copy); } </script>
  8. Javascript is not an equivalent to PHP, they serve two different functions and can't replace each other. Forms cannot be submitted to a Javascript file. To make something similar to form handling with Javascript, you would have to have code running on the form page which prevents the form from being submitted and reads values from the inputs. Unless you're using Node.js server software, Javascript runs on the user's browser, so it does not have access to the server's database. You're allowed to save data on the user's computer using localStorage, but only that user can see the data, other people cannot. You can read about localStorage on this page: https://www.w3schools.com/js/js_api_web_storage.asp Javascript is able to read query string values using location.search but you need to do a lot of string manipulation to identify the variable names and values. Its not as simple as in PHP.
  9. That means that XAMPP is not running. First, you should open XAMPP. If you have installed it correctly, there should be an icon on your desktop like this: That should open the XAMPP configuration window. If it doesn't, click on the XAMPP icon in the windows task bar: This is what the XAMPP configuration window looks like: Click on the "Start" button in the row that says "Apache." Once you've done that, PHP files in the htdocs folder will be accessible from the //localhost/ domain in your browser.
  10. Once the software is installed and running on your computer, you will be able to run PHP files from the htdocs/ folder of your XAMPP installation directory by typing http://localhost/ in your browser.
  11. Ingolme

    Var vs. Let

    People mainly use the let keyword because in most cases you won't need to use a variable outside of the block it was declared in. Though this doesn't mean there's any problem with using the var keyword. Understanding both of them and choosing the right one for the job is my recommendation.
  12. For easy development, I used XAMPP (server software) to test PHP on my computer. Here's where you can download it: https://www.apachefriends.org/index.html
  13. What you need to do is hide all of the fields except for the one that you want visible. To be able to loop through all of the fields it would be good to give them a class name. I recommend keeping the Javascript separated from the HTML by removing the onchange attributes and using Javascript's addEventListener() method. This updated HTML structure will help: <select name="Channel" id="Channel"> <option value="Banner_">Banner</option> <option value="Retailer_">Retailer</option> <option value="Print_">Print</option> <option value="Social_">Social</option> <option value="Website_">Website</option> </select> <div class="optionfields" id="retailerOption" style="display:none"> ... </div> <div class="optionfields" id="printOption" style="display:none"> ... </div> <div class="optionfields" id="socialOption" style="display:none"> ... </div> <div class="optionfields" id="webOption" style="display:none"> ... </div> Then the script can look like this: // Only attach the event once the element is available window.addEventListenr("DOMContentLoaded", function() { var channel = document.getElementById("channel"); channel.addEventListener("change", channelChoice); }); function channelChoice(e) { // Associate options with element ids. // This step could be removed if the ids are identical to the option values. const lookup = { "Retailer_" : "retailerOption", "Print_" : "printOption", "Social_" : "socialOption", "Website_" : "websiteOption" }; // Hide all of the fields for now let fields = document.getElementsByClassName("optionfields"); for(let i = 0; i < fields.length; i++) { fields[i].style.display = "none"; } // The variable e contains information about the event. // The channel dropdown can be accessed from e.currentTarget. let channel = e.currentTarget; // Show the field that we care about. // The value of the dropdown will tell us which element // to show by using the lookup table we created earlier. let id = lookup[ channel.value ]; if(id) { let visibleOption = document.getElementById(id); visibleOption.style.display = "block"; } }
  14. The scripts I provided already synchronizes the cursor with the video timeline without resetting. If that's not working it's probably because a different script is interfering with it.
  15. There are some reasons which might cause the code not to work: The cursor images do not exist. The cursor images are in the wrong location in the filesystem. A different script on the page is interfering. Without seeing the website for myself I can't know why it's not working. "a" is the name of the variable which was declared in the line above with the let keyword. It contains a reference to getElementById("clock") It doesn't have to be called "a", I could call it whatever I want. This code is exactly the same as the above code: let whateverIwant = document.getElementById("clock"); whateverIwant.style.cursor = timecursors[index]; You should read about variables in the tutorial: https://www.w3schools.com/js/js_variables.asp
  16. No, CSS cannot use Javascript variables. None of this work can be done by CSS, it can only be done with Javascript. I've finished writing the code for you. I have put comments explaining exactly what each line of code is for in the hope that if you need to change something you understand how it works and will know what to change. <video id="video"> ... </video> <br> <a class="clocktime">Video Clock: <a id="clock">00.00</a>%</a> <script> // This line of code tells the browser to call the function timeCursor() every 200 milliseconds. setInterval(timeCursor, 200); // This is the timeCursor function function timeCursor() { // This array has a all of the possible cursors in order. const timecursors = [ "url(point/Percent00.cur)", "url(point/Percent05.cur)", "url(point/Percent10.cur)", "url(point/Percent15.cur)", "url(point/Percent20.cur)", "url(point/Percent25.cur)", "url(point/Percent30.cur)", "url(point/Percent35.cur)", "url(point/Percent40.cur)", "url(point/Percent45.cur)", "url(point/Percent50.cur)", "url(point/Percent55.cur)", "url(point/Percent60.cur)", "url(point/Percent65.cur)", "url(point/Percent70.cur)", "url(point/Percent75.cur)", "url(point/Percent80.cur)", "url(point/Percent85.cur)", "url(point/Percent90.cur)", "url(point/Percent95.cur)", "url(point/Percent00.cur)", ]; // A reference to the video is REQUIRED in order to measure how much time has passed. // The variable is named "video" and any code that says "video" in the rest of this // script is using THIS variable. let video = document.getElementById("video"); // This generates a number between 0 and 20 based on the // amount of time that has passed in the video which will // let us select the right cursor from the array above. let index = Math.floor(20 * video.currentTime / video.duration); // We need a reference to the link which will show the cursor. // We use getElementById() because the link we want has an id attribute with a value "clock" let a = document.getElementById("clock"); // The variable "a" we created above lets us change the cursor for this link. // "timecursors" is the array we defined above and "index" selects // one of the values from that array. a.style.cursor = timecursors[index]; } </script> A lot of the mistakes you are making in your code show that you are not familiar with the basics of Javascript, you need to study the Javascript tutorial thoroughly.
  17. I'm not sure what kind of link you're looking for. Both CSS and Javascript are connected to the HTML. Javascript can read and write data into the HTML DOM while CSS changes the appearance of the HTML. Through use of an HTML element's style property, Javascript is able to assign CSS rules to an HTML element.
  18. I have a job, so I'm not able to check the forums during work hours. Your code is almost perfect, all you need to do is get a reference to the link. The JavaScript DOM Mehods tutorial has information on how to get a reference to the link that you want. You just need to use getElementById() which is explained on that tutorial page. You won't be able to learn if I write all of the code for you, it would be helpful if you go through the tutorials again to get a better idea of how the languages work.
  19. They're not images, they're actually text. There are these rules in the stylesheets: .rte__abs--frage::before { content: "?"; } .rte__abs--antwort::before { content: "!"; } This rule is the one that determines the size by using the font-size property: .rte__abs--antwort::before, .rte__abs--frage::before { color: #5a5a5a; color: var(--a-theme-secondary,#5a5a5a); float: left; padding: 0 1rem 0 0; font-size: 3rem; font-weight: 600; line-height: 1; }
  20. The code I wrote which updates the cursor while the video is playing just needs one change to put the cursor on the link. Just change this line: video.style.cursor = cursors[index]; Replacing the variable "video" with a reference to the <a> element you want the cursor to be attached to.
  21. The first example I wrote will do that. But you haven't specified where and when to show the cursor.
  22. 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); ?>
  23. 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>
  24. 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>
  25. 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>
×
×
  • Create New...