boite qui se déplace avec le scroll

boite qui se déplace avec le scroll - HTML/CSS - Programmation

Marsh Posté le 08-11-2007 à 17:07:47    

Salut :)
 
J'ai trouvé un tas de codes en javascript pour faire des menus qui se déplacent avec le scroll. collé en haut, en bas, positionné où on veut, etc.
Le pb c'est qu'a chaque fois le menu en question est dans le script.
 
Or, je ne cherche pas à déplacer un menu, mais des champs de formulaire. En fait ma page contient un long formulaire permettant de faire un devis, et je voudrais qu'au fur et à mesure que l'utilisateur scrolle la page, il puisse suivre l'évolution du prix du devis. pour le moment l'utilisateur est obligé d'aller en bas de page, pour voir des champs qui se mettent à jour (au passage c'est assez laid, il faudra que je trouve un truc pour que ça modifie du tgexte simple et non le contenu d'une boite de saisie)....
 
Y'a sûrement moyen de faire ça mais je trouve pas :(
 
m'ci !

Reply

Marsh Posté le 08-11-2007 à 17:07:47   

Reply

Marsh Posté le 08-11-2007 à 17:22:19    

css> position:fixed
ne pas oublier le hack pour ie, genre là: http://www.howtocreate.co.uk/fixedPosition.html

Reply

Marsh Posté le 08-11-2007 à 17:35:33    

ok, merci !
 
c'est court, mais étant plus ou moins dans le CSS depuis 2 jours, je vois bien la direction qu'il faut prendre :D
=> mettre mon total dans un div que je déplace ? me trompe-je ?

Message cité 1 fois
Reply

Marsh Posté le 08-11-2007 à 23:08:42    


ben comme dit, si le div est en position "fixed", tu le définies comme par exemple étant toujours en haut et à droite et au-dessus des autres DIV (les coordonnées dans le cas de fixed sont relatives à la fenetre du browser et non à la page), ca donnerait qqch comme :

Code :
  1. #monDiv {
  2.   position: fixed;
  3.   z-index: 99;
  4.   top: 0px;
  5.   right: 0px;
  6.   width: 150px;
  7.   border: 1px solid red;
  8. }


 
en fait le div ne se déplace pas, c la page qui scroll en dessous ;)
 
En esperant que ca te dépanne :)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 09-11-2007 à 08:31:33    

ça marche à la perfection :)
 
du coup, je me suis sorti les doigts du rectum et j'ai mis tout mon bordel de trucs bricolés dans un fichier css c'est plus propre...
 
et j'ai mis bottom: 0px en ligne 4 :p ; comme ça c'est dans le coin.
 
merci merci !!!!
 
 
ha zut, j'ai oublié le hack pour IE, je vais corriger ça...

Reply

Marsh Posté le 09-11-2007 à 09:12:53    

up !
 
je lis un peu partout que fixed est sensé fonctionner avec IE7, pourtant ça ne fonctionne pas chez moi.... y'a un truc que j'ai mal compris ou bien IE7 ne supporte pas fixed, comme les versions précédentes ?

Reply

Marsh Posté le 09-11-2007 à 09:31:04    

Bienvenue dans le monde débile de IE :lol:

 

Bon en fait pour IE7 le fix est simple (j'ai pas testé sous IE6), rajoute cette ligne tout en haut de ta page, comme ceci :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. ...
  4. ...
 

et voilà ca marchera :)

 

En fait il faut lui dire à IE que tu veux faire qqch de standard sinon il fera son neuneu :D
Bon par contre, le reste de ton code risque de subir qq recession si il était pas conforme, donc techniquement parlant c un bon entrainement à la rigeur :)


Message édité par SICKofitALL le 09-11-2007 à 09:35:17

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 09-11-2007 à 09:34:52    

remarque que ce n'est un fix "IE only", il est bon d'avoir cette ligne que ca soit pour IE, FF ou autre :)
Par contre, si tu veux que IE prenne en compte certaines choses, tu dois passer par là.
Plus d'infos : http://pompage.net/pompe/doctype/
:)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 09-11-2007 à 09:48:02    

han ça marche  :whistle:  
 
j'avais ça : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
ce qui est bizarre c'est que nulle part je n'ai trouvé cette info.... il était bien question de mettre IE en mode strict, ou d'autres appellations...
 
bref, ça marche et le reste du code n'a pas l'air de souffir (faut dire que la page est simple :D)
 
super merci
 
 [:roi]

Reply

Marsh Posté le 09-11-2007 à 10:15:23    

de rien :)
bonne chance avec la suite :hello:


Message édité par SICKofitALL le 09-11-2007 à 10:15:34

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 09-11-2007 à 10:15:23   

Reply

Marsh Posté le 09-11-2007 à 10:45:31    

la suite ? :D :D
alors j'ai fait ça (pour éviter d'afficher mes résultats dans de vilains champs de formulaire (ça marche mais c'est pas joli)
 
1/ dans mon javascript, au moment du calcul du prix hors taxe :
 
document.getElementById("horstaxe" ).InnerHTML = ht;
 
2/ dans ma page html (dans la boite qui s'affiche en permanence dans le coin)
 
<div id="prixtotal">
Prix Hors Taxe : <span id="horstaxe">le prix ici</span><br>
</div>
 
 
"le prix ici" ne change pas... que ce soit en mettant ce bloc dans le formulaire ou en dehors... y'a un truc qui doit être évident mais que je vois pas :)

Reply

Marsh Posté le 09-11-2007 à 11:35:32    

essaye "document.getElementById("horstaxe" ).innerHTML"
 
Je ne sais pas ce que tu utilises comme browser, mais si tu utilises Firefox, tu as une console javascript intégrée, et SURTOUT l'extension FireBug qui est plus que pratique : explorateur DOM, console, déboguage en temps réel, ...
 
En fait "innerHTML accede au contenu HTML en lecture/ecriture de l'element, mais la propriété "InnerHTML" elle, n'existe pas ! Et comme rien ne t'empeche de la créer, il ne bronchera pas;)
 
Donc voilà, JavaScript est sensible à la casse :D


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 09-11-2007 à 11:46:49    

ça marche :D
 
le plus très énnervant qui m'énnerve très beaucoup dans tout ça, c'est que j'avais déjà repéré un pb de casse, jsute avant de poster, sur GetElemntById. et c'est quoi qui m'a dit que ça merdait ?
 
ben l'extension webdevelopper de firefox (comme quoi...). mais là il ne sortait pas d'erreur, pour le coup..... juste il ne se passait rien
 
 
tu me feras ta facture  :whistle:

Reply

Marsh Posté le 09-11-2007 à 11:52:17    

t'inquietes, ce soucis de casse est un classique :D
 
pour les fonctions c cool car le parseur JS voit tt de suite la "nuance", mais pour les propriétés c plus chiant ....


---------------
We deserve everything that's coming...
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed