Jump to content

dsonesuk

Members
 View Profile  See their activity

  • Posts

    11,220

  • Joined

  • Last visited

  • Days Won

    117

 Content Type 

Everything posted by dsonesuk

  1. dsonesuk
    <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>W3.CSS Modal</h2> <button onclick="this.nextElementSibling.style.display='block'" class="w3-button w3-black">Open Modal</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="this.closest('.w3-modal').style.display='none'" class="w3-button w3-display-topright">&times;</span> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div> </div> </div> </div> </body> </html> As long as the next sibling is class w3-modal element it should work.
  2. dsonesuk
    $("div:not('.foobar') figure").remove(); Should work.
  3. dsonesuk
    overflow-y: scroll; The vertical scroll bar always shows whether the content extends beyond screen height or not!
  4. dsonesuk
    You have variable sentences representing each span, just refer using index and trigger click event. var timer = setInterval(myFunction, 5000); var i = 0; function myFunction(){ sentences[i].click(); i++; if(i >= sentences.length){ i=0; } } So at specific track time you can simply use sentences[0].click(); for highlight of first sentence sentences[1].click(); for second... so on.
  5. dsonesuk
    The trouble is you are creating multiple modals with the same id, the id should be unique within the document. When click the button the last modal with id "myModal" is shown. IF you want a modal for every image use a counter variable $modalCount and increment using $modalCount++; within the while loop and add variable to anything referring to modal id. Example <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal<?php echo $modalCount;?>"> //and <div class="modal fade" id="myModal<?php echo $modalCount;?>"> The modal id will now be unique and related to the button with matching target id. #myModal1 to id="myModal1" #myModal2 to id="myModal2" #myModal3 to id="myModal3"... and so on. IF you want a single modal, take modal out of while loop, then you need to store the data and one way is to use custom data- attributes to store this data in a element itself. The button itself already uses this with data-target="#myModal", so just expand on this for filesize and filetype with data-filesize="<?php echo $filesize; ?>" and data-filetype="<?php echo $filetype; ?>" you can then read these custom data- values within the modal.
  6. dsonesuk
    Try using valid html5 layout, with doctype, html, body and then adjust line-height or remove it! To see if that makes a difference.
  7. dsonesuk
    A id #reference should be unique and only used once within a page and when using flex-box usually to the parent container. Only classes can be used multiple times within the page.
  8. dsonesuk
    Have tried split()? You can use '.' As a delimiter to store each sentence in an array and refer to index ref to select and manipulate. <!DOCTYPE html> <html> <body> <h1>JavaScript Strings</h1> <h2>The split() Method</h2> <p>split() splits a string into an array of substrings, and returns the array:</p> <p id="test"> (1) Lorem ipsum dolor sit amet. (2) consectetur adipisicing elit. (3) Similique aliquam totam odit excepturi. (4) reiciendis quam doloremque ab eius quos. </p> <p id="demo"></p> <script> let text = document.getElementById("test").innerHTML; const myArray = text.split("."); document.getElementById("demo").innerHTML = myArray[1]; </script> </body> </html>
  9. dsonesuk
    You do realise image converted to base64 is going to be a massive size. The code applied to $image has a semi colon in the middle.
  10. dsonesuk
    $("input[type=checkbox][id*="+str+"]") first will look at any id with 'cbB0000F0S1' anywhere within id value, now look at the values above 'cbB0000F0S9', 'cbB0000F0S10', 'cbB0000F0S11', 'cbB0000F0S12', see the problem? Remove the asterisk to match exact value of item just checked.
  11. dsonesuk
    Not! a good start <!DOCTYPE html> IS FOR HTML5, I don't know why anyone would want to go backwards and use frames. With HTML5 and css3 you can easily achieve the result you require. example with transform: scale();
  12. dsonesuk
    Your code refers to variables that are not defined, your html code is incomplete. IF your tutorial suggests this is correct! I suggest you throw it away and look else where, as to pinpoint a solution to this is impossible, as currently everything is wrong! JavaScript html which adds to the problems. Validate html, then press F12 and view and correct, any console error message regarding JavaScript code.
  13. dsonesuk
    Looks like, after 30sec's show message 'Game Over!' And stop repeating setInterval timer gameTimer.
  14. dsonesuk
    The other way without server language is to prevent submission/reload and read the value directly.
  15. dsonesuk
    By default, a page submission reloads the page and resets the inputs to default values. Onchange will do this and when reloaded and you press the blue button, no onchange has occured, so the value remains to the default set selected attribute value. The URL in address bar should reflect this, as with no method it defaults to 'get'. To read the value passed by form submission you need server language to read and store submitted data in server language variable.
  16. dsonesuk
    Depending on the parallax complexity you need, you can also do a simple parallax effect in CSS alone.
  17. dsonesuk
    its like using top:, left:, right: properties, if you don't have a position: set, with anything other than 'static', then top:, left:, right: properties will do nothing! So :before and :after are the same without content: being used body:after { content: "Hello World!";/*this can just be content: "";*/ /* below is applied only to selector using :after (or :before) with a content: property, without it you get nada */ display: flex; align-items: center; justify-content: center; position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; font-size: calc(3em + 5vw); color: white; z-index: 99999; background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); text-align: center; white-space: nowrap; }
  18. dsonesuk
    For every opening div tag there should be a equal closing tag, you have more opening than closing therefore the browser will try to fix this by adding the closing div tags and usually get it wrong.
  19. dsonesuk
    You are missing the content: property content:""; for :before and :after All other properties are applied this, its like a textual element.
  20. dsonesuk
    Use console.log() at each event to show what is happening. For instance console.log('a') then next console.log('b') and so on. then check console web developers tools F12 -> console panel If multiple are triggered. Be sure the class 'active' is not used on more than one event to a specific element.
  21. dsonesuk
    'HighScore' is treated as a different variable compared to 'highScore'
  22. dsonesuk
    Try to avoid width 100%, if you have margins/padding these can increase the width by their size x 2. Just remove float with float: none; and because they are block elements they will stretch to the total width available to them, so just set width: to width auto; AND AGAIN! media queries GO BELOW non media query css, Cascading Style Sheet read from top to bottom, you will have conflict if media queries and non media query css are mixed.
  23. dsonesuk
    CSS does not do that! JavaScript or server language (PHP, ASP) only do that. Look up include in JavaScript and PHP tutorials.
  24. dsonesuk
    https://www.w3schools.com/css/css_howto.asp
  25. dsonesuk
    Then that means you haven't used normalize.css. Most browsers use different margins and paddings etc compared to others for elements, normalize.css set's elements styling to be the same. Also make sure you use recommended meta tag settings for viewport.
×
×
  • Create New...