Salut tout le monde, encore moi
je viens vous demandez votre aide pour récupéré l'attribut d'un élément en JS.
Actuellement j'ai ceci:
$(function(){
$('.sticky').each(function(){
var dec = $(this).getAttribute('décalage');
alert(dec);
});
});
Qui doit allé chercher les infos dans:
<div class="sticky" décalage="25">[...]</div>
J'aimerais dans mon script récupérer cette valeur de l'attribut "décalage" mais rien n'y fait... :'(
![]()
getAttribute c'est une méthode d'un objet HTMLElement.
$(this) c'est un objet qui provient de jQuery.
Soit tu fais this.getAttribute('décalage'), soit en utilisant jQuery $(this).attr('décalage');
Au passage, même si ça marche, c'est pas une bonne idée d'utiliser des accents dans un attribut.
Deuxième remarque, tu as l'air de faire du HTML, pas du XML, et "décalage" ne fait pas partie des attributs de la balise <div>.
Renseigne-toi sur l'attribut "data-" en HTML5. ![]()
C'est magique le data-
plus besoin de ce demander comment stocker ces données
merci pour le coup de main ;)
je suis toujours autant perdu entre jquery et js
Encore, moi!
Je cherche comment faire pour réaliser une condition sur le fait qu'un élément suivant sa position (fixed ou absolut dans mon cas)
En gros :
Si mon élément est en position 'fixed' alors [...]
Mais je n'y arrive pas :'(
Tout ce que j'ai pu faire jusqu'à maintenant me renvois un "Uncaught ReferenceError:Invalid left-hand side in assignment"
Pour récupérer un style CSS avec jQuery:
var position = $('selector').css('position');
Sans jQuery:
var position = getComputedStyle(element).position;
// Element représente un élément HTML récupéré avec getElementBy Id,
// getElementsByTagName, querySelector, etc...
| Au passage, même si ça marche, c'est pas une bonne idée d'utiliser des accents dans un attribut.
Pourquoi ?
Plutôt par convention qu'autre chose, y'a peut-être que moi qui fait ça mais j'évite de mettre des accents ou caractères spéciaux dans les noms de dossiers, de fichiers, de fonctions, ou dans des balises et attributs par exemple.
Ouais moi pareil, mais je crois pas que ça pose vraiment de problèmes en pratique. ![]()
Disons que les accents c'est par convention, imagine si tu récupères un code où le nom des fonctions que tu dois appelé ont des signes allemands dedans.. Tu vas t'amuser.
Disons qu'a la base il me semble que certains langages sont basés sur l'ASCII 128, qui ne comprend donc pas les caractères accentués.
Sur un système ça peut fonctionner, sur un autre ça ne marchera pas.
Par défaut essayez de faire un petit programme en C avec des accents, logiquement ça ne marchera jamais sans bibliothèques supplémentaires.
Bref tu peux évidemment mettre des accents à ton texte etc, mais au niveau du code les caractères autorisés sont logiquement a-z, A-Z, 0-9, le _ et le - et c'est tout.
Donc les accents dans le code, franchement je te conseille d'oublier (ça ne merdera peut être pas sur ton PC, mais tu risques très fort d'avoir une couille un jour à cause de ça).
Encore moi, j'ai encore un problème avec ce sujet.
J'essais de vérifier avec une condition que le scroll de la page est supérieur à la position par rapport au top de l'élement + sa hauteur - une variable, sauf que... ça ne marche pas
Pour faire simple on va dire que le scroll doit être plus grand que 400 pour que la condition soit valide.
__________________________________________________
_
if (elem.hasClass('mouse_on_off')) {
if ($('window').scrollTop>400){
alert('Mouseover pret');
elem.mouseover(function(){
elem.stop().animate({top: "0px"}, Ton, 'easeOutBounce')
});
elem.mouseout(function(){
if($(window).scrollTop()>dDep2){
elem.stop().animate({top: "-" + dDep2 + "px"}, Toff, 'easeOutElastic')
};
});
};
};
__________________________________________________
_
Voila l'intégralité de mon code:
__________________________________________________
_
$(function(){
$('.sticky').each(function(){
var elem = $(this);
var parent = elem.parent();
var pTop = parent.offset().top;
var dTop = elem.offset().top;
var dDep = elem.data('sticky-depassement');
var hauteur = elem.height();
Ton = 400;
Toff = 300;
if ( dDep != null) {
var dDep2 = hauteur - dDep;
}else{
var dDep2 = -($('#top_menu').data('sticky-depassement'));
};
parent.css('position','relative');
elem.css('position','absolute');
$(window).scroll(function(){
if ($(window).scrollTop()>dTop + dDep2){
elem.css('position','fixed');
elem.css('top', -dDep2);
}else{
elem.css('position','absolute');
elem.stop().animate({top:dTop-parent.offset().
top},0);
};
});
if (elem.hasClass('mouse_on_off')) {
if ($('window').scrollTop>400){
alert('Mouseover fonctionne');
elem.mouseover(function(){
elem.stop().animate({top: "0px"}, Ton, 'easeOutBounce')
});
elem.mouseout(function(){
if($(window).scrollTop()>dDep2){
elem.stop().animate({top: "-" + dDep2 + "px"}, Toff, 'easeOutElastic')
};
});
};
};
});
});
__________________________________________________
_
(au passage, vous n'auriez pas un site pour poser son code facilement et en faire un lien? Sur JVC c'est vraiment pas pratique...)
Je vous remercie pour l'aide que vous voudrez bien m'apporter.
(au passage, vous n'auriez pas un site pour poser son code facilement et en faire un lien? Sur JVC c'est vraiment pas pratique...)
http://wall.deblan.fr
Pour ton problème tu devrais faire des console.log() un peu partout pour débugger ton code (sans notre aide).
Ton problème vient visiblement de cette condition:
$(window).scrollTop > 400
Là t'as pas 36 000 choix, tu fais un log de la seule partie de la condition qui n'est pas fixe.
console.log($(window).scrollTop);
Et tu obtiens...
function (c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxMo
del&&g.document.documentElement[d]||g.document.bod
y[d]:e[d]}return
this.each(function(){g=cy(this),g?g.scrollTo(a?f(g
).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})
}
C'est donc une fonction.
Comment on utilise une fonction ?
Avec deux fucking parenthèses à la fin
Ta condition devient donc:
$(window).scrollTop() > 400
Tu mets ça dans ton if et le tour est joué ![]()
Je suis de plus en plus mauvais
J'avais avec la console fait tout un tas de test du scrollTop() sans jamais me mettre d'erreur
merci pour le coup de main et pour le site ![]()
Rha, il semblerait que le problème ne vienne pas de la.
Apres avoir suivi ton conseil et avoir mis du console.log() partout, je me rend compte que scrollTop() est à 0 même au milieu de la page...
console.log(dTop + hauteur -dDep);
console.log($(window).scrollTop());
me retourne 419 et 0.
Je réfléchi depuis tellement longtemps dessus que je vois pas plus loin que le bout de mon nez
Je continue bien évidement à chercher une solution mais toute aide est la bienvenue.
Essaie juste ce code sur ta page:
$(window).scroll(function() {
console.log($(window).scrollTop());
});
Ça te renvoie toujours 0 quand tu scroll ?
Parce que si je test ça sur JVC par exemple ça marche bien
Si ton site est en ligne je veux bien y jeter un coup d'oeil ![]()
Je comprends de moins en moins... il ne me renvois qu'une fois 0 maintenant...
Tiens pour le site:
http://loz.netii.net/27-09-2012_14h48/
Des deux console.log sont pas dans l'évènement scroll, ils sont exécutés juste au chargement de la page, donc normal que ce soit zéro, vu qu'on "spawn" en haut de la page
Il faudrait mettre la partie du "if (elem.hasClass('mouse_on_off')) {" dans le "$(window).scroll(function(){", non?
Que ce que je suis ***... En plus c'est bien ce que j'avais sur mes versions précédentes x[)
La vérification par rapport au scroll ne me plait pas finalement...
Je voudrais que la condition resemble à ça:
elem.css('position') = 'fixed'
Es possible? (Celui-ci me renvoi une erreur)
Revois un peu tes bases, pour vérifier si deux valeurs sont égales on utilise l'opérateur == et non un simple = (qui lui sert à l'affectation).
if(elem.css('position') == 'fixed')
Comme dans tout les langages... Stupidité sur stupidité
Je pensais que l'erreur venait du fait que .css() s'utilise avec deux arguments.