je cherche comment faire pour appliquer un style sur un div (#all-Type) genre :
ce code ne marche pas :/
Code:
2
3
4
5
Version imprimable
je cherche comment faire pour appliquer un style sur un div (#all-Type) genre :
ce code ne marche pas :/
Code:
2
3
4
5
Bonjour,
Voilà ce que je proposerais en javascript si #all-Type est l'id du div:
Code:
2
3
4
Pour savoir pourquoi ton code ne fonctionne pas, as tu testé :
Code:console.log( $('#all-type').css('margin-top') )
bonjour,
avec ce code on me donne rien sur console :
mais avec le code que m'a donné diazis :Code:
2
3
4
5
6
7
ça m'affiche une sorte d'erreur :Code:
2
3
4
5
6
7
Uncaught TypeError: Cannot read property 'style' of null
Bonjour,
il semblerait à première vu que tu cherches à faire appel à l'élément AVANT qu'il ne soit dans le DOM, jQuery ne déclenche pas d'erreur car il retourne un objet jQuery vide, c'est pas cool pour ceux qui débutent, mais en javascript "pur" cela engendre une exception qui plante.
Concernant la source que t'a indiqué www.diazis.com elle ne fonctionnera que si le style est mis inline, dans le cas contraire il faut passer par un window.getComputedStyle ou un oElem.currentStyle.
Maintenant parlons des 50% affecté à ta margin-top, sauf si cela est mis en inline, tu n'aura pas un retour en % mais en px, donc il va te falloir faire autrement.
Es tu sur que ton div a pour id '#all-Type' ?
le code suivant affiche bien 50%
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14<!DOCTYPE html> <html> <head> </head> <body> <div id="#all" style="height: 50px; width: 50px; margin-top: 50%; background-color:red;"> </div> <script> temp = document.getElementById('#all'); alert(temp.style.marginTop); </script> </body> </html>
Attention, il n'est pas conseillé de faire commencer une ID par un # même si cela fonctionne, que dit la recommandation :Citation:
Es tu sur que ton div a pour id '#all-Type' ?
le # sert au CSS pour définir que le sélecteur concerne un élément ayant pour ID ce qui suit #id_de_la_div{}, il sert également pour cibler une ancre <a href="#ancre">et en jQuery, ce qui est le cas de Kagami, il permet d'identifier que l'on est en présence d'une ID, comme pour le CSS.Citation:
Envoyé par w3.org/TR/html4/types.html
oui car comme je l'ai précisé le CSS est inline.Citation:
le code suivant affiche bien 50%
bonjour,
pour être précise, je cherche à fixer mon div lorsque je descend en bas et qu'il ait le margin-top = 5%
la première img c'est avant que je descend:
Pièce jointe 181485
la deuxième montre le div fixé dans un certain margin-top que je dois précisé ( & 5% par exemple)
Pièce jointe 181487
je ne sais si tout est bien expliqué .. :/
merci
Bonjour,
Si je comprends bien, il faut que tu gères l'évènement scroll.
Voici un exemple (toujours en javascript).
Il faut bien sur que tu adaptes :Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<!DOCTYPE html> <html> <head> </head> <body> <div id="myPage" style="height: 1000px;"> <div id="all-type" style="height: 100px; width: 50px; background-color:red; margin-top:250px;"> </div> </div> <script> if (window.addEventListener) { window.addEventListener('scroll', checkScroll, false); } else { window.attachEvent('onscroll', checkScroll); } function checkScroll () { myDiv = document.getElementById('all-type'); if (document.documentElement.scrollTop != 0) { myDiv.style.marginTop = '40px'; myDiv.style.position ='fixed'; } else { myDiv.style.marginTop = '250px'; myDiv.style.position ='relative'; } } </script> </body> </html>
Bouger la div en fonction de la valeur du scroll ou de la position relative de ta div all-type.
Remettre la div à sa position initiale...
Comme je crois comprendre que tu veux mettre ta div en dessous de ta barre de menu, il faut mieux que tu gères la marge en px plutôt qu'en %.
@NoSmoking comme tu as du le voir, je connais pas jquery donc je ne savais pas que le # permettait d'identifier un id. Mais effectivement suis 100% en phase sur le nommage. Ok aussi pour le inline.
