Podstrony
- telcocafe
- [PHP+MySQL] Problem z połączeniem mysqli('localhost', 'xxx', 'xxx', 'xxx'
- [PHP] Wyrażenia regularne. Zamienić name="info_imie" na name="{info_imie}"
- [php] Dodanie textu do pliku. Problem... :) POMOCY!!!!!!!!!!!!!
- [PHP] Skrypt cenzury Chcę cenzury!!!
- Dobre programy do edycji php Dobre programy do edycji php
- [PHP] podział na strony php: podział na strony
- [PHP i MySQL] jak pobrac liczbe rezultatow Jak pobrac liczbe rezultatow???
- jak zrobic aktualizacje php? pomocy!!!!!
- Błąd w PHP-Fusion pomocy !!!!!
- Daczego nie dziala?? skrypt php nie chce działać!!!
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- asfklan.htw.pl
telcocafe
Witam.Chciałbym osiągnąć efekt taki jak na www.centrumxp.pl.
Chodzi mi dokładnie o menu: po najechaniu na link, obok wyświetlane jest pod menu (zawartość),
oraz chciałbym zrobić coś takiego, jak najechanie na newsy na w/w stronie.
Czy osiągnięcie tego efektu jest możliwe w JS, czy w AJAXIE i php?
Prosiłbym o konktretną pomoc, linki z przykładami albo plikami źródłowymi.
Jestem w stanie za pomoc odwdzięczyć się.
POZDRAWIAM
trzeba to zrobić w javascripcie
wykorzystujesz zdarzenia onmouseover i onmouseout oraz atrybut visibility diva(ów) pod menu
Ta strona jest w ASP, weź poszukaj na google kursu ASP.
Dokładniej strona jest w asp.net. Zasiadaj przed delphi 2006 (2005 lub 8) i tam takie cos wyczarujesz ale znajomosc asp bardzo siem przyda :) pasuje jeszcze znac delphi .net a w tamtym co wspomniałes to to jest mozliwe :)
Użytkownik strefacst edytował ten post 10 sierpień 2006, 09:22
Co nie zmienia faktu że w js + php da sie osiągnąć ten sam efekt.
Ta strona jest w ASP, weź poszukaj na google kursu ASP.
Owszem strona jest napisana w asp, ale ten element nie ma nic z tym wspólnego ;) asp działa po stronie serwera. A ten efekt to jak już inni zauważyli sam js.
http://www.centrumxp.pl/Menu.js <- może sam poszukać ;)
Owszem strona jest napisana w asp, ale ten element nie ma nic z tym wspólnego ;) asp działa po stronie serwera. A ten efekt to jak już inni zauważyli sam js.
http://www.centrumxp.pl/Menu.js <- może sam poszukać ;)
Mam pytanko jak w firefox'ie 1.5.0.6 uruchamiam wyskakują błędy:
Błąd: Oczekiwano koloru, ale odnaleziono "undefined". Błąd podczas parsowania wartości dla własności "background-color". Deklaracja opuszczona. Plik źródłowy: http://www.centrumxp.pl/default.aspx Wiersz: 0
Czy da się to zrobić aby nie wywalało błędu(ów)?
trzeba to zrobić w javascripcie
wykorzystujesz zdarzenia onmouseover i onmouseout oraz atrybut visibility diva(ów) pod menu
Jak wykorzystać powyższe zdarzenia do osiągnięcie tego efektu?
coś podobnego jest na http://www.dhtmlgoodies.com/
http://www.dhtmlgood...ge=smallscripts "Content Organizer"
Jak wykorzystać powyższe zdarzenia do osiągnięcie tego efektu?
Ehh... prosty przykład:
<html> <head> <script> function wyswietl(nazwaDiva) { document.getElementById('divWynik').innerHTML = document.getElementById(nazwaDiva).innerHTML; document.getElementById('divWynik').style.display='block'; } function wyczysc() { document.getElementById('divWynik').innerHTML = ""; } </script> <style> .all { width: 210px; border: solid 1px #000; padding: 10px; } .hid { display: none; } .result { width: 205px; height: 100px; border: solid 1px #000; } .menulink { color: #0000ff; text-decoration: none; } .menulink:hover { color: #ff0000; } </style> </head> <body> <div class="all"> <div id="div1" class="hid"> info 1 </div> <div id="div2" class="hid"> info 2 </div> <div id="div3" class="hid"> info 3 </div> <div id="div4" class="hid"> info 4 </div> <div id="divWynik" class="result"></div> <a href="#" class="menulink" onmouseover="wyswietl('div1');" onmouseout="wyczysc()">show 1</a> <a href="#" class="menulink" onmouseover="wyswietl('div2');" onmouseout="wyczysc()">show 2</a> <a href="#" class="menulink" onmouseover="wyswietl('div3');" onmouseout="wyczysc()">show 3</a> <a href="#" class="menulink" onmouseover="wyswietl('div4');" onmouseout="wyczysc()">show 4</a> </div> </body> </html>
Przykład dobry.
Jednakże nie działa wyświetlanie obrazków zamiast tekstu.
I po zjechaniu z napisu SHOW znika zawartość, a ma ona zostać aby można było np kliknąć na dodatkowe linki w zawartości.
Po kolei:
1. ustawiasz menu górne z linkami, a drugie (dolne) menu to kilka divów w jednej pozycji, które są ukryte. Po najechaniu na link pokazuje się jeden, a po zjechaniu i on się chowa. Pół godziny w JS.
Jemu zapewne chodzi o to, aby po zjechaniu z odnośnika treść nadal się wyświetlała. W takim wypadku musisz tworzyć linki tego typu:
<a href="#" class="menulink" onmouseover="wyswietl('div1');">show 1</a>
dla wolno kumających: ze znacznika a usuwamy onmouseout="wyczysc()"
I po zjechaniu z napisu SHOW znika zawartość, a ma ona zostać aby można było np kliknąć na dodatkowe linki w zawartości. Racja bez sensu jak się pojawi i odrazu zniknie, późno było jak pisałem ;) Tak jak mówi Bartas usuniemy wyczysc z onmouseout i będzie działać.
Jednakże nie działa wyświetlanie obrazków zamiast tekstu. Bzdury ;)
Poprawiony przykład:
<html> <head> <script> function wyswietl(nazwaDiva) { document.getElementById('divWynik').innerHTML = document.getElementById(nazwaDiva).innerHTML; } </script> <style> .all { width: 500px; height: 500px; border: solid 1px #000; padding: 10px; } .hid { display: none; } .result { width: 500px; height: 450px; border: solid 1px #000; } .menulink { color: #0000ff; text-decoration: none; } .menulink:hover { color: #ff0000; } </style> </head> <body> <div class="all" > <div id="div1" class="hid"> info 1<img src="http://www.google.pl/images/logo_sm.gif"> </div> <div id="div2" class="hid"> info 2<a href="http://forum.ks-ekspert.pl">link</a> </div> <div id="div3" class="hid"> info 3 <table border="1"><tr><td>tabla</td><td>działa</td></tr>< /table> </div> <div id="div4" class="hid"> Wszystko działa </div> <div id="divWynik" class="result"></div> <a href="#" class="menulink" onmouseover="wyswietl('div1');">show 1</a> <a href="#" class="menulink" onmouseover="wyswietl('div2');">show 2</a> <a href="#" class="menulink" onmouseover="wyswietl('div3');">show 3</a> <a href="#" class="menulink" onmouseover="wyswietl('div4');">show 4</a> <a href="http://forum.ks-ekspert.pl">link</a> </div> </body> </html>ps. możnaby było jeszcze dołożyć czyszczenie po wyjściu z diva all, ale to trochę komplikuje sprawę bo po najechanie na link już występuje zdarzenie onmouseout dla all i czyści wszystko. Przydałby się może jeszcze jakiś warunek na dodatkowych zmiennych żeby ten efekt zniwelować, ale w tej chwili nie mam pomysłu ;) narazie działa dobrze
Użytkownik reVis edytował ten post 11 sierpień 2006, 10:18
OK. menu działa. Dziękuję wszystkim.
A jak osiągnąć efekt podświetlania całeś tabelki z tekstem (i ewentualnie grafiką) po najechaniu myszką, po zjechaniu aby łagodnie powróciły poprzednie kolory? Tak jak na www.centrumxp.pl po najechaniu na newsa.
Czy da się to osiągnąć w CSS i JS? Prosiłbym również o jakieś konkretne przykłady.
POZDRAWIAM
bosz :| masz caluśki kod i jeszcze masz problemy? weź daj moze briefa to zrobimy za Ciebie tą stronę :|
Bełdzio jak byś zauważył, pytam teraz o coś innego. Nie będę ci tłumaczył.
Bełdzio dobrze mówi. Luknij sobie kod menu.js i tam są odpowiednie funkcje. Szukanie nie boli.
Bełdzio jak byś zauważył, pytam teraz o coś innego. Nie będę ci tłumaczył.
jak co innego? masz na stronie "cos", które chcesz miec tez u siebie, chodzi o kod JS, który jest interpretowany po stronie klienta, czyli masz do niego pełen dostep czyli sens problemu jest taki sam jak poprzednio.
Moze jednak mi wytlumaczysz co jest innego :|
Wszystko jest przecież w :huh:
http://www.centrumxp.pl/Menu.js
Konkretne funkcje to: tn_zmien, tn_na, tn_z i to co jest nad nimi czyli 3 tablice i 1 zmienna. Używanie <div id="TN0" onmouseout="tn_z('0');" onmouseover="tn_na('0');">Treść ...</div> <div id="TN1" onmouseout="tn_z('1');" onmouseover="tn_na('1');">Treść ...</div>
A jak to wyciągnąć i co dokładnie, z menu.js ?
Przecież napisałem :blink: :mad:
Konkretne funkcje to: tn_zmien, tn_na, tn_z i to co jest nad nimi czyli 3 tablice i 1 zmienna.
Dzięki wszystkim, poradziłem sobie.
Tylko nie wiem po co te nerwy wasze, po prostu ja nie wiem tyle co Wy i dlatego prosiłem o dokładną pomoc.
POZDRAWIAM
Tylko nie wiem po co te nerwy wasze, po prostu ja nie wiem tyle co Wy i dlatego prosiłem o dokładną pomoc. My poprostu staramy się wymusić w Tobie trochę samodzielnego myślenia ;) wtedy też Twoja satysfakcja będzie większa. Żeby znaleźć ten skrypt wystarczyło otworzyć źródło strony, odszukać fragment z 1 newsem. Z wcześniejszego skryptu wiesz jak działa onmouseover i onmouseout więc szukasz tych elementów w tagach okalających od góry newsa. Znajdujesz linijkę:<div style="border-color: rgb(214, 227, 239); background-color: rgb(214, 227, 239);" class="Tresc_news" onmouseout="tn_z('0');" onmouseover="tn_na('0');" id="TN0">i masz już nazwy funkcji. Wskakujesz do pliku ze skryptami (w <head> znajdujesz albo skrypty albo powiązanie do zewnętrznego pliku). Otwierasz go, przeglądasz pod kątem wyszukanych już funkcji i masz wszystko gotowe ;)
Powodzenia w przyszłości :)
W sumie jest to bardzo proste.
Poniższy kod działa na Operze, Mozilli FireFox i Internet Explorerze na innych nie testowałem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script language="javascript" type="text/javascript"> function pokaz(id) { document.getElementById("t1").style.display="none"; document.getElementById("t2").style.display="none"; document.getElementById(id).style.display="block"; } </script> </head> <body bgcolor="#999999"> <a href="#" onmouseover="pokaz('t1')" style="color:#FFFFFF;">Pierwszy tekst.</a><br /> <a href="#" onmouseover="pokaz('t2')" style="color:#FFFFFF;">Drugi tekst.</a> <div class="opcje1" id="t1" style="display:none; border:1px black solid; width:120px; color:#990000; text-align:center;"> Pierwszy tekst. </div> <div class="opcje1" id="t2" style="display:none; border:1px black solid; width:120px; color:#990000; text-align:center;"> Drugi tekst. </div> </body> </html>
Jeśli zajdzie potrzeba mogę wam wytłumaczyć jak to działa.
Edit >
Albo od razu napisze ci co i jak.
Najważniejsza rzecz w tym wypadku to CSS - Cascade Style Sheet ( Kaskadowy arkusz stylu ) i Javascript.
Tutaj główną rolę odgrywa atrybut display który jest ustawiany na none,
kiedy strona strona zostanie załadowana.
Dzięki niemu element oznaczy atrybutem o tej wartości jest niewidoczny.
Następnie po najechaniu na odnośnik jest wywoływana funkcja Javascript o nazwie pokaz().
Otrzymuje ona jako parametr identyfikator obiektu id. Ustawia ona atrybut display objektów t1 i t2 na none,
po czym zmienia ten sam atrybut na block obiektu o identyfikatorze przekazanym jej.
Oto cała filozofia.
Edit >>
No taaaak.
Po diabła ja to pisałem skoro już mu wytłumaczyliście ;(
Użytkownik orglee edytował ten post 12 sierpień 2006, 01:38
Żeby nie pisać kolejnego posta o centrumxp jak zrobić cośtakiego
Wiem że wystarczy:
<script src="/Menu.js" type="text/javascript"></script> <div class="Tresc_news" onmouseout="tn_z('0');" onmouseover="tn_na('0');" id="TN0">
Ale w FF>Konsola Java wyświetla się błąd:
Błąd: Oczekiwano koloru, ale odnaleziono "undefined". Błąd podczas parsowania wartości dla własności "background-color". Deklaracja opuszczona.
Plik źródłowy: http://www.centrumxp.pl/default.aspx
Wiersz: 0
Czy idzie coś z tym zrobić aby nie wywalało błędu?
Nie znam się na JS?
Pojawił Ci się błąd z undefined kolor bo nie skopiowałeś wszystkich potrzebnych elementów skryptu (głównie chdzi o globalną tablicy z kolorów). Cały skrypt dodam i już nie powinno być więcej problemówkolory = new Array(); kolory[0] = '#D6E3EF'; kolory[1] = '#DBE7F0'; kolory[2] = '#E1EAF3'; kolory[3] = '#E7EEF5'; kolory[4] = '#EDF2F8'; kolory[5] = '#F3F7FA'; kolory[6] = '#F9FBFD'; kolory[7] = '#FFFFFF'; start = new Array(); czas = new Array(); inte = 50; function tn_zmien(kierunek, id, czasL) { if(start[id] == undefined) { start[id] = 0; } if(czasL == czas[id]) { start[id] += kierunek; document.all['TN'+id].style.backgroundColor = kolory[start[id]]; if(start[id] >= 0 && start[id] <= 7) { setTimeout('tn_zmien(' + kierunek + ', ' + id + ', ' + czasL + ')', inte); } } } function tn_na(id) { if(czas[id] == undefined) { czas[id] = 0; } czas[id]++; tn_zmien(1, id, czas[id]); document.all['TN'+id].style.borderColor = '#B1BBC5'; } function tn_z(id) { if(czas[id] == undefined) { czas[id] = 0; } czas[id]++; tn_zmien(-1, id, czas[id]); document.all['TN'+id].style.borderColor = '#D6E3EF';
Błąd: tn_z is not defined
Plik źródłowy: file:///C:/Documents%20and%20Settings/delx/Moje%20dokumenty/TMP/cxp.htm
Wiersz: 1
Może byś jakoś to wszystko w całość pozbierał?
Jeżeli wiesz jak to naprawić to pokaż całe źrudło? ;)
Powiedzmy, że udało mi się to ogranąć, na js specjalnie się nie znam ;)
index.html<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <script src="./skryptnews.js" type="text/javascript"></script> <style> div { width: 200px; height: 100px; background-color: #D6E3EF; border: solid 1px #F3F7FA; } </style> </head> <body> <div id="TN0" onmouseout="tn_z('0');" onmouseover="tn_na('0');">Tre��...</div> <div id="TN1" onmouseout="tn_z('1');" onmouseover="tn_na('1');">Tre��...</div> <div id="TN2" onmouseout="tn_z('2');" onmouseover="tn_na('2');">Tre��...</div> </body> </html>
skryptnews.jsie = true; if(window.navigator.appName.toLowerCase().indexOf('explorer') == -1) { ie = false; document.all = document.getElementsByTagName('*'); } kolory = new Array(); kolory[0] = '#D6E3EF'; kolory[1] = '#DBE7F0'; kolory[2] = '#E1EAF3'; kolory[3] = '#E7EEF5'; kolory[4] = '#EDF2F8'; kolory[5] = '#F3F7FA'; kolory[6] = '#F9FBFD'; kolory[7] = '#FFFFFF'; start = new Array(); czas = new Array(); inte = 50; function tn_zmien(kierunek, id, czasL) { if(start[id] == undefined) { start[id] = 0; } if(czasL == czas[id]) { start[id] += kierunek; document.all['TN'+id].style.backgroundColor = kolory[start[id]]; if(start[id] >= 0 && start[id] <= 7) { setTimeout('tn_zmien(' + kierunek + ', ' + id + ', ' + czasL + ')', inte); } } } function tn_na(id) { if(czas[id] == undefined) { czas[id] = 0; } czas[id]++; tn_zmien(1, id, czas[id]); document.all['TN'+id].style.borderColor = '#B1BBC5'; } function tn_z(id) { if(czas[id] == undefined) { czas[id] = 0; } czas[id]++; tn_zmien(-1, id, czas[id]); document.all['TN'+id].style.borderColor = '#D6E3EF'; }
Użytkownik reVis edytował ten post 13 sierpień 2006, 10:10
Dalej występują błędy
#1
Błąd: tn_na is not defined
Plik źródłowy: file:///C:/TMP/c_xp.htm
Wiersz: 1
#2
Błąd: tn_z is not defined
Plik źródłowy: file:///C:/TMP/c_xp.htm
Wiersz: 1
Masz rozwiązanie na to? ;)
W zaistniałej sytuacji trudno mi coś powiedzieć, bo kod który podałe wyżej działa u mnie pod FF1.5.0.6, O9.01 i IE6. Pokaż swój kod bo coś może u Ciebie szwankuje :)
W zaistniałej sytuacji trudno mi coś powiedzieć, bo kod który podałe wyżej działa u mnie pod FF1.5.0.6, O9.01 i IE6. Pokaż swój kod bo coś może u Ciebie szwankuje :)
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <script src="scrypt.js" type="text/javascript"></script> <style> div { width: 200px; height: 100px; background-color: #D6E3EF; border: solid 1px #F3F7FA; } </style> </head> <body> <div id="TN0" onmouseout="tn_z('0');" onmouseover="tn_na('0');">Tre??...</div> <div id="TN1" onmouseout="tn_z('1');" onmouseover="tn_na('1');">Tre??...</div> <div id="TN2" onmouseout="tn_z('2');" onmouseover="tn_na('2');">Tre??...</div> </body> </html>
scrypt.js
ie = true; if(window.navigator.appName.toLowerCase().indexOf('explorer') == -1) { ie = false; document.all = document.getElementsByTagName('*'); } kolory = new Array(); kolory[0] = '#D6E3EF'; kolory[1] = '#DBE7F0'; kolory[2] = '#E1EAF3'; kolory[3] = '#E7EEF5'; kolory[4] = '#EDF2F8'; kolory[5] = '#F3F7FA'; kolory[6] = '#F9FBFD'; kolory[7] = '#FFFFFF'; start = new Array(); czas = new Array(); inte = 50; function tn_zmien(kierunek, id, czasL) { if(start[id] == undefined) { start[id] = 0; } if(czasL == czas[id]) { start[id] += kierunek; document.all['TN'+id].style.backgroundColor = kolory[start[id]]; if(start[id] >= 0 && start[id] <= 7) { setTimeout('tn_zmien(' + kierunek + ', ' + id + ', ' + czasL + ')', inte); } } } function tn_na(id) { if(czas[id] == undefined) { czas[id] = 0; } czas[id]++; tn_zmien(1, id, czas[id]); document.all['TN'+id].style.borderColor = '#B1BBC5'; } function tn_z(id) { if(czas[id] == undefined) { czas[id] = 0; } czas[id]++; tn_zmien(-1, id, czas[id]); document.all['TN'+id].style.borderColor = '#D6E3EF'; }
Wywala błąd:
Błąd: Oczekiwano koloru, ale odnaleziono "undefined". Błąd podczas parsowania wartości dla własności "background-color". Deklaracja opuszczona.
Plik źródłowy: file:///C:/aq.htm
Wiersz: 0
A już wiem... faktycznie w skrypcie jest bład i w funkcji tn_zmien 3 warunek if powinien wyglądać tak:if(start[id] > 0 && start[id] < 7) Bo inaczej przekraczana jest tablica, ale działał tak czy inaczej, tylko że setTimeout z undefined się nie uruchamiał, ale za to rzucało błędami.
Dalej to samo :(
Błąd: Oczekiwano koloru, ale odnaleziono "undefined". Błąd podczas parsowania wartości dla własności "background-color". Deklaracja opuszczona.
Plik źródłowy: file:///C:/cxp.htm
Wiersz: 0
Błąd: Oczekiwano koloru, ale odnaleziono "undefined". Błąd podczas parsowania wartości dla własności "background-color". Deklaracja opuszczona.
Plik źródłowy: file:///C:/cxp.htm
Wiersz: 0
W takim razie już nie wiem, u mnie wszystko działa i błędów nie ma.
A więc mamy ten kod:
<html>
<head>
<script>function wyswietl(div1){ document.getElementById('divWynik').innerHTML = document.getElementById(div1).innerHTML;}
</script>
<style>
.all { width: 500px; height: 500px; border: solid 1px #000; padding: 10px; }
.hid { display: none; }
.result { width: 500px; height: 450px; border: solid 1px #000; }
.menulink { color: #0000ff; text-decoration: none; }
.menulink:hover { color: #ff0000; }
.menulink2 { color: #ffffff; text-decoration: none; }
.menulink2:hover { color: #000fff; }
</style>
</head>
<body>
<div class="all" >
<div id="div1" class="hid">info 1<img src="http://www.google.pl/images/logo_sm.gif"></div>
<div id="div2" class="hid">info 2<a href="http://forum.ks-ekspert.pl">link</a></div>
<div id="div3" class="hid">info 3<table border="1"><tr><td>tabla</td><td>działa</td></tr>< /table></div>
<div id="div4" class="hid">Wszystko działa</div>
<div id="divWynik" class="result"></div>
<a href="#" class="menulink" onmouseover="wyswietl('div1');">show 1</a>
<a href="#" class="menulink" onmouseover="wyswietl('div2');">show 2</a>
<a href="#" class="menulink" onmouseover="wyswietl('div3');">show 3</a>
<a href="#" class="menulink" onmouseover="wyswietl('div4');">show 4</a>
<a href="http://forum.ks-ekspert.pl">link</a></div></body></html>
I mam kilka pytań
- jak zrobić by od razu ładował się jakiś tekst w okienku ? np obrazek googla ? jeszcze przed najechaniem na jakikolwiek link.
- jak zrobić by pod linkiem "show 1" ,"show 2" itd ładował się obrazek po najechaniu włąsnie na ten link i nie znikał on aż nie najedzie się na inny (cos takiego jak na stronie microsoft.pl)