Verwenden von jQuery zum Festlegen des CSS-Attributs

Question

Erstes Schreiben auf Stackoverflow und Codierung von newb. Ich habe viele Beispiele gesehen, in denen Menschen erfolgreich CSS-Attribute mit jQuery gesetzt haben. Nach vielen frustrierenden Stunden muss ich jedoch noch sehen, was offensichtlich falsch ist. Hier ist mein sehr vereinfachter Code. Ich weiß, wenn ich dieses Attribut manuell zum CSS hinzufüge, hat es den gewünschten Effekt. Ich kann es jedoch nicht mit jQuery zum Laufen bringen. Jede Hilfe oder Vorschläge wären sehr willkommen. Ich habe das Gefühl, das sollte so offensichtlich sein, aber ich sehe es nicht.

ich RoR bin mit (und ich habe enthalten // = jquery in app.js erfordern)

CSS

#magicaldiv{ 
       margin-left: -175px; 
       margin-top: -20px; 
       width:350px; 
       height:40px; 
       position:absolute;} 

JS

 var buttonPointer = $('#magicaldiv'); 
    $(document).ready(updatePointer); 
    $(window).resize(updatePointer); 
    function updatePointer(){ 
           buttonPointer.css('left', 200);} 

Ich habe auch versucht, mehrere Iterationen jQuery und JS einschließlich, aber nicht beschränkt auf ..

JS

 document.getElementById("magicaldiv").style.left = 200; 

und

 var left = 200 + "px"; 
    buttonPointer.css('left', left); 

und

 buttonPointer.css('left', '200px'); 

obwohl die Dokumentation schlägt vor, dass alle Zahlen in einen String umgewandelt werden wird und angenommen px sein.

Answer 1

Möglicherweise müssen Sie die buttonPointer Definition in einen document.ready Aufruf umwandeln, abhängig von der Reihenfolge Ihres Quellcodes.

var buttonPointer; 
function updatePointer(){ 
    buttonPointer.css('left', 200);} 

$(document).ready(function() { 
    buttonPointer = $('#magicaldiv'); 
    updatePointer(); 
}); 

$(window).resize(updatePointer);