Jump to content

Nic727

Members
  • Content Count

    258
  • Joined

  • Last visited

Everything posted by Nic727

  1. Hi, I'm trying to add some blur background with backdrop filter and it's really a nice feature if you want to get the fluent design from Microsoft, but I have a weird glitch and I don't know if it's a bug with the filter itself or the fact that I'm working on an offline website with MS Edge. Backdrop filter doesn't seem to take transition into consideration. Problem 1 : Home screen. The button has a blurred background, but since my page go from black to image while loading, it keep the black until the image finish the transition. Same when changing the image. Problem 2 : While creating my blog page, I thought it was cool to have a grayscale image, but since it's a background image, it only work with a backdrop filter layer. Here is what it looks like (I took some feeds from WWF for my work in progress only since I don't have blog yet). Here I hover image 1 : Here is the bug. When hovering the second image, it remove the backdrop-filter from the first image. It's very weird, because it only affect the image above and not the one bellow or the second above. If I hover the image with the bug, it go back to normal... Do you have any idea what may be the problem here? Thank you
  2. Nic727

    backdrop filter bug or browser problem?

    Just want to update. Look like backdrop filter doesn't take transition into consideration even if it's transition happening in the background. Backdrop-filter should only used for certain case like blurred navigation or other things without transitions. Thank you
  3. Nic727

    HTML/Body height - 100% or auto?

    Hi, What is the best use of height for the HTML and body tag? I currently use auto to don't have problem, but for my design, I need a background image to be height 100%. Should I use background height 100vh or 100% and have body/html height at 100%? Thank you
  4. Nic727

    HTML/Body height - 100% or auto?

    ok thank you
  5. Nic727

    overflow hidden doesn't work.

    Just wanted to update this a bit since I just started to work on my website again after a break and I tried to use that for something else. I use backdrop-filter blur for a nice hover effect. The thing is that for some reason, the blur (1px) effect is adding 0.5px to my margin which I need to correct. It's very weird. Blur should stop right where you put it no? Whatever, I think my problem got fixed in Edge update. The only weird thing is aliasing around the corner which make a little artifact on the corner.
  6. 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
  7. Nic727

    Website mockup

    Hi, I will start my website from scratch using webflow really soon, but for now I'm just making the overall design in Affinity Designer (illustrator alternative). I was thinking about getting a WordPress template first, but WordPress is not that good when you want something specific and codes can be a mess when you change a lot of things. That's why I think webflow is a good idea (but unfortunately, I will have to host somewhere else than my current website ). I'm creating a website about some design/web work, but also some of my best photography. Well, here I start and I would like your feedback about if it can be a good user experience and what could be improved. HOME Option 1 Option 2 The first option is much more about the overall look of the website (you will see images bellow), but I thought it could be nice to have a good landing page with a fullscreen image instead. What do you think? PORTFOLIO Here is a page of my works/albums. After that here is what an album page will look like. Just no sure if I keep square image, masonry style (like mockup) or masonry with spacing. What do you think? I also thought it was a great idea to add a little description on top about where it was shot and when. Also, when you click on an image, not sure if I use a normal lightbox or something else. Don't know if Webflow allow custom lightbox. Was thinking about a full white background with a camera icon that show you some infos about the camera and location. Do you think it's possible? Not sure how different page for each image could work since it have to load them every single time... BLOG For the Blog part, I found a nice template with this kind of style and I thought it was looking very great. So I decided to inspire my design from that. I think it's easy to understand that most recent is on top. I'm thinking about making my own pages for blog or redirecting to a subdomain using Exposure.co which is good at making clean and minimalist blog pages. Maybe I will make images a bit bigger and every informations on the bottom-left side? Or keep it like that, but remove the green color and keep white? ABOUT Was thinking about using a colored button matching the logo and the current page indicator, but should I just make a black and white button? CONTACT Same thing about the button. Not sure...
  8. 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
  9. 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.
  10. 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
  11. 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.
  12. 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
  13. 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
  14. 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.
  15. Nic727

    overflow hidden doesn't work.

    Edge.
  16. 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
  17. 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
  18. 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
  19. 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.
  20. 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.
  21. 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!
  22. 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
  23. 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.
  24. 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?
  25. 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?
×