Avatar billede krk Nybegynder
06. april 2007 - 19:01 Der er 27 kommentarer og
2 løsninger

link til 2 frames

Jeg har en fold-ud-menu som indeholder en masse JavaScript (jeg ikke forstår) som får menuen til at folde ud/sammen.
(Menuen er hentet fra www.dhtmlgoodies.com.)
Samtidig vil jeg gerne at når man klikker på et link i menuen skifter indholdet i 2 iframes.
Kode delene hver for sig virker fint, men sammen... intet.

Er der nogen der kan hjælpe mig med at rette koden til? Jeg skal nok give top point :-)

Her kommer lige en masse kode ;-)



Koden til link til 2 iframes ser sådan ud:
<script language="JavaScript"><!--
function changeFrames(url1,url2) {
    parent.main.location.href = url1;
    parent.bottom.location.href = url2;
}
//--></script>
<a href="#" onClick="changeFrames('content/protratter.php','developmentor.htm')">Hvem er vi</a>

menuen ser sådan ud:
<div id="dhtmlgoodies_slidedown_menu">
            <ul>
                <li><a href="#">PROTRÆTTER</a>
                    <ul>
                        <li><a href="#" onClick="changeFrames('content/protratter.php','developmentor.htm')">Hvem er vi</a><br>
                        </li>
                        <li><a href="#">Børn</a>
                        </li>
                        <li><a href="#">Familier</a>
                        </li>
                    </ul>
                  </li>
                <li><a href="#">BRYLLUPPER</a>
...


og .js koden:
var expandFirstItemAutomatically = false;    // Expand first menu item automatically ?
var initMenuIdToExpand = false;    // Id of menu item that should be initially expanded. the id is defined in the <li> tag.
var expandMenuItemByUrl = true;    // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand


var initialMenuItemAlwaysExpanded = true;    // NOT IMPLEMENTED YET

var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;   
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;   
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();
   
function popMenusToShow()
{
    var obj = divToScroll;
    var endArray = new Array();
    while(obj && obj.tagName!='BODY'){
        if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
            var objFound = -1;
            for(var no=0;no<otherDivsToScroll.length;no++){
                if(otherDivsToScroll[no]==obj){
                    objFound = no;       
                }                   
            }   
            if(objFound>=0){
                otherDivsToScroll.splice(objFound,1);   
            }       
        }   
        obj = obj.parentNode;
    }   
}

function showSubMenu(e,inputObj)
{

    if(this && this.tagName)inputObj = this.parentNode;
    if(inputObj && inputObj.tagName=='LI'){
        divToScroll = inputObj.getElementsByTagName('DIV')[0];
        for(var no=0;no<otherDivsToScroll.length;no++){
            if(otherDivsToScroll[no]==divToScroll)return;
        }           
    }
    hidingInProcess = false;
    if(otherDivsToScroll.length>0){
        if(divToScroll){               
            if(otherDivsToScroll.length>0){
                popMenusToShow();
            }
            if(otherDivsToScroll.length>0){   
                autoHideMenus();
                hidingInProcess = true;
            }
        }   
    }       
    if(divToScroll && !hidingInProcess){
        divToScroll.style.display='';
        otherDivsToScroll.length = 0;
        otherDivToScroll = divToScroll.parentNode;
        otherDivsToScroll.push(divToScroll);   
        while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
            if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
                otherDivsToScroll.push(otherDivToScroll);
                                   
            }
            otherDivToScroll = otherDivToScroll.parentNode;
        }           
        ulToScroll = divToScroll.getElementsByTagName('UL')[0];
        if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
    }   
   

}



function autoHideMenus()
{
    if(otherDivsToScroll.length>0){
        divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
        parentDivToHide.length=0;
        var obj = divToHide.parentNode.parentNode.parentNode;
        while(obj && obj.tagName=='DIV'){           
            if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
            obj = obj.parentNode.parentNode.parentNode;
        }
        var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
        if(tmpHeight<0)tmpHeight=0;
        if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight  + 'px';
        ulToHide = divToHide.getElementsByTagName('UL')[0];
        slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
        scrollUpMenu();       
    }else{
        slideMenuHeightOfCurrentBox = 0;
        showSubMenu();           
    }
}


function scrollUpMenu()
{

    var height = divToHide.offsetHeight;
    height-=15;
    if(height<0)height=0;
    divToHide.style.height = height + 'px';

    for(var no=0;no<parentDivToHide.length;no++){   
        parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
    }
    if(height>0){
        setTimeout('scrollUpMenu()',5);
    }else{
        divToHide.style.display='none';
        otherDivsToScroll.length = otherDivsToScroll.length-1;
        autoHideMenus();           
    }
}   

function scrollDownSub()
{
    if(divToScroll){           
        var height = divToScroll.offsetHeight/1;
        var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
        height = height +offsetMove ;
        divToScroll.style.height = height + 'px';
       
        for(var no=1;no<otherDivsToScroll.length;no++){
            var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
            otherDivsToScroll[no].style.height = tmpHeight + 'px';
        }           
        if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else {
            divToScroll = false;
            ulToScroll = false;
            if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
                initExpandIndex++;
               
                showSubMenu(false,objectsToExpand[initExpandIndex]);
            }
        }
    }
}
   
function initSubItems(inputObj,currentDepth)
{       
    divCounter++;       
    var div = document.createElement('DIV');    // Creating new div       
    div.style.overflow = 'hidden';   
    div.style.position = 'relative';
    div.style.display='none';
    div.style.height = '1px';
    div.id = 'slideDiv' + divCounter;
    div.className = 'slideMenuDiv' + currentDepth;       
    inputObj.parentNode.appendChild(div);    // Appending DIV as child element of <LI> that is parent of input <UL>       
    div.appendChild(inputObj);    // Appending <UL> to the div
    var menuItem = inputObj.getElementsByTagName('LI')[0];
    while(menuItem){
        if(menuItem.tagName=='LI'){
            var aTag = menuItem.getElementsByTagName('A')[0];
            aTag.className='slMenuItem_depth'+currentDepth;   
            var subUl = menuItem.getElementsByTagName('UL');
            if(subUl.length>0){
                initSubItems(subUl[0],currentDepth+1);                   
            }
            aTag.onclick = showSubMenu;               
        }           
        menuItem = menuItem.nextSibling;                       
    }       
}

function initSlideDownMenu()
{
    dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu');
    dhtmlgoodies_slmenuObj.style.visibility='visible';
    var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];       
    var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
    mainItemCounter = 1;
    while(mainMenuItem){           
        if(mainMenuItem.tagName=='LI'){
            var aTag = mainMenuItem.getElementsByTagName('A')[0];
            aTag.className='slMenuItem_depth1';   
            var subUl = mainMenuItem.getElementsByTagName('UL');
            if(subUl.length>0){
                mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
                initSubItems(subUl[0],2);
                aTag.onclick = showSubMenu;
                mainItemCounter++;
            }               
        }           
        mainMenuItem = mainMenuItem.nextSibling;   
    }       
   
    if(location.search.indexOf('mainMenuItemToSlide')>=0){
        var items = location.search.split('&');
        for(var no=0;no<items.length;no++){
            if(items[no].indexOf('mainMenuItemToSlide')>=0){
                values = items[no].split('=');
                showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));   
                initMenuIdToExpand = false;               
            }
        }           
    }else if(expandFirstItemAutomatically>0){
        if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
            showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
            initMenuIdToExpand = false;
        }
    }

    if(expandMenuItemByUrl)
    {
        var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
        for(var no=0;no<aTags.length;no++){
            var hrefToCheckOn = aTags[no].href;               
            if(location.href.indexOf(hrefToCheckOn)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
                initMenuIdToExpand = false;
                var obj = aTags[no].parentNode;
                while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
                    if(obj.tagName=='LI'){                           
                        var subUl = obj.getElementsByTagName('UL');
                        if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
                        if(subUl.length>0){                               
                            objectsToExpand.unshift(obj);
                        }
                    }
                    obj = obj.parentNode;   
                }
                showSubMenu(false,objectsToExpand[0]);
                break;                   
            }           
        }
    }
           
    if(initMenuIdToExpand)
    {
        objectsToExpand = new Array();
        var obj = document.getElementById(initMenuIdToExpand)
        while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
            if(obj.tagName=='LI'){
                var subUl = obj.getElementsByTagName('UL');
                if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
                if(subUl.length>0){                       
                    objectsToExpand.unshift(obj);
                }
            }
            obj = obj.parentNode;   
        }
       
        showSubMenu(false,objectsToExpand[0]);

    }
   

       
}
    window.onload = initSlideDownMenu;
