• Das kreative Thema des Monats Oktober wird vor allem diejenigen unter Euch besonders ansprechen, denen Do-it-yourself quasi im Blut liegt. Zeigt uns Eure Improvisationskünste oder fotografiert, was andere Leute sich so im Alltag zusammengestrickt haben. --> Zum Mitmachen bitte hier klicken

CSS-Leftpadding mit JavaScript definieren?

  • Ersteller Ersteller C64
  • Erstellt am Erstellt am

C64

Kaiser Alexander
Registriert
12.04.06
Beiträge
3.963
Hallo zusammen,

habe wieder mal ein Problem, dass ich auch nach langem Googlesuchen und "Try-and-error" nicht hinbekomme.
Folgende Situation:
20090224-dmi2d9hd9x2g4hc13f4s1ddjjy.jpg


Ich habe einen div (class="scrollContainer") in dem die kleine Vorschaubilder mit Hilfe von diesem Skript durchgescrollt werden können. Wenn ich eines anklicke, verändert sich der untere Teil der Webseite. Soweit so gut.
Ich habe das Skript schon soweit angepasst, dass das passende Bild zur aktuell unten angezeigten Seite vergrößert wird (ich habe dafür eine Variable $aktuellername gesetzt, baue den scrollcontainer auf, zähle $k++ und wenn der $bildname = $aktuellername ist, dann wird die Variable starter = $k gesetzt, womit ich im Skript dann den aktuellen Start-Panel setze:
// Set up "Current" panel and next and prev
growBigger("#panel_"+starter);
var curPanel = starter;
)

So nun habe ich das Problem, dass ich den left-padding des divs ".sliderContainer" anpassen muss, um das vergrößerte Bild wieder in der Mitte zu haben. Je weiter rechts ein Bild ausgewählt wird, desto kleiner muss der left-padding (ganz weit rechts muss es sogar ins Negative gehen, wenn das überhaupt geht) sein. Die Formel werde ich noch genau erstellen, wird aber in etwa in die Richtung gehen: "250-starter*25".
Aber wie bekomme ich das jetzt genau hin, dass einmalig beim Aufrufen der Seite der left-padding so verändert wird. Oder kann ich das noch einfach und schöner mit jQuery und einem move machen?
Oder geht das gar durch Anpassung des Skripts selber?
 
Du kannst mit:
Code:
var paddingLeftZahl = 10; //Padding-left angabe
var knotenPunkt = document.getElementById("sliderContainer");
knotenPunkt.style.paddingLeft = paddingLeftZahl;
per JS den Padding-Wert ändern.

Hoffe das meintest Du auch.

Torben
 
Ich kann dich leider grade nicht positiv bewerten.
Habe gerade in diesem Moment eine andere - deutlich bessere Lösung, als meine bisherigen Ansätze gefunden: :-)

Die Variable starter wird damit an das Skript übergeben und dann wird der div mit Hilfe von jQuery entsprechend verschoben.
Ich hoffe, dass das ne saubere Programmierung ist, denn ich bin da nicht so firm und glaube, manchmal würden mich professionelle Programmierer steinigen;-)

<script language="javascript">
var starter ='.$t.'
var testing = 360-starter*60;
$("#test").animate({"left": "+="+testing+"px"}, "slow");
</script>';

[solved]