Nic727

What do you mean? Also, I added ! before filter.test, but now it give me error even if I enter @blabla.com EDIT : Now it work, I forgot to add .value after my getElementById("email").value But now how can I verify if the email actually exist? (maybe if a code exist for that, it will remove this code?)

Hi, I'm unable to verify an email in my form. That's the code I found : var filter = /^\w+([\.-]?\w+)*[@]\w+([\.-]?\w+)*(\.\w{2,4})+$/; And now to verify I have that, but it doesn't work at all. if(document.getElementById("Email").value.length<=0 || filter.test(document.getElementById("Email")) ){ document.getElementById("Email").style.border="2px solid #ff0000"; block=false; } So it suppose to verify if the email contain @ and a .com/.info/.net/etc. + characters... In my code : Block=false is when there is an error (field not completed, etc.) At the end of my verification code, I have if(block){ return true; }else{ document.getElementById("error").innerHTML="You didn't complete all required field" document.getElementById("error").style.color="#ff0000"; return false; } I used this tutorial here : http://www.w3resource.com/javascript/form/email-validation.php Also, in the comment he is saying that to verify if the email exist "within a forms's opening tag, you mention action="url", where url is the filename where you want to send your form data." So do you have an easier code or something to help me validate the email address? Thank you

working now, just changed a couple codes.

Yes I have, I added : <div class="text"><p id="text"> </p></div>

