Søg
Avatar billede -zonic- Nybegynder
30. juli 2007 - 11:27 Der er 16 kommentarer og
1 løsning

expand script til at vise indhold ved klik

Hej,

jeg står og mangler et rent script som fungerer lidt som menuerne i siderne her på exp.

det jeg gerne vil have er, at hvis jeg klikker på

minimér / maksimer pilen, så skal den vise f.eks. indholdet i en div som <div>hej</div>
og når man trykker igen, skal den trække den op igen.

ved faktisk ikke om det kan laves uden javascript og bare med css for det ville jeg da helst, men det vigtigste for mig er, at scriptet er "rent" og ikke fylder ret meget :)

håber I kan hjælpe!
Avatar billede -zonic- Nybegynder
30. juli 2007 - 12:14 #1
jeg har selv fundet frem til dette, men er der nogen der kan hjælpe mig med at få det til at fungere med classes istedet, så jeg bare giver de divs hvor det skal være sådan en class, for at de kan expandes og hides :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">
    function hide() {
        document.getElementById("exp").style.display = 'none';
    }
    function expand() {
        document.getElementById("exp").style.display = 'block';
    }
</script>
<style type="text/css">
#exp {
    display:none;
}
</style>
</head>

<body>
<div id="exp">dette er en test</div>


<input type="button" name="exp" onclick="hide();" value="hide">
<input type="button" name="exp" onclick="expand();" value="expand">

</body>
</html>
Avatar billede -zonic- Nybegynder
30. juli 2007 - 13:32 #2
hov faktisk er det slet ikke classes jeg skal bruge det til.. så collapser den jo alle divs med den samme klasse på én gang.

det jeg skal bruge er at jeg ikke gider skrive funkionen flere gange jeg vil bare gerne at jeg kan få den til at tage en parameter med f.eks. således at jeg giver mine divs id'erne  <div id="exp0">  exp1, exp2  osv... og så caller hide(0) hide(1) osv... kan nogen færdiggøre scriptet? :)

jeg synes jeg har prøvet, men har tidligere kun beskæftiget mig med JAVA, og det her er absolut ikke det samme og efter min mening giver javascript ikke så meget mening i dens opbygning som JAVA... :(
Avatar billede olebole Juniormester
30. juli 2007 - 14:49 #3
<ole>

Det her har i virkeligheden meget lidt med JavaScript at gøre ... det er DOM. Koden ser stortset ens ud i f.eks. JavaScript, JScript og VBScript - og ville se sådan ud i ethvert andet scriptsprog, der overholder ECMA-standarden.

Det burde nu ikke volde de store problemer, hvis man er vandt til at kode. Prøv:

<script type="text/JavaScript">
    function hide(sId) {
        document.getElementById("exp" + sId).style.display = 'none';
    }
    function expand(sId) {
        document.getElementById("exp" + sId).style.display = 'block';
    }
</script>

<button onclick="hide(0)">TEST</button>

/mvh
</bole>
Avatar billede -zonic- Nybegynder
31. juli 2007 - 18:10 #4
tak skal du have  :)

men nu kommer jeg til at tænke på at jeg måske gerne ville have den samme knap til at veksle mellem funktionerne.... er det muligt? :)
Avatar billede thesurfer Nybegynder
31. juli 2007 - 23:47 #5
Eksempel:

function showhide(sId)
{
    s = document.getElementById("exp" + sId).style;
    s.display = (s.display == 'none')?'block':'none';
}

Kaldes med: showhide(0)
Avatar billede thesurfer Nybegynder
31. juli 2007 - 23:48 #6
Normalt bruger jeg '' i stedet for 'block'..

Dvs:

function showhide(sId)
{
    s = document.getElementById("exp" + sId).style;
    s.display = (s.display == 'none')?'':'none';
}
Avatar billede thesurfer Nybegynder
31. juli 2007 - 23:49 #7
Forklaring til linien: s.display = (s.display == 'none')?'':'none';

Det svarer til at gøre sådan her:

if (s.display == 'none')
{
    s.display = '';
} else {
    s.display = 'none';
}
Avatar billede -zonic- Nybegynder
01. august 2007 - 13:05 #8
kanon, mange tak! - og tak for forklaringen, ellers fattede jeg da intet ;)

så er der lige en sidste ting... hvordan gør jeg, så den ikke hopper til toppen af siden når jeg klikker :)
Avatar billede -zonic- Nybegynder
01. august 2007 - 13:17 #9
ja okay... det lavede jeg så via et anchor... hvis jeg gerne vil skjule linket i bunden af sitet, hvordan gøres det? :)
Avatar billede -zonic- Nybegynder
01. august 2007 - 13:50 #10
hmm.. det med anchor er faktisk noget bæ :/

den flytter alligevel på sitet når man er et andet sted...

æv bæv... jeg tror mit script skal laves om... se mit resultat.: www.vipz.dk/kindtand

jeg vil gerne have 2 scripts.. den hvor billedet skifter mellem pilene ligesom her på eksperten, og så et som skal bruges til menu og begge uden at der flyttes på sitet når man trykker..
Avatar billede thesurfer Nybegynder
01. august 2007 - 14:25 #11
Hvordan ser din kode ud nu?
Avatar billede thesurfer Nybegynder
01. august 2007 - 14:33 #12
Du kunne jo gøre sådan her:

<img src="op.gif" id="pil_nr1"><div id="exp_nr1">dette er en test</div>


Så kan du f.eks. bruge:

function showhide(sId)
{
    // Vis/Skjul menu
    s = document.getElementById("exp_" + sId).style;
    s.display = (s.display == 'none')?'':'none';

    // Vis/Skjul pil (op eller ned)
    i = document.getElementById("pil_" & sId); // reference til billedet
    src = "" + i.src; // kopier billedet's sti til variablen src
    src = (src.indexOf('op.gif'))?'ned.gif':'op.gif'; // find ud af om det skal være op eller ned
    i.setAttribute('src', src); // sæt stien til den rette sti (op eller ned)
}

Hvor
- op.gif er når menuen er oppe, dvs., skjult
- ned.gif er når menuen er nede, dvs., synlingt


Hvordan ser din kode ud nu?
Avatar billede thesurfer Nybegynder
01. august 2007 - 14:34 #13
..Så kaldes funktionen med f.eks.: showhide('nr1')
Avatar billede -zonic- Nybegynder
01. august 2007 - 15:38 #14
nice :) 1000 tak for hjælpen...!

smid et svar!
Avatar billede -zonic- Nybegynder
01. august 2007 - 15:39 #15
også dig olebole, så får du også lidt for hjælpen :)
Avatar billede olebole Juniormester
01. august 2007 - 15:56 #16
Tak for tilbudet, men det er nu 'strandløven', der har lavet arbejdet ... jeg spillede kun preludiet. Pointene må være hans denne gang  ;o)
Avatar billede thesurfer Nybegynder
01. august 2007 - 15:57 #17
Det var så lidt :-)
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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »