Jump to content

Ingolme

Moderator
  • Posts

    14,890
  • Joined

  • Last visited

  • Days Won

    174

Posts posted by Ingolme

  1. The block of code I provided should work as long as the HTML for the modal box and the images is there and the Javascript code is further down in the document than the elements are.

    If it's not working, check the browser developer tools to see if any errors appear.

  2. That line of code has to go at the very beginning before the variable "balloon" is used.

    I haven't read the book, but I think the game is just there for teaching purposes so it's not going to be amazing. A decent game would require a whole lot more code.

    If you're just copying code from the book without trying to understand what it does, you won't learn anything. You need to read the parts of the book which explain how the code works so that you can write your own code and use your own skill to create more complex things.

  3. The toString() method of Javascript numbers lets you choose a base. If you choose base 16 it will be shown as hexadecimal.

    Here's how to generate a random number and show it in hexadecimal:

    // Find a random number between min and max (inclusive)
    let min = 64;
    let max = 255;
    let range = 1 + max - min;
    let number = Math.floor(Math.random() * range + min);
    
    // Display the number as hex
    let hex = number.toString(16);
    console.log(hex);

     

    • Like 1
  4. You have a few mistakes in your code.

    Missing an "o" on this line:

    #balloon{position:absolute;

    Capital S where it should be lowercase on this line:

    var timer=setInterval(moveIt, 1000);

    Missing an "r" on the line:

    clearInterval(timer);

     

    With that the code should work, but there's one mistake which the  authors of the book made. They're assuming that the variable "balloon" will automatically point to the image. This currently works because of backwards compatibility, but shouldn't be relied on. You should always use DOM methods to access elements.

    var balloon = document.getElementById("balloon");

     

  5. Elements id attributes have to be unique. When you call getElementById() it gives you just one element, all the other ones are ignored.

    To affect multiple elements you need to use a function which can return a list of nodes, like querySelectorAll() or getElementsByClassName(), then you can loop through them and add event listeners to them.

    If you change your <img> tags from id="myImg" to class="myImg" then this code will listen for clicks on all of the images:

    var images = document.getElementsByClassName("myImg");
    for(let i = 0; i < images.length; i++) {
      images[i].addEventListener("click", e => {
        document.getElementById("myModal").style.display = "block";
        document.getElementById("img01").src = this.src;
        document.getElementById("caption").innerHTML = this.alt;
      });
    }

     

  6. Every time you click on the div, it deletes what's inside the div and replaces it with an empty text field. Since the text field is inside the div, a click on the text field is also a click on the div, which makes the text field get deleted and replaced with another text field.

    If you put the click event on the <p> element instead the event listener will be gone when the <p> element gets removed. That's one possible solution, there are others, but what solution is best depends on what your end goal is with the whole page.

    <!DOCTYPE html>
    <html>
        <head>
           <meta charset="utf-8">
           <title>Changing the content of a div by clicking on it</title>
    
           <script>
              function div1_was_clicked() {
                 document.getElementById("div1").innerHTML = '<input type="text">';
              }
           </script>
    
        </head>
        
        <body>
           <div id="div1">
              <p onclick="div1_was_clicked();">1 2 3</p>
           </div>
           <div id = "div2">
               <input type="text">
           </div>
        </body>
    </html>

     

  7. The syntax is wrong. You forgot the put a closing ">" on the <i> element and instead added two of them on the <img> element:

    <span> <i onclick="document.getElementById('S9id01').style.display='block'" <img src="VoteFraudPenaltySm.jpg">></i></span>

  8. On 3/15/2022 at 8:58 AM, Dachshund_Decals said:

    I think I found the issue; it's in Notepad itself. Correct me if I'm wrong; when "all files" is selected, should there not be a list of file types to choose from? If so, my Notepad is broken because there isn't a list.

    No, there is no list of file types, you just have to manually type the extension in the filename itself.

  9. If you use MS Word, Wordpad or other rich text editors it won't work. It needs to be in plain notepad or a code editor.

    The file needs to be saved with a .html extension instead of .txt. Windows sometimes hides file extensions, so it is possible that your file is saved as ".html.txt" which wouldn't work.

  10. 10 hours ago, nattyjojo said:
    
    
    txt = "Hello, And Welcome To My World!"
    x = txt.casefold()
    
    print(x)
    
    
    txt = "Hello, And Welcome To My World!"
    y = txt.lower()
    
    print(y)

    What's the difference between function casefold() and .lower ?

    Python Tutorial link

     

    It's complicated. Here's an excerpt from the Python manual: https://docs.python.org/3/library/stdtypes.html#str.casefold

    Quote

    Casefolding is similar to lowercasing but more aggressive because it is intended to remove all case distinctions in a string. For example, the German lowercase letter 'ß' is equivalent to "ss". Since it is already lowercase, lower() would do nothing to 'ß'; casefold() converts it to "ss".

     

    10 hours ago, nattyjojo said:

    is there a default to .insert new data to existing list ?

    Example:

    thislist = ["apple", "banana", "cherry"]
    thislist.insert(2, "watermelon") #i used 2 as index and passed watermelon as new data to list and it will take position of cherry
    print(thislist) 

    it returns error when i try it this way :

    thislist = ["apple", "banana", "cherry"]
    thislist.insert(, "watermelon")
    print(thislist)

    If you want to add an element to a list, use the append() method. insert() is for when you want to insert an element at a specific position.

  11. The content of the modal goes inside the modal structure. There will need to be one of these structures for each different object you want to show in a modal, each with its own unique id.

    <div id="id01" class="w3-modal">
        <div class="w3-modal-content w3-card-4">
          <header class="w3-container w3-teal"> 
            <span onclick="document.getElementById('id01').style.display='none'" 
            class="w3-button w3-display-topright">&times;</span>
            <h2>Modal Header</h2>
          </header>
          <div class="w3-container">
            
            IMAGES AND TEXT GO IN HERE
            
          </div>
          <footer class="w3-container w3-teal">
            <p>Modal Footer</p>
          </footer>
        </div>
      </div>

     

  12. Here's a generic solution for closing any modal by clicking outside of it

    window.onclick = function(event) {
      if (event.target.classList.contains("w3-modal")) {
        event.target.style.display = "none";
      }
    }

     

    Quote

    When implementing as above, sometimes clicking the "x" will close it, sometimes clicking outside the modal will close it.  Users will probably figure this out, but it's a bit clumsy.  Is a generic solution available as described above that makes each instance of the modal work as expected?

    If you have the "x" button in a modal, it should always close the modal when you click on it. Clicking outside a modal also can close the modal. Is this the behavior you're expecting? If not, let me know how you want it to behave.

     

    Quote

    The example appears to be designed to be inserted at the end of a structure such as a paragraph.  I'm guessing that's caused by being inside <div></div> tags.  Many models I would like to insert are activated by clicking a small icon that is inline with the naturally reading text.  Is a generic solution available that always works inline, giving the author the ability to insert the appropriate structure breaks manually if needed?

    I'm not sure what you're referring to. Anything with an onclick attribute should be able to open a modal. You can have it embedded within a paragraph like this:

    <p>Click on <span onclick="document.getElementById('id01').style.display='block'">HERE</span> to open the modal.</p>

     

  13. The picture above is correct. For the browser to render it correctly, the circle must be twice as wide as it is tall.

    The matrix scales X coordinates by 2 and then moves them towards the left by 6 units. For Y coordinates, it scales by 1 (keeps them the same size) and shifts them down by 5 units.

    Scaling is done from the top left corner of the document, which is why the circle moves towards the right when scaled up.

×
×
  • Create New...