• Content count

  • Joined

  • Last visited

  • Days Won


dsonesuk last won the day on June 12

dsonesuk had the most liked content!

Community Reputation

653 Excellent


About dsonesuk

  • Rank
    w3schools Guru
  • Birthday July 15

Contact Methods

  • ICQ

Profile Information

  • Gender

Recent Profile Visitors

74,463 profile views
  1. what does $database variable ref to exactly?
  2. Well it would help if you place the style properties within the style attribute.
  3. Your menu toggle is completely different from the one in images Yours: The open and close button elements are in different elements, one in the menu itself, the other in logo div. Images: both open and close buttons are in logo div, only one of these show at a time, open to show menu, close to hide menu.
  4. What I see is exactly what you want, if you remove inline styling width: 100%; then I see img 1 being smaller.
  5. You did something like select IIS_IUSRS OR leave as is, and there should be a find button, by clicking that it would bring up a list, if i remember correctly.
  6. No! the if condition is from top and ends at bottom with endif if the condition is true it will include config.php and process the rest of code present, and that is that! There is no alternative like an else condition.
  7. <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Naamloos document</title> <style> .product {display:none} </style> </head> <body> <!-- Container (Product Section) --> <div class="w3-content w3-container w3-padding-64" > <h3 class="w3-center">THE PRODUCTS</h3> <h5 class="w3-center"><em>Beautiful skin all year long.</em> </h5> <br> <p> <strong>Professional products for....</strong>. Some text...........</p><br> <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) --> <div class="w3-row-padding"> <!-- Modal 1 --> <div class="w3-col m3"> <p><img onclick="document.getElementById('id01').style.display = 'block'" src="http://cityhotelsootmarsum.nl/wp-content/uploads/2017/02/koe.png" style="width:100%" class="w3-hover-opacity" alt="Image 1"></p> </div> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-center"> <span onclick="document.getElementById('id01').style.display = 'none'" class="w3-button w3-pink w3-xlarge w3-display-topright">&times;</span> <img src="http://cityhotelsootmarsum.nl/wp-content/uploads/2017/02/koe.png" style="height:400px; width:400px;"> </header> <div class="w3-bar w3-border-bottom w3-pale-red"> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Characteristics')">Characteristics</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Ingredients')">Ingredients</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Body_Sugaring_Pros')">Pro's</button> </div> <div id="Characteristics" class="w3-container product"> <h2>Modal 1.1</h2> <p>I'm not nosey...</p> </div> <div id="Ingredients" class="w3-container product"> <h2>Modal 1.2</h2> <p>really....</p> </div> <div id="Body_Sugaring_Pros" class="w3-container product"> <h2>Modal 1.3</h2> <p>can I eat this?</p><br> </div> <div class="w3-container w3-pink w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id01').style.display = 'none'">Close</button> </div> </div> </div> <!-- Modal 2 --> <div class="w3-col m3"> <p><img onclick="document.getElementById('id02').style.display = 'block'" src="https://upload.wikimedia.org/wikipedia/commons/0/03/Lakenvelder_kalf.jpg" style="width:100%" class="w3-hover-opacity" alt="image 2"></p> </div> <div id="id02" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-center"> <span onclick="document.getElementById('id02').style.display = 'none'" class="w3-button w3-pink w3-xlarge w3-display-topright">&times;</span> <img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Lakenvelder_kalf.jpg" style="height:400px; width:400px;"> </header> <div class="w3-bar w3-border-bottom w3-pale-red"> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Characteristics2')">Characteristics</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Ingredients2')">Ingredients</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Body_Sugaring_Pros2')">Pro's</button> </div> <div id="Characteristics2" class="w3-container product"> <h2>Modal 2.1</h2> <p>bla bla and bla.....</p> </div> <div id="Ingredients2" class="w3-container product"> <h2>Modal 2.2</h2> <p>did you just say bla bla???</p> </div> <div id="Body_Sugaring_Pros2" class="w3-container product"> <h2>Modal 2.3</h2> <p>No, I said mooo</p><br> </div> <div class="w3-container w3-pink w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id02').style.display = 'none'">Close</button> </div> </div> </div> </div> <ol> <li>You cant have two onclick events on the same element</li> <li>An id value cannot have spaces within the value name</li> <li>Every opening element &lt;p&gt; and have a closing element to go with it &lt;/p&gt; <li> x = document.getElementsByClassName("product"); makes a list of all specific classnamed elements. To go through each of these elements you use loop to go through each index of the targeted elements from 0 to total classnames found, using for loop</li> </ol> </div> <script> document.getElementsByClassName("tablink")[0].click(); function openProduct(evt, productName) { var i, x, tablinks; x = document.getElementsByClassName("product"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; // #4 } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].classList.remove("w3-light-grey");// #4 } document.getElementById(productName).style.display = "block"; evt.currentTarget.classList.add("w3-light-grey"); } </script> </body> </html>
  8. There is no such value for target="blank" it should be target="_blank", it should be border: none; NOT border: 0; and using src="english_flag.JPG" means image should be in the same folder this page is in, and the img file must match the image file name exactly, not only exstension of 'JPG', also align="right" is old school, using css text-align or float is modern option.
  9. You can't have multiple functions of the same name, Like in the film 'Highlander' there can be only one.
  10. No! the PHP file in its present state should not be included in to the form page, it is AJAX specific because of the if condition, which should be access by JavaScript AJAX code that uses url to that php file to retrieve required data using server script language PHP. I don't know what jquery.js is? is it the users own custom code or jquery framework code? either way it is perfectly all right if not the norm to place js code at bottom of page, as it will help in loading of page quicker as html and css needs to loaded primarily first, and JavaScript secondary as most of the time JavaScript is triggered by events by the user after the page is fully loaded. The main problem with include ("jquery.js"); is that is needs to be within <script>...</script> tags if custom js code, OR if jQuery framework file, it should link to it, using for example <script type="text/javascript" src="jquery.js"></script>
  11. It seems as the environmental path is not setup to find the location of imagick or it does not exist. see https://stackoverflow.com/questions/27193631/install-imagick-for-php-and-apache-on-windows
  12. You should always provide a pure php script, to sanitize and validate, BECAUSE JavaScript CAN be disabled, You can use AJAX to update content, make database requests/update/insert etc without the need to reload the page constantly, which is required for pure php code to do the same thing. Usually you would not include the php script in the form page, only the AJAX JavaScript code would access it externally, to process the form data and return results to a specific location, it makes more sense this way checking with $_SERVER['HTTP_X_REQUESTED_WITH'] that it is a AJAX request. Without this it could be included in the form page, it would retrieve default information or content on loading of page, a AJAX request could be made using form using the same php script externally, the new AJAX returned results can be use to update/overwrite the default content without reloading the page.
  13. It would transfer the problem to AJAX code, it depends on WHY the ajax php code was included in the form page if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):include('../config.php'); will not run php code beyond this 'if' condition, if page reloads because JavaScript was disabled which prevents the form being submitted, it is no longer a JavaScript AJAX request. if (!isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):include('../config.php'); Will allow the php code within the form to be processed if JavaScript disabled, BUT! will prevent AJAX request being processed if JavaScript is enabled and it goes directly to ajax_comment.php
  14. The html and JavaScript when loaded is processed from top to bottom of the page, unless you have js code to run after the page is fully loaded, (with you original script with code in between <head>...</head>) it will come to var form = document.getElementById("my_form"); form.addEventListener("submit", submitForm, false); first, but! it has not yet got to and rendered the form element with 'my_form' id ref <form id="my_form" action="" method="post" onsubmit="submitForm(event)"> so it does not exist yet! and so throw an undefined error, which means the second won't be initiated either, so no event is assigned to form because of undefined error. You WON'T see anything yet! because you have not done anything to process the return response if sucessful. by adding a simple alert you can see what is returned if (request.status == 200) { // Success alert(request.responseText) // } else { // Error // // alert('not processed') }
  15. Its AJAX, it does not require those, without action the form will submit to itself, and as that php file is included in the form page itself, which maybe used to takes into account if JavaScript is disabled it will then as said be submitted, page reloaded and processed by the same page, BUT! currently it will only show if AJAX request is sent ($_SERVER['HTTP_X_REQUESTED_WITH']), which seems pointless including in the form page as a non JavaScript alternative. While with JavaScript enabled, the form is prevented from being submitted, it gathers the input data and sends it to the php file specified in the JavaScript AJAX url code to be processed and return the result without reloading of page