CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede 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?
Avatar billede plazm Nybegynder
11. maj 2005 - 19:59 #1
http://plazm.1go.dk/test.php noget i stil med dette ?
Avatar billede 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..]
Avatar billede plazm Nybegynder
11. maj 2005 - 21:41 #3
bedre ?
Avatar billede 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 :-)
Avatar billede 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
Avatar billede 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...
Avatar billede 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.
Avatar billede 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..
Avatar billede 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.
Avatar billede 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..
Avatar billede 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>
Avatar billede 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)
Avatar billede plazm Nybegynder
21. maj 2005 - 19:41 #13
Sådan. Nu er de to fejl rettet.
Avatar billede plazm Nybegynder
26. maj 2005 - 15:15 #14
ved at være tid til noget feedback her ?
Avatar billede 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.

Loading billede Opret Preview
Kategori
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
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 13:30 Hvordan ændres UniFi Dream Machine UDM til switch mode Af Kasper4450 i Internetforbindelser
I dag 13:01 Film går i stå midt i afspilningen Af ole falsted i Musik & videoafspillere
I dag 11:40 Fjerne mappe i stifinder Af Peter Olsen i Andet software
I dag 11:27 renteberegning Af Pil i Excel
I går 22:30 Underlig meddelelse på skærmen Af Jordegern i E-mail programmer
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Telegigant klar med AI-baseret mormor: Holder telefon-svindlere fast i røret med sniksnak og dumme spørgsmål
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Tre vigtige erkendelser, som Computerworld tog med hjem fra Gartners store topmøde i Barcelona
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
Styrk compliance, sikkerhed og overblik med ét hug
Læs mere »
Vær proaktiv og prioritér IT-sikkerheden – før det er for sent
Sådan får du overblik og beskytter dine cloudapplikationer
Managed Detection & Response: Forsvar din virksomhed mod cybertrusler døgnet rundt
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »