Comment avoir un footer comme celui-ci?
jeffwow
Messages postés
140
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
5 septembre 2014
-
11 mai 2009 à 21:18
cs_leris Messages postés 419 Date d'inscription dimanche 31 août 2003 Statut Membre Dernière intervention 19 avril 2010 - 12 mai 2009 à 21:08
cs_leris Messages postés 419 Date d'inscription dimanche 31 août 2003 Statut Membre Dernière intervention 19 avril 2010 - 12 mai 2009 à 21:08
A voir également:
- Comment avoir un footer comme celui-ci?
- Code loto ci ✓ - Forum PHP
- Ci d'interface usb - Forum Visual Basic
- Tableau de lotto ci turbo 2 ✓ - Forum VBA Office (Excel, Word ...)
- Comment comparer la date de création de 2 fichiers.text ✓ - Forum VB.NET
- Footer javascript - Forum Javascript / DHTML
7 réponses
nhervagault
Messages postés
6063
Date d'inscription
dimanche 13 avril 2003
Statut
Membre
Dernière intervention
15 juillet 2011
37
11 mai 2009 à 22:50
11 mai 2009 à 22:50
Salut,
Voila le code mini
<html>
<head></head>
Bonjour
</html>
Voila le code mini
<html>
<head></head>
Bonjour
</html>
cs_leris
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
3
12 mai 2009 à 15:37
12 mai 2009 à 15:37
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.
(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.
cs_leris
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
3
12 mai 2009 à 15:40
12 mai 2009 à 15:40
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.
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.
jeffwow
Messages postés
140
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
5 septembre 2014
1
12 mai 2009 à 19:38
12 mai 2009 à 19:38
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
cs_leris
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
3
12 mai 2009 à 20:03
12 mai 2009 à 20:03
doit manquer quelque chose dans ton code ...
moi j'ai juste une barre rouge en haut de page ???
moi j'ai juste une barre rouge en haut de page ???
jeffwow
Messages postés
140
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
5 septembre 2014
1
12 mai 2009 à 20:07
12 mai 2009 à 20:07
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
<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
cs_leris
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
3
12 mai 2009 à 21:08
12 mai 2009 à 21:08
merci,
ça fonctionne à condition de mettre le calque en position:absolute et non fixed.
++
L.
ça fonctionne à condition de mettre le calque en position:absolute et non fixed.
++
L.