Avatar billede krk Nybegynder
06. april 2007 - 19:40 #1
Eksempel kan se på http://kryt.dk/photoart
De 2 nederste link er som jeg gerne vil have dem til at virke, men de indgår ikke i foldud menuen
Foldud menuen er de link med den stiplet linie
Avatar billede roenving Novice
07. april 2007 - 12:37 #2
Skal de indgå i folde-ud-menuen ?-)

-- for de links skifter jo udmærket iframenes indhold !-)
Avatar billede krk Nybegynder
07. april 2007 - 13:33 #3
Ja, de skal indgå i menuen.
Altså så hvert menu-punkt virker både som folddu/sammen menu og kan skifte indhold i de 2 iframes
Avatar billede roenving Novice
07. april 2007 - 13:41 #4
Hvordan kommer koden ud, hvis du bare gør det ?-)
Avatar billede krk Nybegynder
07. april 2007 - 13:56 #5
Hvis jeg bare sætter koden til de 2 iframes ind i menuen så er det kun menu funktionen der virker, men ikke skift af indhold i de 2 iframes
Avatar billede roenving Novice
07. april 2007 - 14:07 #6
-- nej, det er hvad jeg forventede, men jeg kunne godt tænke mig at se resultatet, for jeg ville finde ud af, om det er de samme elementer, der bliver brugt til onclick-tingen !-)

-- og fjern så lige den tavetosse: protræt --> portræt !o]
Avatar billede krk Nybegynder
07. april 2007 - 14:20 #7
Så er protræt ændret til portræt :-)
menu-punkt portrætter --> voksne er blevet ændret
Avatar billede krk Nybegynder
07. april 2007 - 14:21 #8
Var det det du mente?
Avatar billede roenving Novice
07. april 2007 - 14:44 #9
Denne linje (to steder !-)

            aTag.onclick = showSubMenu;

-- overskriver den onclick, du selv sætter ind, prøv disse i stedet:

if(aTag.onclick){
  oldonclick = aTag.onclick;
  aTag.onclick = function(){oldonclick();showSubMenu();};
}else
  aTag.onclick = showSubMenu;

-- absolut utestet, men set for nyligt !o]
Avatar billede krk Nybegynder
07. april 2007 - 15:04 #10
Nu har jeg sat de sidste 5 linier kode ind i stedet for" aTag.onclick = showSubMenu; "

og min menu ser sådan ud:
<li><a href="#">PORTRÆTTER</a>
                    <ul>
                        <li><a href="#" onClick="changeFrames('content/portratter.php','content/voksne.php')">Voksne</a>
                        </li>
                        <li><a href="#" onClick="changeFrames('content/boern.php','swap.htm')">Børn</a>
                        </li>
                        <li><a href="#">Familier</a>
                        </li>
                    </ul>
Avatar billede krk Nybegynder
07. april 2007 - 15:05 #11
Men det virker ikke helt
Avatar billede roenving Novice
07. april 2007 - 15:33 #12
Hrm, den overskriver oldonclick ...

Tænke, tænke ...
Avatar billede roenving Novice
07. april 2007 - 15:54 #13
Prøv med:

if(aTag.onclick){
  aTag.oldonclick = aTag.onclick;
  aTag.onclick = function(){aTag.oldonclick();showSubMenu();};
}else
  aTag.onclick = showSubMenu;
