Nic727

Hi, I'm looking for a tutorial about how to convert a desktop navigation to mobile navigation with media queries. For the moment my navigation look like that : <header class="navigation"> <a href="#home"><img class="logo" src="images/logo_white.png"></a> <nav class="nav"> <ul class="menu"> <li><a href="#home">Accueil</a></li> <li><a href="#about">À propos</a></li> <li><a href="#works">Travaux</a></li> <li><a href="#photos">Photographie</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> I found that : http://www.w3schools.com/howto/howto_js_topnav.asp http://mac81.github.io/pure-drawer/ But I'm not really sure how it could work with my nav. Should I make two navigations (one hidden when on desktop)? Do you have any website I could read about that? Thank you

It works! All this for a bad capitalization *stupid* Thank you very much. But can I ask one other question? How to show #section in URL when clicking on the nav options? If I delete "return false" to the code, it show in URL, but it refresh the page each time the URL change. Anyway to just change URL without refreshing the page?

k is just the value of offset. I have other scripts solutions : Other smooth scroll #1 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') || location.hostname === this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top-70 // Height of fixed nav }, 1000); return false; } } }); }); Other smooth scroll #2 $(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash; var $target = $(target); var i = $(this).attr("href"); var k = $(i).offset().top; $('html, body').stop().animate({ scrollTop: k - 150 }, 1000, 'swing'); }); }); When changing swing I have this error in console log SCRIPT438: Object doesn't support property or method 'EaseInOut' jquery.js (9216,4) ​In JQuery UI code, I can find this : (function() { // based on easing equations from Robert Penner (http://www.robertpenner.com/easing) var baseEasings = {}; $.each( [ "Quad", "Cubic", "Quart", "Quint", "Expo" ], function( i, name ) { baseEasings[ name ] = function( p ) { return Math.pow( p, i + 2 ); }; }); $.extend( baseEasings, { Sine: function( p ) { return 1 - Math.cos( p * Math.PI / 2 ); }, Circ: function( p ) { return 1 - Math.sqrt( 1 - p * p ); }, Elastic: function( p ) { return p === 0 || p === 1 ? p : -Math.pow( 2, 8 * (p - 1) ) * Math.sin( ( (p - 1) * 80 - 7.5 ) * Math.PI / 15 ); }, Back: function( p ) { return p * p * ( 3 * p - 2 ); }, Bounce: function( p ) { var pow2, bounce = 4; while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {} return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 ); } }); $.each( baseEasings, function( name, easeIn ) { $.easing[ "easeIn" + name ] = easeIn; $.easing[ "easeOut" + name ] = function( p ) { return 1 - easeIn( 1 - p ); }; $.easing[ "easeInOut" + name ] = function( p ) { return p < 0.5 ? easeIn( p * 2 ) / 2 : 1 - easeIn( p * -2 + 2 ) / 2; }; }); })(); It seem that it doesn't want to go outside normal jQuery... Doesn't want to check in jQuery ui.

That's my full code for smooth scrolling. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script> <script src="js/jquery.js"></script> <!-- Because first one doesn't work locally? --> <script src="js/jquery-ui.min.js"></script> <script> $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { // I don't understand this part of the code. var target = $(this.hash); var i = $(this).attr("href"); var k = $(i).offset().top; target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); //Something easier for that? if (target.length) { $('html,body').animate({ scrollTop: k - 0 //Distance from top of section. }, 1000, 'swing'); //I'm trying to change 'swing' to something else, but doesn't work. return false; //Doesn't show hash in URL. The problem here is that if I want to show change in URL, I remove that, but it reload the page each time? No way to just show hash without reloading the page? } } }); }); </script>

ok, but how can I make other easing animations work? Jquery UI still don't work. It should work https://jqueryui.com/easing/ don't understand... Maybe there is something wrong.

Hi, I tried with this instead <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script> <script src="js/jquery-ui.min.js"></script> and my smooth scrolling script : $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); var i = $(this).attr("href"); var k = $(i).offset().top; target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: k - 0 }, 1000, 'swing'); return false; } } }); }); But now it's not working anymore. The 'swing' thing is just the animation and it worked before, but now I'm just lost. Should I add JQuery UI first? Maybe this solution could be better? http://www.gsgd.co.uk/sandbox/jquery/easing/ I'm trying to get "EaseInOut" (or Ease-in-out?) or "EaseInOutBack". Thank you EDIT : Just saw that only <script src="js/jquery.js"></script> works. Why? Is it because when testing locally I can't add external JS? Why does JQuery UI doesn't work?

Hi, That's the error I get when changing easing options : Uncaught TypeError: jQuery.easing[this.easing] is not a function Tween.run @ jquery.js:9216 Animation.tick @ jquery.js:8914 jQuery.fx.timer @ jquery.js:9511 Animation @ jquery.js:8981 doAnimation @ jquery.js:9305 jQuery.extend.dequeue @ jquery.js:3948 (anonymous function) @ jquery.js:3991 jQuery.extend.each @ jquery.js:657 jQuery.fn.jQuery.each @ jquery.js:266 jQuery.fn.extend.queue @ jquery.js:3984 jQuery.fn.extend.animate @ jquery.js:9316 (anonymous function) @ index.html:26 jQuery.event.dispatch @ jquery.js:5095 elemData.handle @ jquery.js:4766 And that's how I organize it : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.js"></script>

I tried a FULL OUTER JOIN, but it's not working. Do you have a solution to check all tables?

I found another problem in my login. I can connect with users inside the association table, but other users existing in other tables like 0004 can't be logged in.

Hi, I'm using a smooth scrolling for my website (currently WIP) and that's the current code used. $(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash; var $target = $(target); var i = $(this).attr("href"); var k = $(i).offset().top; $('html, body').stop().animate({ scrollTop: k - 150 }, 1800, 'swing' ,function () { window.location.hash = target; }); }); }); A small summary of the script : 1. Check if Href with # is clicked 2. Target = Go to this ID 3. scrollTop: k-150 is about stopping 150 (px?) before top of the section. 4. 1800 = time 5. 'swing' = ease 6. function for window.location.hash to show # in URL. I have three problems with this script. 1. Can't change easing. I downloaded JQuery UI, but doesn't work. I would like EaseInOutBack, but doesn't work. Even tried normal EaseInOut... 2. In Internet Explorer and MS Edge, the last function to show hash in URL is an issue. The animation stop 150 before section (like normally), but right after, it jump (without animation) to selected hash (section ID). Any fixes? 3. Sometimes the scrolling animation seem to stuck in the page. You should try. Thank you

Thank you. Now how to get some informations related to one user? For example, if I connect with one user, I would like to be able to get informations related to this user. (email, name, his superior, his students, etc.) In the table above, you can see that noemployeur 0001 is here two times. I don't know if I have to rewrite INNER JOIN on each pages or not... I'm trying to achieve this table : $con = mysql_connect("localhost", "root", ""); mysql_select_db("stages2017", $con); $sql = "SELECT * FROM associations INNER JOIN stagiaires ON stagiaires.noetudiant = associations.noetudiant INNER JOIN superviseurs ON superviseurs.noemploye = associations.noemploye INNER JOIN employeurs ON employeurs.noemployeur = associations.noemployeur"; $result=mysql_query($sql,$con); echo "<table border='1'>"; echo "<tr><th>Student Number</th><th>Student Name</th><th>Student Email</th><th>Supervisor Name</th><th>Supervisor Email</th></tr>"; echo "<tr>"; while($row = mysql_fetch_array(SOMETHING HERE!!!)) { echo "<td>".$row['noetudiant']."</td><td>".$row['nometudiant']."</td><td>".$row['courrieletudiant']."</td><td>".$row['nomemploye']."</td><td>".$row['courrielemploye']."</td></tr>"; } mysql_close($con); echo "</table>"; The example above is for employer page. Do I have the possibility to just take what was in my login page instead of rewriting all SQL stuffs and just row related to connected user? Thank you

