Webmaster-Talk.com > Coding Talk > JavaScript Forum > URGENT - Glide Panel Magic

Reply
URGENT - Glide Panel Magic
Old 04-08-2008, 07:11 PM URGENT - Glide Panel Magic
Gilligan's Avatar
Dead Like Me

Posts: 1,608
Name: Stefan
Location: London, UK
Talkupation: Gilligan has a spectacular aura aboutGilligan has a spectacular aura aboutGilligan has a spectacular aura about
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 is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 04-09-2008, 07:21 AM Re: URGENT - Glide Panel Magic
Gilligan's Avatar
Dead Like Me

Posts: 1,608
Name: Stefan
Location: London, UK
Talkupation: Gilligan has a spectacular aura aboutGilligan has a spectacular aura aboutGilligan has a spectacular aura about
Anyone have a clue?
Gilligan is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to URGENT - Glide Panel Magic
 
Previous Thread | Next Thread Webmaster-Talk.com > Coding Talk > JavaScript Forum > URGENT - Glide Panel Magic

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Webmaster Resources Marketplace:
Software Development Company | Webhosting.UK.com
Web Templates | Text Link Brokers | Stock Photos


   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.11579 seconds with 12 queries