Forum PHP.pl > [JavaScript]Jquery show - slide - nadawanie divowi widoczność

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Jquery show - slide - nadawanie divowi widoczność

Forum PHP.pl > Forum > Przedszkole

Watt

21.11.2012, 22:28:57

Witam!

Mam pytanie, czy jest możliwe aby płynnie powiększać diva przy użyciu takiej funkcji:

Kod

$('#dodaj_obr_' + liczba).show('slide', {direction: 'right'}, 1000);

Teraz pozwolę sobie wyjaśić na przykładzie:P

Używając tej funkcji liczyłem, że plusik będzie oddalony cały czas tyle samo od tekstu, a on po odpaleniu tego slide odskakuje na długość tekstu, a potem trzeba czekać, aż tekst do niego 'dojedzie'. Czy można zrobić jakoś żeby plusik podążał wraz z tekstem?

nospor

22.11.2012, 09:44:51

Wszystko zależy od tego, jak ten plusik oraz tekst jest ostylowany. Niestety szklaną kulę zgubiłem...

Watt

22.11.2012, 10:44:11

Ah, wybacz - kod troche syfiasty bo robiłem to szybko, żeby tylko sprawdzić czy działa
HTML/PHP

Kod

                    <div style="float:right;"><a href="java script:void(0)">
                        <img onmouseover="wys_obrazek(1)" src="imgs/add.png" id="dodaj_obrazek_1" style="float:left;" /></a>
                        <div id="dodaj_obr_1"
                        style="float:right;display:none;"><a href="java script:void(0)"
                        style="color:#414040;" onmouseout="sch_obrazek(1)">Dodaj obrazek</a>
                        </div>
                    </div>

Kod

        function wys_obrazek(liczba){
            if($('#dodaj_obr_' + liczba).is(':hidden')){
              $('#dodaj_obr_' + liczba).show('slide', {direction: 'right'}, 1000);
            }
        }
        function sch_obrazek(liczba){
            if($('#dodaj_obr_' + liczba).is(':visible')){
              $('#dodaj_obr_' + liczba).hide('slide', {direction: 'right'}, 1000);
            }
        }

nospor

22.11.2012, 10:47:00

Dla plusika dałeś float LEFT, dla tekstu dałeś float RIGHT.... No to chyba logiczne, ze jak tylko będą mogły to będą się trzymały jak najdalej od siebie

Watt

23.11.2012, 10:52:16

Na tym obrazku, który dałem wyżej oba divy miały flat left (obrazek i tekst) - wybacz zapomniałem że zacząłem kombinować. Próbowałem też z float right do plusika, wtedy plusik uciekał na prawą stronę teksu. Poza tym to nie powinno być problemem kiedy div rozszerza sie stopniowo, w tym przypadku dostaje width:100% od razu po odpaleniu funkcji i dopiero tekst wjeżdża. Nie mam zbytnio pomysłu jakby to zrobić z sensem.

lukaskolista

23.11.2012, 11:17:07

2x float left

Watt

23.11.2012, 15:00:41

Kod

<div style="">
                        <a href="java script:void(0)"><img style="float:left;" id="dodaj_obrazek_4" src="imgs/add.png" onmouseover="wys_obrazek(4)"></a>
                        <div style="float: left; display: none;" id="dodaj_obr_4"><a onmouseout="sch_obrazek(4)" style="color:#414040;" href="java script:void(0)">Dodaj obrazek</a>
                        </div>
                    </div>

Daje dokłanie to samo:

A chciałbym żeby było tak (rysowane w paint, wiec mzoe byc troche nierowono):

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.