JavaScript Forum

**Gilligan** · 04-08-2008, 08:11 PM

http://www.projectseven.com/products...anel/index.htm

I am using the above widget. It extends the content part of the div with a click of the side navigation.

I need to use it in two different parts in one page, one for sub menus in navigation, and the other for the content part to extend.

Menu

Item 1 (activate widget for sub menu)

Sub Item 1 (activate widget for content)

Sub Item 2

Item 2
Item 3

Content

Loads and extends in accordance to item clicked in submenu

Problems

I hope you guys now understand what I mean.

Now, for the problems I'm having.

I can use the widget for one or the other (the menu or the content), but not both.

Can someone help?

Here's my script(s)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="p7gp/gp3/p7GP03.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7gp/p7GPscripts.js"></script>
</head>

<body>
<div id="p7GP_1" class="p7GP03">
  <div class="p7GPinnerwrapper">
    <div class="p7GPtwrapper">
      <div class="p7GPtwrapinner">
        <ul id="p7GPt_1">
          <li><a href="#p7GPc1_2" id="p7GPtrg1_2">Item</a></li>
        </ul>
      <div id="p7GPw_1" class="p7GPW">
        <div id="p7GPc1_2" class="p7GPcontentwrapper">
          <div class="p7GPcontent">
         <a href="#p7GPc1_4" id="p7GPtrg1_4">Sub Item</a>
          </div></div>

        </div>
      </div>
    </div>
 
    <div class="p7GPcwrapper">
      <div id="p7GPw_2" class="p7GPW">
      
         <div id="p7GPc1_4" style="display:none">
      
        teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest
        
        </div>
       
      </div>
      <div class="clearfloats">&nbsp;</div>
    </div>
  </div>
  <!--[if lte IE 6]><style>#p7GP_1 .p7GPtwrapper ul a {height: 1%;}</style><![endif]-->
  <script type="text/javascript">
<!--
P7_opGPM('p7GP_1',1,2,1,1);
//-->
</script>

</div>
</body>
</html>

The part that works here is the menu and subitems, they submenu extends with the click of the item. Which is what I want, but I also want for that when the sub menu item is clicked, the main content of the page (in this instance 'teeeeeeeeest') to load and extend.

Here's p7gp/gp3/p7GP03.css

Code:

.p7GP03 {
    background-color: #FFFFFF;
    border: 1px solid #3B3B3B;
    padding: 3px;
}
.p7GP03 .p7GPinnerwrapper {
    padding: 0;
    border: 0;
    background-color: #292929;
}
.p7GP03 .p7GPtwrapper {
    width: 200px;
    float: left;
    margin: 0;
    background-color: #292929;
}
.p7GP03 .p7GPtwrapper ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.p7GP03 .p7GPtwrapper ul a {
    color: #000000 !important;
    text-decoration: none;
    display: block;
    padding: 6px 10px;
    border-bottom: 1px solid #3A81AF;
    border-top: 1px solid #94BED8;
    background-image: url(img/p7gp_bluestonebut.jpg);
    background-repeat: repeat-x;
    background-color: #4993C4;
}
.p7GP03 .p7GPtwrapper ul a:hover {
    color: #FFFFFF !important;
    background-color: #4993C4;
}
.p7GP03 .p7GPtwrapper ul a.down, .p7GP03 .p7GPtwrapper ul a.down:hover {
    background-image: url(img/p7gp_fadetoblue.jpg);
    background-color: #FFFFFF;
    color: #000000 !important;
    border: 0;
    background-repeat: repeat-y;
    font-weight: bold;
}
.p7GP03 .p7GPcwrapper {
    margin: 0 0 0 200px;
    background-color: #FFFFFF;
}
.p7GP03 .p7GPcontent {
    padding: 0;
    line-height: 1.5em;
    background-color: #FFFFFF;
    color: #000000;
}
.p7GP03 .p7GPcontent a {
    color: #0033FF;
}
.p7GP03 .p7GPcontent a:visited {
    color: #486CFF;
}
.p7GP03 .p7GPcontent a:hover {
    color: #CC0000;
}
.p7GPcurrentmark {
    font-weight:bold !important;
}
.p7GP03 .clearfloats {
    clear: both;
    height: 0;
    line-height: 0.0;
    font-size: 0;
}
.p7GP03 .sidecontent {
    padding: 12px;
    color: #CCCCCC;
}
.p7GP03_external {
    font-size: 1em;
}
.p7GP03_external ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.p7GP03_external ul li {
    margin: 0;
}
.p7GP03_external ul a {
    color: #0033CC;
}
.p7GP03_external ul a:hover {
    color: #000000;
}
.p7GP03_external ul a.down {
    color: #CC0000;
}
div#p7GPw_1 {margin:0; padding:0;}

and here's p7gp/p7GPscripts.js

Code:


var p7GP=false,p7GPMi=false,p7GPMctl=[],p7gpmA=navigator.userAgent.toLowerCase();
function P7_setGPM(){
    var i,h;
    if(!document.getElementById){
        return;
    }
    h='\n<st'+'yle type="text/css">\n';
    h+='.p7GPW {overflow:hidden;}\n';
    h+='.p7GPcontentwrapper {display:none}\n';
    for(i=1;i<21;i++){
        h+="#p7GPc"+i+"_1 {display:block;}\n";
    }
    h+='</s'+'tyle>';
    document.write(h);
}
P7_setGPM();
function P7_GPMaddLoad(){
    if(!document.getElementById){
        return;
    }
    if(window.addEventListener){
        window.addEventListener("load",P7_initGPM,false);
    }
    else if(window.attachEvent){
        window.attachEvent("onload",P7_initGPM);
    }
    else if(typeof window.onload=='function'){
        var p7vloadit=onload;
        window.onload=function(){
            p7vloadit();
            P7_initGPM();
        };
    }
    else{
        window.onload=P7_initGPM;
    }
    p7GPMi=true;
}
function P7_opGPM(){
    var h='',hh,b,cn,sD,d,tB,cTD,mD;
    if(!document.getElementById){
        return;
    }
    p7GPMctl[p7GPMctl.length]=arguments;
    if(!p7GPMi){
        P7_GPMaddLoad();
    }
}
function P7_initGPM(){
    var i,j,tB,dd,tD,tA,tg,cP;
    for(i=0;i<p7GPMctl.length;i++){
        tB=document.getElementById(p7GPMctl[i][0]);
        if(tB){
            tB.p7opt=p7GPMctl[i];
            if(navigator.appVersion.indexOf("MSIE 5")>-1){
                tB.p7opt[2]=0;
            }
            dd=tB.id.replace("GP_","GPt_");
            tD=document.getElementById(tB.id.replace("GP_","GPt_"));
            if(tD){
                tA=tD.getElementsByTagName("A");
                tg='p7GPtrg';
                for(j=0;j<tA.length;j++){
                    if(tA[j].id && tA[j].id.indexOf(tg)===0){
                        tA[j].onclick=function(){
                            return P7_GPMshow(this);
                        };
                        tA[j].p7state='closed';
                        tA[j].p7GPMpr=tB.id;
                        tA[j].p7GPMtr=tD.id;
                        cP=document.getElementById(tA[j].id.replace("trg","c"));
                        if(cP){
                            tA[j].p7GPMc=cP.id;
                        }
                        else{
                            tA[j].p7GPMc=false;
                        }
                    }
                }
                dh='p7GPtrg'+tA[0].id.slice(7,8)+'_'+tB.p7opt[1];
                P7_GPMtrig(dh);
                if(tB.p7opt[3]==1){
                    P7_GPMmark(tB.id);
                }
            }
        }
    }
    P7_GPMurl();
    p7GP=true;
}
function P7_GPMtrig(tr){
    var tA=document.getElementById(tr);
    if(tA){
        P7_GPMshow(tA);
    }
}
function P7_GPMshow(a){
    var i,m=true,pD,tR,tA,ch,nh,vP,tP,th=-1,op,cd,wH;
    wH=window.location.href;
    if(!a.p7GPMc){
        a.className='p7GPcurrentmark';
        if(wH==a.href){
            return false;
        }
        else{
            return true;
        }
    }
    pD=document.getElementById(a.p7GPMpr);
    tR=document.getElementById(a.p7GPMtr);
    vP=document.getElementById(a.p7GPMtr.replace("t","w"));
    if(pD.p7opt[4]==1&&p7GP){
        window.location.hash="#gpm"+a.id.substring(7);
    }
    tA=tR.getElementsByTagName("A");
    if(pD.p7opt[2]>0){
        if(vP.p7gpmG){
            clearTimeout(vP.p7abG);
        }
    }
    ch=vP.offsetHeight;
    vP.style.height=ch+"px";
    for(i=0;i<tA.length;i++){
        if(tA[i].p7GPMtr){
            if(tA[i].p7GPMc){
                tP=document.getElementById(tA[i].p7GPMc);
            }
            if(tA[i]==a){
                tA[i].className="down";
                tA[i].p7state="open";
                if(tA[i].p7GPMc){
                    m=false;
                    tP.style.visiblity="hidden";
                    tP.style.display="block";
                    if(pD.p7opt[2]==3&&p7GP){
                        op=0.05;
                        cd=tP.id;
                        if((navigator.appVersion.indexOf("MSIE")>-1)){
                            tP.style.zoom="100%";
                            tP.style.filter='alpha(opacity='+op*100+')';
                        }
                        else{
                            tP.style.opacity=op;
                        }
                    }
                    tP.style.visiblity="visible";
                    if(pD.p7opt[2]>0&&p7GP){
                        th=tP.offsetHeight;
                    }
                    else{
                        vP.style.height="auto";
                    }
                }
            }
            else{
                if(tA[i].p7GPMc){
                    tA[i].className='';
                    tA[i].p7state="closed";
                    tP.style.display="none";
                }
            }
        }
    }
    if(th>-1){
        if(pD.p7opt[2]==3&&p7GP){
            vP.style.height="auto";
            P7_GPMfadeIn(cd,0.10);
        }
        else{
            P7_GPMglide(vP.id,ch,th,pD.p7opt[2]);
        }
    }
    return m;
}
function P7_GPMph(d){
    var h,nh,dh,oh;
    d.style.height="auto";
    oh=d.offsetHeight;
    d.style.height=oh+"px";
    nh=d.offsetHeight;
    if(oh!=nh){
        nh=(oh-(nh-oh));
    }
    d.style.height="auto";
    return nh;
}
function P7_GPMglide(dd,ch,th,p){
    var w,m,d,wd,wC,tt,dy=10,inc=10,pc=0.15;
    d=document.getElementById(dd);
    m=(ch<=th)?0:1;
    if(p==2){
        tt=Math.abs( parseInt( Math.abs(th)-Math.abs(ch),10 ) );
        inc=(tt*pc<1)?1:tt*pc;
    }
    inc=(m==1)?inc*-1:inc;
    d.style.height=ch+"px";
    if(ch==th){
        d.style.height="auto";
    }
    else{
        ch+=inc;
        if(m===0){
            ch=(ch>=th)?th:ch;
        }
        else{
            ch=(ch<=th)?th:ch;
        }
        d.p7gpmG=setTimeout("P7_GPMglide('"+dd+"',"+ch+","+th+","+p+")",dy);
    }
}
function P7_GPMfadeIn(id,op){
    var im,dy=30,lm=0.99,inc,d=document.getElementById(id);
    inc=(window.opera)?0.15:0.10;
    op=(op>=lm)?lm:op;
    if((navigator.appVersion.indexOf("MSIE")>-1)){
        d.style.filter='alpha(opacity='+op*100+')';
    }
    else{
        d.style.opacity=op;
    }
    if(op<lm){
        op+=inc;
        d.p7ssmfade=setTimeout("P7_GPMfadeIn('"+id+"',"+op+")",dy);
    }
    else{
        if(d.style.filter){
            d.style.removeAttribute("filter");
        }
    }
}
function P7_GPMmark(dD){
    var i,wH,tB,tA,hH;
    wH=window.location.href;
    hH=window.location.hash;
    if(hH=="#"||hH.indexOf("#gpm")===0){
        wH=wH.replace(hH,'');
    }
    tB=document.getElementById(dD);
    if(tB){
        if(tB){
            tA=tB.getElementsByTagName("A");
            for(i=0;i<tA.length;i++){
                if(tA[i].p7GPMtr){
                    if(tA[i].href==wH){
                        if(tA[i].p7GPMc){
                            P7_GPMshow(tA[i]);
                        }
                        else{
                            tA[i].className='p7GPcurrentmark';
                        }
                        break;
                    }
                }
            }
        }
    }
}
function P7_GPMurl(){
    var i,h,s,x,d='gpm';
    if(document.getElementById){
        h=document.location.search;
        if(h){
            h=h.replace('?','');
            s=h.split(/[=&]/g);
            if(s&&s.length){
                for(i=0;i<s.length;i+=2){
                    if(s[i]==d){
                        x=s[i+1];
                        if(x){
                            P7_GPMtrig('p7GPtrg'+x);
                        }
                    }
                }
            }
        }
        h=document.location.hash;
        if(h){
            x=h.substring(1,h.length);
            if(x && x.indexOf("gpm")===0){
                P7_GPMtrig('p7GPtrg'+x.substring(3));
            }
        }
    }
}

**Gilligan** · 04-09-2008, 08:21 AM

Anyone have a clue?