Jump to content

Ingolme

Moderator
  • Posts

    14,888
  • Joined

  • Last visited

  • Days Won

    174

Everything posted by Ingolme

  1. I think you should take some time to read through the Javascript tutorial and do a lot of practice to get more familiar with it. You will need event listeners for the events which occur when the user goes back to the image selection. I don't know exactly which events those are and on which elements because I don't know how your whole page is set up.
  2. You gave the same name to two functions, the browser can't know which one you wanted to use. You could give the second function a different name, but the better option is to pass a parameter indicating which target you want. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>New page</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <img id="bannerImage_left" src="01.jpg"> <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_left')" style="cursor:pointer; margin-left:40px; margin-right:40px"> <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px"> <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px"> <img id="bannerImage_right" src="01.jpg" ""> <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_right')" style="cursor:pointer; margin-left:40px; margin-right:40px"> <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px"> <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px"> <script> function changeImage(fileName, element) {let img = document.querySelector(element);img.setAttribute("src", fileName);} </script> </body>
  3. Unfortunately, my browser has been marking this as a dangerous file. Perhaps you should post the code here in a code block instead.
  4. If you set the margin of the <ul> element to zero it should remove the space between the divs. The <h1> margin also has an effect and might also need to be set to zero.
  5. Ingolme

    table layout

    It's a table, it's designed to line up columns and rows primarily to mark relationships between data. If you want to layout page content you can try using CSS grids. It's also possible to build a page with the right structure of CSS flexboxes.
  6. An easy patch is to use the global keyword, but usually this kind of situation indicates a fundamental problem with your software's design and it might be worth redesigning your software to make future maintenance easier.
  7. I looked into it again. More bounding box issues. In the case of the vertical line, the box is invisible because 200% of 0 pixels is still 0 pixels. Instead of percentage sizes I tried to use pixels but I can't seem to get pixel values to work for the filter bounding box, so the best solution I can find is to force the path to draw on a larger canvas by drawing something extra out of view. Adding "m600,600 l1,1" to the paths worked. I just tested drawing a vertical line in Inkscape SVG editor to see how they handle it and it's broken there too. There really seems to be no other solution but to make the drawing cover a larger surface area. For your third question, it's a subjective thing. If you're satisfied with how it looks then this is fine, if not then maybe you can specify what's missing.
  8. It took a bit of research but I found that filters have a hidden bounding box. You can make this box larger by setting the x, y, width and height values. <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
  9. The string representation of the boolean value false is an empty string. You can use the strict equals operator === to test if it's false. $mystrpos=(strpos($row[3],$choice)); if($mystrpos === false) { $mystrpos = "false"; } print("T161: choice=$choice - position in row[3]=$mystrpos<br>");
  10. You can start a new line by putting "\n" in the string. There's no other way to format the alert() box. What web developers do is create an HTML element which looks like a box and use Javascript to make it appear. Here's a simple example: <style> #alert-box { background: #FFF; border-radius: 12px; padding: 12px; box-shadow: 6px 6px 12px rgba(0, 0, 0, 40%); width: 480px; max-width: 95%; position: fixed; top: 40px; left: 50%; border: 1px solid #EEE; transform: translateX(-50%); } #alert-box .buttons { text-align: right; } #alert-box button { appearance: none; display: inline-block; padding: 8px; background: #0078d4; color: #FFF; text-align: center; min-width: 80px; border-radius: 6px; border-width: 0; } #alert-box button:hover { background: #3fa8f8; } </style> <button id="show-alert"> Show alert </button> <div id="alert-box"> <div class="text"> <p>For this message / alert box, is there a way of</p> <ol> <li>Setting the font size, color and alignment (e.g., center)?</li> <li>Eliminating the resulting top heading (name of website) or replacing it?</li> <li>Starting a new line?</li> </ol> </div> <div class="buttons"> <button id="close-alert">OK</button> </div> </div> <script> let box = document.getElementById("alert-box"); box.style.display = "none"; let closeButton = box.querySelector("button"); closeButton.addEventListener("click", e => { box.style.display = "none"; }); let showButton = document.getElementById("show-alert"); showButton.addEventListener("click", showAlert); function showAlert() { box.style.display = ""; } </script>
  11. Email formatting is hard and I don't have much experience with it. Would adding a cellpadding="0" help? It might help if you match your tags properly. You're closing your </tr> tag before the first <td> and your closing </table> tag should go above the </body>.
  12. You would need some Javascript to make it work. The <option> elements on their own don't do anything.
  13. Yes, that's about right. Only one of the values can be selected at the same time, so there's only ever one value associated with the name when the form is submitted.
  14. You can select <ul> elements which are descendants of the <nav class="skip"> element using a combinator: .skip > ul Combinators are explained in this part of the CSS tutorial: https://www.w3schools.com/css/css_combinators.asp
  15. In order for a radio button to be grouped with other radio buttons such that only one of them can be selected at a time, they all must share the same name. The value attribute then tells you which one of them was selected. You seem to have changed the W3Schools example to give different names to each radio button, which means that all of them can be selected at the same time. If that's what you want, a checkbox might be a better idea.
  16. There is some information available in the reference. Here's the description of the list attribute which specifies that it expects the id of a <datalist> element: https://www.w3schools.com/tags/att_input_list.asp <input> elements without a type attribute are always assumed to be text inputs by browsers. It's mentioned in the reference page as well: https://www.w3schools.com/tags/att_input_type.asp
  17. You have to specify units for the transformation. I guess you intended the measurements to be in pixels: translate(100px, 10000px) Be sure that the variable formFeedback is pointing at the right element.
  18. The content at the bottom of the page has to be manually put there by you, then you can have links that point to it using the #hash part of the URL In your page content your code should look like this: <abbr title="InterPlanetary File System">IPFS</abbr><sup><a href="#reference-1">1</a></sup> Then you have to add this to the references section of your page. The id attribute has to match the href of the link above. <h2>References</h2> <ol> <li id="reference-1"><a href="https://wikipedia.org/wiki/IPFS">IPFS on wikipedia</a></li> </ol>
  19. Oh, the URL of the background image is relative to the location of the stylesheet. You would have to write it like this: background-image:url('../images/background.jpg');
  20. It looks as if there might be other rules further down in the stylesheet which are overriding it.
  21. It requires some advanced knowledge but here's the API to implement it: https://developers.facebook.com/products/facebook-login/
  22. There are two images. A small one embedded on the page and a large one that the link goes to. In its most basic form it's just this: <a href="large-image.jpg"> <img src="small-image.jpg"> </a> They might have server-side code which generates the image files when they create the article but there's nothing special happening in the browser.
  23. In the two places where it says padding: 14px 16px; replace 14px with a smaller number.
×
×
  • Create New...