| Autor | Zpráva | ||
|---|---|---|---|
| jenda_ Profil * |
#1 · Zasláno: 15. 8. 2013, 22:34:44 · Upravil/a: jenda_
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 |
#2 · Zasláno: 15. 8. 2013, 22:56:19
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 * |
#3 · Zasláno: 15. 8. 2013, 23:03:39 · Upravil/a: jenda_
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 * |
#4 · Zasláno: 15. 8. 2013, 23:23:40
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 |
#5 · Zasláno: 15. 8. 2013, 23:26:25
Ano, pokud je těch stavů pár, tak je asi jednodušší prohazovat třídy, druhý způsob byl myšlen takto.
|
||
| jenda_ Profil * |
#6 · Zasláno: 16. 8. 2013, 12:24:44 · Upravil/a: jenda_
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;
}Prostě přepsat ten kod tak, že kliknutí na button ovlivní jen mateřský div. |
||
|
Časová prodleva: 11 let
|
|||
0