Forum PHP.pl > show <div> onclick

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Black-Berry

11.06.2007, 10:05:23

Napisałem skrypt który pokazuje mi ukryte tagi <div> po kliknięciu na ikonkę. Działa to w ten sposób, że każdy div ma przypisane id ( np id="div_1" ). Po kliknięciu na ikonkę powiązaną z tym divem za pomocą Javascript zmieniam display:none na display:block; - Wtedy ukryty div się pokazuje.

Problem jest teraz taki, że chciałbym po kliknięciu w dowolny element strony ukryć na nowo ten pokazany element. Wie ktoś moze jak sie za to zabrać

mike

11.06.2007, 10:16:59

Cytat(Black-Berry @ 11.06.2007, 11:05:23 )

Po kliknięciu na ikonkę powiązaną z tym divem za pomocą Javascript zmieniam display:none na display:block; - Wtedy ukryty div się pokazuje.

No chyba logiczne jest że teraz jak zmienisz z block na none to element zostanie ukryty.

Samodzielności trochę.

sticker

11.06.2007, 10:17:19

ano nie ma problemu jak podepniesz funkcje js pod każdy link Może i dałoby sie to prościej zrobić jakbys pokazał dom dokumentu

Black-Berry

11.06.2007, 10:34:37

Cytat(mike @ 11.06.2007, 10:16:59 )

No chyba logiczne jest że teraz jak zmienisz z block na none to element zostanie ukryty.

Samodzielności trochę.

pani admin jak zwykle gromowładna.

Jasne że to jest logiczne i nie ma problemu jeśli chodzi o jeden element który wiem jakie ma id. Ale Chodzi o to że mam tych div'ów wiele i chciałbym żeby ukrył się dowolny bo inaczej musiałbym pisac funkcję która po kliknięciu ukrywa w pętli wszystkie divy. Dodatkowo musioałbym zdarzenie wywołania tej funkcji podpiąc do każdego elementu strony bo chcę zeby ten wyskakujący panelik ukrył się po kliknięciu w obszar poza nim. A to już problem.

ARJ

11.06.2007, 10:38:44

chodzi ci o coś takiego?

Kod

function Pokaz(co) {
    if (document.getElementById(co).style.display == "block"){
        document.getElementById(co).style.display = "none";
    }else{
        document.getElementById(co).style.display = "block";
    }
}

Black-Berry

11.06.2007, 10:42:53

@ARJ

To jest właśnie mniej więcej skrypt który teraz używam. Niestety musze przekazywac nim konkretne id. A jak ukryc pokazany div po kliknięciu w obszar poza nim ? Możnaby chyba zapamiętac zmienną która określa który div jest właczony... To załatwiłoby sprawę z petlą. Ale w jakim zdarzeniu, jakiego elementu podpiąć funkcję ukrywającą? Czy jeśli ustawię ją w tagu <body> to załatwi sprawę ?

ARJ

11.06.2007, 15:18:47

użycie tamtego kodu jest proste. dodajesz np. do innego diva:

Kod

onclick="Pokaz('ukrytyDiv')"

jako parametr do funkcji Pokaz, przekazujesz id diva którego chcesz ukryć/pokazać. czy on ma być widoczny czy nie na samym początku to już ustawiasz w css.

Black-Berry

11.06.2007, 17:46:26

@ARJ

Tak Wiem o co biega. Teraz tylko mam problem jak wywołać ta funkcję po kliknięciu w inny obszar niż pokazany div. Chce zrobić panelik który będzie się pokazywał po naciśnięciu ikonki a ukrywł jeśli uzytkownik zdecyduje że niepotrzebnie go otwarł i kliknie w dowolny obszar strony.

abc667

11.06.2007, 18:34:32

takie coś wymyśliłem, pod ff działa, pod operą nie sprawdzałem, dla ie trzeba jeszcze podopisywać gdzieniegdzie e no i ładnie to sobie w opakować w funkcje itd

[HTML] pobierz, plaintext 
<html>
<head>
<title>...</title>
<script type="text/javascript">
var now = false;
 
function show(id, event)
{
hide();
document.getElementById(id).style.display = 'block';
now = id;
event.stopPropagation();
}
 
var tag;
 
function hide()
{
	if(now)
	{
	document.getElementById(now).style.display = 'none';
	}
}
</script>
</head>
<body onclick="hide();">
<div onclick="event.stopPropagation();" id="jeden" style="width: 50%; height: 50%; border: 1px solid black; display: none;">fdf1</div>
<div onclick="event.stopPropagation();" id="dwa" style="width: 50%; height: 50%; border: 1px solid black; display: none;">fdf2</div>
<div onclick="event.stopPropagation();" id="trzy" style="width: 50%; height: 50%; border: 1px solid black; display: none;">fdf33</div>
 
<br />
<a href="#null" onclick="show('jeden', event);">jeden</a><br />
<a href="#null" onclick="show('dwa', event);">dwa</a><br />
<a href="#null" onclick="show('trzy', event);">trzy</a><br />
</body>
</html>
[HTML] pobierz, plaintext

Black-Berry

11.06.2007, 20:27:30

@abc667 good job

Super - teraz będzie można zrobić paneliki takie jakie mają na gmailu

Ale tak jak napisałeś coś jest nie tak w IE. Wiesz może jak to należy zmodyfikować aby działało w IE. Moze chociaż jakiś link do artykułu... (dopiero zaczynam z JS i nie znam tych różnic pomiędy ff i ie )

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.