CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

fredd Nybegynder

11. maj 2005 - 19:41 Der er 14 kommentarer

OnClick dropdown søgemenu

Hej eksperter...

Jeg søger et lille og simpelt script, der viser en lille søgemenu, når man klikker på et bestemt link. Nogenlunde samme funktionalitet findes i forummet vBulletin http://www.vbulletin.com/forum/forumdisplay.php?f=5 (klik på search)..

Nogen der kan hjælpe med det?

Synes godt om

plazm Nybegynder

11. maj 2005 - 19:59 #1

http://plazm.1go.dk/test.php noget i stil med dette ?

Synes godt om

fredd Nybegynder

11. maj 2005 - 20:06 #2

En start, men der er brug for nogle flere funktioner.

Det går ikke med absolut positionering af menuen, da den _skal_ komme ud nedenfor linket, ligegyldigt hvor linket er placeret.

Desuden skal man kunne slå boksen fra, ved at klikke på området udenfor boksen.

Det er sådan set det .. [Og så skal siden selvfølgelig kunne validere..]

Synes godt om

plazm Nybegynder

11. maj 2005 - 21:41 #3

bedre ?

Synes godt om

fredd Nybegynder

12. maj 2005 - 21:17 #4

Er det ikke muligt at lave en 100% css-løsning? Sådan at der ikke er nødt til at stå style="....visability: hidden;..." i selve html-koden? Helst så det validerer efter xhtml 1.1 og css.

Jeg vil også gerne have menuen til at komme frem et bestemt sted hver gang man klikker - ikke med det udgangpunkt, hvor man klikker med musen...

Eksempel:

|--- Søg ---- |
_____________
| |
| |
| |
| |
| |
|_____________|

Hvis du gider lave scriptet, giver jeg gerne 50 point mere...

/Fredd :-)

Synes godt om

plazm Nybegynder

12. maj 2005 - 21:39 #5

Det er jo bare at lave en class på div'en og smide css'en i en css fil.
Du kan nu selv angive hvor på siden at searchpopupen skal komme

Synes godt om

fredd Nybegynder

14. maj 2005 - 11:10 #6

Jeg har forsøgt at kopierer div'ens style ind i min css-fil, men så skal man lige pludselig klikke to gange før menuen kommer frem..

Jeg er ikke helt med på hvordan jeg får menuen til at komme frem samme sted altid, for du har jo skrevet position: absolute...

Synes godt om

plazm Nybegynder

14. maj 2005 - 12:02 #7

<a href="#" onclick="searchtoggle(100,400)">abe</a> <-- du bestemmer her, x og y kordinaterne for hvor den skal komme frem.

Synes godt om

fredd Nybegynder

15. maj 2005 - 13:51 #8

.. For mig ser det ud som om, at denne løsning ikke holder, da siden er centreret, og x-koordinaterne afhænger derfor af bredden på brugerens browser. Desuden kan y-koordinaten variere en smule, alt efter hvilken browser man bruger.

Desuden: Der er stadig problemet med, at man skal klikke TO gange på linket, for at menuen kommer frem - altså hvis jeg lægger style="...." ind ind i min css-fil..

Synes godt om

plazm Nybegynder

16. maj 2005 - 13:52 #9

så syns jeg at du skulle sætte dig ind i css og så ville du vide at selv om jeg bruger absolute position så kan du sagtens få det til at virke med centreret side hvis du smider en div om selve designet som bliver centreret

det andet problem med at skulle klikke to gange er løst.

Synes godt om

fredd Nybegynder

21. maj 2005 - 14:32 #10

Min side er også lavet i stor div, der er centreret..

Der er lige nogle få ting med dit script stadig:
1. I Mozilla Firefox, tager den sig ikke af form'en. Selvom jeg laver en form inden i #search div'en og ændre type="botton" til type="submit" reagerer den ikke.
2. Man får en advarelse i Internet Explorer, når man åbner siden, men der virker søgeformenen fint..

Synes godt om

olebole Juniormester

21. maj 2005 - 15:15 #11

<ole>

Du kan også prøve denne approach:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
.popLink {
position: relative;
cursor: pointer;
}
.popLink span {
position: absolute;
top: 18px;
left: 0px;
background-color: #ededed;
border: 1px dashed #999999;
padding: 3px 5px;
display: none;
}
.popLink, .popLink input, .popLink button {
font: 11px verdana, arial, sans-serif;
}
.popLink form {
display: inline;
}
</style>
<script type="text/JavaScript">
function mOver(elm) {
elm.style.color = "red";
elm.style.textDecoration = "underline";
}
function mOut(elm) {
elm.style.color = "black";
elm.style.textDecoration = "none";
}
function openSearch(elm) {
elm.getElementsByTagName("span")[0].style.display = "block";
elm.getElementsByTagName("input")[0].focus();
}
</script>
</head>
<body>

En eller anden tekst <span class="popLink" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="openSearch(this)"><b>Søg</b>
<span>
<form>
<input type="text" name="q"><button type="submit">Søg</button>
</form>
</span></span> - og noget mere tekst ...

</body>
</html>

/mvh
</bole>

Synes godt om

olebole Juniormester

21. maj 2005 - 15:18 #12

Med små bitte ændringer kan den godt validere mod XHTML - men da den standard er stort set ubrugelig på WWW idag, får du den i HTML4.01 :)

Læs evt:
http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538

- inden du spilder mere tid på at gøre din kode dårligere med XHTML ;o)

Synes godt om

plazm Nybegynder

21. maj 2005 - 19:41 #13

Sådan. Nu er de to fejl rettet.

Synes godt om

plazm Nybegynder

26. maj 2005 - 15:15 #14

ved at være tid til noget feedback her ?

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS