More fun with the SWITCH MENU! [Archive]

OpenIntro

03-12-2004, 05:51 AM

This is in regards to the Switch Menu found at: http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

We can get the script to work perfectly, but are looking for a slight enhancement and wanted to see if it is possible and how we might go about this....

Say for example we have 3 different contents that we can switch between....when the page is loaded, the page is blank until one of the links is clicked....how could we have it so the first link (any of them really, but just one) is already active on the screen....and then you can switch between them from there?

Willy Duitt

03-12-2004, 07:42 AM

Try adding what is highlighted in red to the do_onload function.

function do_onload(){
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
revivecontent();
}
if (enablepersist=="off" || enablepersist=="on" && document.cookie.indexOf('=sc')==-1){
expandcontent('sc2');
}
}

.....Willy

aagesen

03-12-2004, 11:30 AM

Hi

I have tried to add the red section to the Contractible Headers Script - and i works fine here as well !!

My problem is now that when I have the variable "enablepersist" set to "on" the browser dosen´t remember the content structure when I use the built-in-button "Back".

Eksample:
I have the second header displayed on the first load. If I open say the first header and click one of the links here and then use the Back-button the browser shows the second header displayed - and NOT the first.

What is wrong ??

Willy Duitt

03-12-2004, 11:37 AM

You will have to check if the cookie is set onunload.
No cookie, no save....

.....Willy

aagesen

03-12-2004, 02:17 PM

Okay - how do I do that ??

Willy Duitt

03-12-2004, 02:43 PM

Originally posted by aagesen
Okay - how do I do that ??

How can anyone possibly answer that if you do not provide any code, a link to the script or a link to the page you are working on?

.....Willy

aagesen

03-12-2004, 02:59 PM

<html>

<head>

<style>
.overskrift{
font-family:verdana; color:#003366; font-size: 8pt;

cursor:hand;
cursor:pointer;
}
</style>



<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Oct 21st, 2003.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined")
revivecontent();
if (enablepersist=="off" || enablepersist=="on" && document.cookie.indexOf('=sc')==-1){
expandcontent('sc2');
}

}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>

<title></title>
</head>

<body>

<p>
<Strong onClick="expandcontent('sc1')" class="overskrift">Markedsforventninger</strong>
<span id="sc1" class="switchcontent" >
   <a href="www.google.com" target="appcontent">Ugemelding</a>
<br>
   <a href="www.google.com" target="appcontent">Rentekurver</a>
<br>
   <a href="www.google.com" target="appcontent">Renteprognoser</a>
</span>

<br>
<br>

<Strong onClick="expandcontent('sc2')" class="overskrift">Markedsforventninger2</strong>
<span id="sc2" class="switchcontent">
   <a href="www.google.com" target="appcontent">Ugemelding2</a>
<br>
   <a href="www.google.com" target="appcontent">Rentekurver2</a>
<br>
   <a href="www.google.com" target="appcontent">Renteprognoser2</a>
</span>

<br>
<br>

<Strong onClick="expandcontent('sc3')" class="overskrift">Markedsforventninger3</strong>
<span id="sc3" class="switchcontent">
   <a href="www.google.com" target="appcontent">Ugemelding3</a>
<br>
   <a href="www.google.com" target="appcontent">Rentekurver3</a>
<br>
   <a href="www.google.com" target="appcontent">Renteprognoser3</a>
</span>
</p>

</body>
</html>

Willy Duitt

03-12-2004, 03:17 PM

I don't see a problem. The cookie is set onunload and when run thru my tester worked as expected.

What I do see is that you must be either using frames or an iframe which you are targeting your links links to open in and unfortunetly you did not provide that part of your code so the only advice I can offer is to add a function which will set the document.cookie whenever the appcontent? source changes.

target="appcontent"

.....Willy

aagesen

03-12-2004, 04:27 PM

Ok - first i would like to thank you very much for your time used on my problem !!

Here is what I do:

My index.html is the content of "appcontent" in a frameset and consist of a number of IFRAME´s.

The code I provided you with is the content of one of these IFRAMES. When clicked the links i the code above opens in "appcontent" and replaces index.html.

When the back-butten is used the index.html again apears in "appcontent" and the Contractbile Headers does not remember the structure.

I hope this explains what I´m doing - because I don´t think that I can make the function you described.

Willy Duitt

03-13-2004, 03:24 PM

In lieu of the limited information you have provided. I can only suggest that as long as the contractual header script is in the index.html page. There should not be a problem. The cookie should set when index.html unloads and once the cookie is set, the last opened header should be opened when you return to the index.html page.

