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

    Embarrassing: I'm so rusty I can't code a For Loop

    in JavaScript

    Posted 

    <!DOCTYPE html>
<html>
<head>
<style>
#demo {
background-color: yellow;
}
[id^=demox] {
background-color: lime;
}
</style>

</head>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>
<p id="demox1"></p>
<p id="demox2"></p>
<p id="demox3"></p>
<p id="demox5"></p>
<p id="demox4"></p>
<p id="demox0"></p>
<p id="demox6"></p>
<p id="demox7"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];

let text = "";
let text2 = "";
for (let i = 0; i <= 5; i++) {
 //for multiple in single paragraph
 text += cars[i] + " xx<br>";
  
  //single value from set id ref
  var thisDemo = document.getElementById("demox5")
  //multiple values from id and index ref
  //var thisDemo = document.getElementById("demox"+i)
  if(thisDemo){ //if exists
  text2 = cars[i] + " yy";
  thisDemo.innerHTML = text2;
  }
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

    First you shouldn't use number at the beginning of id.

    Second, you should check if id even exists if looping through index's

    Third you should set a value to restrict the for index loop  i < 5; else it will go into a infinite loop with I++;

    CSS3 - modal inside a form

    in CSS

    Posted

    Yes! If its a static modal the button normally in the form would simply set the display on modal to display: block/flex instead of display: none.

    If it has to dynamically load content, pressing the button it would need to preload content, then set to display: block/flex.

    If the form does not submit by ajax, the form will reload the page causing the modal to its default state on page load.

    Image Overlay Title

    in CSS

    Posted

    Just checking, You must NOT! have HTML style tags in css file?

    You should be able to right click mouse and select 'view source', once the source is shown, go to css link and it should be clickable, click the link and it should bring up your css file, if not! There is a link problem.

    Image Overlay Title

    in CSS

    Posted

    Link tag does not have correct url path to style.css.

    Link tag does not have attribute rel="stylesheet"

    css file is incorrectly named, you see style.css but if created in notepad and hide extensions is used in operating system filing it really is style.css.txt.

    Not saved as encoded utf-8.

    DIVs Won't Collapse for Small Screen View

    in CSS

    Posted

    There's no thing as 3 as used here (unless its new?), flex: 3 1 0;   it either 1 or 0 (on and off) for shrinking and stretching and I don't know why you would use 0 at end?

      

    .left1 {
  flex: 1 1 auto;
  background: #f5fffa;
  margin-right: 5px;
  border: 1px solid #cef2e0;
  font-size: 1em;
  line-height: 165%;
}

@media screen and (max-width: 700px) {
  .left1, .right2, .left3, .center4, .right5 {   
    flex-direction: column;
  }
.col.left1 {
    flex: 1 1 100%;
}
}

    All media queries should follow default css, which is not within a media query, this is how CSS  (Cascade, Style, Sheet) works, from top to bottom, anything using a  selector previously will be overridden by the latter same selector css code.

    try above.

    Use Adjacent Sibling Selector (+) with Modal

    in CSS

    Posted · Edited by dsonesuk
    OP moved posts

     Like I said when I created the code

    On 7/24/2022 at 9:22 AM, dsonesuk said:

    As long as the next sibling is class w3-modal element it should work.

    You have button changing paragraph to a block element which it already is! While modal remains hidden and then close icon changing modal to display none? Which it is already also.

    ALSO you don't place block element (div) inside a paragraph.

    onclick="this.parentElement.querySelector('.w3-modal').style.display='block'"

    AS LONG as button and modal are siblings this should work, even you have sibling paragraph or break line element between them.

    Debugging with the Chrome console

    in JavaScript

    Posted

    I would have thought you would have to identify first if mobile, by checking if it supports touchscreen, then if you want, by device size as a desktop browser can be resized anyway.

    I imagine a conflict between onclick event and the default action of clicking link itself, you may need to introduce a e.preventDefault() then after session set redirect.

×
×
  • Create New...