Nic727

May 24, 2016

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

May 23, 2016

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?

May 23, 2016

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.

May 23, 2016

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>

May 23, 2016

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.

May 23, 2016

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?

May 11, 2016

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>

May 10, 2016

An inner join will only find records that exist in every table, that's what an inner join does. If there isn't a record in the association table then it won't find that user. That's one reason I suggested a different database structure. I suppose your alternative is to run a query on each individual table to find where they are, or you could use a union to get records from any of the other tables that match the username.

I tried a FULL OUTER JOIN, but it's not working.

Do you have a solution to check all tables?

May 10, 2016

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.

May 10, 2016

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

May 9, 2016

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

May 7, 2016

The only way to get it to work with '==' it to make sure the text is not read as a number which results in leading zeros being removed with

if ('#'. $stuid == '#'. $thisid)

{

...rest of code

}

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");

May 6, 2016

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

May 6, 2016

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?

May 6, 2016

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");

May 6, 2016

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.

May 6, 2016

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

April 27, 2016

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

April 26, 2016

Deleted

April 20, 2016

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.

April 20, 2016

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.

March 23, 2016

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?

March 23, 2016

Yeah I remember, but I never received the answer lol.

I tried all solutions around the web and nothing work for me...

March 23, 2016

Removed

March 23, 2016

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.

Sign In

Nic727

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by Nic727

converting desktop nav to mobile hamburger

Smooth Scrolling bugs

Smooth Scrolling bugs

Smooth Scrolling bugs

Smooth Scrolling bugs

Smooth Scrolling bugs

Smooth Scrolling bugs

Login goes wrong INNER JOIN

Login goes wrong INNER JOIN

Smooth Scrolling bugs

Login goes wrong INNER JOIN

Login goes wrong INNER JOIN

Login goes wrong INNER JOIN

Login goes wrong INNER JOIN

Login goes wrong INNER JOIN

Login goes wrong INNER JOIN

Login goes wrong INNER JOIN

hover affecting other element

While with elseif inside

Width 100% go outside body

thumbnails - img or background?

Footer - bottom of the page

Footer stick at bottom of the page

Footer - bottom of the page

Footer stick at bottom of the page

Browse

Activity