Witam. Chciałbym się dowiedzieć jak można napisać, jak działają hovercards na facebooku. Przeglądając opcją "Zbadaj element" nie zauważyłem żadnego javascript'u, było coś takiego <a id="js_15" data-hovercard="/ajax/hovercard/user.php?id=...." ...>nazwa usera</a>, klasa css także była "hovercard" ale chyba nie jest ona użyta. Dziękuję z góry za odpowiedzi.
0
0
a czego się tam spodziewałeś? eventy javascript podpina się w kodzie javascript a nie bezpośrednio w htmlu
0
chodzi Ci o to że eventy javascript są w znacznikach <script> </script> (nie widzę ich w "Zbadaj element") czy może chodzi Ci o pliki .js które są załączone na początku strony? Bo nie wiem czy dobrze Twój wpis zrozumiałem.
Jak w ogóle napisać takie coś najlepszym sposobem? Jedna opcja to utworzenie od razu diva ukrytego z display: none+ wprowadzenie pobranych danych np. Imie Nazwisko + w :hover dać display: inline. Wydaje mi się że ten sposób jest słaby, bo od razu wszystkie dane muszą być pobrane, wpisane i są ukryte cały czas. Proszę o wskazówki.
0
Jak w ogóle napisać takie coś najlepszym sposobem?
Jak nie potrafisz znaleźć w kodzie jak jest zrobione to zobacz, czy po najechaniu coś pobiera się ajaxem - jak nie, to jest w kodzie już.
0
skorzystaj z gotowego plugina? http://designwithpc.com/Plugins/Hovercard
0
udało mi się naskrobać coś takiego, i działa ale jest to zrobione przez gdzie w środku są divy, i gdy pokaże się ten hovercard to "uznaje go za link", np nie da sie zaznaczyć tekstu bo "przenosi go" jakby obrazek. Próbowałem przerobić to bez ale nie idzie mi na razie, proszę o pomoc i w ogóle o opinie tego sposobu, ew. inny sposób na zrobienie tego bo nie wiem czy np. wydajnościowo jest ok.
<html>
<head>
</head>
<body>
<style type="text/css">
a {
position: relative;
height: auto;
}
.hovercard {
position: relative;
border: 1px solid black;
margin-bottom: 10px;
padding: 5px 10px;
background: #f7f7f7;
}
.lop {
position: absolute;
top: 0px;
width: 320px;
left: 15px;
}
.lop2 {
width: 320px;
position: absolute;
bottom: 0px;
min-height: 10px;
}
.hidden {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a#item').hover(function() {
if($('a#item .p' + $(this).attr('class')).hasClass('hidden'))
{
$('a#item .p' + $(this).attr('class')).removeClass('hidden');
}
},
function() {
if(!$('a#item .p' + $(this).attr('class')).hasClass('hidden'))
{
$('a#item .p' + $(this).attr('class')).addClass('hidden');
}
});
});
</script>
<br />
<a href="#robertm" id="item" class="r-1">
<div class="lop pr-1 hidden">
<div class="lop2">
<div class="hovercard">Ladowanie...</div>
</div>
</div>
Robert M
</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />siema<br /><br />
<a href="#vindiesel" id="item" class="r-2">
<div class="lop pr-2 hidden">
<div class="lop2">
<div class="hovercard">Ladowanie...</div>
</div>
</div>
Vin Diesel
</a>
</body>
</html>
0
jak zamienisz wszedzie a na div to pojdzie, ale troche odbiega to od idealu:)
0
zmieniłem, tylko że teraz :hover wykona się na divie (prostokącie) a nie na samym tekście, a tak nie powinno byc
0
wykona sie na tym do czego jest podpiete. jest podpiete do diva to wykonuje sie na tym divie, a ze on wielki jak stodola to wina tego kto tego diva takiego wielkiego zrobil. w poprzednim kodzie objales linkiem wszystko, wiec cala tresc hovercarda byla linkiem. zmieniajac na diva powinienes juz sam wppasc ze zeby hovercard nie byl divem trzeba go wyciagnac ze struktury linka.
0
wielkie jak stodoła? ;d w jakim sensie od ideału odbiega? w jednej linii jest ten div, teraz dałem mu chyba 200px szerokości, ale na nim :hover sie wykonuje.. Próbowałem w js $('div#item').hover(function() { to div#item jakoś przekręcić na a ale wtedy w linijkach niżej nie usuwa tego atrybutu hidden przez ten this. Zamieniłem this na 'div#item' czyli $('div#item').attr('class') zwraca mi klasę tylko 1 diva o id item
<script type="text/javascript">
$(document).ready(function(){
$('div#item').hover(function() {
if($('div#item .p' + $(this).attr('class')).hasClass('hidden'))
{
$('div#item .p' + $(this).attr('class')).removeClass('hidden');
}
},
function() {
if(!$('div#item .p' + $(this).attr('class')).hasClass('hidden'))
{
$('div#item .p' + $(this).attr('class')).addClass('hidden');
}
});
});
</script>
<br />
<div id="item" class="r-1">
<div class="lop pr-1 hidden">
<div class="lop2">
<div class="hovercard">Ladowanie...</div>
</div>
</div>
<a href="#robertm">Robert M</a>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />siema<br /><br />
<div id="item" class="r-2">
<div class="lop pr-2 hidden">
<div class="lop2">
<div class="hovercard">Ladowanie...</div>
</div>
</div>
<a href="#vindiesel">Vin Diesel</a>
</div>
0
wiesz ze to bedzie dluuuga i uciazliwa droga jesli z kazda taka zmiana bedziesz tu wracal???
id jest unikalne wiec mozesz je uzyc tylko raz.
po drugie lepiej jest nacisnac ctrl + a i del i napisac wszystko od nowa, ale z glowa.
bo mamy do czynienia z efektem domina. zmieniajac jedna rzecz okazuje sie ze kolejna nie dziala i tak po sznureczku albo zalata sie to jako tako, albo napisze od poczatku z glowa co bedzie szybsze i zdrowsze dla kodu
0
skoro nie moge użyć dwa razy tego samego id, w tym wypadku jest nim item to jak mam zacząć sprawdzanie czy wykonano :hover ?
0
a co ma id do hover???
0
no jakoś trzeba było sprawdzać hovery.
Napisałem od nowa ale dalej martwy punkt... Proszę o chociażby jakiś algorytm ze szczegółami do napisania tego lub sprawdzenie poniższego kodu. Problem jest taki, że pokazuje hovercard po najechaniu na link, ale po opuszczeniu go nie znika hovercard, dopiero jak na niego wjadę kursorem i opuszczę go to wtedy znika. Kombinowania troche tu jest właśnie przez to żeby taki hovercard nie znikał po opuszczeniu kursorem linku, tylko aby jeszcze na ten hovercard dało się "wjechać" kursorem, tak jak na fb, yt.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
p { margin: 0; padding: 0; }
.hovercard {
position: absolute;
border: 1px solid black;
background: #f7f7f7;
width: 200px;
padding: 3px 5px;
left: 15px;
}
.lolek {
position: relative;
width: 150px;
}
p { width: 150px; }
</style>
<script type="text/javascript">
function ShowHovercard(nmb)
{
var b = document.getElementById(nmb);
if(b.style.display != 'inline')
{
b.style.display = 'inline';
b.innerHTML = 'Zaladowano ! <br />Witaj kurde w morde jerza <b>Arnoldzie Boczku</b> !';
}
}
function HideHovercard(nmb)
{
$('#' + nmb).hover(0, function() {
document.getElementById(nmb).style.display = 'none';
});
}
</script>
<div id="item-1" class="lolek">
<div id="hc-1" class="hovercard" style="display: none" onmouseout="HideHovercard('hc-1');">Ladowanie...</div>
<p><a href="#siema" onmouseover="ShowHovercard('hc-1');" onmouseout="HideHovercard('hc-1');">siema</a></p>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />siema<br />
<div id="item-2" class="lolek">
<div id="hc-2" class="hovercard" style="display: none" onmouseout="HideHovercard('hc-2');">Ladowanie...</div>
<p><a href="#elo" onmouseover="ShowHovercard('hc-2');" onmouseout="HideHovercard('hc-2');">elo</a></p>
</div>
</body>
</html>