Come posso dare un posizionamento assoluto di un elemento jQuery su una pagina?

Come posso richiedere il posizionamento assoluto per un elemento di jQuery mio attuale script di jQuery èCome posso dare un posizionamento assoluto di un elemento jQuery su una pagina?

<head> 
    ... 
    <script type="text/javascript" src="slidemenu.js"></script> 
    <script type="text/javascript"> 
     $('#sm').css({ 
      position: 'absolute', 
      top: '10px', 
      left: '10px' 
     }); 
    </script> 
</head> 
<body onload="slideMenu.build('sm',286,10,10,1)"> 
    <ul id="sm" class="sm"> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
    </ul> 
    ...

E il mio css corrente è:

#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; 
}

fonte

2011-01-18 Stephanie

Perché è necessario per lo stile vostro elemento con jQuery ? Perché non i CSS? '#sm {position: fixed; inizio: 10px; a sinistra: 10px; } ' –

utilizzare la funzionalità .css:

$('#yourelement').css({ 
    position: 'absolute', 
    top: '10px', 
    left: '10px' 
});

fonte

2011-01-18 13:49:42

probabilmente dovresti prendere alcune informazioni sulla posizione con' .position() 'o' .offset() '. – jAndy

sono nuovo di jQuery come dovrei incorporare .position() o .offset() in questo script? – Stephanie

@Stephanie: vedi la mia risposta. – jAndy

Qualora

assomiglia a:

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

$elem.css({ 
    position: 'absolute', 
    top:  $elem.position().top, 
    left:  $elem.position().left 
});

Ciò dovrebbe assicurarsi che l'elemento rimanga nella posizione in cui si trovava prima.

fonte

2011-01-18 14:04:12 jAndy

sto mettendo valori all'interno degli elementi position()? Per esempio position (10px) .top, – Stephanie

Sono anche confuso su come questo incorpori nel mio codice precedente, dove lo metto e quale è $ elem. e che è #someelement_id – Stephanie

Stephanie, questo è solo per chiarire ciò che jAndy ha dimostrato, con un po 'della mia risposta. Ma, essendo ancora relativamente nuovo a jQuery, posso riferire alla tua confusione. Separiamo il codice di jAndy e rispondiamo ai vostri commenti.

Sono anche confuso su come questo incorpora nel mio codice precedente, dove lo metto e quale è $ elem. e che è #someelement_id

Nel codice di jAndy, $ elem è l'elemento che stai cercando di posizionare. Sta usando #someelement_id solo per rendere generico il suo esempio. Quindi, specifico per il codice, la sua

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

sarebbe diventato

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

nel codice. Tutto quello che sta facendo è memorizzare il riferimento all'elemento (oggetto) nella variabile $elem. Niente di strano lì non penso. Non sei sicuro del motivo per cui antepone $ al nome della variabile ...? Credo che lo var elem = $('#sm'); funzionerebbe allo stesso modo, a meno che non mi manchi qualcosa. Quindi, questo ti dà l'elemento su cui vuoi lavorare.

sto inserendo valori all'interno degli elementi position()? Per esempio posizione (10px) .top

No. Non se il tuo obiettivo è quello di mantenere l'elemento assolutamente posizionato nella sua posizione corrente. Se smontiamo quella riga del suo codice, $elem.position() restituirà un oggetto che contiene le proprietà top e left. Puoi leggere il metodo di posizione qui jQuery API position (consulta lo jQuery API offset perché fornisce informazioni diverse e ti consente di fornire le coordinate per una nuova posizione per l'elemento). Quindi, per quanto posso dire, come dice jAndy nella sua risposta, il suo codice imposterà la posizione assoluta dell'elemento nella sua posizione corrente, quindi mantenendolo in posizione.

Non penso che questo sarebbe ciò che si desidera se in realtà si desidera spostare un elemento dalla posizione corrente in un'altra posizione. Per questo dovresti impostare la parte superiore e sinistra come risposta da Matt Asbury, oppure potresti utilizzare una combinazione delle due risposte se si desidera spostare l'elemento in una nuova posizione rispetto alla posizione corrente.Ad esempio,

$elem.css({ 
    position: 'absolute', 
    top:  $elem.position().top + 10, 
    left:  $elem.position().left + 10 
});

Oppure, con jQuery API offset, e combinando i due, credo che si potrebbe fare qualcosa di simile:

var newCoords = { 
    top: $elem.position().top + 10, 
    left: $elem.position().left + 10 
}; 
$elem.offset(newCoords);

Non sai quale è l'approccio "migliore".

Anche il collegamento fornito da Nikkelman è buono, ma potrebbe esserci molto da capire se siete nuovi a jQuery.

Un altra cosa che ho notato, e forse ti ha lasciato queste cose perché sembravano evidenti, ma solo nel caso in cui:

È necessario includere jquery.js da qualche parte, come si hanno incluso la tua slidemenu js.
E di solito il codice jQuery dovrebbe essere racchiuso in un blocco $(document).ready(function() {...});, ma questo non è sempre necessario.

Speriamo che questo aiuti e non abbia solo confuso le acque per voi!

fonte

2011-01-19 17:51:46

Sembra che lo stiate facendo correttamente, ma avete dimenticato di inserire lo script all'interno dello $(document).ready().

$(document).ready(function() { 
    $('#sm').css({ 
     position: 'absolute', 
     top: '10px', 
     left: '10px' 
    }); 
});

Ciò garantisce che lo script non venga eseguito finché l'intero DOM non viene caricato nel browser. Altrimenti, proverà ad applicare il CSS prima di conoscere l'elemento #sm. Dal momento che tutto quello che stai facendo è impostare alcuni stili, c'è un motivo per cui non puoi semplicemente aggiungerlo al tuo file CSS?

Vorrei anche suggerire la rimozione del onload dal vostro tag <body> e spostando la chiamata al slideMenu.build() nella funzione $(document).ready(), pure.

fonte

2011-01-19 18:26:13 keithjgrant

Ah, capisco, l'hai modificato. Questa risposta si applica al jQuery che hai modificato nella tua domanda. – keithjgrant

se si utilizza

position: absolute;

il contenitore assoluto salirà quando si scorre la pagina.

prova con

position: fixed;

questa è la soluzione migliore. E il vostro contenitore di posizionamento sarà visibile persino scorrere la pagina

fonte

2013-05-20 15:10:33 PonrajPaul

Ecco un modo generico di assolutizzare ogni elemento:

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; 
}

usarlo: absolutize('#sm');

fonte

2013-09-13 13:32:21

Come posso dare un posizionamento assoluto di un elemento jQuery su una pagina?

risposta

Problemi correlati