Solved

Using Cookies with a Dreamweaver Spry Collapsible Panel

Posted on 2007-11-24
8
2,201 Views
Last Modified: 2012-06-27
I'm more of a designer.  A client asked me to put some site navigation inside collapsible panels, and I used the Collapsible Panel Spry Widget that came packaged with Dreamweaver CS3.  This is working great, but ideally I would like to set a cookie so that the panels remain opened or closed as the site visitor navigates from page to page.  I have looked at a number of the javascript/cookie posts here, and tried manipulating the javascript file that Dreamweaver generated, but I don't know what's what.

The testing site is http://www.charlie.basementbroadway.com/, and the collapsible panels are obviously the box on the right titled "quicklinks."  I'll paste the javascript that Dreamweaver generated here.
/* SpryCollapsiblePanel.js - Revision: Spry Preview Release 1.4 */
 

// Copyright (c) 2006. Adobe Systems Incorporated.

// All rights reserved.

//

// Redistribution and use in source and binary forms, with or without

// modification, are permitted provided that the following conditions are met:

//

//   * Redistributions of source code must retain the above copyright notice,

//     this list of conditions and the following disclaimer.

//   * Redistributions in binary form must reproduce the above copyright notice,

//     this list of conditions and the following disclaimer in the documentation

//     and/or other materials provided with the distribution.

//   * Neither the name of Adobe Systems Incorporated nor the names of its

//     contributors may be used to endorse or promote products derived from this

//     software without specific prior written permission.

//

// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"

// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE

// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE

// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE

// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR

// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN

// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)

// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE

// POSSIBILITY OF SUCH DAMAGE.
 

var Spry;

if (!Spry) Spry = {};

if (!Spry.Widget) Spry.Widget = {};
 

Spry.Widget.CollapsiblePanel = function(element, opts)

{

	this.init(element);
 

	Spry.Widget.CollapsiblePanel.setOptions(this, opts);
 

	this.attachBehaviors();

};
 

Spry.Widget.CollapsiblePanel.prototype.init = function(element)

{

	this.element = this.getElement(element);

	this.focusElement = null;

	this.hoverClass = "CollapsiblePanelTabHover";

	this.openClass = "CollapsiblePanelOpen";

	this.closedClass = "CollapsiblePanelClosed";

	this.focusedClass = "CollapsiblePanelFocused";

	this.enableAnimation = true;

	this.enableKeyboardNavigation = true;

	this.animator = null;

	this.hasFocus = false;

	this.contentIsOpen = true;

};
 

Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)

{

	if (ele && typeof ele == "string")

		return document.getElementById(ele);

	return ele;

};
 

Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className)

{

	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))

		return;

	ele.className += (ele.className ? " " : "") + className;

};
 

Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className)

{

	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))

		return;

	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");

};
 

Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className)

{

	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)

		return false;

	return true;

};
 

Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)

{

	if( ele )

		ele.style.display = display;

};
 

Spry.Widget.CollapsiblePanel.setOptions = function(obj, optionsObj, ignoreUndefinedProps)

{

	if (!optionsObj)

		return;

	for (var optionName in optionsObj)

	{

		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)

			continue;

		obj[optionName] = optionsObj[optionName];

	}

};
 

Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function()

{

	this.addClassName(this.getTab(), this.hoverClass);

};
 

Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function()

{

	this.removeClassName(this.getTab(), this.hoverClass);

};
 

Spry.Widget.CollapsiblePanel.prototype.open = function()

{

	this.contentIsOpen = true;

	if (this.enableAnimation)

	{

		if (this.animator)

			this.animator.stop();

		this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true);

		this.animator.start();

	}

	else

		this.setDisplay(this.getContent(), "block");
 

	this.removeClassName(this.element, this.closedClass);

	this.addClassName(this.element, this.openClass);

};
 

Spry.Widget.CollapsiblePanel.prototype.close = function()

{

	this.contentIsOpen = false;

	if (this.enableAnimation)

	{

		if (this.animator)

			this.animator.stop();

		this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false);

		this.animator.start();

	}

	else

		this.setDisplay(this.getContent(), "none");
 

	this.removeClassName(this.element, this.openClass);

	this.addClassName(this.element, this.closedClass);

};
 

Spry.Widget.CollapsiblePanel.prototype.onTabClick = function()

{

	if (this.isOpen())

		this.close();

	else

		this.open();

	this.focus();

};
 

Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)

{

	this.hasFocus = true;

	this.addClassName(this.element, this.focusedClass);

};
 

Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)

{

	this.hasFocus = false;

	this.removeClassName(this.element, this.focusedClass);

};
 

Spry.Widget.CollapsiblePanel.ENTER_KEY = 13;

Spry.Widget.CollapsiblePanel.SPACE_KEY = 32;
 

Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)

{

	var key = e.keyCode;

	if (!this.hasFocus || (key != Spry.Widget.CollapsiblePanel.ENTER_KEY && key != Spry.Widget.CollapsiblePanel.SPACE_KEY))

		return true;

	

	if (this.isOpen())

		this.close();

	else

		this.open();
 

	if (e.stopPropagation)

		e.stopPropagation();

	if (e.preventDefault)

		e.preventDefault();
 

	return false;

};
 

Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function()

{

	var tab = this.getTab();

	if (!tab)

		return;
 

	var self = this;

	Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) { return self.onTabClick(); }, false);

	Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(); }, false);

	Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(); }, false);
 

	if (this.enableKeyboardNavigation)

	{

		// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't

		// rely on adding the tabindex attribute if it is missing to enable keyboard navigation

		// by default.
 

		// Find the first element within the tab container that has a tabindex or the first

		// anchor tag.

		

		var tabIndexEle = null;

		var tabAnchorEle = null;
 

		this.preorderTraversal(tab, function(node) {

			if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)

			{

				var tabIndexAttr = tab.attributes.getNamedItem("tabindex");

				if (tabIndexAttr)

				{

					tabIndexEle = node;

					return true;

				}

				if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")

					tabAnchorEle = node;

			}

			return false;

		});
 

		if (tabIndexEle)

			this.focusElement = tabIndexEle;

		else if (tabAnchorEle)

			this.focusElement = tabAnchorEle;
 

		if (this.focusElement)

		{

			Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false);

			Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false);

			Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false);

		}

	}

};
 

Spry.Widget.CollapsiblePanel.addEventListener = function(element, eventType, handler, capture)

{

	try

	{

		if (element.addEventListener)

			element.addEventListener(eventType, handler, capture);

		else if (element.attachEvent)

			element.attachEvent("on" + eventType, handler);

	}

	catch (e) {}

};
 

Spry.Widget.CollapsiblePanel.prototype.preorderTraversal = function(root, func)

{

	var stopTraversal = false;

	if (root)

	{

		stopTraversal = func(root);

		if (root.hasChildNodes())

		{

			var child = root.firstChild;

			while (!stopTraversal && child)

			{

				stopTraversal = this.preorderTraversal(child, func);

				try { child = child.nextSibling; } catch (e) { child = null; }

			}

		}

	}

	return stopTraversal;

};
 

Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function()

{

	var panel = this.element;

	var tab = this.getTab();

	var content = this.getContent();
 

	if (this.contentIsOpen || this.hasClassName(panel, this.openClass))

	{

		this.removeClassName(panel, this.closedClass);

		this.setDisplay(content, "block");

		this.contentIsOpen = true;

	}

	else

	{

		this.removeClassName(panel, this.openClass);

		this.addClassName(panel, this.closedClass);

		this.setDisplay(content, "none");

		this.contentIsOpen = false;

	}
 

	this.attachPanelHandlers();

};
 

Spry.Widget.CollapsiblePanel.prototype.getTab = function()

{

	return this.getElementChildren(this.element)[0];

};
 

Spry.Widget.CollapsiblePanel.prototype.getContent = function()

{

	return this.getElementChildren(this.element)[1];

};
 

Spry.Widget.CollapsiblePanel.prototype.isOpen = function()

{

	return this.contentIsOpen;

};
 

Spry.Widget.CollapsiblePanel.prototype.getElementChildren = function(element)

{

	var children = [];

	var child = element.firstChild;

	while (child)

	{

		if (child.nodeType == 1 /* Node.ELEMENT_NODE */)

			children.push(child);

		child = child.nextSibling;

	}

	return children;

};
 

Spry.Widget.CollapsiblePanel.prototype.focus = function()

{

	if (this.focusElement && this.focusElement.focus)

		this.focusElement.focus();

};
 

/////////////////////////////////////////////////////
 

Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts)

{

	this.timer = null;

	this.interval = 0;

	this.stepCount = 0;
 

	this.fps = 0;

	this.steps = 10;

	this.duration = 500;

	this.onComplete = null;
 

	this.panel = panel;

	this.content = panel.getContent();

	this.panelData = [];

	this.doOpen = doOpen;
 

	Spry.Widget.CollapsiblePanel.setOptions(this, opts);
 
 

	// If caller specified speed in terms of frames per second,

	// convert them into steps.
 

	if (this.fps > 0)

	{

		this.interval = Math.floor(1000 / this.fps);

		this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);

	}

	else if (this.steps > 0)

		this.interval = this.duration / this.steps;
 

	var c = this.content;
 

	var curHeight = c.offsetHeight ? c.offsetHeight : 0;

	

	if (doOpen && c.style.display == "none")

		this.fromHeight = 0;

	else

		this.fromHeight = curHeight;
 

	if (!doOpen)

		this.toHeight = 0;

	else

	{

		if (c.style.display == "none")

		{

			// The content area is not displayed so in order to calculate the extent

			// of the content inside it, we have to set its display to block.
 

			c.style.visibility = "hidden";

			c.style.display = "block";

		}
 

		// Unfortunately in Mozilla/Firefox, fetching the offsetHeight seems to cause

		// the browser to synchronously re-layout and re-display content on the page,

		// so we see a brief flash of content that is *after* the panel being positioned

		// where it should when the panel is fully expanded. To get around this, we

		// temporarily position the content area of the panel absolutely off-screen.

		// This has the effect of taking the content out-of-flow, so nothing shifts around.
 

		// var oldPos = c.style.position;

		// var oldLeft = c.style.left;

		// c.style.position = "absolute";

		// c.style.left = "-2000em";
 

		// Clear the height property so we can calculate

		// the full height of the content we are going to show.

		c.style.height = "";

		this.toHeight = c.offsetHeight;
 

		// Now restore the position and offset to what it was!

		// c.style.position = oldPos;

		// c.style.left = oldLeft;

	}
 

	this.increment = (this.toHeight - this.fromHeight) / this.steps;

	this.overflow = c.style.overflow;
 

	c.style.height = this.fromHeight + "px";

	c.style.visibility = "visible";

	c.style.overflow = "hidden";

	c.style.display = "block";

};
 

Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()

{

	var self = this;

	this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);

};
 

Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()

{

	if (this.timer)

	{

		clearTimeout(this.timer);
 

		// If we're killing the timer, restore the overflow

		// properties on the panels we were animating!
 

		if (this.stepCount < this.steps)

			this.content.style.overflow = this.overflow;

	}
 

	this.timer = null;

};
 

Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()

{

	++this.stepCount;
 

	this.animate();
 

	if (this.stepCount < this.steps)

		this.start();

	else if (this.onComplete)

		this.onComplete();

};
 

Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.animate = function()

{

	if (this.stepCount >= this.steps)

	{

		if (!this.doOpen)

			this.content.style.display = "none";

		this.content.style.overflow = this.overflow;

		this.content.style.height = this.toHeight + "px";

	}

	else

	{

		this.fromHeight += this.increment;

		this.content.style.height = this.fromHeight + "px";

	}

};

Open in new window

0
Comment
Question by:drranson
8 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 20345103
Add this script to your page:

<script>

window.onload=function(){

  var cp = document.cookie.split("z_CP=");

  if(cp.length>1){

    cp = (cp[1]+";").split(";")[0].split("");

    for(var tab=i=1;tab=self["CollapsiblePanel"+i];i++)(cp[i-1]==1)?tab.open():tab.close();

  }

}

window.onbeforeunload=function(){

  var cp = [];

  for(var i=1;self["CollapsiblePanel"+i];i++){

    cp[i-1] = self["CollapsiblePanel"+i].contentIsOpen?1:0;

  }

  document.cookie="z_CP="+cp.join("")+"; path=/;";

}

</script>

Open in new window

0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 20345107
Here anoth:er version
<script>

window.onload=function(){

  var cp = document.cookie.split("z_CP=");

  if(cp.length>1){

    cp = (cp[1]+";").split(";")[0].split("");

    for(var tab=i=1;tab=self["CollapsiblePanel"+i];i++){

      if(cp[i-1]==1){

        tab.open();

      } else {

        tab.close();

      }

    }

  }

}

window.onbeforeunload=function(){

  var cp = "";

  for(var i=1;self["CollapsiblePanel"+i];i++){

    cp += self["CollapsiblePanel"+i].contentIsOpen?1:0;

  }

  document.cookie="z_CP="+cp+"; path=/;";

}

</script>

Open in new window

0
 

Author Closing Comment

by:drranson
ID: 31410837
Zvonko, both of your solutions work perfectly (so far I have tested them in IE7 and Firefox, and I believe they'll work in other browsers perfectly also).  I was approaching this all wrong by trying to add code to the javascript file supplied by Dreamweaver (further proof that I don't know what I'm doing in javascript).  Thank you!

For anyone looking at this down the road -- the site will be moved from the testing site to a live site at some point (hopefully by the end of 2007).   If the site at http://charlie.basementbroadway.com is something other than "Way Off Broadway," you can check to see if the live site is up at http://www.wayoffbroadway.org.  (Again, I am hoping the new site will be posted by the end of 2007 or early 2008.)
0
 

Author Comment

by:drranson
ID: 20345926
Zvonko, both of your solutions work perfectly (so far I have tested them in IE7 and Firefox, and I believe they'll work in other browsers perfectly also).  I was approaching this all wrong by trying to add code to the javascript file supplied by Dreamweaver (further proof that I don't know what I'm doing in javascript).  Thank you!

For anyone looking at this down the road -- the site will be moved from the testing site to a live site at some point (hopefully by the end of 2007).   If the site mentioned in my original post (at http://charlie.basementbroadway.com) is something other than "Way Off Broadway," you can check to see if the live site is up at http://www.wayoffbroadway.org.  (Again, I am hoping the new site will be posted by the end of 2007 or early 2008.)
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 63

Expert Comment

by:Zvonko
ID: 20347202
You are welcome.
0
 

Expert Comment

by:newttyy
ID: 21273743
Hi Zvonko,

First of all I have to say that I'm not such a great coder ... more of a designer/developer.

I was trying your samples ... so I just copy/pasted your code between the <head> tags, but nothing really worked. When I refreshed the page, the colapsible panel went back to the default state.
At first I had 5 colapsible panels but I removed 4 of them thinking that maybe was some conflict somwhere.

I have not altered the "SpryCollapsiblePanel.js" or the .css file.

I would really apreciate the help!
Thanks!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 21275093
Welcome to EE newttyy :-)
Please open your new question and reference to this one if it is needed for your description.
0
 

Expert Comment

by:nicolas-castlestudio
ID: 37009645
Hi Zvonko,

I have had the same problem and, like newttyy, tried your code but it didn't work. I posted my new question already with more details and a reference to this one. I would appreciate some help!

thanks!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now