However, I have a feeling you are using this as a menu from the parent frame which is not refreshed or unloaded when the links change in the appcontent frame. In which case you have a problem which I can not help you with since you have not provided enough information.

Good Luck;
.....Willy

aagesen

03-14-2004, 08:46 PM

Hej Willy

I need the help very much - tomorrow I will provide the full code - if you are still up for some serius help ?!

Willy Duitt

03-14-2004, 11:04 PM

You will need to provide a link!

Sorry, but I'm am not inclined to put muliple frame pages together just to test your code.

.....Willy

aagesen

03-15-2004, 01:36 PM

Hi Willy

I can not provide a link - because we are talking intranet.
However I can provide the code for the frameset where my index.html is shown in the "appcontent"-frame. It is not possible to change anything in this code - but I think it has something to do with the function "deleteSession". Remember that the Contractible Header Script is the content of one of the I-Frames in my index.html. Would you like to that file asd well ??

Here is the INTRANET-frameset-code:
-----------------------------------
<HTML>
<HEAD>
<TITLE> </TITLE>

<script language="javascript">
document.domain = "mydomain";
</script>

<script language="javascript">
var ephome="";

window.name = "top";

var uddpath="";
if(document.location.hostname.search("udd") >= 0) uddpath="udd-";

var pathname=window.location.pathname;
if(window.location.pathname=="/") pathname="/"+uddpath+"online/";

var kassepath="";
if(document.location.hostname.search("syst") >= 0) kassepath="syst-";
if(document.location.hostname.search("test") >= 0) kassepath="test-";

if(window!=parent)
top.location.href=pathname+"index.html";
var apptoopen = location.search;

document.write('<script src="'+pathname+'dnbnetstyr.js"></scr'+'ipt>');
document.write('<script src="'+pathname+'usfke1.js"></scr'+'ipt>');
document.write('<script src="'+pathname+'usfke2.js"></scr'+'ipt>');
document.write('<script src="'+pathname+'usfkb2.js"></scr'+'ipt>');

var senddata=new Image; //tinabn
senddata.src="images/space.gif"; //tinabn

var IntervalID;
var InLoad;
function loadme()
{
InLoad=false;
IntervalID = window.setInterval("load()",20);
}
function load(){
if (InLoad)
return;
InLoad = true;
try {
// Check the frames necessary for execution
if (top.logo.document.readyState!="complete"){
InLoad = false;
return;
}
// All frames are loaded, so clear interval & execute code
window.clearInterval( IntervalID );
// Do the stuff
startLogon();
} catch(e) { document.domain="mydomain"; };
InLoad = false;
}

