Dev Faq
8
votes

Comment puis-je donner un positionnement absolu d'un élément JQuery sur une page?

Comment appliquer un positionnement absolu à un élément jQuery mon script jQuery actuel est xxx pré>

et mon CSS actuel est le suivant: p> 

#sm {
    margin:0; 
    padding:0;
}
#sm {
    list-style:none;
    top:240px;
    left:300px; 
    width:604px; 
    height:286px; 
    display:block; 
    overflow:hidden;z-index: 200;
    position:absolute; 
}
#sm li {
    float:left; 
    display:inline; 
    overflow:hidden;z-index: 200;
    position:relative; 
}

1 commentaires

Pourquoi vous devez réserver votre élément avec jQuery? Pourquoi pas CSS? #sm {position: fixe; TOP: 10PX; à gauche: 10px; }

6 Réponses :

12
votes

Utilisez la fonctionnalité .CSS : xxx

3 commentaires

devrait probablement saisir certaines informations de position avec .Position () ou .Offset () .

Je suis nouveau à JQuery comment puis-je incorporer le fichier .position () ou .Offset () dans ce script?

Quelqu'un peut-il me dire comment incorporer cela dans mon script?

0
votes

devrait ressembler à: xxx

Cela devrait s'assurer que l'élément restera à la position qu'il était auparavant.

2 commentaires

Suis-je en train de mettre des valeurs à l'intérieur des éléments de position ()? Par exemple position (10px) .top,

Je suis également confondu sur la manière dont cela comprend dans mon code ci-dessus, où dois-je le mettre et qui est $ elem. et qui est #someelement_id

3
votes

Stephanie, c'est juste pour clarifier ce que Jandy a démontré, avec un peu de ma propre réponse. Mais, toujours relativement nouveau à JQuery moi-même, je peux comprendre votre confusion. Prenons l'écart de Code de Jandy et répondons à vos commentaires.

Je suis également confondu sur la manière dont cela se comporte dans mon code ci-dessus, où est-ce que je le placé et qui est $ elem. et qui est #someelement_id

Dans le code de Jandy, l'élève $ est l'élément que vous essayez de positionner. Il utilise #someelement_id juste pour faire son exemple générique. Si spécifique à votre code, son

var $ elem = $ ('# quelqueelement_id');

deviendrait

< Code> var $ elem = $ ('# sm');

dans votre code. Tout ce qu'il fait, il fait stocker l'élément (objet) référence à la variable $ elem . Rien d'aimer là-bas, je ne pense pas. Je ne sais pas pourquoi il achète $ sur le nom de la variable ...? Je crois que var elem = $ ('# sm'); fonctionnerait la même chose, à moins que je ne manque quelque chose. Donc, cela vous obtient simplement l'élément que vous voulez travailler.

am je mettons des valeurs à l'intérieur des éléments de position ()? Par exemple, position (10px) .top

Non. Pas si votre objectif est de garder l'élément absolument positionné dans sa position actuelle. Si nous prenons séparé cette ligne de son code, elem.position () retournera un objet contenant les propriétés TOP et gauche . Vous pouvez lire sur la méthode de position ici ici position de l'API de jQuery (Découvrez Décalage de l'API JQuery également car il fournit des informations différentes et vous permet de fournir des coordonnées pour une nouvelle position pour l'élément). De plus que je puisse dire, alors que Jandy dit dans sa réponse, son code fixera la position absolue de l'élément à son emplacement actuel, le maintenant donc en place.

Je ne pense pas que ce serait ce que vous voulez si vous souhaitez réellement déplacer un élément de son endroit actuel à un autre endroit. Pour cela, vous définissez le haut et laissé comme répondit par Matt Asbury, ou vous pouvez utiliser une combinaison des deux réponses si vous souhaitez déplacer l'élément vers une nouvelle position par rapport à son emplacement actuel. Par exemple, xxx

ou, avec décalage de l'API JQuery , et combinant les deux, je crois que vous pourriez faire quelque chose comme: xxx

Pas sûr qui est l'approche "meilleure".

Le lien fourni par Nikkelman est également bon, mais il peut y avoir beaucoup à comprendre si vous êtes nouveau à JQuery.

une autre chose que j'ai remarquée , et peut-être que vous avez laissé ces choses parce qu'ils semblaient évidents, mais juste au cas où:

  1. Vous devez inclure JQuery.js de quelque part, comme vous avez inclus votre Slidemenu JS.
  2. et généralement, vous auriez votre code jQuery enveloppé dans un $ (document) .Ready (fonction (fonction () {...}); bloc, mais ce n'est pas toujours nécessaire.

    Espérons que cela aide et je n'ai pas veuver de bouer les eaux pour vous!

0 commentaires
1
votes

On dirait que vous le faites correctement, mais vous avez oublié de mettre votre script à l'intérieur du $ (document) .Ready () . XXX

Ceci assure Votre script n'est pas exécuté tant que l'ensemble du DOM est chargé dans le navigateur. Sinon, il essaiera d'appliquer le CSS avant de connaître l'élément #sm . Puisque tout ce que vous faites est de créer un style, y a-t-il une raison pour laquelle vous ne pouvez pas simplement ajouter ceci à votre fichier CSS à la place?

Je suggérerais également de supprimer le surcharger de votre étiquette et déplace l'appel sur slidemenu.build () dans le $ (document) .Readady () fonction, ainsi que .

1 commentaires

Je vois, je vois que vous avez édité cela. Cette réponse s'applique à la jQuery que vous avez modifiée dans votre question.

0
votes

Si vous utilisez

Position: Absolute;

Votre conteneur absolu augmentera lorsque vous faites défiler la page.

essayer avec

Position: fixe;

C'est la meilleure solution. Et votre conteneur de positionnement sera visible même si vous faites défiler la page

0 commentaires
0
votes

Voici une manière générique d'absolutisation tout élément: 

function absolutize(selector_expression) {
    element = jQuery(selector_expression).eq(0);

    if (element.css('position') == 'absolute') {
        return element;
    }

    element.css({
        position: 'absolute',
        top:    element.offset().top + 'px',
        left:   element.offset().left + 'px',
        width:  element.width() + 'px',
        height: element.height() + 'px'
    });

    return element;
}

0 commentaires

Articles qui pourrait vous intéresser :

 Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier