begin process at 2010 03 20 06:53:39
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Comment avoir un footer comme celui-ci?


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Comment avoir un footer comme celui-ci?

lundi 11 mai 2009 à 21:18:03 | Comment avoir un footer comme celui-ci?

jeffwow

Membre Club
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!


lundi 11 mai 2009 à 22:50:09 | Re : Comment avoir un footer comme celui-ci?

nhervagault

Administrateur CodeS-SourceS
Salut,

Voila le code mini

<html>
<head></head>
<body>
<div id="adUnit" style="bottom:0;
height:90px;
left:0;
margin:0 0 -90px;
padding:0;
position:fixed;
width:100%;
background-color:#ef4535;
margin-bottom: 0pt;" >Bonjour
</div>
</body>
</html>
mardi 12 mai 2009 à 15:37:58 | Re : Comment avoir un footer comme celui-ci?

leris

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>
<body onload="addFooter();">
<div id="footer">
<hr style="width: 100%; color:#2222ff">
</div>
<div id="page">
<div id="cont">
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
</div>
</div>
</body>
</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.
mardi 12 mai 2009 à 15:40:05 | Re : Comment avoir un footer comme celui-ci?

leris

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.
mardi 12 mai 2009 à 19:38:57 | Re : Comment avoir un footer comme celui-ci?

jeffwow

Membre Club
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:

<div id="adUnit" style="bottom:-90px;
height:90px;
left:0;
margin:0 0 -90px;
padding:0;
position:fixed;
width:100%;
background-color:#ef4535;
margin-bottom: 0pt;" >Bonjour
</div>

Il suffit donc de mettre le code js dans le head et de lancer "timer" au load de la page.


mardi 12 mai 2009 à 20:03:40 | Re : Comment avoir un footer comme celui-ci?

leris

doit manquer quelque chose dans ton code ...
moi j'ai juste une barre rouge en haut de page ???
mardi 12 mai 2009 à 20:07:38 | Re : Comment avoir un footer comme celui-ci?

jeffwow

Membre Club

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:

<div id="test" style="bottom:-90px;
height:90px;
left:0;
margin:0 0 -90px;
padding:0;
position:fixed;
width:100%;
background-color:#ef4535;
margin-bottom: 0pt;" >Bonjour
</div>
mardi 12 mai 2009 à 21:08:20 | Re : Comment avoir un footer comme celui-ci?

leris

merci,

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

++

L.


Cette discussion est classée dans : footer


Répondre à ce message

Sujets en rapport avec ce message

eliminer le footer et le header lors d'une impréssion [ par vince ] Bonjour,Je souhaiterais imprimer une page html toute simple sans qu'apparaisse le nom de la page, le titre etc... par une fonction javascript.Je n'ai Impression de header et de footer d'images [ par jessak ] Par exemple, si l'on a image1.gif comme header et image2.gif commme footer, mais que le texte entre est trop long. (Donne 2 pages à l'impression) . Po position bas du footer page web [ par Jarod1980 ] Bonjour,Je savoir comment positionner mon footer de ma page web en bas de mon écran et ceci pour chaque résolution.Mon footer est défini entre 2 balis Script footer.js [ par Lepajero ] BonjourJe suis en train de créer un CSS pour les pages HTML de mon site et j'ai trouvé le script footer.js pour placer un pied de page que je n'aurais

Livres en rapport



Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,359 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales