Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Using Cookies with a Dreamweaver Spry Collapsible Panel

Posted on 2007-11-24
8
2,216 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Optimize simple Javascript code to use no repetitions 12 43
asp.net mvc5 6 20
Autocomplete with Jquery Question 2 19
send email part1 9 22
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

789 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