Autor Zpráva
jenda_
Profil *
Ahoj,
potřeboval bych poradit jak co nejjednodušeji prohodit hodnoty šířky a výšky divu.
Příklad:
mám div width: 300px; height: 100px;. V divu by byl odkaz "Prohodit rozměry". Po kliknutí by div měl width: 100px; height: 300px;. Takových divů by bylo na stránce vícero, a každý odkaz by prohodil hodnoty jen jeho mateřského divu.
Doufám, že mě chápete a že mi budete schopni poradit. Script může využívat jQuery. Budu vám moc věděčnej. Díky! :)


a nebo ještě jiná možnost, místo tlačítka prohodit rozměry by zde bylo tlačítko "otočit o 90 ° (při každém kliknutí by se posunolo o dalších 90 °)", tzn z border-top by stal border-right... ale to už je asi moc složitý
Str4wberry
Profil
Jedna možnost je si vytvořit CSS třídy a ty JavaScriptem prohazovat.

Druhá při kliknutí rovnou skriptem měnit hodnoty (elementNaKterySeKliklo.style.width atd.).
jenda_
Profil *
První možnost by sice použít šla, ale byla by hodně nepraktická. Každý div totiž bude mít jinou šířku a výšku než druhý. A takových divů bude na stránce asi 10. To by znamenalo 20 tříd, což mi nepřijde zrovna elegantní způsob.
Druhý způsob jsem bohužel nepochopil :( :D


Ale teď mě napadla jiná možnost která by používala právě tvůj navrhovaný první způsob. Udělal bych 3 class, a pomocí CSS nastavil rotaci o 90, 180 a 270 stupnů. JS by to pak prohazovalo. Díky za nakopnutí! :)
margin
Profil *
jenda:
teď mě napadla jiná možnost která by používala právě tvůj navrhovaný první způsob. Udělal bych 3 class
Mám za to, že právě toto řešení měl Str4wberry na mysli.
Str4wberry
Profil
Ano, pokud je těch stavů pár, tak je asi jednodušší prohazovat třídy, druhý způsob byl myšlen takto.
jenda_
Profil *
Str4wberry:
Díky moc. Přesně takle jednoduše jsem si to představoval. Teď jsem si ale uvědomil, že by rotace celého divu byla lepší než jen prohození rozměrů. Tak jsem si našel na netu http://stackoverflow.com/questions/12906855/jquery-rotate-image-using-rotate-plugin-rotate-90-degrees-each-click.
Konkrétně:
$("body").on("click", ".theater-wrapper img", function(){

    $(".theater-wrapper .current").rotate(getNextAngle());

});

nextAngle = 0;
function getNextAngle() {
    nextAngle += 90;    
    if(nextAngle >= 360) {
        nextAngle = 0;
    }
    return nextAngle;
}
Jenže to zbytečně používá class. Takže jsem se snažil dát dohromady uvedený Str4wberryův kód a tuhle rotaci, jenže mi to nejde. Prosím udělal by to někdo za mě? :D Díky předem :)


Prostě přepsat ten kod tak, že kliknutí na button ovlivní jen mateřský div.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: