Jump to content

Ingolme

Moderator
  • Posts

    14,890
  • Joined

  • Last visited

  • Days Won

    174

Posts posted by Ingolme

  1. Your HTML needs to be like this

    <p class="parrot">
      <img src="Images/red_parrot_on_computer_lg_clr_6287.gif" width="195" height="156">
      My story begins with me ...
    </p>

    "p.parrot" selects any <p> element where the class attribute has "parrot" in it. "p.parrot img" selects an image which is inside that <p> element.

  2. 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.

  3. 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>

     

  4. 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.

  5. 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>"); 

     

  6. 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>

     

  7. 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.

  8. 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>

     

    • Thanks 1
×
×
  • Create New...