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

jeffwow
|
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
|
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
|
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
|
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
|
Derniers Blogs
[WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|