Solved

Using Cookies with a Dreamweaver Spry Collapsible Panel

Posted on 2007-11-24
8
2,218 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

685 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