It works thank you very much if(('#'.$login == '#'.$row['noetudiant']) && ('#'.$password == '#'.$row['mdpetudiant'])){ session_start (); // On $_SESSION["active"] = true; $_SESSION["acces"] = "stagiaire"; /*$_SESSION["login"] = $_POST["login"];*/ $_SESSION["nom"] = $row["nometudiant"]; header("Location: stagiaire.php");

Just tought that its a bad idea to check lenght, because If I change username lenght it will just break everything.

Or another solution could be to work with lenght of number with String, because each type of users have a different lenght for name and password. I'm not good with string, so how could it be added? Before $row?

Could it work by doing that? l_fetch_array($result)){ if(($login === $row['noetudiant']) && ($password === $row['mdpetudiant'])){ session_start (); // On $_SESSION["active"] = true; $_SESSION["acces"] = "stagiaire"; /*$_SESSION["login"] = $_POST["login"];*/ $_SESSION["nom"] = $row["nometudiant"]; header("Location: stagiaire.php");

Hi, I use mysql, because Its what we are learning now at school. what do you mean about the WHERE clause? The table was provided by my teacher, so can't change that.

Hi, I have multiple tables in my database and it's why I did an INNER JOIN. Bellow is the tables and one table is "Association" which mean that it's the starting point to link to other tables. ​ In association tables we have username or number for 3 différents categories of users. (Students - Stagiaires, employers - employeurs and supervisors - superviseurs). Each kind of user will go on a different page when login and it's where I have a problem. Here is my code for the login. <?php //Variables $host="localhost"; // Host name $username="root"; // Mysql username $password=""; // Mysql password $db_name="stages2017"; // Database name //$tbl_name="associations"; // Table name //$join="SELECT * FROM associations INNER JOIN etudiant ON stagiaires.noetudiant = associations.noedutiant INNER JOIN etudiant ON superviseurs.noemploye = associations.noemploye INNER JOIN etudiant ON employeurs.noemployeur = associations.noemployeur"; //Connexion à la base de données $con = mysql_connect("localhost","root",""); mysql_select_db("stages2017", $con); $sql = "SELECT * FROM associations INNER JOIN stagiaires ON stagiaires.noetudiant = associations.noetudiant INNER JOIN superviseurs ON superviseurs.noemploye = associations.noemploye INNER JOIN employeurs ON employeurs.noemployeur = associations.noemployeur"; $result=mysql_query($sql,$con); //Connexion de l'usager $login=$_POST['login']; $password=$_POST['pwd']; //Permet de vérifier l'utilisateur while($row=mysql_fetch_array($result)){ if(($login == $row['noetudiant']) && ($password == $row['mdpetudiant'])){ session_start (); // On $_SESSION["active"] = true; $_SESSION["acces"] = "stagiaire"; /*$_SESSION["login"] = $_POST["login"];*/ $_SESSION["nom"] = $row["nometudiant"]; header("Location: stagiaire.php"); }if(($login == $row['noemploye']) && ($password == $row['mdpemploye'])){ session_start (); // On $_SESSION["active"] = true; $_SESSION["acces"] = "employe"; /*$_SESSION["login"] = $_POST["login"];*/ $_SESSION["nom"] = $row["nomemploye"]; header("Location: superviseur.php"); }if(($login == $row['noemployeur']) && ($password == $row['mdpemployeur'])){ session_start (); // On $_SESSION["active"] = true; $_SESSION["acces"] = "employeur"; /*$_SESSION["login"] = $_POST["login"];*/ $_SESSION["nom"] = $row["personnecontact"]; header("Location: employeur.php"); }if(($login == 'timcegep') && ($password == 'stages2017')){ session_start (); // On $_SESSION["active"] = true; $_SESSION["acces"] = "admin"; /*$_SESSION["login"] = $_POST["login"];*/ header("Location: admin.php"); } } echo "User doesn't exist."; ?> And that's two examples of my 4 other pages (because 3 + 1 for admin) : employer : <?php session_start(); ob_start(); ?> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Employeur</title> </head> <body> <?php if (!$_SESSION["active"]|| $_SESSION["acces"]!="employeur"){ header("location: index.php"); }else{ ?> <h1>Employeur</h1> <h2>Bienvenue <?php echo $_SESSION["nom"] ?></h2> <p>Vous êtes maintenant connecté!</p> <a href="logout.php">Déconnexion</a> <?php } ?> </body> </html> student <?php session_start(); ob_start(); ?> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Stagiaire</title> </head> <body> <?php if (!$_SESSION["active"]|| $_SESSION["acces"]!="stagiaire"){ header("location: index.php"); }else{ ?> <h1>Stagiaire</h1> <h2>Bienvenue <?php echo $_SESSION["nom"] ?></h2> <p>Vous êtes maintenant connecté!</p> <a href="logout.php">Déconnexion</a> <?php } ?> </body> </html> So my problems are : 1. If I connect with employer 0004 and password 0004 which should allow me to login to employer page, it login me as student 4 on student page. 2. If I connect as a student, it login me on employer page. 3. Some pages are not working at all. So maybe my Inner Join is wrong or I need to remove "Else" from each other page and have an else if like : if (!$_SESSION["active"]|| $_SESSION["acces"]!="stagiaire"){ header("location: index.php"); }else if ($_SESSION["active"] && $_SESSION["acces"]="stagiaire){ I don't know what's wrong with my pages... I tried to fixe that for 2 days and I really want it fixed. Thank you

Hi, I have that : http://codepen.io/anon/pen/VaEwXy I would like that when you hover one box, it change opacity for other box. How can I do that? Thank you

Deleted

Hi, I don't know what's wrong with my code and I checked it about 20 times now. http://codepen.io/anon/pen/pyKZJj I don't know why, but my navigation 100% is making everything weird. Why is it outisde body and even HTML element? It seem like my padding is making weird stuffs to my width, but it's not suppose to. I'm currently basing my code on something already existing, so I don't know why it work on the other website and not the one I'm working on. EDIT : Ok I fixed it by removing padding and added position absolute to img (logo). navigation{ position: absolute; /*padding:2em 2.5em;*/ background:transparent; color:white; top:2em;/*added*/ width:100%; } .logo{ width: 50px; position:absolute;/*added*/ left:2.5em;/*added*/ } .nav{ right:2.5em; top:1.2em;/*added*/ text-transform: uppercase; position:absolute; } .menu{ list-style: none; } .menu li{ display:inline-block; margin-left:2.5em; } Now it work.

Hi, On my portfolio website I will have a work section where I show my most recent stuffs I made. The most recent one will be on the left with a width of 50% and the four other will be on the right with a width of 25% each. All these work will be in square, but I want some advice and solution about how to make perfect square. Which one is the best in the industry? So my solutions are based on already existing stuffs. 1. https://exposure.co/categories Look like what I want to make. This website is using <ul> and <li> to make square. From what I saw in the code, a width of 25% and a padding-bottom of 25% too is making a kind of mix between rectangle and square. After that they added a background image to the <li>. 2. I saw website like http://www.winbeta.org/ or http://www.neowin.net/ which are using <img>, but it's always the same aspect ratio. They are using WordPress, so I don't know if it's doing that automatically or they are resizing each images manually for the thumbnails. So what's the best way to show thumbnails on a page? Does WordPress automatically resizing the image to fit a certain div? How does it work? My goal is that later I will convert my new website (currently work in progress) into WordPress. PS: I will find how to make responsive square by myself to put img inside as background of with img tag.

So I should add a wrapper around my content with height: 100% and padding: (Footer height) and my footer should be relative with margin-top: -(footer height) Is it what you mean?

Yeah I remember, but I never received the answer lol. I tried all solutions around the web and nothing work for me...

Removed

Hi, I would like to get my footer stick at the bottom of the page and not fixed. I want to footer to stay after the text and page contents. I found this http://cbracco.me/css-sticky-footer-effect/ And that's what I get : http://codepen.io/anon/pen/EKmXMR On wide screen I always have a big white space at the bottom and want to stick my footer here, but if I'm on mobile, I want my footer at the bottom of the page. Hope you understand what I'm saying.