Jump to content

Nic727

Members
  • Content Count

    253
  • Joined

  • Last visited

Everything posted by Nic727

  1. Nic727

    What are the best media query?

    Hi, What are the best media query to fully support normal desktop and laptop, tablets and phone? For now I always went with what I was feeling would be ok by figuring how it works by resizing my browser, but with a single live testing on my iPhone 8, I saw that it wasn't working. I don't really know why. Now mobile screens have almost the same resolution as desktop PC and it's hard to only use media query. For example, I use that to remove the white borders around my home screen here http://nicolas-duclos.com and my iPhone 8 show as a 750px width, but @media only screen and (max-width: 860px) { .home-border{ display:none; } } it doesn't work. I don't really know why the white border is still here and why the text is so small. It's 25px for my title and on my desktop for testing it look so big and horizontal screen too, but on vertical position text look smaller. Also, now there are lot of phones of different size on the market, what are the best way to support phone size without breaking tablets and desktop/laptop? What are the best media query to use? Thank you
  2. Nic727

    What are the best media query?

    Ok thank you. It worked. I will do more testing. https://www.w3schools.com/css/css_rwd_viewport.asp But what do you mean by device-independent resolution smaller than 768px? From what I saw, from the apple website, my device has a 750px width, but without the meta tag, it's like if it is a 1080px width and 1920px height. Just weird, but thank you for the tips. I will use that more often in my project since it's saving lot of times and a better use of media queries.
  3. I would like to know how to remove the overflow behind the mobile Safari UI? In most mobile browser I don’t have this problem and I would like to know a solution for Safari. http://image.noelshack.com/fichiers/2018/40/6/1538829555-c909ce35-46ec-47a7-b228-955550e95e03.png http://image.noelshack.com/fichiers/2018/40/6/1538829559-a0bc59fd-3b02-4cb7-ab0f-16d1e44aaceb.png Thank you
  4. Nic727

    How to remove browser overflow in Safari?

    I fixed the problem by removing 100vh for the height of my home container and added 100% height and position absolute. But I guess it only work on website with a fullscreen page and not one-pager since it's an absolute position.
  5. Nic727

    How to remove browser overflow in Safari?

    Well, I have the latest safari version on IOS 12. I just don’t know how to fixe that. I will look into it more deeply this evening. If you want to look by yourself, http://www.nicolas-duclos.com
  6. Nic727

    jpg vs JPG

    Hi, My computer is creating JPG file while editing the original picture and when working locally on my website everything is working well even if I use .jpg for my images. When on my server, it doesn't work and I need to change all my code to .JPG instead (capital letter). Is there a way in modern server to make that .jpg and .JPG is the same? Thank you
  7. Nic727

    overflow hidden doesn't work.

    Hi, So I have a div containing a link containing an image and a filter, but I'm unable to hide part of the child elements. <div class="ex-story"> <a title="Link to Indonesia: Responsible palm oil production by WWF" class="ex-stoy-link" href="https://wwf.exposure.co/indonesia-responsible-palm-oil-production" target="_blank" rel="noopener noreferrer"> <div class="ex-story-img" style="background-image:url(https://exposure.imgix.net/production/posts/297733/cover-photo/cover-1530781336.JPG?w=1200&amp;q=50&amp;sharp=10&amp;fit=crop&amp;fm=pjpg&amp;auto=format)"> <div class="bg-filter"></div> </div> </a> </div> .ex-story{ width:100%; height:250px; margin-bottom:10px; border-radius:20px; overflow:hidden; position:relative; } .ex-stoy-link{ text-decoration:none; color:white; } .ex-story-img{ width:auto; height:100%; background-position: center; background-size: cover; position:relative; background-attachment: fixed; } .bg-filter{ position:absolute; width:100%; height:100%; background-color:black; opacity:0.4; transition:opacity 0.2s; } .ex-stoy-link:hover .bg-filter{ opacity:0.2; -webkit-backdrop-filter: blur(3px); } I'm trying to make my block a bit circular. It looks like a new trend… The problem is that I added border-radius 20px and overflow hidden to the parent element, but I still see a rectangular shape. Thank you
  8. Nic727

    overflow hidden doesn't work.

    Ok it looks like it's a bug with Edge. I will report that to Edge devs to fixe this.
  9. Nic727

    overflow hidden doesn't work.

    Edge.
  10. Nic727

    overflow hidden doesn't work.

    weird… I will try to clear my browser cache and see if it helps. ------ EDIT: Not working… Maybe something else... I tried in codepen https://codepen.io/anon/pen/wxJWxG It works when loading the page, but if you make the window smaller to get a scrollbar and activate the fixed attachment, it goes back to rectangular shape. I added a border-color and it looks like my image just doesn't care of the overflow hidden. EDIT 2: Well… If nothing works, I will just keep a mixed design between round and rectangle. - Round : Buttons, main album image on the album page and textarea to type message. - Rectangle : Blog images and images inside albums
  11. Nic727

    overflow hidden doesn't work.

    I found that background-attachment fixed remove my border-radius. If I remove the attachment of the image, border-radius is showing up, but I don't have the effect I wanted on image… What I have: http://image.noelshack.com/fichiers/2018/29/7/1532288938-1.png What I want with fixed background image: http://image.noelshack.com/fichiers/2018/29/7/1532288938-2.png
  12. Hi, I have a little problem. I finished my logo and want to add it to my website right before my name in the nav bar, but if I had the image, it break my navigation. I'm not really sure how I can fixe that. I tried some stuffs here and there, but wasn't really successful. I would like to set a height to my image, but I don't want my image to mess up with the general height of the navigation. <!-- NAVIGATION BAR --> <header class="navigation"> <div class="nav-container"> <a class="logo" href="nicolas-duclos.com"><img src="images/Logo-black.png"> NICOLAS DUCLOS</a> <!-- MOBILE MENU --> <a class="mobile-menu" href="#"><i class="fas fa-bars" aria-hidden="true"></i></a> <nav class="right-menu"> <a class="close-mobile-menu" href="#"><i class="fas fa-times"></i></a> <ul class="menu"> <li class="menu-item"><a href="index.html">ACCUEIL</a></li> <li class="menu-item"><a href="albums.html">ALBUMS</a></li> <li class="menu-item"><a href="blogue.html">BLOGUE</a></li> <li class="menu-item current"><a href="a-propos.html">À PROPOS</a></li> <li class="menu-item"><a href="#">CONTACT</a></li> </ul> </nav> </div> </header> My idea would be to use display flex to my nav-container and items-align:center, but it make my floating right "right-menu" going to the left next to my logo and name. My goal is to have logo+name on left and menu on the right. Do you have any idea how I can do that? Thank you
  13. Nic727

    How to set Logo height in Nav bar? (Resolved)

    Nevermind, saw that justify-content:space-between to nav-container and adding vertical-align:middle to my image fixe that. Not sure why vertical-align work here since my image is not in a table, but nice to see it works.
  14. Hi, I have some problems with my form validation. Here is my HTML which look good. <div id="form-messages"></div> <form id="ajax-contact" name="email" method="post" autocomplete="off" action="contact.php"> <p>Les champs sont obligatoires*</p> <div class="rowform"> <div class="half left"> <label>Prénom*</label> <input name="prenom" id="prenom" type="text" autocomplete="off" required> </div> <div class="half right"> <label>Nom*</label> <input name="nom" id="nom" type="text" autocomplete="off" required> </div> </div> <div class="rowform"> <label>Courriel*</label> <input name="courriel" id="courriel" type="email" autocomplete="off" required> </div> <div class="rowform"> <label>Sujet*</label> <input name="sujet" id="sujet" type="text" autocomplete="off" required> </div> <div class="rowform"> <label>Votre message*</label> <textarea id="message" name="message" autocomplete="off" required></textarea> </div> <div class="end-form"> <button id="submit" class="submit btn btn-dark" name="submit" type="submit" value="envoyer"><i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer</button> </div> </form> Here is my JS. For some reasons, my regex doesn't work. If I put it outside the submit part, it add the red border when loading the page, which is good for the code, but if I have it as bellow, it doesn't prevent the form from submitting and it doesn't add the red border. Do you have any ideas how it can do something like when submitting, check if regex ok, if all good, submit the form or don't submit. $(function() { // Get the form. var form = $('#ajax-contact'); // Get the messages div. var formMessages = $('#form-messages'); // TODO: The rest of the code will go here... // Set up an event listener for the contact form. $(form).submit(function(event) { // Stop the browser from submitting the form. event.preventDefault(); // TODO // Serialize the form data. var formData = $(form).serialize(); //REGEX <------------------------------ DOESNT WORK! var $prenom = $('#prenom'); /*var $nom = $('#nom'); var $email = $('#courriel');*/ var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; if($prenom != regex1){ $prenom.css({"border-color":"red"}); return false; }else{ // Submit the form using AJAX. $.ajax({ type: 'POST', url: $(form).attr('action'), data: formData, success: function(response) { // Make sure that the formMessages div has the 'success' class. formMessages.removeClass('error'); formMessages.addClass('success'); // Set the message text. formMessages.text(response); // Clear the form. $('#prenom').val(''); $('#nom').val(''); $('#courriel').val(''); $('#sujet').val(''); $('#message').val(''); }, error: function(data) { // Make sure that the formMessages div has the 'error' class. formMessages.removeClass('success'); formMessages.addClass('error'); // Set the message text. if (data.responseText !== '') { formMessages.text(data.responseText); } else { formMessages.text('Oops! An error occured and your message could not be sent.'); } } }) } }); }); $('form').each(function() { this.reset() }) //reset form when refresh or reload the page instead of keeping the infos. Also, should I add regex to PHP or not? Is it ok just like that? / Only process POST requests. if ($_SERVER["REQUEST_METHOD"] == "POST") { // Get the form fields and remove whitespace. $prenom = strip_tags(trim($_POST["prenom"])); //Obligatoire $nom = strip_tags(trim($_POST["nom"])); //Obligatoire $nom = str_replace(array("\r","\n"),array(" "," "),$nom); $courriel = filter_var(trim($_POST["courriel"]), FILTER_SANITIZE_EMAIL);//Obligatoire $suj = strip_tags(trim($_POST["sujet"])); //Obligatoire $message = trim($_POST["message"]); //Obligatoire // Check that data was sent to the mailer. if (empty($prenom) || empty($nom) || empty($courriel) || empty($suj) || empty($message) || !filter_var($courriel, FILTER_VALIDATE_EMAIL)) { // Set a 400 (bad request) response code and exit. http_response_code(400); echo "Oops! There was a problem with your submission. Please complete the form and try again."; exit; } // Set the recipient email address. // FIXME: Update this to your desired email address. $destinataire = "contact@nicolas-duclos.com"; //to or recipient // Set the email subject. $sujet = $suj; //Obligatoire // Build the email content. (Corps du message) $email_content = "Prenom : $prenom \r\n"; $email_content .= "Nom : $nom \r\n"; $email_content .= "Courriel : $courriel \r\n"; $email_content .= "Sujet : $sujet \r\n"; $email_content .= "Message :\r\n \r\n $message \r\n"; // Build the email headers. $semi_rand = md5(time()); $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x"; $headers = 'From: '.$prenom.' ' .$nom.'<' .$courriel. '>'."\r\n"; $headers .= 'Reply-To: '.$courriel."\r\n"; $headers .= "Content-type: text/plain; charset=UTF-8"."\r\n"; /* Variable email très importante sinon cela envoie deux fois */ $mail = mail($destinataire,$sujet,$email_content,$headers); // Send the email. if ($mail) { // Set a 200 (okay) response code. http_response_code(200); echo "Thank You! Your message has been sent."; } else { // Set a 500 (internal server error) response code. http_response_code(500); echo "Oops! Something went wrong and we couldn't send your message."; } } else { // Not a POST request, set a 403 (forbidden) response code. http_response_code(403); echo "There was a problem with your submission, please try again."; } Thank you for your help. PS: Should I keep last name as required? I know most people will skip last name and only write the first name… If I remove the required, should I keep the regex for it and if empty, make it like it's good to submit? Just don't want to have fake or impossible last name even if it's not required.
  15. Nic727

    Form validation help (regex and PHP)

    Thank you. It's now resolved, but just one thing. Is it normal that my regex is a weird color like that? Just want to make sure it will works, but other than that everything works fine now!
  16. Nic727

    Form validation help (regex and PHP)

    ok, because for now I have that : // Check that data was sent to the mailer. if (empty($prenom) || empty($nom) || empty($courriel) || empty($suj) || empty($message) || !filter_var($courriel, FILTER_VALIDATE_EMAIL)) { // Set a 400 (bad request) response code and exit. http_response_code(400); echo "Oops! There was a problem with your submission. Please complete the form and try again."; exit; } If I had the same if as in Javascript, but for the PHP validation, is it a http_response_code(400) or it's another code? Also, I guess I can't actually change my border colors via the php code right? Since I can't retrieve input and add css via the php file... Thank you
  17. Nic727

    Form validation help (regex and PHP)

    Ok thank you. I also found out how to make it works. Is it correct like that or I can make it shorter? $("#ajax-contact").submit(function(event) { event.preventDefault(); // Get the form. var form = $("#ajax-contact"); // Get the messages div. var formMessages = $("#form-messages"); var prenomMessage= $("#prenom-message"); var nomMessage= $("#nom-message"); var emailMessage= $("#email-message"); var sujetMessage= $("#sujet-message"); var messageMessage= $("#message-message"); // TODO // Serialize the form data. var formData = form.serialize(); // Get the inputs var $prenom = $("#prenom"); var $nom = $("#nom"); var $email = $("#courriel"); var $sujet = $("#sujet"); var $message = $("#message"); // Regex var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; // Testing Regex if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); prenomMessage.addClass('error'); prenomMessage.text("Votre prénom est requis ou est invalide"); }else{ $prenom.css({"border-color":""}); prenomMessage.removeClass('error'); } if(regex1.test($nom.val())==false){ $nom.css({"border-color":"red"}); nomMessage.addClass('error'); nomMessage.text("Votre nom est requis ou est invalide"); }else{ $nom.css({"border-color":""}); nomMessage.removeClass('error'); } if(!$.trim($email.val()).length){ $email.css({"border-color":"red"}); emailMessage.addClass('error'); emailMessage.text("Votre adresse email est requise ou est invalide"); }else{ $email.css({"border-color":""}); emailMessage.removeClass('error'); } if(!$.trim($sujet.val()).length){ $sujet.css({"border-color":"red"}); sujetMessage.addClass('error'); sujetMessage.text("Un sujet est requis"); }else{ $sujet.css({"border-color":""}); sujetMessage.removeClass('error'); } if(!$.trim($message.val()).length){ $message.css({"border-color":"red"}); messageMessage.addClass('error'); messageMessage.text("Un message est requis"); }else{ $message.css({"border-color":""}); messageMessage.removeClass('error'); } if(regex1.test($prenom.val())==true && regex1.test($nom.val())==true && $.trim($email.val()).length && $.trim($sujet.val()).length && $.trim($message.val()).length){ // Submit the form using AJAX. $.ajax({ type: 'POST', url: form.attr('action'), data: formData, success: function(response) { // Make sure that the formMessages div has the 'success' class. formMessages.removeClass('error'); formMessages.addClass('success'); // Set the message text. formMessages.text(response); // Clear the form. $('#prenom').val(''); $('#nom').val(''); $('#courriel').val(''); $('#sujet').val(''); $('#message').val(''); }, error: function(data) { // Make sure that the formMessages div has the 'error' class. formMessages.removeClass('success'); formMessages.addClass('error'); // Set the message text. if (data.responseText !== '') { formMessages.text(data.responseText); } else { formMessages.text('Oops! An error occured and your message could not be sent.'); } } }) } }) I added the if statement that verify if everything is true or have a length higher than 0 and included the ajax inside. Now need to add my website on the server and test some PHP codes. Now with PHP validation, just a little question, is it possible to change styling via PHP? For example, if someone remove JavaScript and I also want him to have border-color in red if false or show a message in my formMessages div? I guess the the message showing in my div is related to response and data.responseText here, but it still Javascript lol.
  18. Nic727

    Form validation help (regex and PHP)

    Thank you. Typing mistake is annoying because you can re-read the same thing multiple time without seeing the mistake hahaha. About the Required, I'm just thinking if it's not a bad move to remove the required attribute since it's a good HTML5 attribute. One way I could use that + JS is if I remove my submit function and make it a click function when clicking on the "submit" button. Like that it doesn't send any information to the browser yet and can add the submit() after my validation. Almost finished the Javascript part. Just a little issue that make the form submit. I know that I need something between my validation and my submit .ajax, but I don't know why or how. $("#ajax-contact").submit(function(event) { event.preventDefault(); // Get the form. var form = $("#ajax-contact"); // Get the messages div. var formMessages = $("#form-messages"); var prenomMessage= $("#prenom-message"); var nomMessage= $("#nom-message"); var emailMessage= $("#email-message"); var sujetMessage= $("#sujet-message"); var messageMessage= $("#message-message"); // TODO // Serialize the form data. var formData = form.serialize(); // Get the inputs var $prenom = $("#prenom"); var $nom = $("#nom"); var $email = $("#courriel"); var $sujet = $("#sujet"); var $message = $("#message"); // Regex var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; // Testing Regex if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); prenomMessage.addClass('error'); prenomMessage.text("Votre prénom est requis ou est invalide"); }else{ $prenom.css({"border-color":""}); prenomMessage.removeClass('error'); } if(regex1.test($nom.val())==false){ $nom.css({"border-color":"red"}); nomMessage.addClass('error'); nomMessage.text("Votre nom est requis ou est invalide"); }else{ $nom.css({"border-color":""}); nomMessage.removeClass('error'); } if(!$.trim($email.val()).length){ $email.css({"border-color":"red"}); emailMessage.addClass('error'); emailMessage.text("Votre adresse email est requise ou est invalide"); }else{ $email.css({"border-color":""}); emailMessage.removeClass('error'); } if(!$.trim($sujet.val()).length){ $sujet.css({"border-color":"red"}); sujetMessage.addClass('error'); sujetMessage.text("Un sujet est requis"); }else{ $sujet.css({"border-color":""}); sujetMessage.removeClass('error'); } if(!$.trim($message.val()).length){ $message.css({"border-color":"red"}); messageMessage.addClass('error'); messageMessage.text("Un message est requis"); }else{ $message.css({"border-color":""}); messageMessage.removeClass('error'); } // Submit the form using AJAX. //... } That's so long... But if I add the same kind of validation to my PHP (server side), will it not overwrite what I did in Javascript?
  19. Nic727

    Form validation help (regex and PHP)

    About the keydown, my idea was that if the entry is false, make the border red like I already have, but when typing a true value, change border to default, but not sure it's possible without a keydown function. I think I will just forget this idea if it's too complicated. About the trim I was following this https://stackoverflow.com/questions/1854556/check-if-inputs-are-empty-using-jquery It seems to work for them. They are using This, but can I replace This by my variable?
  20. Nic727

    Form validation help (regex and PHP)

    Ok thank you. Didn't know that. Also if($.trim($email.val()).length == 0){ $emaill.css({"border-color":"red"}); } Doesn't work. Maybe something wrong in the way I wrote it.
  21. Nic727

    Form validation help (regex and PHP)

    I kept the required attribute just in case some bots or someone remove javascript.
  22. Nic727

    Form validation help (regex and PHP)

    ok… now how should I write that? I'm trying to make verification and if everything is good, submit with ajax, but I don't know how I should write it. For the moment I tried with multiple if statement like. // Get the inputs var $prenom = $("#prenom"); var $nom = $("#nom"); var $email = $("#courriel"); var $sujet = $("#sujet"); var $message = $("#message"); // Regex var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; // Testing Regex if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); console.log("TEST"); return false; } else if(regex1.test($nom.val())==false){ $nom.css({"border-color":"red"}); return false; } else if($.trim($email.val()).length == 0){ $emaill.css({"border-color":"red"}); return false; } else if($.trim($sujet.val()).length == 0){ $sujet.css({"border-color":"red"}); return false; } else if($.trim($message.val()).length == 0){ $message.css({"border-color":"red"}); return false; }else{ // Default style for inputs $prenom.css({"border-color":""}); $nom.css({"border-color":""}); $email.css({"border-color":""}); $sujet.css({"border-color":""}); $message.css({"border-color":""}); // Submit the form using AJAX. $.ajax({ But I have two new problems. Since I now know that my code need to be perfect to prevent "Required" from stopping browser. 1. Now it check only one at a time. So if $prenom is not correct, it doesn't check $nom. How to make it check all? I think I could make it work with OR statement by adding || between each of my verification, but how do I change CSS only for the one who has an error? 2. Is it possible to verify email from the type="email" without using Regex? I tried with the trim, but it still add the default box shadow to my input box because the email is invalid. I would like to make that if the email is invalid, don't submit form (return false). Also, my border-color reset doesn't work if I change only one with an error, but not the other one. Is it possible to correct that? I put that into the else statement, but since it doesn't read it if some are not correct, it doesn't work. OR I could make another if where it change the border-color when typing a valid entry? But it's like #1, how to change only the border of the input I'm currently typing into?
  23. Nic727

    Form validation help (regex and PHP)

    Ok I found the problem. The problem are the "required" inside my input. In fact, when clicking on the submit button, it's blocked by the required input. If I fill them all correctly but the one I have the code, my alert will shows up. Now instead of having a regex for the subject, message (which can be whatever people want) and email (the browser already have the validation), is it possible with javascript to look if the entry is invalid (no text) to add my red border? Is this code correct for that? if ($.trim($(anotherinput).val()).length == 0){ From what I know the trim is removing all white space right?
  24. Nic727

    Form validation help (regex and PHP)

    ok thank you will look at that. I updated my post above with a regex problem, but I will sort it out later. EDIT: Yes it recognize the form as one object. Not sure why it doesn't submit. [object Object]: {0: Object, length: 1, prevObject: Object} 0: Object length: 1 prevObject: Object __proto__: Object
  25. Nic727

    Form validation help (regex and PHP)

    Look like it doesn't submit at all. But according to https://api.jquery.com/submit/ I have wrote it correctly no? EDIT: If I change for .click instead of .submit it works. Something is wrong with my submit button… But I have it correctly written, I don't understand. <button id="submit" class="submit btn btn-dark" name="submit" type="submit" value="envoyer"> Like that it can works, but I don't think it's the proper way to do that. $("#submit").click(function() { var $prenom = $("#prenom"); console.log($prenom.val()); var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); alert("ERROR!"); console.log('false'); return false; }else{ console.log('true'); console.log('Submit'); $("form").submit(); return true; } }) Also, my regex doesn't work. My goal for the regex is to not allow numbers and special characters (\d\W) allow just one (\-\s\') at a time for a max of 20 characters, but I think I messed up since it doesn't work correctly.
×