Jump to content

Ingolme

Moderator
  • Posts

    14,890
  • Joined

  • Last visited

  • Days Won

    174

Everything posted by Ingolme

  1. The oval appears to be exactly the width of the scrollbar area, 66 pixels as given in your CSS. It has a border within it which is colored the same as the background, which makes it appear smaller, but it still is 66 pixels. The scrollbar rectangle is also 66 pixels wide, even when the black border occupies 4 pixels of space within those 66 pixels. There isn't a way to prevent this, the borders are always rendered within the bounding box in the scrollbar DOM.
  2. You can always write the results to a global variable. You'll have to keep track of how many asynchronous operations are occurring so that you can know when to run a certain block of code. Also, if you don't need to run different code for each query, I'd suggest making a named function and passing it as a callback to the queries. /* Declare global variables */ var globalResults = []; var numQueries = 0; /* Run queries */ if(a == b) { numQueries++; connection.query("SELECT * FROM DB WHERE id= ?;", [id], queryCallback); } if(c == b) { numQueries++; connection.query("SELECT * FROM DB WHERE id= ?;", [id], queryCallback); } /* Function declarations */ function queryCallback(error, results, fields) { if (error) throw error; globalResults[globalResults.length] = results; handleResults(); } function handleResults() { // Leave the function if there are queries that haven't been completed yet if(numQueries > 0) { numQueries--; return; } // Access query results for(var i = 0; i < globalResults.length; i++) { // Do something with globalResults[i] } } If you need to know which query each set of results came from, then you can store the query results in an object which identifies the results. This is less flexible but is necessary if each set of results has to be processed differently. /* Declare global variables */ var globalResults = { resultsA : null, resultsB : null }; var numQueries = 0; /* Run queries */ if(a == b) { numQueries++; connection.query("SELECT * FROM DB WHERE id= ?;", [id], function(error, results, fields){ if (error) throw error; globalResults.resultsA = results; handleResults(); }); } if(c == b) { numQueries++; connection.query("SELECT * FROM DB WHERE id= ?;", [id], function(error, results, fields){ if (error) throw error; globalResults.resultsB = results; handleResults(); }); } /* Function declarations */ function handleResults() { // Leave the function if there are queries that haven't been completed yet if(numQueries > 0) { numQueries--; return; } // Access query results if(globalResults.resultsA) { // Do something with the results of the first query } if(globalResults.resultsB) { // Do something with the results of the second query } }
  3. I think the most robust solution is to use data attributes to keep track of whether a menu is open or not. /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */ function openNav(id) { let menu = document.getElementById(id); // Test if the menu is open let isOpen = menu.getAttribute("data-open"); // Only open the menu if it was not already open if(isOpen) { closeNav(id); } else { // Close any menus which are currently opened var sidenavs = document.getElementsByClassName("sidenav"); for(let i = 0; i < sidenavs.length; i++) { // Close the menus sidenavs[i].style.width = "0"; // Mark the closed menus as not open sidenavs[i].removeAttribute("data-open"); } // Open the menu and mark it as open menu.style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; menu.setAttribute("data-open", "1"); } } /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */ function closeNav(id) { let menu = document.getElementById(id); // Close the menu menu.style.width = "0"; document.getElementById("main").style.marginLeft = "0"; // Mark the menu as not open menu.removeAttribute("data-open"); }
  4. As I said, this code has to run after the other code has generated the HTML and I don't have enough information about your page to determine when that happens. I need to see the whole page to actually identify how the code is being loaded. At the moment, all I can do is make guesses, so my suggestions are not guaranteed to work, of if they do I can't be certain they'll work 100% of the time because of variable loading times. My first guess is to run the code after the onload event. This probably won't work because, if the other code is using AJAX to load the content, it may take longer than the full page load time to appear: window.addEventListener("load", updateButton); function updateButton() { var button = document.body.lastElementChild.querySelector("button"); button.style.background = "#FFF !important"; button.style.color = "#000 !important"; } The catch-all fallback is to just wait a while using setTimeout(). The hard part is deciding how long to wait. If you wait too little, the other code won't have loaded yet; if you wait for too long the buttons will appear visibly unstyled for a period before changing. // Wait 800 milliseconds and then try to style the button setTimeout(updateButton, 800); function updateButton() { var button = document.body.lastElementChild.querySelector("button"); button.style.background = "#FFF !important"; button.style.color = "#000 !important"; } By the way, you don't need the "!important" rules because you're deleting the rules that are already in place.
  5. Wow, those guys really do not want their styles changed. I would have suggested overriding it with CSS, but they have !important rules inside a style attribute, there really is no way around that without Javascript. Once you have a reference to the button, you just have to change the style property of the button which is easy. In order to get a reference to the button you have to write some code that is guaranteed to run after the script that loads this HTML, which I don't have enough information about your page to do that. The code which would get a reference to the button (provided you run it at the right moment) is this: var button = document.body.lastElementChild.querySelector("button"); // Once you have the button, you can change any of its properties button.style.backgroundColor = "#FFF"; button.style.color = "#000";
  6. I found the menu you're talking about: https://www.w3schools.com/howto/howto_js_off-canvas.asp To make the smallest amount of changes to W3Schools' existing code, you can pass the id of the element as an argument to the functions and then update the functions to use the variable instead of a fixed id. After that, you have to add some additional code to make sure that all of the other menus are closed except for the one you clicked on. HTML: <div id="sidenav1" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav('sidenav1')">&times;</a> ... </div> <div id="sidenav2" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav('sidenav2')">&times;</a> ... </div> <div id="sidenav3" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav('sidenav3')">&times;</a> ... </div> <span onclick="openNav('sidenav1')">Menu 1</span> <span onclick="openNav('sidenav2')">Menu 2</span> <span onclick="openNav('sidenav3')">Menu 3</span> Updating the functions to use a variable id: /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */ function openNav(id) { // Close any menus which are currently opened var sidenavs = document.getElementsByClassName("sidenav"); for(let i = 0; i < sidenavs.length; i++) { sidenavs[i].style.width = "0"; } // The rest of the code document.getElementById(id).style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */ function closeNav(id) { document.getElementById(id).style.width = "0"; document.getElementById("main").style.marginLeft = "0"; }
  7. For the most basic functionality, all that's missing is to get the values of the shipping fields like this: function billingFunction() { if (document.getElementById ('same'). checked) { document.getElementById ('billName'). innerHTML = document.getElementById('shippingName').value; document.getElementById ('billZip'). innerHTML = document.getElementById('shippingZip').value; } } However, I noticed that this doesn't account for the person changing the shipping or billing address fields after the checkbox has been clicked. A complete implementation needs to prevent the user from editing the billing fields and update the billing fields whenever the user changes the shipping fields. It would take too much time to try to teach the whole process of doing this in a forum post, so I'll write the resulting code for it. <p> Shipping Information </p> <label for="shippingName"> Name </label> <input type="text" name="shipName" id="shippingName" required> <br/> <label for="shippingZip"> Zip code: </label> <input type="text" name="shipZip" id = "shippingZip" pattern=" [0-9]{5}" required> </br> <input type="checkbox" id="same"/> <label for="same"> Is the billing information the same? </label> <br/> <br/> <p> Shipping Information </p> <label for="billingName"> Name: </label> <input type="text" name="billName" id="billingName" required> <br/> <label for= "billingZip"> Zip code: </label> <input type="text" name="billZip" id="billingZip" pattern="[0-9]{5} " required> <br/> <input type="submit" value="verify"/> <script> (function(){ var checkbox = document.getElementById("same"); var shippingName = document.getElementById("shippingName"); var shippingZip = document.getElementById("shippingZip"); var billingName = document.getElementById("billingName"); var billingZip = document.getElementById("billingZip"); checkbox.addEventListener("change", linkShippingAndBilling); function linkShippingAndBilling() { if(checkbox.checked) { // Listen for changes in the shipping fields shippingName.addEventListener("input", updateBillingName); shippingZip.addEventListener("input", updateBillingZip); // Update the billing fields billingName.value = shippingName.value; billingZip.value = shippingZip.value; // Make billing fields read-only billingName.readOnly = true; billingZip.readOnly = true; } else { // Stop listening for changes in shipping fields shippingName.removeEventListener("input", updateBillingName); shippingZip.removeEventListener("input", updateBillingZip); // Clear billing fields billingName.value = ""; billingZip.value = ""; // Remove read-only from billing fields billingName.readOnly = false; billingZip.readOnly = false; } } function updateBillingName() { billingName.value = shippingName.value; } function updateBillingZip() { billingZip.value = shippingZip.value; } })(); </script>
  8. Have you started writing the Javascript yet? Show me what you've tried and I can help fix any mistakes. If you haven't started writing the Javascript, here are a few tutorial pages explaining some of the steps you need to take: Finding the HTML elements Reading and writing to text fields Adding an event listener (to detect the checkbox changing)
  9. It's best to use DOM objects instead of HTML strings when working in Javascript. var pane = document.getElementsByClassName("heading--large")[0]; var link = document.createElement("a"); link.href = document.URL; pane.after(link);
  10. Unfortunately, I have not done a lot of work with Safari so I probably can't give a definitive answer. From the look of it, I would guess that Safari replaces transparent backgrounds with the theme color, which means that you possibly can override that by setting the background color of the page with the html,body selector: html, body { background-color: #FFF; } If you only want a specific element with a different color, you can set the background color of that element instead of the whole page. Please, there is no need to dismiss the question like this. Replies like this can drive people away from the forums and give people the impression that this is a bad place to ask questions. If you don't know the answer it doesn't mean that the question cannot be answered here, there may other developers who have experience with Safari on the forums who can answer the question.
  11. I think the W3Schools tutorials should be good enough as long as you dedicate your time to it. Once you are done with the HTML tutorial, you should go through the CSS and Javascript tutorials. They don't have video tutorials for CSS and Javascript, but the written tutorials are free. Once you have read all of those tutorials carefully, you can look at the code of the W3Schools How To examples and try to understand how they work for practice. The best way to learn is working with code and seeing how your changes affect it.
  12. There is no way to do it, but if your code editor is syntax highlighted then it should not take longer than a minute to see where all the inner comments are interfering and fix them. A possible workaround is to wrap the code in a media query which will never be satisfied, like this: media (max-width:1px) { It has the side effect that code minifiers will not remove it in the way they remove comments.
  13. It looks like the flash player elements on those pages were for a slideshow and an mp3 player. These pages have some example code for slideshows: https://www.w3schools.com/howto/howto_js_slideshow.asp https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp For playing sounds and music, you can use the HTML 5 <audio> element as shown in this tutorial: https://www.w3schools.com/html/html5_audio.asp To fully understand and work with the code you will need to dedicate some time to learning HTML, CSS and Javascript.
  14. It was a spelling mistake in the URL in your original post. I've added a missing s to the URL and managed to access the page now. I looked through the dynamicdrive Javascript and it looks like, as some kind of workaround for old Internet Explorer versions, they load a special blank page in an <iframe> with a filter for use on HTTPS websites. Since the page does not exist on your server, it gets a 404 error. If it were my own website I'd remove this menu code entirely and rebuild the menu using CSS, because the code is far more complicated than it needs to be for the purpose of supporting browsers which haven't been used in a decade. However, I know that it would be more work than it's worth to do that right now. To solve the problem on your website quickly, follow these steps: Upload an empty HTML file named "blank.htm" to your website's root Update the dynamicdrive file, replacing "blank.htm" with "/blank.htm" in the following line of code: httpsiframesrc: "blank.htm"
  15. I can't seem to access siftradingsystems.com so I'm unable to test it for myself or see the code. It might be using AJAX to try to load content, getting a 404 page and displaying that on the screen, but I can't know for sure. The certificate might be causing a problem if AJAX is trying to load content from an insecure URL, so you would have to change the AJAX to use the secure URL instead. Last I checked DynamicDrive, the code examples they were providing were ancient Javascript, I'm not sure how much of it would still work today and many of their solutions could be implemented much easier and more efficiently these days with pure CSS.
  16. I don't know what intune is, but in terms of valid XML, the following tag is missing an opening angle bracket " < ". CustomTaskbarLayoutCollection PinlistPlacement="Replace">
  17. That line of code is equivalent to this line in your original code: # Adding Empty Cell's $HTMLOUT_week .= str_repeat('<td></td>', $STRING_1 - 1); // str_repeat == "Repeat a string" You can see the minus 1 there too. It creates empty cells for each weekday before the first day of the month. Since empty cells are only needed before the first day and not exactly on the first day, we subtract 1 from the weekday number of the first day of the month.
  18. I tested this in Firefox and it works as I expect. In order to prevent a link from being marked visited you have to delete the page from the browser's history, just clearing the cache wouldn't work. I'm not sure what you're referring to by "link's status" in your second question. The :active state of the link only appears briefly when the link is clicked before the browser loads another page, so its main purpose is to let the user know that the link was clicked successfully which may be good for user experience.
  19. It would be better to separate the HTML and the PHP to make the code much easier to maintain. The PHP should be all at the beginning of the document before anything, even before the <!DOCTYPE> declaration. Here's an example of how to separate HTML from PHP. CSS (goes in the <head>) <style> .highlight { background: rgba(0, 0, 0, 0.5); } </style> HTML template (goes in the <body>) <table class="table table-bordered calendar"> <tr> <td colspan="0">&nbsp;</td> <td align="right"><a href="?GET___year_AND_month=<?php echo $prev; ?>">&lt; PREV</a></td> <td colspan="0">&nbsp;</td> <td align="middle"><a href="?GET___year_AND_month=<?php echo $year_month; ?>">PRESENT</a></td> <td colspan="0">&nbsp;</td> <td align="left"><a href="?GET___year_AND_month=<?php echo $next; ?>">NEXT &gt;</a></td> <td colspan="0">&nbsp;</td> </tr> <tr> <th>Man</th> <th>Tir</th> <th>Ons</th> <th>Tor</th> <th>Fre</th> <th>Lør</th> <th>Søn</th> </tr> <?php foreach($table_content as $week) { ?> <tr> <?php foreach($week as $day) { ?> <?php if($today == "$year_month-$day") { ?> <td class="highlight"><?php echo $day; ?></td> <?php } else { ?> <td><?php echo $day; ?></td> <?php } ?> <?php } ?> </tr> <?php } ?> </table> PHP logic (goes at the beginning of the document): <?php /* Collect data */ // Create a timestamp from user input or, if user input is invalid, the current month $year_month = $_GET['GET___year_AND_month'] ?? date('Y-m'); $timestamp = strtotime($year_month . '-01'); if($timestamp === false ) { $year_month = date('Y-m'); $timestamp = strtotime($year_month . '-01'); } // Get current date $today = date('Y-m-j'); // Navigation links $prev = date('Y-m', strtotime('-1 month', $timestamp)); // Previous Month $next = date('Y-m', strtotime('+1 month', $timestamp)); // Next Month // Data information $month_days_count = date('t', $timestamp); // Days in the month $current_weekday = date('N', $timestamp); // Weekday number (0-6 -> Sun-Mon) /* Construct content for the table cells */ // Initialize variables $weekday_counter = $current_weekday; $table_content = []; // Add empty cells for weekdays preceding the beginning of the month $table_content[0] = array_fill(0, $weekday_counter - 1, ''); // Populate the array $week = 0; for($day = 1; $day <= $month_days_count; $day++, $weekday_counter++ ) { $table_content[$week][] = (string)$day; // Increment week counter if($weekday_counter % 7 == 0) { $week++; $table_content[$week] = []; } } // Add cells for weekdays following the end of the month while(count($table_content[$week]) < 7) { $table_content[$week][] = ''; } ?>
  20. Have you declared the upDate() function yet? In your onmouseout attribute, the unDo function needs parentheses () to run correctly. For now, add a <script> tag in your HTML document and try to declare those functions. Once you have written some code I can help correct any mistakes.
  21. The names of the weekdays each need to be added manually unless you can pull them from a database. Using a loop here would just make the code longer and less organized. If you really want to add another loop, you can create an array of weekday names and construct the HTML for a table row by looping through them. // Add weekdays header $weekday_names = ['Man','Tir','Ons','Tor','Fre','Lør','Søn']; $header = '<tr>'; foreach($weekday_names as $name) { $header .= "<td>$name</td>"; } $header .= '</tr>'; $HTMLOUT_weeks[] = $header;
  22. The way to solve it is to set the table headers outside of the loop, before the loop begins. In the case of your code it can be done near the line where $HTMLOUT_weeks is first initialized. # Array For Calendar // $weeks = []; // $week = ''; $HTMLOUT_weeks = []; // Creating an array. $HTMLOUT_week = ''; // Add weekdays header $HTMLOUT_weeks[] = '<tr><th>Man</th><th>Tir</th><th>Ons</th><th>Tor</th><th>Fre</th><th>Lør</th><th>Søn</th></tr>';
  23. You cannot return the data, you have to do something with it. Print it, manipulate it, store it into a variable or something else. In my previous example, I used console.log() to write the data to the Javascript console. Javascript is not allowed to write to files, neither on the server nor on the user's computer, but you can prompt the user to download a generated text file like this: <script> function file_get_contents(filename, callback) { fetch(filename).then((resp) => resp.text()).then(callback); } function handleResponse(data) { // This code generates a text file with the data and asks the user to download it var blob = new Blob([data], { type: "text/plain;charset=utf-8" }); var a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "file.txt"; document.body.appendChild(a); a.click(); setTimeout(function() { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 0); } file_get_contents('https://mediainfo.tf1.fr/mediainfocombo/L_LCI?context=MYTF1&pver=4014002', handleResponse); </script>
  24. The code will need to be updated so that you are handling the data in the callback function. It actually cannot work identical to PHP's function because it's asynchronous. This would work: <script> function file_get_contents(filename, callback) { fetch(filename).then((resp) => resp.text()).then(callback); } function handleResponse(data) { // Do something with the data here console.log(data); } file_get_contents('https://mediainfo.tf1.fr/mediainfocombo/L_LCI?context=MYTF1&pver=4014002', handleResponse); </script>
  25. As I mentioned before, it's complicated. You'll first have to find the highest timestamp for each name, then attach this timestamp to all rows which have the name. Finally, you would sort by this timestamp first, then the other timestamp second. It most likely involves nested queries which are very slow, but there might be a more efficient method I'm not thinking of right now. This query might work. I wasn't able to test this because it looks like W3Schools' SQL editor doesn't allow me to experiment with nested queries. It might have a syntax error or result in duplicate entries. SELECT t1.ID, t1.NAME, t1.TIMESTAMP AS main_timestamp, t2.TIMESTAMP AS sorting_timestamp FROM table AS t1 JOIN table AS t2 ON ( t1.NAME = t2.NAME AND t2.TIMESTAMP IN (SELECT MAX(TIMESTAMP) FROM table WHERE NAME = t1.NAME LIMIT 1) ) ORDER BY sorting_timestamp, main_timestamp DESC I usually handle complex problems of this sort with the aid of a server-side programming language. Either doing two independent queries and using the results of one query as inputs to the next, or by just sorting the results manually after retrieving them from the database.
×
×
  • Create New...