Comment avoir un footer comme celui-ci?

Signaler
Messages postés
140
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
5 septembre 2014
-
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
-
Bonjour.

Je cherche en vain depuis quelques heures...

Comment ont-ils fait ce footer ? (il faut attendre quelques secondes pour que le script se lance).

http://www.instantslideup.com/index.php

Merci!

7 réponses

Messages postés
6063
Date d'inscription
dimanche 13 avril 2003
Statut
Modérateur
Dernière intervention
15 juillet 2011
28
Salut,

Voila le code mini

<html>
<head></head>


Bonjour



</html>
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
1
salut,

(je ne sais pas si ça va s'afficher, je ne sais pas comment on poste du code html ici)

la page:
=====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Footer demo</title>
<style>
body{
margin: 0px;
background-color: #112233;
text-align: center;
color: gold;
overflow: hidden;
}
#page{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: auto;
}
#cont{
position: relative;
width: 100px;
height: 850px;
border: 1px solid gold;
}
#footer{
visibility: hidden;
background-color: #8888ff;
color: #112233;
width: 97%;
font-family: Arial, Comic Sans MS, Times;
font-size: 10px;
text-align: center;
padding: 0 10 0 10;
margin: 0px;
position: absolute;
bottom: 2px;
left: 10px;
z-index: 50;
}
</style>
<script type="text/javascript" src="footer00.js"></script>
</head>



<hr style="width: 100%; color:#2222ff">






blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla





</html>
=====
le fichier "footer00.js" :
=====
function addFooter()
{
var timer = setTimeout("seeFooter()",5000);
}
function seeFooter()
{
footerDiv = document.getElementById('footer');
footerDiv.style.visibility="visible";
textToDisplay = "<hr width='100%' color='#2222ff' />";
textToDisplay += "Placer ici le texte";
textToDisplay += "<hr width='100%' color='#2222ff' />";
footerDiv.innerHTML= textToDisplay;
}
=======

si ça s'affiche pas , je mets la page sur un serveur ...

L.
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
1
re, ben c'est bon ...

evidemment on peut faire apparaitre le calque progressivement comme sur le site , mais ça alourdi le script ... ici le delai est de 5 secondes (5000)

L.
Messages postés
140
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
5 septembre 2014
1
Merci pour vos réponses!

Finalement j'ai réussi en bidouillant ce petit timer:

if (document.getElementById('test').style.bottom =='0px')
       {
       clearInterval(timer);
       }
       else
       {
       var x;
       var ln;
       ln = document.getElementById('test').style.bottom.length;
       if (ln > 4) {
           x = document.getElementById('test').style.bottom.substr(0, 3);
       }
       else {
           x = document.getElementById('test').style.bottom.substr(0, 2);      
      
       }
      
       x = parseInt(x);
       x = x + 3;

       document.getElementById('test').style.bottom = x + 'px';
       }

et le html:

Bonjour

Il suffit donc de mettre le code js dans le head et de lancer "timer" au load de la page.
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
1
doit manquer quelque chose dans ton code ...
moi j'ai juste une barre rouge en haut de page ???
Messages postés
140
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
5 septembre 2014
1
A copier dans le head:
<script type="text/javascript" language="javascript">
var timer;
    onload
    {
        Timer();
     }
   

function Timer() {
      
       setTimeout("ShowFooter()",4000);
   }
   function ShowFooter() {
       timer = setInterval("updiv()", 10);

   }
   function updiv() {

       if (document.getElementById('test').style.bottom =='0px')
       {
       clearInterval(timer);
       }
       else
       {
       var x;
       var ln;
       ln = document.getElementById('test').style.bottom.length;
       if (ln > 4) {
           x = document.getElementById('test').style.bottom.substr(0, 3);
       }
       else {
           x = document.getElementById('test').style.bottom.substr(0, 2);      
      
       }
      
       x = parseInt(x);
       x = x + 3;

       document.getElementById('test').style.bottom = x + 'px';
       }
   }
   function closeDiv()
   {
       document.getElementById('test').style.visibility = 'hidden';
    }
</script>

Et dans ton body:

Bonjour
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
1
merci,

ça fonctionne à condition de mettre le calque en position:absolute et non fixed.

++

L.