Jump to content

dsonesuk

Members
 View Profile  See their activity

  • Posts

    11,220

  • Joined

  • Last visited

  • Days Won

    117

 Content Type 

Posts posted by dsonesuk

    Use Adjacent Sibling Selector (+) with Modal

    in CSS

    Posted 

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

    Highlight the sentence in the paragraph

    in HTML/XHTML

    Posted

    8 hours ago, Osama ghanem said:

    I want to highlight the sentence just when I click on it in the paragraph but also to be able to programmatically select a span without clicking on it (I need this when the reading continues from span to span for using sound mp3 purpose).

    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.

    different data in the modal

    in PHP

    Posted · Edited by 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.

    Reading the 4 sentences from MIT App inventor

    in JavaScript

    Posted · Edited by 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>

     

    catch game code

    in JavaScript

    Posted

    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.

    W3CSS button does not submit the page

    in CSS

    Posted

    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.

    How to code multiply overlay in wordpress

    in CSS

    Posted

    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;
}

     

    • Like 1

    modal gallery inside accordion closes accordion

    in JavaScript

    Posted

    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.

    Can't get the image resolution to adopt to different display sizes.

    in HTML/XHTML

    Posted

    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.

×
×
  • Create New...