function regFocus(framename)
{
try
{
top.logo.registerFocus(framename)
}
catch (e)
{
}
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function getEpHome(name){
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

function setEpHome(name,value,path){
var domain = "mydomain";
var secure = false; // this is only used when using SSL connections
document.cookie = name + "=" + escape (value) +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}

function setEnvCookie2(name,value){
var domain = "mydomain";
var path = '/';
var secure = false; // this is only used when using SSL connections
document.cookie = name + "=" + escape (value) +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}

function startLogon(){

ephome=getEpHome("EPHome");
env=getEpHome("XXEnv");
var dochref=unescape(document.location.href);

init();

if (dochref!=unescape(top.location.href)){ //framet browser
top.location.href=ephome;
return;
}

if (apptoopen.indexOf("kassesystem")>0){
top.appcontent.location.replace("http://" + document.location.host + "/"+kassepath+uddpath+"kassesystem/StartSide/KasseSystem.htm");
return;
}
else if (apptoopen.indexOf("kassesoeg")>0){
top.appcontent.location.replace("http://" + document.location.host + "/"+kassepath+uddpath+"kassesystem/StartSide/KasseSoeg.htm");
return;
}

var UniqueBrowserID = top.logo.XXUtil.get_UniqueBrowserID();
var CookieID = getEpHome("UniqueBrowserID");
if (CookieID!=null){
if(UniqueBrowserID!=CookieID){
if(env!=null){
var envTab=env.split("&");
var cics = envTab[0];
var lsid = envTab[19];
var user = getEpHome("DXXHostSession").substr(0,6);
}
if(lsid!=null && user!=null && cics!=null){
top.logo.XXUtil.setMemoryFile("cics", cics);
top.logo.XXUtil.setMemoryFile("lsid", user + lsid);
}
top.logo.XXUtil.OpenNewWindow(top.location.href);
top.logo.XXUtil.Quit();
return;
}
}
setEnvCookie2("UniqueBrowserID",UniqueBrowserID);

memfile = top.logo.XXUtil.getMemoryFile("lsid");
if(memfile.length>0){ //ctrl-N'et browser
if(dochref.indexOf("?")>=0){
setEpHome("EPHome", dochref.substr(0,dochref.indexOf("?")) , "/");
}
else {
setEpHome("EPHome", dochref , "/");
}
top.appcontent.location.replace(pathname+'logon/logonlsid.html');
}
else if (ephome==null || env==null) { //ikke logget på
if(dochref.indexOf("?")>=0){
setEpHome("EPHome", dochref.substr(0,dochref.indexOf("?")) , "/");
}
else {
setEpHome("EPHome", dochref , "/");
}
top.appcontent.location.replace(pathname+'logon/logon.html');
}
else { // der er logget på
if(dochref.indexOf("?")>=0){
dochref = dochref.substr(0,dochref.indexOf("?"));
}
if(ephome.indexOf("?")>=0){
ephome = ephome.substr(0,ephome.indexOf("?"));
}
if (ephome!=dochref){
top.location.href = ephome;
}
else
top.appcontent.location.replace(pathname+'logon/logonhome.html');
}
}

var sessionId=0;

function init(){
calcSession();
document.title="" + sessionId + ". Session";
}

function calcSession(){
var newSession="";
var sessionNo=1;
var allcookies=unescape(document.cookie);
var start=allcookies.indexOf("sessions=");
if (start==-1) {
setCookie("sessions","1,");
} else {
var End=allcookies.indexOf(";",start);
var mycookie="";
start+=9;//positionen efter session=
if (End==-1) mycookie=allcookies.substring(start);
else mycookie=allcookies.substring(start,End);
var sessionList="";
sessions=mycookie.split(',');
for(i=0;i<sessions.length;i++) {
if (((sessions[i]>(i+1)) && (newSession.length==0)) || (sessions[i].length==0)) {
if (newSession.length==0) {
newSession=i+1;
sessionNo =i+1;
sessionList+=newSession;
sessionList+=",";
}
}
if (sessions[i].length>0) {
sessionList+=sessions[i];
sessionList+=",";
}
}
setCookie("sessions",sessionList);
}
sessionId = sessionNo;
// return sessionList;
}

function setCookie(name, value) {
var expires=new Date(); // set the expires date to one year from now
expires.setTime(expires.getTime()+(1000*60*60*12));

var path = "/";
var domain = "mydomain";
var secure = false; // this is only used when using SSL connections

var expString = ((expires == null) ? "" : ("; expires=" + expires.toGMTString()));
var pathString = ((path == null) ? "" : ("; path=" + path));
var domainString = ((domain == null) ? "" : ("; domain=" + domain));
var secureString = ((secure == true) ? "; secure" : "");
document.cookie = name + "=" + escape(value) + expString + pathString + domainString + secureString;
}

function deleteSession(no){
var exp = new Date();
exp.setHours(exp.getHours() + 1);
var allcookies = unescape(document.cookie);
var start = allcookies.indexOf("sessions=");

if (start>=0) {
var End=allcookies.indexOf(";",start);
var mycookie="";
start+=9; //positionen efter session=
if (End==-1) mycookie=allcookies.substring(start);
else mycookie=allcookies.substring(start,End);
var sessionList="";
sessions=mycookie.split(',');
for(i=0;i<sessions.length;i++) {
if ((sessions[i]!=no) && (sessions[i]!="")) {
sessionList+=sessions[i];
sessionList+=",";
}
}
setCookie("sessions", sessionList);
}
}

function unload(){
deleteSession(sessionId);
}

</script>

</HEAD>

<script>
document.writeln('<FRAMESET ROWS="47,13,*,22" FRAMESPACING="0" FRAMEBORDER="0" ID="topframeset" onLoad="loadme()" onUnload="unload()"> ');
document.writeln(' <FRAMESET COLS="0,140,*" FRAMESPACING="0" FRAMEBORDER="0" id="topframe"> ');
document.writeln(' <FRAME SRC="'+pathname+'apptom.html" NAME="hiddenframe" id="hiddenframe" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 ONFOCUS="regFocus(\'hiddenframe\')"> ');
document.writeln(' <FRAME SRC="'+pathname+'progress.html" NAME="progress" id="progress" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 ONFOCUS="regFocus(\'progress\')"> ');
document.writeln(' <FRAME SRC="'+pathname+'logo.html" NAME="logo" id="logo" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 ONFOCUS="regFocus(\'logo\')"> ');
document.writeln(' </FRAMESET> ');
document.writeln(' <FRAME SRC="'+pathname+'service.html" NAME="topmargin" id="topmargin" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMESPACING=0 ONFOCUS="regFocus(\'topmargin\')"> ');
document.writeln(' <FRAMESET COLS="0,*" FRAMESPACING="0" FRAMEBORDER="0" id="centerframeset"> ');
document.writeln(' <FRAMESET ROWS="0,0,*,25" FRAMESPACING="0" FRAMEBORDER="0" id="menuframeset"> ');
document.writeln(' <FRAME SRC="'+pathname+'apptom.html" NAME="htuframe" id="htuframe" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMESPACING=0 ONFOCUS="regFocus(\'menu\')"> ');
document.writeln(' <FRAME SRC="'+pathname+'smenu.html" NAME="smenu" FRAMEBORDER="0" SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0" id="smenu" ONFOCUS="regFocus(\'smenu\')"> ');
document.writeln(' <FRAME SRC="'+pathname+'menu.html" NAME="menu" FRAMEBORDER="0" SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0" id="menu" ONFOCUS="regFocus(\'menu\')"> ');
document.writeln(' <FRAME SRC="'+pathname+'apptom.html" NAME="menusize" id="menusize" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMESPACING=0 ONFOCUS="regFocus(\'menu\')"> ');
document.writeln(' </FRAMESET> ');
document.writeln(' <FRAMESET COLS="*,0" FRAMESPACING="0" FRAMEBORDER="0" id="appframeset"> ');
document.writeln(' <FRAMESET ROWS="0,*,0" FRAMESPACING="0" FRAMEBORDER="0" id="appcenterframeset"> ');
document.writeln(' <FRAMESET COLS="0,*" FRAMESPACING="0" FRAMEBORDER="0" id="captionframeset"> ');
document.writeln(' <FRAME SRC="'+pathname+'apptom.html" NAME="captionbuffer" id="captionbuffer" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMESPACING=0 ONFOCUS="regFocus(\'captionpanel\')"> ');
document.writeln(' <FRAME SRC="'+pathname+'caption.html" NAME="captionpanel" id="captionpanel" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 ONFOCUS="regFocus(\'captionpanel\')"> ');
document.writeln(' </FRAMESET> ');
document.writeln(' <FRAMESET COLS="0,*" FRAMESPACING="0" FRAMEBORDER="0" id="appcontentframeset"> ');
document.writeln(' <FRAME SRC="'+pathname+'apptom.html" NAME="hodpanel" FRAMEBORDER="0" SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0" id="hodpanel" ONFOCUS="regFocus(\'hodpanel\')"> ');
document.writeln(' <FRAME SRC="'+pathname+'apptom.html" NAME="appcontent" id="appcontent" FRAMEBORDER="0" SCROLLING="Auto" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMESPACING=0 ONFOCUS="regFocus(\'appcontent\')"> ');
document.writeln(' </FRAMESET> ');
document.writeln(' <FRAME SRC="'+pathname+'button.html" NAME="buttonpanel" id="buttonpanel" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 ONFOCUS="regFocus(\'buttonpanel\')"> ');
document.writeln(' </FRAMESET> ');
document.writeln(' <FRAME SRC="'+pathname+'menuright.html" NAME="appright" id="appright" FRAMEBORDER="0" SCROLLING="No" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMESPACING=0 ONFOCUS="regFocus(\'appright\')"> ');
document.writeln(' </FRAMESET> ');
document.writeln(' </FRAMESET> ');
document.writeln(' <FRAMESET COLS="140,*,425" FRAMESPACING="0" FRAMEBORDER="0" id="bottomframeset" noresize> ');
document.writeln(' <FRAME SRC="'+pathname+'bottomleft.html" NAME="bottomleft" id="bottomleft" FRAMEBORDER="0" SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0" ONFOCUS="regFocus(\'bottomleft\')" noresize> ');
document.writeln(' <FRAME SRC="'+pathname+'bottomcenter.html" NAME="bottomcenter" id="bottomcenter" FRAMEBORDER="0" SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0" ONFOCUS="regFocus(\'bottomcenter\')" noresize> ');
document.writeln(' <FRAME SRC="'+pathname+'bottomrighttom.html" NAME="bottomright" id="bottomright" FRAMEBORDER="0" SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0" noresize> ');
document.writeln(' </FRAMESET> ');
document.writeln('</FRAMESET> ');
</script>

</HTML>
-----------------------------------