Jump to content

Nic727

Members
  • Content count

    246
  • Joined

  • Last visited

Everything posted by Nic727

  1. 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
  2. Nic727

    overflow hidden doesn't work.

    Edge.
  3. 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
  4. 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
  5. 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
  6. 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.
  7. 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.
  8. 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!
  9. 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
  10. 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.
  11. 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?
  12. 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?
  13. 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.
  14. Nic727

    Form validation help (regex and PHP)

    I kept the required attribute just in case some bots or someone remove javascript.
  15. 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?
  16. 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?
  17. 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
  18. 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.
  19. Nic727

    Form validation help (regex and PHP)

    Even like that it doesn't work and no error. $("form").submit(function(event) { var $prenom = $("#prenom"); var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); alert("ERROR!"); return false; }else{ return true; } }) One thing is certain… My regex work outside of the submit function (but a little bit broken since I can't write 123 as a name, but can write Ba123 which is weird) and I tried to move my code around, but nothing work. I even tried with the variables outside the function. Also the fact that I don't have errors showing make it very hard. Here are my files if you want to look into it. That's the last page of my project and I will be working on it for a week contactform.zip
  20. Nic727

    Form validation help (regex and PHP)

    I know, but I don't get errors. That's weird. Maybe my function is wrong. I tried to remove everything and just keep the regex and I added an new alert for "else" and it didn't show up either. I think my function is not working at all... I tried: $(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 var $prenom = $('#prenom'); var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); alert("ERROR!"); return false; }else{ alert("GOOD"); } }); }); EDIT: If I only had my if outside the function, I have an alert when loading the page and everything is alright since it load my regex when loading the page. Not sure what is wrong with the function.
  21. Nic727

    Form validation help (regex and PHP)

    Still not working.
  22. Nic727

    Form validation help (regex and PHP)

    Not working. Maybe something wrong with my regex or where I placed it? I'm sure I did the good thing by placing it before the .ajax, so it's not submitting, but something doesn't work.
  23. Nic727

    Form validation help (regex and PHP)

    I forgot to update my thread last night, but I already changed to that: //REGEX var $prenom = $('#prenom').value(); /*var $nom = $('#nom'); var $email = $('#courriel');*/ var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; if(regex1.test($prenom)=false){ $prenom.css({"border-color":"red"}); alert("ERROR!"); return false; }else{ But still not working. I did try to add an alert, but doesn't show up. If I understand the verification correctly. - Javascript validation to add style - PHP validation to prevent mailing wrong things? If someone disable JS, is it possible to add styling with PHP or not? For example, my border-color will not change if JS is disable right? Also, I read somewhere that I don't need a Regex if my input type is "email" since the browser already check if it's ok or not. Is it correct?
  24. Hi, I have some input field which are required and when submitting the borders are red. That's ok, but how can I customize how it shows instead of being browser default? Is it possible with CSS? Thank you
  25. Nic727

    changing color of required input when submitted

    Thank you
×