Jump to content

Ingolme

Moderator
  • Posts

    14,890
  • Joined

  • Last visited

  • Days Won

    174

Everything posted by Ingolme

  1. An empty element is one which has no purpose for the content between the tags. Empty elements do not need an end tag and shouldn't have one. While <p></p> is empty, it's not considered an "empty element" because when there is something between the tags, it's meaningful. This is not common practice, but specific elements such as <p> and <li> actually can work without a closing tag. This is because the browser know that the content of a <p> element must end as soon as it runs into another block element or when its parent ends.
  2. There's no efficient way to solve it. Here's one possible solution, but this query is really inefficient because it's doing string operations on every single row. SELECT A.CustomerName AS CustomerName1, B.CustomerName as CustomerName2, A.City, CASE WHEN A.CustomerName < B.CustomerName THEN CONCAT(A.CustomerName,B.CustomerName) ELSE CONCAT(B.CustomerName, A.CustomerName) END AS DuplicateTest FROM Customers A, Customers B WHERE A.CustomerID <> B.CustomerID AND A.City = B.City GROUP BY DuplicateTest ORDER BY A.City None of the solutions in that article apply here, because the rows shown in the first post aren't actually duplicates by SQL standards. The topic creator is saying that a row [ X Y ] is a duplicate of [ Y X ], but the values in each of the two columns are different from one row to the next.
  3. If you join their Discord channel from the link at the bottom of their website, you can donate HTML and CSS templates for use in W3Schools Spaces. At the moment, that's the only kind of contribution they're open for.
  4. The variables n1 and n2 haven't been updated since the page first loaded. Which means that the fields were empty and they don't have a value. You need to set these values inside the function calls so that they get updated to the correct values when the button is clicked.
  5. It might be that the path Hex-558A1D.png isn't pointing to the image. It might be in another folder. Unrelated to the main problem, the syntax "//" doesn't work for comments in CSS. CSS comments can only be in the form /* comment */. The "//" comments may be breaking some of the other rules in your stylesheet.
  6. Background images can be stretched to fill their container using the "cover" or "contain" keywords of the background-size property: https://www.w3schools.com/cssref/css3_pr_background-size.asp If you want a repeating image, that's the default behavior for background images.
  7. It is working. This may be a problem with your expectations. Was your expectation that the color would appear lighter behind the paragraph than behind the rest of the page? The body and the paragraph have the same background color, just with different levels of alpha. When layered on top of each other, the colors mix together and the difference is nearly imperceptible. I can see the slight tone variation, the paragraph is darker by a tiny amount because its alpha is mixing with the alpha behind it.
  8. You need a complete programming language to pull data from a URL and process it, HTML cannot do the job. If the weather site has cross-origin policy you will be able to load the data using Javascript, if not then you will need a server-side programming language. PHP is one of the easiest server-side languages to learn. From here, it depends on which languages are available to you and how much you know about them. If you don't know any programming languages, the first step is going to be learning the language.
  9. I tested the code that you provided and it works as expected. There must be some context missing.
  10. If you give a unique class attribute to each of your HTML structures, you can use that to distinguish them in your CSS. The tree view HTML could be like this: <ul id="myUL" class="treeview"> ... ... The accordion menu already has a class "accordion" so we won't need to update its HTML. Now we can update the CSS with some selectors which are specific to each HTML structure. /* Tree view */ /* There's a space between ".treeview" and ".active" because ".active" is a descendant of ".treeview" */ .treeview .active { display: block; } /* Accordion */ /* There's no space between ".accordion" and ".active" because both classes belong to the same element */ .accordion.active, .accordion:hover { background-color: #ccc; }
  11. I suspect the file "js/send-mail.js" is causing the problem, but I'd have to see the code to verify it. The other possible source of the problem is "js/main.js".
  12. If you show your code, I might be able to identify where the error is coming from. From the screenshot, it certainly looks like something that's built into the code and not a native browser feature. I checked W3Schools How To Contact form page (https://www.w3schools.com/howto/howto_css_contact_form.asp), it's only an example of how to visually layout a form and isn't actually functional. There's no back end code to handle the form data.
  13. I was just saying to use an <img> tag temporarily to test that the image URL actually works properly. If the image is not visible when using an <img> tag, it means that the URL is invalid.
  14. Are there any errors in the browser console? Try putting the image path into an <img> tag on the page to see if it appears. If it doesn't, then the path isn't correct.
  15. The transform property continues to reserve the same amount of space on the page as before the transformation took place. For this reason, you will have to shrink the container which had the image inside it. You're going to have to rewrite the HTML because you need a wrapper around the image and easy access to the elements which are surrounding the it. <div class="popup_menu_item"> <span class="popup_menu_item_text">Fixed Resistor</span> <span class="popup_menu_item_resistor_image"> <img src="img\Components\Resistors\R10k.png" alt="Fixed resistor"> </span> </div> Now the CSS can be updated. We prevent the container of the image from exceeding the image's width, which is 30px, and we move the image upwards using a top margin. We need to move the center of the image, which is now 60px from the top of the container, up to the center of the container, which is 15px from the top. This means we have to move the image upwards by 60 - 15 = 45px. .popup_menu_item_resistor_image { display: block; height: 30px; } .popup_menu_item_resistor_image img { display: block; transform: rotate(90deg); height: 120Px; border: 1px solid black; margin-top: -45px; margin-left: auto; margin-right: auto; }
  16. It seems pretty straightforward to me. There are three columns with a fixed width each. The boxes within the columns are trivial because block elements automatically stretch horizontally to fit their container. You can space them vertically with margins if necessary. You haven't proposed a design for mobile devices or even medium sized screens, though, which is going to make your website difficult to use on phones and smaller laptops. <!DOCTYPE html> <html> <head> <title>Website layout</title> <style> html,body { margin: 0; padding: 0; } body { display: flex; justify-content: center; } main, .sidebar1, .sidebar2 { border: 1px solid red; box-sizing: border-box; flex: 0 0 auto; } .sidebar1, .sidebar2 { width: 300px; } main { width: 900px; } </style> </head> <body> <div class="sidebar1"> <div style="height:300px; border: 1px solid #000;"> Test </div> <h3>Content</h3> <h3>Content</h3> <h3>Content</h3> <h3>Content</h3> <p>Text Text Text Text Text Text Text </p> <h3>Content</h3> <p>Text Text Text Text Text Text Text </p> </div> <main> <h3>Content</h3> <p>Text Text Text Text Text Text Text </p> <h3>Content</h3> <p>Text Text Text Text Text Text Text </p> <h3>Content</h3> <p>Text Text Text Text Text Text Text </p> <h3>Content</h3> <p>Text Text Text Text Text Text Text </p> <h3>Content</h3> <p>Text Text Text Text Text Text Text </p> </main> <div class="sidebar2"> <p>Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text </p> </div> </body> </html>
  17. If you set the innerText property instead of innerHTML, the string will be displayed as is instead of being interpreted as HTML.
  18. The content of "x" is shown anywhere you put it. But it's HTML, so the browser is going to try to render it instead of showing the code. I'm not sure if what you wanted was to see the code itself, if so then I can provide a solution for that.
  19. To write into an iframe, you have to write into its document. Its innerHTML property is never displayed. The iframe has a contentDocument property which gives you access to the "document" property of the window that the iframe contains. Here's how to write to an iframe: let iframeDoc = document.getElementById("iframe").contentDocument; iframeDoc.innerHTML = "Something"; If you copy the documentElement's outerHTML as you are now, you're going to end up with nested iframes. I'm not sure why you want to embed a copy of the page inside the page. What would make sense is to have a source for data and a destination for data, then copy the data from the source to the destination as in this example: <!DOCTYPE html> <html> <body contenteditable="true" > <div id="input" ondblclick="copyContent()" contenteditable="true" style="float:left; width: 400px; height: 400px; border: 2px solid green;"> Edit content here. Double-click to view content in the iframe. </div> <iframe id="output" style="width:400px; height:400px; border: 2px solid red;"></iframe> <script> function copyContent() { let data = document.getElementById("input").innerHTML; let iframeDoc = document.getElementById("output").contentDocument; iframeDoc.documentElement.innerHTML = data; } </script> </body> </html>
  20. I just wrote it manually to demonstrate what is happening when you run your code. If you open your browser tools you can see the page's structure for yourself. In most browsers F12 works, if not you can right-click on the page and select "Inspect element" from the context menu.
  21. You're copying the entire document into the div, which includes a copy of the div itself. Two divs means two green borders stacked on top of each other. This is the document before clicking: <!DOCTYPE html> <html> <body> <div id="div1" ondblclick="myFunction()" contenteditable="true" style="width: 300px; height: 400px; border: 2px solid green;"> You can Click me once . then edit me ..or.. <br>take a chance on DoubleClick .. </div> <script> let x; function myFunction() { x = document.documentElement.outerHTML ; alert(x); document.getElementById("div1").innerHTML = x; } </script> </body> </html> This is the document after you doubleclick: <!DOCTYPE html> <html> <body> <div id="div1" ondblclick="myFunction()" contenteditable="true" style="width: 300px; height: 400px; border: 2px solid green;"> <html> <body> <div id="div1" ondblclick="myFunction()" contenteditable="true" style="width: 300px; height: 400px; border: 2px solid green;"> You can Click me once . then edit me ..or.. <br>take a chance on DoubleClick .. </div> <script> let x; function myFunction() { x = document.documentElement.outerHTML ; alert(x); document.getElementById("div1").innerHTML = x; } </script> </body> </html> </div> <script> let x; function myFunction() { x = document.documentElement.outerHTML ; alert(x); document.getElementById("div1").innerHTML = x; } </script> </body> </html> This is the document
  22. Since the variable x is declared outside of the function, its value never gets updated and it only contains a copy of what the page content was when the page first loaded. If you declare the variable inside of the function, it will make a copy of the page's content at the time that the function was called.
  23. This line of code is outside of the loop: console.log("Target = " + Target[i]); For that reason, The variable i does not yet have a value and the result is undefined. if (i.hasAttribute("target")) { The above line is incorrect. The variable i is just a number between 0 and the number of links, so it doesn't have a hasAttribute method. You should be calling hasAttribute on the element Target[i] I anticipate further questions about these explanations, so I'll just write functioning code below: <script> function ATargetHtml() { // Declare Target inside the function to guarantee that the list of links is up to date let Target = document.getElementsByTagName('A'); console.log(" let Target = document.getElementsByTagName('A');") for (var i = 0; i < Target.length; i++) { // Show the current target element in the console console.log("Target = ", Target[i]); // Replaced "i" with "Target[i]" if (Target[i].hasAttribute("target")) { Target[i].setAttribute("target", "_self"); } } } </script>
  24. <?= is equivalent to an echo statement. You should remove the = sign.
×
×
  • Create New...