Avatar billede krk Nybegynder
07. april 2007 - 16:01 #14
Nej desværre.
Der giver det samme resultat
Avatar billede roenving Novice
07. april 2007 - 16:11 #15
Ah, prøv:

  aTag.onclick = function(){this.oldonclick();showSubMenu();};
Avatar billede krk Nybegynder
07. april 2007 - 16:15 #16
Skal til påske tamtam nu, men jeg lytter gerne til flere forslag og så vender jeg tilbage i morgen :-)
Avatar billede krk Nybegynder
08. april 2007 - 21:29 #17
det virker ikke helt. Nu skiftes indholdet fint i iframes, men menuen virker ikke helt.
Når jeg indsætter ( <a href="#" onClick="changeFrames('content/portratter.php','content/voksne.php')">BRYLLUPPER</a> ) i menupunkt på første niveau vil menuen ikke folde sammen eller folde ud
Avatar billede roenving Novice
08. april 2007 - 21:39 #18
Hvad sker der, hvis du bytter rundt på de to funktioner ?-)
Avatar billede krk Nybegynder
08. april 2007 - 22:05 #19
koden ser nu sådan ud:
if(aTag.onclick){
                  aTag.oldonclick = aTag.onclick;
                  aTag.onclick = function(){this.showSubMenu();this.oldonclick();};
                }else
                  aTag.onclick = showSubMenu;

Men så får jeg fejl på siden "objektet understøtter ikke denne egenskab eller metode"
Avatar billede windcape Praktikant
08. april 2007 - 22:10 #20
aTag.onclick = function(){this.showSubMenu();this.oldonclick();};

"this" reffere jo til funktionen selv, og sandsyneligvis det forkerte object. Dette er et typisk nybegynder problem med closures :-)

n måde at løse det på er f.eks.

var myObj = this;
aTag.onclick = function(){myObj.showSubMenu();myObj.oldonclick();};
Avatar billede windcape Praktikant
08. april 2007 - 22:10 #21
tror også det var roenvings grund til at bruge aTag i post 07/04-2007 15:54:1 :-)
Avatar billede roenving Novice
08. april 2007 - 22:19 #22
>>windcape

-- det lgner det initielle løsningsforslag, og vil betyde, at den samme henvisning bruges i alle forekomster ...

>>krk (det er vel øen, du har taget navnet fra ?-)

-- der skal jo ikke henvises til objektet, når showSubMenu kaldes, så fjen det første this:

aTag.onclick = function(){showSubMenu();this.oldonclick();};
Avatar billede krk Nybegynder
08. april 2007 - 22:29 #23
okay, nu er fejlen fjernet, men menuen folder ikke sammen

og "nej" jeg har ikke taget navn efter en ø. Jeg vidste ikke engang at der var en ø der hed det :-)
Avatar billede roenving Novice
08. april 2007 - 22:50 #24
Tjah, jeg er ude i vilde gæt, men prøv at returnere falsk fra changeFrames-funktionen:

<script type="text/javascript">
function changeFrames(url1,url2) {
    parent.main.location.href = url1;
    parent.bottom.location.href = url2;
    return false;
}
</script>

PS. jeg gjorde også script-tagget spiseligt for bl.a. validatoren !-)
Avatar billede krk Nybegynder
08. april 2007 - 23:01 #25
nej det ændre intet
Avatar billede krk Nybegynder
23. april 2007 - 22:21 #26
undskyld, jeg glemte at svare tilbage.
roenving, du har brugt meget tid på mit spørgsmål, så vil du ikke hente point.
Jeg har bygget sitet op på en anden måde, men du har stadig brugt meget tid .. så tak for det
Avatar billede roenving Novice
27. april 2007 - 12:51 #27
Oki '-)

-- men du skal jo så også selv beholde en solid sjat !-)
Avatar billede krk Nybegynder
27. april 2007 - 13:35 #28
skal vi sige at vi deler lige over :-)
Avatar billede roenving Novice
27. april 2007 - 13:46 #29
Tak for point ;~}
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