Jump to content

dsonesuk

Members
  • Posts

    11,220
  • Joined

  • Last visited

  • Days Won

    117

Everything posted by dsonesuk

  1. <!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++;
  2. 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.
  3. You don't move files? you access the cloud via link and access specific directory directly. There is no-way to download to a different device, you need a single point of reference to download to, that can be accessed by both devices.
  4. Might be better to download to cloud storage, you would then access it from any device, might want to set it up to use your specific current ip address so only you can allow the file to upload/download.
  5. 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.
  6. 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.
  7. Maybe this https://www.w3schools.com/HOWTO/howto_html_include.asp and this https://www.w3schools.com/tags/tag_link.asp With https://www.w3schools.com/tags/att_script_src.asp Also https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
  8. ul.customUL, ul.customUL > li { list-style-type: none; padding: 0px; margin: 0; } ul.customUL > li.tree { padding-left: 19px; } try this
  9. You can't! img element is void element its unable to hold any content. Best you can do is use use block or inline-block element such as div or figure element https://www.w3schools.com/TAgs/tag_figure.asp and use margin or padding to give you spacing you need.
  10. You can only have a single class attribute per element.
  11. Well, I guess one of us did it wrong! The styling is right! Might be selector issue?
  12. ul.customUL, ul.customUL li {list-style-type: none; padding: 0; margin: 0;}
  13. 1. https://www.w3schools.com/howto/howto_css_arrows.asp 2 CSS can't, JavaScript can. 3. I'm sure if you do a search in https://www.w3schools.com/ , you will figure it out.
  14. Oh dear, what a shame, never mind.
  15. A colour called pastel?? or as in pastel blue, green red etc ? see: https://htmlcolors.com/palette/323/pastel
  16. With image look into https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit_all To centre, use flex with align-items and justify-content.
  17. dsonesuk

    Font-awsome.css

    https://fontawesome.com/v5/docs/web/setup/host-font-awesome-yourself
  18. 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.
  19. You need to specify flex-wrap: wrap; or columns will remain in a single row and amend widths to fit full-width;
  20. Like I said when I created the code 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.
  21. Shouldn't make any difference?, the button is still used and still a sibling to modal. Check the button still has a height, width and not zeroed.
  22. 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.
  23. The way I checked if device is mobile is to check if it supports touchscreen, which was a good few years ago.
×
×
  • Create New...