Jump to content


  • Content count

  • Joined

  • Last visited

Everything posted by Nic727

  1. Lightbox or not?

    Hi, when clicking on an image in my gallery, I would like to have something like that: 1. White or black background 2. Big image (fullscreen or not, depend of height) 3. Left and right button to navigate between images. I know a lightbox can make that very easy, but I’m not really sure it’s possible to add a custom information overlay like I want. I know some lightbox can show information under the image, but my idea was to have a camera icon and when you click on it more informations are appearing. In my mockup it’s wrong since the icon and info should be in the middle to avoid getting out of image if portrait or landscape. I thought about a carousel... do you think it can do that? The only problem is that I can’t have a gallery + carousel since if you click on an image, it will not directly go to that image in the carousel page (which have to load images again). How can I achieve that? I currently use Wordpress, so I’m not sure how to do that in both coding or via plugin. thank you
  2. Favourite html editors...

    I was using Notepad++ when I started, but since the design is a bit dated, I changed to Visual Studio Code which is very good at debugging and working with.
  3. gradient border

    Thank you it works! I'm surprised that in 2018 we still don't have gradient support for border colors... I hope it will come.
  4. gradient border

    Hi, I would like my active menu item bottom border to have a gradient color, but I can't find how. Currently I'm good with a border-color and 2px border, but I tried with border-image and linear gradient, but it's not working. Do you have any idea about putting a gradient color for a bottom border? thx
  5. Hi, I have a problem with my website on safari. Here is what my website should look like. In MS Edge: here is what Ihave in Safari: How can I show my footer and getting a true VH in Safari? thx
  6. Website mockup

    I made some ajustements to my design. So here is my very final home page design. I will keep this one, just not sure if I add a Works section. I know I will add photography to my website, but I don't really have a lot of works to show. Most videos (if I do some) will be in my blog or inside albums. Here are two ideas for the albums page. First idea was to make an almost full width album with parallax scrolling, but I think it will just be a bit annoying since my idea was to have a hover effect to show name of the album above a blurry pic. So I think it wasn't great, but what do you think? Should I just keep the hover effect always ON (with or without blur effect)? The other idea is to make two columns with albums, but wasn't sure if I was keeping a parallax effect or not.
  7. 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. How to make justified grid?

    Hi, I would like to have a photography section on my website showing my photos in a justified grid, but how can I do that? I was thinking using masonry at first, but I changed my mind for a justified grid option instead. I'm not sure if it's possible with CSS only or Javascript? I found this example; https://the7.io/main/gallery/albums-justified-grid/5-albums-justified-grid/ Just not sure how to achieve that. If possible, would like images to be in order from left to right and sometimes, one taking full width and after 2 or 3 columns... A bit like that https://www.narikki.com/mountains-of-new-zealand Thank you
  9. Website mockup

    Here is another homepage. Waiting for your feedback before starting the real thing! Personally, I really love the template this guy used thierry-bonnaudet.com/ but I want to create my own thing. Just need to figure the lightbox I would like to have... If you know a plugin or how to do that, I would appreciate that. My idea is to click on an image, it show in fullscreen into a lightbox, but you can click on a small camera icon to show a bubble with informations (Or blur the image and show informations over it).
  10. Hi, I'm making a weather app in Android studio using Java and XML for my school, and we need to use random number. The thing is that it doesn't work as expected. For example, I have some values here : g1 = r.nextInt((1 + 10) + 1) - 10; //Actual temperature g2 = r.nextInt((-10 + 15) + 1) - 15; //minimum g3 = r.nextInt((5 - 2) + 1) + 2; //maximum g4 = r.nextInt(40) + 1; //wind g5 = r.nextInt((11 - 3) + 1) + 3; //sun g6 = r.nextInt(100); //Precipitation g7 = r.nextInt((30 - 1) + 1) + 1; //rain g8 = r.nextInt((10 - 1) + 1) + 1; //snow //Here everything is good. But the problem is bellow. /***** RAIN / SNOW *****/ if (g6 < 50) { //if precipitation is less than 50%, make rain and snow at 0 g7 = 0; g8 = 0; } else if (g7 > 0) { //if it rain, make snow at 0 g8 = 0; } else if (g8 > 0) { //if it snow, make rain at 0 g7 = 0; } else if (g1 < 0){ //if temperature bellow 0 °C, make rain at 0 g7=0; } else if (g1 >= 0){ //if temperature above 0, make snow at 0 g8=0; } The thing is that I can have a 90% chance of rain, but it will be at 0... Or I can have -5 °C, but it will rain instead of snow. Any idea?
  11. Blur bellow element

    Hi, I would like to know if I can blur an element that could affect an element bellow it. For example, I would like my navigation bar to be white with opacity of 0.3-0.5 and blur it to make the element bellow be blurry. I tried very fast to do that, but only thing happening when adding filter blur to my navigation bar is that the text (menu) and nav bar are blurry, but not what's bellow (text, images, etc.). I was trying to make something like the Fluent Design like Microsoft. Thank you
  12. JAVA operator and result help

    Nevermind, I just found out that I just needed to change the order of my else if and now it works. I changed in this order : if (g6 < 50) { g7 = 0; g8 = 0; } else if (g1 < 1){ g7 = 0; } else if (g1 >= 0){ g8 = 0; } else if (g7 > 0) { g8 = 0; } else if (g8 > 0) { g7 = 0; }
  13. Custom radio button

    Hi, I'm trying to make a custom radio button, but it's not working. It's like 80% completed, but just need to make the change when the input radio is checked. HTML : <label class="radio_label"><input type="radio" name="q1a" value="oui">Oui</label> <label class="radio_label"><input type="radio" name="q1a" value="non">Non</label> CSS : input[type="radio"]{ display:none; } .radio_label{ display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 15px; } .radio_label::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 4px; border:1px solid red; /*background-color: #aaa; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);*/ border-radius:100%; } input[type="radio"]:checked +.radio_label::before { content: ""; background-color: red; } So when clicked I want to change the button to red, but it's not working. Any ideas? Also, how to make the checked circle smaller than the full width of the label (like a normal button)?
  14. Custom radio button

    ok, but my label is for a button... When I click I have something like that : Better with image. It's happening after I click on the button.
  15. Custom radio button

    sorry I explained badly. I was talking about when you click and not when you over the label. When I click on the button or label, the vertical bar is appearing on the label text. But I think I can't get rid of that with custom button... It's not doing this with default button (without label).
  16. Custom radio button

    Thank you. I also changed .radio_label::before for .radio_label span:before ​Now the only problem is that when I click on the button, the vertical bar (for writing) is appearing on the label text... Can I get rid of that or have to live with it? Thank you
  17. Can't use INSERT INTO

    Hi, I have a very weird problem, but I don't see where is my error. I have a form where it suppose to send the result into the data base, but Insert into doesn't work at all. <?php $con = mysql_connect("localhost","root",""); mysql_select_db("databasename", $con); mysql_query("SET NAMES 'utf8'"); if(!isset($_POST["envoyer"])){ ?> <form action="#action=completed" method="post"> <label for="nom">Nom de l'étudiant</label><br> <input type="text" id="nom" name="nom" value="" placeholder="Prénom et nom" maxlength="35"><br> <label for="num">Numéro de l'étudiant</label><br> <input type="text" id="num" name="num" value="" placeholder="#######" maxlength="7"><br> <label for="motpasse">Mot de passe</label><br> <input placeholder="ex:Chaise123" type="text" id="motpasse" name="motpasse" value="" maxlength="25"><br> <label for="motpasse2">Confirmer le mot de passe</label><br> <input placeholder="ex:Chaise123" type="text" id="motpasse2" name="motpasse2" value="" maxlength="25"><br> <label>Associer un milieu de stage</label><br> <select id="milieu" name="milieu"> <option value="">Ne pas associer tout de suite</option> <option value="" disabled="disabled">---Milieux de stage---</option> <?php $sql = "SELECT * FROM employeurs"; $result=mysql_query($sql,$con); while($row = mysql_fetch_array($result)){ echo "<option value='".$row['noemployeur']."'>".$row['nomemployeur']." - ".$row['nomcompagnie']."</option>"; } ?> </select><br> <label>Associer un superviseur</label><br> <select id="superviseur" name="superviseur"> <option value="">Ne pas associer tout de suite</option> <option value="" disabled="disabled">---Superviseurs---</option> <?php $sql = "SELECT * FROM superviseurs"; $result=mysql_query($sql,$con); while($row = mysql_fetch_array($result)){ echo "<option value='".$row['noemploye']."'>".$row['nomemploye']."</option>"; } ?> </select><br> <input type="submit" id="envoyer" name="envoyer" value="Créer"><br> </form> <?php }else{ $nom = $_POST["nom"]; $num = $_POST["num"]; $motpasse = $_POST["motpasse2"]; $emp = $_POST["milieu"]; $super = $_POST["superviseur"]; $sql = "INSERT INTO stagiaires (nometudiant, noetudiant, mdpetudiant)VALUES('$nom', '$num', '$motpasse')"; $sql = "INSERT INTO associations (noetudiant, noemployeur, noemploye)VALUES('$num', '$emp', '$super')"; Any ideas? Don't know if it's because of Wamp or not, but it's very weird since it's working well manually into phpmyadmin with the online editor. Maybe it's how I wrote my variables, but I don't think it's that. I tried like : '$num' '".$num."' $num ".$num." But it's not working at all.
  18. Can't use INSERT INTO

    I forgot to add this little code at the bottom of my example : $result=mysql_query($sql,$con); but it's there and doesn't work.
  19. Can't use INSERT INTO

    I have a connection on top. Are you sure about variable in SQL, because with DELETE, UPDATE and SELECT it's working correctly.
  20. AJAX contact form not working

    Hi, I followed this tutorial to make contact form working without going physically to the php page. http://blog.teamtreehouse.com/create-ajax-contact-form The thing is that this code is not working. I tried on my website with my own contact form and with this code only. Both of them don't work. Here is my full code for my website : HTML <div id="form-messages"></div> <form id="ajax-contact" name="email" method="post" action="contact.php"> <p>Les champs sont obligatoires*</p> <div class="rowform"> <div class="half gauche"> <label>Prénom*</label> <input name="prenom" id="prenom" type="text" required> </div> <div class="half droite"> <label>Nom*</label> <input name="nom" id="nom" type="text" required> </div> </div> <div class="rowform"> <div class="half gauche"> <label>Courriel*</label> <input name="courriel" id="courriel" type="email" required> </div> <div class="half droite"> <label>Téléphone</label> <input name="phone" id="phone" type="number"> </div> </div> <div class="rowform"> <label>Sujet*</label> <input name="sujet" id="sujet" type="text" required> </div> <div class="rowform"> <label>Votre message*</label> <textarea name="message" required></textarea> </div> <div class="end-form"> <button id="submit" class="submit" name="submit" type="submit" value="envoyer"><i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer</button> </div> </form> JS 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 $courriel = filter_var(trim($_POST["courriel"]), FILTER_SANITIZE_EMAIL);//Obligatoire $phone = strip_tags(trim($_POST["phone"])); $suj = strip_tags(trim($_POST["sujet"])); //Obligatoire $nom = str_replace(array("\r","\n"),array(" "," "),$nom); $message = trim($_POST["message"]); //Obligatoire // Check that data was sent to the mailer. if (empty($prenom) OR empty($nom) OR empty($courriel) OR empty($sujet) OR empty($message) OR !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 .= "Telephone : $phone \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"; mail($destinataire,$sujet,$email_content,$headers); // Send the email. if (mail($destinataire,$sujet,$email_content,$headers)) { // 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."; } PHP $(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(); // 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(''); $('#phone').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.'); } } }) }); A lot of thing doesn't work for me. 1. It goes to contact.php instead of staying on my HTML page and activating the div "form-messages". 2. The JS code is stopping at "// Check that data was sent to the mailer." so even if my input are not empty, it show (on contact.php unfortunately) the error text. 3. If I put this section under commentary, the mail is sent, but two times instead of one, which is a big issue... Also go on contact.php instead of staying on the current page and show text in "form-messages". Thank you for helping me
  21. AJAX contact form not working

    Thank you, it fixed it. Now I need to get it only send one email instead of two... Do you think it's because there is two mail() and need to put the first one into a variable? mail($destinataire,$sujet,$email_content,$headers); // Send the email. if (mail($destinataire,$sujet,$email_content,$headers)) { // 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."; } EDIT : It worked
  22. AJAX contact form not working

    Also, is it a good idea to add this for form validation (PHP side) as an example : $nom = htmlspecialchars(strip_tags(trim($_POST["nom"]))); So in my JS I could have the pattern and validation message showing on my page, but server side I could remove html code.... But still trying to figure what's wrong with http404... All my fields are not empty. Don't know why it think there is something wrong in my syntax?
  23. AJAX contact form not working

    Ok in my console I have : HTTP400: BAD REQUEST - The request could not be processed by the server due to invalid syntax. (XHR)POST - mywebsite.com
  24. AJAX contact form not working

    ... Still not working. I did remove the first function and only put the variables here, but still go to contact.php with error "Oops! There was a problem with your submission. Please complete the form and try again." instead of staying on HTML page. Doesn't seem to get the AJAX working. EDIT : Nevermind, I just added the second faction into the first one. I can get the text appear on submit. GREAT! But still have the error... Maybe an error when checking if a field is empty? It doesn't seem like that... Also, why is it sending email two times if I remove this part?
  25. AJAX contact form not working

    Like what? Instead of : $(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... }); I should have​ // Get the form. var form = $('#ajax-contact'); // Get the messages div. var formMessages = $('#form-messages'); only?