Div um 10% vergrößern/verkleinern mit javascript

Unregistriert

Ich will ein Div um jeweils 10% vergrößern/verkleinern mit javascript

Code

<a href="javascript:set_groeße ('.$10_width.px.', '.$10_height.px.')">+10%</a><br>
            <a href="javascript:set_groeße ('.-$10_width.px.', '.-$10_height.px.')">-10%</a>




<script language='javascript' type='text/javascript'>
            <!-- //
               function set_groeße (width, height) {
                  document.getElementById ('game').style.width = document.getElementById ('game').style.width + width;
                  document.getElementById ('game').style.height = document.getElementById ('game').style.height + height;
            }


            // -->
            </script>

Alles anzeigen

es soll auch möglich sein mehrmal auf +10% klicken zu können.
Wenn ein Div width 400px hat dann hat $10_width 40px.
Wenn man dann mehrmal auf +10% klickt soll sich die größe so ändern: 400->440->480->520->560...
die höhe soll sich ein gleichen 10% schritten mit vergrößern/verkleinern

weiß nicht warum mein script nicht funktioniert.

Könnt ihr mir weiterhelfen???

Afrael

Wo soll denn die $10_width-Variable herkommen? Steckt da ein PHP-Script dahinter, das das HTML erzeugt? Wenn ja, poste das mal bitte.
Ansonsten überprüf nochmal die Syntax, '.-$10_width.px.' sieht irgendwie falsch aus, ich denke, das Apostroph müsste vor das px.

Übrigens:

Code

document.getElementById ('game').style.width += width;

macht genau das gleiche wie

Code

document.getElementById ('game').style.width = document.getElementById ('game').style.width + width;

und ist kürzer.

Unregistriert

+= hatte ich auch schon ausprobiert, ging aber nicht

ja, $10_width kommt aus php und ist nicht leer

'.-$10_width.px.' stimmt, des gibt -40px aus, wenn die original größe 400 ist.

Afrael

Ach, jetzt verstehe ich das ganze erst.
Deine Funktion will zwei Zahlen von dir haben. "40px" ist jedoch eine Zeichenkette. D.h. es wird die Größe von dem Element genommen und versucht, dazu die Zeichenkette "40px" zu addieren, logisch, dass das nicht geht.

Kurz ausgedrückt, mach das px in
<a href="javascript:set_groeße ('.$10_width.px.', '.$10_height.px.')">+10%</a><br>
weg.

synaptic

ich geb nur so als kleinen tip ne funktion mit dazu...
parseInt(), sie macht aus 400px ne 400... könnte evtl hilfreich sein

Unregistriert

Zitat von Afrael

urz ausgedrückt, mach das px in
<a href="javascript:set_groeße ('.$10_width.px.', '.$10_height.px.')">+10%</a><br>
weg.

.px hab ich jetzt entfernt, hab aber nichts gebracht

Afrael

Code

<a href="javascript:set_groesse ('.$10_width.', '.$10_height.')">+10%</a><br>
<a href="javascript:set_groesse ('.-$10_width.', '.-$10_height.')">-10%</a>




<script language='javascript' type='text/javascript'>
            <!-- //
               function set_groesse (width, height) {
                  document.getElementById ('team1').style.width = (parseInt(document.getElementById ('team1').style.width) + width)+'px';


                  document.getElementById ('team1').style.height = (parseInt(document.getElementById ('team1').style.height) + height)+'px';
            }


            // -->
            </script>

Alles anzeigen

Müsste jetzt so funktionieren. Von Verwendung von Sonderzeichen (ß) in Funktions- oder Variablennamen ist übrigens generell abzuraten, gibt evtl. Probleme.

Edit: Sorry, hab das ganze an einem anderen Beispiel getestet. Statt 'team1' muss es natürlich 'game' heißen. Und synaptic unter mir hat natürlich recht.

Evtl auch interessant: Dollar-Funktion.

Code

function $() {
    var elements = new Array();
    for (var i = 0; i < arguments.length; i++) {
        var element = arguments[i];
        if (typeof element == 'string')
            element = document.getElementById(element);
        if (arguments.length == 1)
            return element;
        elements.push(element);
    }
    return elements;
}

Alles anzeigen

Dann kannst du statt document.getElementById einfach $ schreiben.
Beispiel: $('game').

synaptic

document.getElementById ('team1') würd ich noch in einer variable speichern, wenns so oft benötigt wird!

Macrosdesign

nur so am rande erwähnt

wenn du immer um +10% eerhöst sieht das so aus :

400 -> 440 -> 484 -> 532.4 -> ... usw.

Unregistriert

dank dir, funktioniert super

@Macrosdesign sry, wenn ich mich nicht ganz eindeutig ausgedrückt habe, es soll sich immer um 10% des start wertest vergrößern, verkleinern.

kann geschlossen werden

Div um 10% vergrößern/verkleinern mit javascript

Tags

Benutzer online in diesem Thema