| Autor | Zpráva | ||
|---|---|---|---|
| Marek Novotný Profil * |
Ahoj na goout.cz mají super vyhledávání. Po najetí na odkaz hledání se zobrazí vyhledávácí formulář. Poradil by prosím někdo jak na to? Předem děkuju ;-)
Moderátor Chamurappi: Titulek „Vyhledávací formulář“ nevystihuje podstatu dotazu. Příště zkus prosím vymyslet lepší.
|
||
| Dixx Profil |
#2 · Zasláno: 10. 11. 2011, 15:23:54
Vím jen, že je na to použítý ajax, ale jak přesně, to nevím V ajaxu se bohužel nevyznám :/
|
||
| Marek Novotný Profil * |
#3 · Zasláno: 10. 11. 2011, 16:02:41
jj, na to jsem tak přišel a zkoušel jsem hledat. Nic alespoň vzdáleně podobného jsem nenašel, moc totuž netuším, jak na to sestavit dotaz...
|
||
| hledej Profil * |
#4 · Zasláno: 10. 11. 2011, 16:30:48
Vypadá to jako tento: http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html
|
||
| Marek Novotný Profil * |
#5 · Zasláno: 10. 11. 2011, 16:50:13
aha:-) to jsme si nerozumněli. Mě jde o to zobrazení vyhledávacího políčka po najetí myší na text. Víc nepotřebuju. Ale díky za tip ;-)
|
||
| Darker Profil |
#6 · Zasláno: 10. 11. 2011, 17:45:21
Dixx:
Ajax na to teda není použitý ani náhodou. Marek Novotný: To je docela jednoduché. Hned za textem je políčko jež má absolutní pozici (pluje tedy nad dokumentem a nad nápisem hledej). Je ale průhledné, takže ho nevidíš. Jak text hledej tak i políčko jsou součástí div elementu který má tyto barevné vlastnosti: Barva rámečku: 239, 239, 239 (šedá, jako pozadí stránky) Barva textu:0,0,0 - černá Barva pozadí: Stejná jako rámeček Po najetí myší jsou výsledné barevné vlastnosti tyto: Barva rámečku: 170, 170, 170 (tmavošedá) Barva textu:255,255,255 - bílá Barva pozadí: 255,255,255 - bílá To je celé kouzlo. Plynulý efekt je docílen funkcí animate jež je součástí javascriptového frameworku jQuery.
$("#menu_search").bind(
{mouseenter:function()
{
$(this).stop().animate({borderTopColor:'#aaa',borderBottomColor:'#aaa',borderLeftColor:'#aaa',borderRightColor:'#aaa',color:'#ffffff',backgroundColor:'#ffffff'})
},
mouseleave:function()
{
$(this).stop().animate({borderTopColor:'#efefef',borderBottomColor:'#efefef',borderLeftColor:'#efefef',borderRightColor:'#efefef',color:'#000000',backgroundColor:'#efefef'})
},
click:function(){
$("#menu_search_input").show().focus()
}
});
Odřádkoval sem ti to, aby ses v tom vyznal. |
||
| Marek Novotný Profil * |
#7 · Zasláno: 10. 11. 2011, 18:28:32
Super, díky moc ;-)
|
||
| Marek Novotný Profil * |
#8 · Zasláno: 10. 11. 2011, 18:42:40
tak mám další problém :-) zatím jsem to zkoušel jen bez js. vše funguje jak má - najedu myší na text, zobrazí se mi input, můžu psát... Problém ale nastane, když odjedu kurzorem jinam. Zmizí mi input a text píšu přes ten původní - nevypadá to ani trochu dobře... Věděli byste jak na to?
|
||
| Marek Novotný Profil * |
#9 · Zasláno: 10. 11. 2011, 18:46:38
tak už jsem pořešil i to psaní textu přes text. Vnořil jsem input do divu, ve kterém je text. Ale pořád mě zlobí, že po odjetí kurzorem mi zmizí ten input...
|
||
| Marek Novotný Profil * |
#10 · Zasláno: 10. 11. 2011, 18:50:52
aha :-D špatně jsem si přečetl post od Darkera. už mi to funguje
díky moc |
||
| Darker Profil |
#11 · Zasláno: 10. 11. 2011, 18:58:10
|
||
|
Časová prodleva: 3 dny
|
|||
| Marek Novotný Profil * |
#12 · Zasláno: 13. 11. 2011, 19:12:18
Ještě kód, kdyby to někdo v budoucnu hledal. Je to vážně strašně jednoduchý a funguje to skvěle.
<html>
<head>
<title>test</title>
<style type="text/css">
input {
display: none;
position: absolute;
top: 0px;
left: 0px;
border: none;
}
#odkaz:hover input, input:focus {
display: block;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="odkaz">hledej<input type="text"></div>
</body>
</html> |
||
|
Časová prodleva: 14 let
|
|||
0