Hmm... It doesn't work really well. Can you look at that? <header class="title"><h1>Parcours d'un souvenir</h1></header><div class="image"> <img class="brain" id="brain" src="img/brain.gif" alt="Brain"></div><div class="text"><p id="text"> </p></div><div class="boutons"><ul class="ranger1"> <li class="bouton" id="bouton1" onclick="changeImage(1)" ><h3>Encodage</h3></li> <li class="bouton" id="bouton2" onclick="changeImage(2)" ><h3>Récupération</h3></li></ul><ul class="ranger2"> <li class="bouton" id="bouton3" onclick="changeImage(3)" ><h3>Stockage</h3></li> <li class="bouton" id="bouton4" onclick="changeImage(4)" ><h3>Consolidation</h3></li></ul></div> /* CSS *//*============= Default styling =============*/body{ color: white; background-color: #030726; margin: 0; height: 100%; min-height: 100%;}.image{ height:60%}.boutons{ bottom: 0px; display: block; width: 100%; height:30%}.title{ height:10%; }h1{ text-align: center;}h3{ vertical-align: middle;}img{ display: block; margin-left: auto; margin-right: auto; width: 60%;}.ranger1{ width:100%; list-style: none; padding: 0; margin: 0;}.ranger2{ width: 100%; list-style: none; padding: 0; margin: 0;}/*============= BUTTONS =============*/.bouton{ display: inline-block; text-align: center; background-color: blue; border: 1px solid white; width: 50%; margin: 0px -2px; height: 60px;}.bouton:hover{ background-color: red; cursor: pointer;}.bouton:active{ background-color: green;}/*============= RESPONSIVE =============*/@media screen and (min-width: 1200px){img{ width: 500px;}}@media screen and (max-width: 445px){img{ display: block; margin-left: auto; margin-right: auto; width: 80%; margin-top: 70px;}}@media screen and (max-width: 360px){img{ display: block; margin-left: auto; margin-right: auto; width: 80%; margin-top: 20px;}}/*============= HIDDEN TEXT BLOCK =============*/.text{background-color: yellow;color: black;font-size: 24px;text-align: justify;}​​It doesn't work. When the new "Div" with the text appear, the buttons are going down, but I want everything stay at his place, but the image going smaller when the text appear. Also, if everything was working great, it would make a better responsive version.

So how to remove the style?

Is it possible with that? http://stackoverflow.com/questions/16414143/how-to-assign-percentage-values-to-div-to-divide-entire-page-into-3-parts-with-b The only thing I don't know about this method is if I can make this responsive like I want with javascript. - Maybe Title = 10% height - Maybe Image div = 60% height - Maybe buttons = 30% height. The thing is that if I click on a button, I want text to appear (with height matching the text length) just between the image and the buttons and at the same time, resizing the image. I know this topic could be a mix of CSS and JS

I am now able to restore to default with a new if. var clique=0; function changeImage(n) { var image = document.getElementById('brain'); if (clique==n){ image.src='img/brain.gif'; resultat=""; document.getElementById("text").style.padding= '0'; document.getElementById("text").style.margin= '0'; clique=0; }else if (n == 1){ clique=1; // alert('bouton 1'); image.src='img/brain1.gif'; resultat='Toute nouvelle informaton arrive au cerveau via les organes sensoriels. Elle est alors traitée, codée et transformée. Le cortex frontal gauche et les hippocampes interviennent. Ceux-ci sont fonction de notre degré de vigilance, de motivation et de notre état émotif. Plus le codage est structuré, plus il est facile de le reconstitué lors de la récupération.'; }else if (n == 2){ clique=2; // alert('bouton 2'); image.src='img/brain2.gif'; resultat='Au moment où l'on se rappelle d'événements, les différents éléments constitutifs du souvenir sont ré-assemblés. Le cortex frontal droit est nécessaire pour la remémoration.'; }else if (n == 3){ clique=3; // alert('bouton 3'); image.src='img/brain3.gif'; resultat='Une fois l'encodage terminée, l'information est stockée définitivement dans le néocortex.'; }else if (n == 4){ clique=4; // alert('bouton 4'); image.src='img/brain4.gif'; resultat='Pour ne pas oublié des informations, le processus de consolidation est mis en place, mais est très lent. Le processus pouvant prendre plus de 10 ans. L'hippocampe joue un rôle central.'; } document.getElementById("text").innerHTML = resultat; document.getElementById("text").style.padding= '2px 70px'; document.getElementById("text").style.margin= '2px 0px';} But I'm unable to remove the style of the padding and margin, even if I put '0' in my new if (at the beginning). That's a bit annoying.

Hi, I'm looking to do something like that, but I don't know if it's possible. So I know how to put my buttons fixed at the bottom, but I don't really know if I should put fixed to other boxes (div) too or not. I hope you understand what I mean in this picture. Thank you

Thank you very much. It's working! Hard to do javascript from nothing... Thing's I found on Google are a bit too messy compared to your little code. Is it possible to make that if I reclick a button, it display the default image brain.gif?

I don't really know. I want that if I click on button1, it make brain1 appear. Button2 brain2, etc. Almost got it. I put a different function on each buttons (don't know if it's the good way). function changeImage1() { document.getElementById('brain').style.display="none"; document.getElementById('enco').style.display = "block"; } function changeImage2() { document.getElementById('brain').style.display="none"; document.getElementById('recup').style.display = "block"; } function changeImage3() { document.getElementById('brain').style.display="none"; document.getElementById('stock').style.display = "block"; } function changeImage4() { document.getElementById('brain').style.display="none"; document.getElementById('conso').style.display = "block"; } The only thing is that if I click on another button after, it will not hide the image from button 1, etc.

Hi, I have one image and 4 buttons. I would like to make that when I click on one button, it change the image source. Each button will put a different image. That's the code I have right now and nothing work. I look on Internet, but can't find the right solution. There is two solutions, but don't know how to do them. 1. Change the source of the image 2. Hide all image with CSS at first and display them with a click of the button and hide the image already here. I tried the first solution, but doesn't seem to work. <header><h1>Parcours d'un souvenir</h1></header><div class="image"> <img class="brain" id="brain" src="img/brain.gif" alt="Brain"></div><div class="text"></div><div class="boutons"><ul class="ranger1"> <li class="bouton bouton1" id="bouton1" onclick="changeImage()" ><h3>Encodage</h3></li> <li class="bouton bouton2" id="bouton2" onclick="changeImage()" ><h3>Récupération</h3></li></ul><ul class="ranger2"> <li class="bouton bouton3" id="bouton3" onclick="changeImage()" ><h3>Stockage</h3></li> <li class="bouton bouton4" id="bouton4" onclick="changeImage()" ><h3>Consolidation</h3></li></ul></div> var bouton1 = document.getElementById('bouton1'); var bouton2 = document.getElementById('bouton2'); var bouton3 = document.getElementById('bouton3'); var bouton4 = document.getElementById('bouton4'); var image = document.getElementById('brain') function changeImage() { if (bouton1==true){ image.src='img/brain1.gif' } } I just tried for button1, but doesn't work.

Deleted by author

Ok, but I don't know if you understood what I would like to do.On this page, I have an animation showing the text and that's what I want, but this is not really good for Ipad and mobile device, because you don't have a mouse to read that. So when it's smaller, I would like something like at the bottom of the page here. ​Currently, my HTML code is : ​ <section> <a href="travaux/ctcfo.html" > <div class="imgwrap"> <div class="image featured"> <img src="images/ctcfo-tr.jpg" alt="projet CTCFO" /> </div> <header class="imgdescription"> <p class="description"><b>Projet CTCFO</b> : <br> Programmation</p> </header> </div> </a></section> So I could remove position: absolute, overflow and visibility: hidden so it appear in a grey box (I could change that). That seem ok in fact, but I would like to add a small description text for this version below the header tag that I could hide on bigger screen. Or maybe I should always add the description? (Portfolio organization). Also, on my homepage, I have a white logo inside <img> <a class="logolink" href="index.html"><h1 id="logo"><img class="logo" src="images/logo2.png" width="30" alt="logo">Nicolas <span>Duclos</span></h1></a> The thing is that when I scroll down, the fixed navigation is white, so it's impossible to see my logo. I'm looking for a solution to change the logo when it's in the fixed navigation. I read that you can change the image source by adding "content: url(New image)" in the CSS, but I'm not really sure.Also, I know it's possible if your image is inside a div, but if I put <a class="logolink" href="index.html"><h1 id="logo"><div class="logo"> </div>Nicolas <span>Duclos</span></h1></a> .logo{content: url(images/logo2.png);width: 30px;height: auto; margin-right: 20px; vertical-align: middle;} The thing is that I can't see my logo anymore. It's not showing. I tried with both content and background-image.

Hi, 1. I don't know how to use PHP yet. 2. Yeah, but that's not the real solution for a responsive website. I read that if you put an image as a div background and put display:none, it will not load the image. You can do the same thing with the new <picture> element (not supported by all browsers). So my text is inside a div, so if I don't display it, will it load or not?

Hi, On my page I would like to remove the text over the image and put a small text at the bottom (because it will be better for mobile). The solution was to create a new div to show the text at the bottom and hide this one or the other depending of the screen width with a display:none, but I would like to know if there is another way, because if I do that, it will load the two version, even if one is hidden. I would like to make something lightweight, so not loading too much useless stuffs. Thank you

Hmm.. It's working only with that : footer{ background-color:black; color: white; text-align: center; line-height: 100px; height: 100px; width: 100%;} But I'm not sure it's the good way.

Now it's better, but not in the middle.

Hi, Sorry for this stupid question, but it worked before and it doesn't work anymore. I would like to center my copyright in the footer vertically in the middle of the footer, but it's not working. My code : <footer><p>© 2015</p></footer> footer{ display: inline-block; background-color:black; color: white; height: 100px; width: 100%;}footer p{text-align: center;vertical-align: middle;} Thank you, I feel so stupid about this question, because I know it's easy lol. It's not about my portfolio, but just a small work for school.

Hi, just look here http://test.nicolas-duclos.com/ if you look at the middle with the dev tool, just change the background .jpg to .JPG done? Ok, now I did put height of the #banner to 100vh to take the full height of the screen. The problem is the box (text) in the middle. I changed the padding to 20em 0 to have something that look like the middle, but it doesn't seem to be the good way to do that. Do you have some advice to put the box in the middle? I don't really understand how the banner is made, because the background is kind of related to the box, without being it... Thank you

Hi, I uploaded my website just for that, but I have some row for my work page. http://test.nicolas-duclos.com/travaux.html ​ First of all, I don't really know how the creator of the template did the row, so it's hard to edit the css into it. I tried to change the class of the .row to get .rowtr and added the same css styles I found in developper tool, but it was a mess. It was not really centered and the white background was 1/2 of the screen... I did that, because I would like to have something different than my index page recent work (at the bottom). Also, second problem with this. The images. All the default images are 473x209, but I would like to be able to put images of any size and get this without deforming the images. For example, I would like to hide overflow, but it's not working. If I have an image of 1200x700, I would like it to be able to resize the height or the width to fit 100%, but hide the overflow. Hope it's clear. Thank you When uploading my background image for my index, it seem weird, but my image is in JPG instead of jpg, so it doesn't work... It work locally if I put jpg in the CSS, but not online. I will fixe it for the final upload. If you want to go more in-depth, that's the template : html5up.net/twenty

Thank you

I did that, but the text still appear before the animation launch. Like : text appear -- 0.5 sec later, it's invisible and launch the animation. nav{ animation-name: app; animation-duration: 2s;}@keyframes app { from {opacity: 0;} to {opacity: 1;}} But for the banner it's not like that. animation: reveal-banner 1s 0.25s ease-in-out; I don't know what that mean, but for the banner, it's : banner is invisible -- after 0.5 sec it start to appear.

Hi, with my template, I have a banner appearing slowly when the page load. The CSS is : #banner .inner { -moz-animation: reveal-banner 1s 0.25s ease-in-out; -webkit-animation: reveal-banner 1s 0.25s ease-in-out; -ms-animation: reveal-banner 1s 0.25s ease-in-out; animation: reveal-banner 1s 0.25s ease-in-out; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; background: rgba(52, 27, 43, 0.5); color: #fff; display: inline-block; opacity: 0; padding: 3em; text-align: center;} First, I would like to know what is "reveal-banner", because I can't find it on Google. Secondly, I'm trying to put the same animation for my nav bar to slowly appear when the page load, but it's broken. First the text appear and disappear to do the animation... What should I do to make the text invisible and do the animation to show the text in the nav bar? Oh, and I didn't put the Opacity 0 in my nav, because it make the text invisible after the animation. Thank you and I know that I'm annoying. I'm just trying some stuffs.

Ok. I thought it was possible to move things with CSS. But I still can make the text appear.