begin process at 2012 02 13 02:17:28
  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 redimension d'un div... [ par kalif ] Bonjour à tous, Je redimensionne un div par javascript* et le problème est que le div en dessous de celui que je redimensionne, donc le footer, est d Problème de footer [ par Guerrilla ] Bonjour, Pour expliquer le plus clairement mon problème, rien ne vaut un lien: www.headmind.com Lors d'un redimensionnement de de la fenêtre, le foote CSS + Javascript qui foire sur Firefox 3.6.13 [ par BBFUNK01 ] Hello, je ne sais pas vraiment si je poste dans le forum approprié mais quoi qu'il en soit je vous expose mon soucis : J'ai un problème sur le footer Perte de Focus [ par fazerofgod ] Bonjour, Je suis en train de faire quelques tests et il se trouve que j'ai un petit souçis... En gros j'ai un évènement "MouseOver" qui me lance une a

Livres en rapport



Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

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,967 sec (4)

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