dsonesuk

Members
  • Content count

    8,716
  • Joined

  • Last visited

  • Days Won

    266

Everything posted by dsonesuk

  1. 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.
  2. What I see is exactly what you want, if you remove inline styling width: 100%; then I see img 1 being smaller.
  3. 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.
  4. 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.
  5. <!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>
  6. 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.
  7. You can't have multiple functions of the same name, Like in the film 'Highlander' there can be only one.
  8. 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>
  9. 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
  10. 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.
  11. 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
  12. 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') }
  13. 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
  14. I doubt it, but most browser (chrome is one) come with option to print (it changes to save) as PDF document.
  15. Lets start with form submission, assigning a onclick to submit button is impractical because a submission can occur if the user presses a enter button on keyboard while within a input, that is why you should use ONSUBMIT on the FORM element, because onsubmit of the FORM element will pick up ANY submission that takes place within it, either by user clicking 'enter' button on keyboard OR user clicking submit button. NOW!that said, you have two kinds of submission here (1) what will know be onsubmit on the form element. (2) the addEventListener which does the same thing NOW depending on which one you decide to use! determines how you go about adjusting how the function to work to accept a specific version. IF you use (1), you MUST apply onsubmit="submitForm(event)" to the FORM element and the function will be function submitForm(e) IF you use this (2), the 'event' (without quotes) will be placed in the function as function submitForm(event) but you must apply the 'event' argument to 'e' variable e=event; to get e.preventDefault(); and e.currentTarget to work; Also currently because var form = document.getElementById("my_form"); AND the addEventListener is placed ABOVE the targeted id element even before it has been rendered, it won't work, and throw an error.
  16. That is because the currentTarget should refer to the form itself not the submit type input, IT should be triggered with onsubmit="submitForm(event)" ON THE FORM element.
  17. The mobile menu should appear at width 768px for tablet portrait view, every menu should be adjusted to responsively fill the whole width, that means losing margin-left: 160px; max-width: 173px; and removing default padding on ul which should have been reset to zero beforehand. But your menu list items will be to wide before that also, so that need adjusting.
  18. When passing event on calling a function onclick="submitForm(e) use 'event' (without quotes) it does not know what a single 'e' refers to, only when it reaches the actual function function submitForm(e) { .... .... } does variable 'e' refer to 'event' to use for e.preventDefault(); and e.currentTarget;
  19. Why not use FastStone Photo Resizer to convert tif to whatever, it does them as a batch, not singular. easy!
  20. Yes! You can do exactly the same as with any other element, but in this case the 4 parameter in rgba(0,0,0,0) sets background opacity to 0, so you need to remove this or change to 1
  21. Two tone example, the onload within function images/s causes problems of changing as its already passed that to trigger for changes, so to get over that as a hack I forced a reload. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Untitled Document</title> <script type="text/javascript"> //Global variables var picWidth = 200; // width of the canvas var picHeight = 222; // height of the canvas var picLength = picWidth * picHeight; // number of chunks var myImage; var myImage2; // Create a new blank image. var newcolor = []; var newcolor2 = []; var r, g, b, rtone, gtone, btone; // Load the image and display it. function dothis() { location.reload(); } function displayImage() { // Create a new blank image. // Get the canvas element. canvas = document.getElementById("myCanvas"); // Make sure you got it. if (canvas.getContext) { myImage = new Image(); myImage.src = "ColourApplTShirt2.png"; // Specify 2d canvas type. ctx = canvas.getContext("2d"); // When the image is loaded, draw it. myImage.onload = function() { // Load the image into the context. ctx.drawImage(myImage, 0, 0); // Get and modify the image data. getColorData(); // Put the modified image back on the canvas. putColorData(); }; } } function getColorData() { myImage = ctx.getImageData(0, 0, picWidth, picHeight); r = document.getElementById("red"); g = document.getElementById("green"); b = document.getElementById("blue"); rtone = document.getElementById("red2"); gtone = document.getElementById("green2"); btone = document.getElementById("blue2"); Maskcolor = [255, 255, 255]; //white if (parseInt(r.value) === 255 && parseInt(g.value) === 255 && parseInt(b.value) === 255 && parseInt(rtone.value) === 255 && parseInt(gtone.value) === 255 && parseInt(btone.value) === 255) { newcolor = Maskcolor; newcolor2 = Maskcolor; } else { newcolor[0] = parseInt(r.value); newcolor[1] = parseInt(g.value); newcolor[2] = parseInt(b.value); newcolor2[0] = parseInt(rtone.value); newcolor2[1] = parseInt(gtone.value); newcolor2[2] = parseInt(btone.value); } for (var i = 0; i < myImage.data.length; i += 4) { if (myImage.data[i] == 255 && myImage.data[i + 1] == 255 && myImage.data[i + 2] == 255) { myImage.data[i] = newcolor[0]; myImage.data[i + 1] = newcolor[1]; myImage.data[i + 2] = newcolor[2]; } if (myImage.data[i] == 0 && myImage.data[i + 1] == 255 && myImage.data[i + 2] == 255) { myImage.data[i] = newcolor2[0]; myImage.data[i + 1] = newcolor2[1]; myImage.data[i + 2] = newcolor2[2]; } } } function putColorData() { ctx.putImageData(myImage, 0, 0); myImage2 = new Image(); myImage2.src = "trans3.png"; myImage2.onload = function() { ctx.drawImage(myImage2, 0, 0); myImage2 = ctx.getImageData(0, 0, picWidth, picHeight); }; } </script> <style> #mask_shadow_wrap {position: relative; display: none;} #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;} </style> </head> <body onLoad="displayImage()"> <div id="mask_shadow_wrap"> <img id="myPhoto" src="ColourApplTShirt2.png" alt=""> <img src="trans3.png" alt=""> </div> <canvas id="myCanvas" width="200" height="222"> </canvas> <p>Main colour</p> <input id="red" type="number" name="r" min="0" max="255" value="255"> <input id="green" type="number" name="g" min="0" max="255" value="255"> <input id="blue" type="number" name="b" min="0" max="255" value="255"> <p>Chest stripe colour</p> <input id="red2" type="number" name="r2" min="0" max="255" value="255"> <input id="green2" type="number" name="g2" min="0" max="255" value="255"> <input id="blue2" type="number" name="b2" min="0" max="255" value="255"> <p></p> <button onclick="dothis()">Change t-shirt chest stripe</button> </body> </html>
  22. As I said it is rough and seems to go lighter on dark colours, but you could in theory depending on how lighter or darker the colour, adjust darkness of shadows etc.
  23. That is why you use the *trans.png image with collar, shading, stitching to place over top of the changed colour t-shirt, you can also use The default color/s to target specific colors with if condition and replace to your needs.
  24. The mask image has the solid colour of inner shape of t-shirt, you can't see it because it is white, the other image is a transparent image just showing shadow and outline.The three values give the rgb color that change masking image, then the transparent shadow/outline image it placed over it.
  25. I think it means something like (note really rough example) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Untitled Document</title> <script type="text/javascript"> //Global variables var picWidth = 200; // width of the canvas var picHeight = 222; // height of the canvas var picLength = picWidth * picHeight; // number of chunks var myImage = new Image(); // Create a new blank image. var myImage2 = new Image(); // Create a new blank image. // Load the image and display it. function displayImage() { // Get the canvas element. canvas = document.getElementById("myCanvas"); // Make sure you got it. if (canvas.getContext) { // Specify 2d canvas type. ctx = canvas.getContext("2d"); // When the image is loaded, draw it. myImage.onload = function() { // Load the image into the context. ctx.drawImage(myImage, 0, 0); // Get and modify the image data. getColorData(); // Put the modified image back on the canvas. putColorData(); }; // Define the source of the image. // This file must be on your machine in the same folder as this web page. myImage.src = "maletshirtMask.png"; myImage2.src = "maletshirtredTrans.png"; } } function getColorData() { myImage = ctx.getImageData(0, 0, picWidth, picHeight); // Loop through data. Maskcolor = [255, 255, 255]; //white newcolor = [0, 255, 0]; //lime //newcolor = [255, 0, 0]; // red // newcolor = [0, 0, 255]; // navy // newcolor = [255, 255, 255]; for (var i = 0; i < myImage.data.length; i += 4) { myImage.data[i] = newcolor[0]; myImage.data[i + 1] = newcolor[1]; myImage.data[i + 2] = newcolor[2]; } } function putColorData() { ctx.putImageData(myImage, 0, 0); myImage2.onload = function() { ctx.drawImage(myImage2, 0, 0); }; } </script> <style> #mask_shadow_wrap {position: relative;} #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;} </style> </head> <body onLoad="displayImage()"> <div id="mask_shadow_wrap"> <img id="myPhoto" src="maletshirtMask.png" alt=""> <img src="maletshirtredTrans.png" alt=""> </div> <canvas id="myCanvas" width="200" height="222"> </canvas> </body> </html>