Jump to content

Ingolme

Moderator
  • Posts

    14,894
  • Joined

  • Last visited

  • Days Won

    175

Everything posted by Ingolme

  1. An id attribute needs to be unique, which means that only one element on the page can have a specific id. If you have more than one element with the same id then the browser will not know which one to choose. For each of the groups you will need a different id to mark which button should be clicked, which you can call defaultOpen1, defaultOpen2 and defaultOpen3. Then you need to write three lines of Javascript, one for each tab group: document.getElementById("defaultOpen1").click(); document.getElementById("defaultOpen2").click(); document.getElementById("defaultOpen3").click(); Your HTML has a few mistakes which you should consider fixing because they might interfere with the Javascript and CSS. Here's the list of problems shown by the W3C validator: https://validator.w3.org/nu/?doc=https%3A%2F%2Fcodestudy.w3spaces.com%2Fpricingtablev4-2021-10-27.html The two most notable problems are: Certain elements as direct children of a <ul> element. The <ul> can only have <li> as children, so other elements should be inside an <li> Missing space between attributes here: <button class="tablinks"style="width:33.3%"
  2. Ingolme

    CSS/HTML advice

    The forum does have a private message system which you can attach files to. It would be better if you could describe the problem in a general way on the forums so that any active member can help you find solutions.
  3. Since you only have three tab groups, you only need three classes, not nine. You will just need to add classes tabs1, tabs2 or tabs3 to the buttons depending on which group they belong to. The content boxes will have classes content1, content2 or content3 depending on which of the three groups they belong to. You won't need a unique class name for each item, but you will need a unique id attribute for each content box.
  4. The W3Schools code needs a bit of tweaking if you want more than one on the page because its code affects all of the elements with the "tablinks" and "tabcontent" class name, no matter where on the page it is. To fix this with few changes to the existing code, each set of links and content boxes will need to identify which tab group it belongs to with a class name. The easiest way is to replace "tablinks" and "tabcontent" with variables that are passed into the openCity() function. A tab would look like this: <!-- A tab in the first tab group --> <button class="tablinks tabs1" onclick="openCity(event, 'London', 'tabs1', 'content1')">London</button> <!-- A tab in the second tab group --> <button class="tablinks tabs2" onclick="openCity(event, 'Paris', 'tabs2', 'content2')">Paris</button> The content box would look like this: <!-- A content box from the first group --> <div id="London" class="tabcontent content1"> <!-- A content box from the second group --> <div id="Paris" class="tabcontent content2"> And the openCity() function would updated to work with the above changes like this: function openCity(evt, cityName, tabclass, contentclass) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class=[contentclass] and hide them tabcontent = document.getElementsByClassName(contentclass); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class=[tabclass] and remove the class "active" tablinks = document.getElementsByClassName(tabclass); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the button that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } I've kept the tablinks and tabcontent classes on these groups so that the CSS styles would apply to all of them in the same way, they're not needed for the Javascript to work.
  5. If there is PHP embedded in your Javascript then I don't think it's worth minifying. Ideally, you would completely separate Javascript and PHP and rewrite the code so that Javascript obtains the data through other means, such as HTML data attributes (generated by PHP) or AJAX.
  6. Ingolme

    CSS/HTML advice

    If you describe what you're trying to accomplish I can break it down into a set of smaller and simpler tasks and help you learn how to solve each one of them.
  7. This line of your CSS is causing that: .active:after { content: "\2212"; } I'm not sure why it's there. If it's being used for a different part of the page, then you'll have to use a more specific selector which doesn't apply to the pagination links.
  8. It looks like the links are generated using a content management system like Drupal, so I don't think they have a way to change the HTML directly. Ideally, it would be best alter the content management system to generate the links with the correct text. How this is done depends on what CMS you're using and how you're using it. If that's not an option, then you could use Javascript to loop through links and edit the text for each one of them. You will have to specify what text you want for each link, which I've done with an object. function editLinks() { // THe left indicates the current value and the right indicates what we want to change it to var replacements = { "http://example.com" : "Visit Website 1", "https://example.com" : "Visit Website 1", "http://example2.com" : "Visit Website 2", "https://example2.com" : "Visit Website 2" }; // Loop through every link on th page. // If you have more information, you can select a smaller range of links to test. var links = document.getElementsByTagName("a"); for(let i = 0; i < links.length; i++) { let link = links[i]; // If a replacement was found then change the link text if(replacements[link.text]) { link.text = replacements[link.text]; } } } // The above function should start running when the page has finished loading. window.addEventListener("DOMContentLoaded", editLinks);
  9. It's not easy and Javascript alone wouldn't be able to do it. You need a server-side language and a database or access to an API. There are two possible approaches: Get the country from the user's IP address by using an IP address database or API. This can only be done by a server-side language. Get the user's coordinates with the geolocation API and use a database or API to determine which country the coordinates belong to. Both of these would take a few hours of work to complete, so it's not something I can write in a forum post. If you want to avoid this complication, the best solution is to ask the user what country they're in, using a dropdown or an autcomplete text field.
  10. The child selector ">" selects children of anything on the left which match the selector on the right. I only mentioned <div class="grid-container"> because it was the only element in your example code that matches the selector, but it doesn't mean that it needs to be a div. To be more precise, the previous code would work on <div> elements which are children of any element with class="grid-container"
  11. The class names were probably given so that you can change the code and try styling the other elements for practice. Even if that weren't the case, it's good to treat all of the elements equally because you don't know if you'll want to style different elements in the future when redesigning your website.
  12. It selects <div> elements which are immediate children of <div class="grid-container". Which means that it selects <div class="item1">, <div class="item2">, <div class="item3">... etc. because they are the children of <div class="grid-container">
  13. The divs with class "myDIV" are still being displayed as blocks. You need to make those into inline elements as well.
  14. If you don't want the <div> to have an effect on the page flow, you can make it an inline element instead of a block using CSS. .myDIV:hover + .hide { display: inline; color: red; }
  15. You're allowed to put an <img> tag inside the <div class="hide"> element.
  16. Chrome probably also has this security feature built in. All browsers should, though I haven't tested them all to make sure. If you want to test AJAX you need to set up a web server, it doesn't have to be on a web host, you can create a small testing environment on your own computer by using XAMPP.
  17. There are only two possible scenarios where the variables are not displayed on that page: You haven't yet visited the page that gives the variables a value. Your browser is blocking the session cookie. If you use private mode in your browsers, that might be the reason that cookies are being blocked.
  18. You have to do more than just change the value from false to true. With asynchronous requests, the code which uses the response data needs to go in a callback function. This function needs to run when the onload event fires. W3Schools has an asynchronous example with a callback function here: https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_get If you're running code from your filesystem, Firefox will block all AJAX requests for security. AJAX needs to be tested on a web server.
  19. Unfortunately, there is no way to do that in standard SQL, but it really won't take longer than 5 minutes to write the query even if the table has 100 columns.
  20. The code looks correct and it is working properly in Firefox on my device. I first opened this page to write values to the session: https://tryphp.w3schools.com/showphp.php?filename=demo_session1 Then I opened this page and can see the correct values: https://tryphp.w3schools.com/showphp.php?filename=demo_session2 If the problem is happening with the code on your web server then show your code here and maybe I can find out why it's not working.
  21. The only way is to do a null test on every column in the table. SELECT * FROM table_name WHERE column1 IS NULL OR column2 IS NULL OR column3 IS NULL OR column4 IS NULL I can't think of any practical use case where I'd want to test for null in all columns.
  22. Javascript does not have any kind of command which stops the program until something has been completed. It is asychronous, the program continues running while callback functions are called when specific events occur. For this reason, anything you want to wait for has to be in a callback function. When the program starts, it runs the queries. For each query it adds 1 to a counter (numQueries) to indicate that the query is now running. Each query has a callback function that runs once the query has completed. This callback function stores the results of the query in a global variable for later use and then calls the handleResults() function. The handleResults() function subtracts 1 from the counter I created earlier to indicate that this query has ended. I seem to have made a mistake though, it should look like this instead: numQueries--; if(numQueries > 0) { return; } If there are still unfinished queries, then the counter will be a value bigger than zero, so we will return from the function and do nothing. Once all the queries have ended, the counter numQueries should be zero, so we know that we can start processing the query results. The results will be stored in the global variable globalResults.
  23. The DISTINCT modifier doesn't apply to fields, it applies to the query as a whole. You can think of "SELECT DISTINCT" as a single keyword which searches for unique rows. The AND operator will return a row only if both conditions are true. The OR operator will return a row if either one of the conditions is true. The query is looking for rows where Country is not Germany AND also Country is not USA. If you used OR instead then it would return all of the rows. The expression (NOT Country='Germany') means "all possible values except Germany" The expression (NOT Country='USA') means "all possible values except USA" The union [OR] of those two sets is all possible values, because any value that one of the sets lacks exists in the other set.
  24. I'm not entirely certain what the problem is. PHP does not prevent you from outputting at any point in the program before it halts. Warnings are not catchable, they're printed right on the screen, so a try-catch block won't work. I would print out the values of the variables right before they're used and then, once the program is done running, the values shown immediately before the warning will be the ones you are looking for. // Debug var_dump($Dim['bays'], $Dim['purlins'], $Dim['qty']); echo "<br>\r\n"; $numPieces = ($Dim['bays']*$Dim['purlins'])*$Dim['qty']; I suspect that some of the keys in $Dim are not set.
  25. If the link is a block element then the border cannot be used as an underline. The only way to work around the problem on your website is to put all of the block styling, such as padding and borders, on the parent element of the link and make sure that the link is an inline element.
×
×
  • Create New...