Avatar billede mesteren_selv Nybegynder
03. februar 2011 - 14:50 Der er 3 kommentarer og
1 løsning

Adressere elementer indenfor et div-tag

Hej Eksperter

I korte træk har jeg en side bygget op af en række 'boxes', bestående af div-bokse med en ramme bestående af yderligere 8 div-tags.

<div class="box_content" id="box2">
<div class="box_upperleft" name="frame"></div>
<div class="box_upper" name="frame"></div>
<div class="box_upperright" name="frame"></div>
<div class="clearfloat" name="frame"></div>
<div class="box_left" name="frame"></div>

This is another box
<div class="box_right" name="frame"></div>

<div class="box_lowerleft" name="frame"></div>
<div class="box_lower" name="frame"></div>
<div class="box_lowerright" name="frame"></div>
</div>

Jeg vil gerne kunne hhv. vise og skjule rammerne når man kører musen henover boksene. I den forbindelse skal jeg jo så adressere ramme-div'erne i hver enkelt, så jeg kan vise/skjule dem. Jeg har forsøgt mig med noget i stil med:

function showFrame(elm) { //kaldes af boks-div'en med this
frameElms = elm.getElementsByName('frame');
// Koden til at vise/skjule
}

Men det virker ikke :(
Er der nogen der har et forslag til en smart løsning? Synes det virker som noget der burde være ligetil.. Da boksene skal oprettes programmatisk ville det klart være at foretrække ikke at skulle give  dem allesammen et unikt id..

På forhånd tak, Mesteren
Avatar billede heinzdmx Nybegynder
03. februar 2011 - 15:03 #1
http://www.search-this.com/2007/04/25/optimize-your-css-with-multi-class-elements/

Burde kunne hjælpe dig med at finde alle dine bokse, som du så kan skjule. Når du så laver mouse-over kan du jo så bruge this til at finde den der er markeret. Så kan du vise den efter du har skjult dem alle.
Avatar billede mesteren_selv Nybegynder
03. februar 2011 - 16:21 #2
Det er meget fancy men det hjælper mig ikke rigtig.. Det kan hjælpe mig med at optimere det css jeg har lavet, men mit problem er at udvælge de rigtige med mouse-over.. Det var det spørgsmålet gik ud på..
Avatar billede magic-mouse Novice
03. februar 2011 - 16:40 #3
Har ikke lige testet det. Men noget i den her stil...


function showFrame() { //kaldes af boks-div'en med this

  frameElms = document.getElementsByName('frame');

  for(var i=0; i < frameElms.length; i++){

  frameElms[i].style.border = "1px solid #000000";

  }
}

function hideFrame() { //kaldes af boks-div'en med this

  frameElms = document.getElementsByName('frame');

  for(var i=0; i < frameElms.length; i++){

  frameElms[i].style.border = "0px solid #000000";

  }
}
Avatar billede mesteren_selv Nybegynder
03. februar 2011 - 17:02 #4
@magic-mouse: Pointen er stadig at accesse værdierne for hver enkelt box, uden at give unikt id.. Din kode vil vise/skjule alle boxes frames simultant..

Løsningen er fundet og er som følger:
Div-tag'sne der udgør rammen er omsluttet i et span tag:

<div class="box_content" onmouseover="showFrame(this)" onmouseout="hideFrame(this)"  id="box2">
<span style="hidden">
<div class="box_upperleft" name="frame"></div>
<div class="box_upper" name="frame"></div>
<div class="box_upperright" name="frame"></div>
<div class="clearfloat" name="frame"></div>
<div class="box_left" name="frame"></div>
<div class="box_right" name="frame"></div>
<div class="box_lowerleft" name="frame"></div>
<div class="box_lower" name="frame"></div>
<div class="box_lowerright" name="frame"></div>
</span>
This is another box
</div>

I javascript findes span-tagget i elementet så og vises/skjules:

function showFrame(elm) {
    frameElm = elm.getElementsByTagName('SPAN');
    if (frameElm.length > 0) {
        frameElm[0].style.visibility = "visible";   
    }
}

function hideFrame(elm) {
    frameElm = elm.getElementsByTagName('SPAN');
    if (frameElm.length > 0) {
        frameElm[0].style.visibility = "hidden";   
    }
}

Testet og fungerer i Safari, Firefox og Chrome på Mac

:D
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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