kritinet
Gebruiker
- Lid geworden
- 25 nov 2007
- Berichten
- 118
ik heb een pagina die terug grijpt op een database. http://www.estero-travel.com/nl/Rond-Combinatiereizen/index.php
nu heb ik er 2 probemen mee.
1. het filteren en sorteren werkt op de een of andere manier niet, en ik heb geen flauw idee waarom.
2. Ik wilde dat iedere "Reis" in een SpryCollapsiblePanel staat en dat je die los van elkaar kunt openen.
Zoals jullie kunnen zien werken alleen de bovensten 2 en de eerste reis.
Het ligt er aan dat de SpryCollapsiblePanel namen Spry.Widget.CollapsiblePanel1, Spry.Widget.CollapsiblePanel2, en Spry.Widget.CollapsiblePanel3 zijn.
maar omdat zich die code herhaalt werkt het niet.
Hier is de code van de website en van de SpryCollapsible Panel
Ik hoop dat me er iemand mee kan helpen !
[JS]// SpryCollapsiblePanel.js - version 0.7 - Spry Pre-Release 1.6.1
//
// 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.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;
this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN;
this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP;
Spry.Widget.CollapsiblePanel.setOptions(this, opts);
this.attachBehaviors();
};
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(e)
{
this.addClassName(this.getTab(), this.hoverClass);
return false;
};
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
{
this.removeClassName(this.getTab(), this.hoverClass);
return false;
};
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, { duration: this.duration, fps: this.fps, transition: this.transition });
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, { duration: this.duration, fps: this.fps, transition: this.transition });
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(e)
{
if (this.isOpen())
this.close();
else
this.open();
this.focus();
return this.stopPropagation(e);
};
Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
{
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
{
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.CollapsiblePanel.KEY_UP = 38;
Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
{
var key = e.keyCode;
if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
return true;
if (this.isOpen() && key == this.closePanelKeyCode)
this.close();
else if ( key == this.openPanelKeyCode)
this.open();
return this.stopPropagation(e);
};
Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e)
{
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
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(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, 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.addClassName(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.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;
this.onComplete = null;
this.panel = panel;
this.content = panel.getContent();
this.doOpen = doOpen;
Spry.Widget.CollapsiblePanel.setOptions(this, opts, true);
this.interval = Math.floor(1000 / this.fps);
var c = this.content;
var curHeight = c.offsetHeight ? c.offsetHeight : 0;
this.fromHeight = (doOpen && c.style.display == "none") ? 0 : 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";
}
// 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;
}
this.distance = this.toHeight - this.fromHeight;
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.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()
{
var self = this;
this.startTime = (new Date).getTime();
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 property.
this.content.style.overflow = this.overflow;
}
this.timer = null;
};
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
{
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
if (elapsedTime >= this.duration)
{
if (!this.doOpen)
this.content.style.display = "none";
this.content.style.overflow = this.overflow;
this.content.style.height = this.toHeight + "px";
if (this.onComplete)
this.onComplete();
return;
}
var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);
this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
Spry.Widget.CollapsiblePanelGroup = function(element, opts)
{
this.element = this.getElement(element);
this.opts = opts;
this.attachBehaviors();
};
Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions;
Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement;
Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren;
Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget)
{
if (!element || !widget)
return;
if (!element.spry)
element.spry = new Object;
element.spry.collapsiblePanel = widget;
};
Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element)
{
return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null;
};
Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function()
{
if (!this.element)
return [];
return this.getElementChildren(this.element);
};
Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex)
{
return this.getPanels()[panelIndex];
};
Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function()
{
if (!this.element)
return;
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
{
var cpanel = cpanels;
this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts));
}
};
Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex)
{
var w = this.getElementWidget(this.getPanel(panelIndex));
if (w && !w.isOpen())
w.open();
};
Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex)
{
var w = this.getElementWidget(this.getPanel(panelIndex));
if (w && w.isOpen())
w.close();
};
Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function()
{
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
{
var w = this.getElementWidget(cpanels);
if (w && !w.isOpen())
w.open();
}
};
Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function()
{
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
{
var w = this.getElementWidget(cpanels);
if (w && w.isOpen())
w.close();
}
};
[/JS]
nu heb ik er 2 probemen mee.
1. het filteren en sorteren werkt op de een of andere manier niet, en ik heb geen flauw idee waarom.
2. Ik wilde dat iedere "Reis" in een SpryCollapsiblePanel staat en dat je die los van elkaar kunt openen.
Zoals jullie kunnen zien werken alleen de bovensten 2 en de eerste reis.
Het ligt er aan dat de SpryCollapsiblePanel namen Spry.Widget.CollapsiblePanel1, Spry.Widget.CollapsiblePanel2, en Spry.Widget.CollapsiblePanel3 zijn.
maar omdat zich die code herhaalt werkt het niet.
Hier is de code van de website en van de SpryCollapsible Panel
Ik hoop dat me er iemand mee kan helpen !
PHP:
<?php
$query_rondreizen = "SELECT * FROM rondreizen";
$result_rondreizen = mysql_query($query_rondreizen) or die(mysql_error());
$result = mysql_query ( "SELECT * FROM accos WHERE name LIKE '%" . $_POST[ 'search' ] . "%' OR type LIKE '%" . $_POST[ 'search' ] . "%' OR description LIKE '%" . $_POST[ 'search' ]. "%' OR village LIKE '%" . $_POST[ 'search' ]. "%' OR streek LIKE '%" . $_POST[ 'search' ] . "%' OR country LIKE '%" . $_POST[ 'search' ] . "%'" ) ;
$query = "SELECT country, COUNT(name) AS total FROM accos GROUP BY country";
$result = mysql_query ( $query ) or die ( mysql_error () );
$maxRows_accos = 5;
$pageNum_accos = 0;
if (isset($_GET['pageNum_accos'])) {
$pageNum_accos = $_GET['pageNum_accos'];
}
$startRow_accos = $pageNum_accos * $maxRows_accos;
mysql_select_db($database_db, $db);
$sort_by = "";
if(isset($_GET['sort'])){
$sort = $_GET['sort'];
if($sort == "prijs" or $sort == "periode" ){
$sort_by = " ORDER BY `".$sort."`";
}
}
$filter = "";
if (isset($_GET["filter"]) && $_GET["filter"] == "Rondreis") {
$filter = 'WHERE type = "Rondreis"';
}
if (isset($_GET["filter"]) && $_GET["filter"] == "Combinatiereis") {
$filter = 'WHERE type = "Combinatiereis"';
}
$query_accos = "SELECT * FROM rondreizen ".$filter .$sort_by ;
$query_limit_accos = sprintf("%s LIMIT %d, %d", $query_accos, $startRow_accos, $maxRows_accos);
$accos = mysql_query($query_limit_accos, $db) or die(mysql_error());
$row_accos = mysql_fetch_assoc($accos);
if (isset($_GET['totalRows_accos'])) {
$totalRows_accos = $_GET['totalRows_accos'];
} else {
$all_accos = mysql_query($query_accos);
$totalRows_accos = mysql_num_rows($all_accos);
}
$totalPages_accos = ceil($totalRows_accos/$maxRows_accos)-1;
$queryString_accos = "";
if (!empty($_SERVER['QUERY_STRING'])) {
$params = explode("&", $_SERVER['QUERY_STRING']);
$newParams = array();
foreach ($params as $param) {
if (stristr($param, "pageNum_accos") == false &&
stristr($param, "totalRows_accos") == false) {
array_push($newParams, $param);
}
}
if (count($newParams) != 0) {
$queryString_accos = "&" . htmlentities(implode("&", $newParams));
}
}
$queryString_accos = sprintf("&totalRows_accos=%d%s", $totalRows_accos, $queryString_accos);
?>
<!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=iso-8859-2" />
<title>|| Estero || Rondreizen & Combinatiereizen ||</title>
<meta name="Keywords" content="Bestemmingen,Griekenland,italie,oostenrijk,kreta,santorini" />
<meta name="Description" content="Estero Travel, Events & more ! Alle Bestemmingen zoals Oosternrijk, Griekenland, Italie etc. " />
<meta name="resource-type" content="document" />
<meta name="revisit-after" content="1 day" />
<meta name="classification" content="Tourism Airlines" />
<meta name="robots" content="all" />
<meta name="author" content="[Estero] Judith & Max Dullaart" />
<meta name="distribution" content="Global" />
<meta name="rating" content="Safe For Kids" />
<meta http-equiv="Content-Language" content="nl" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="Publisher" content="|| Estero || Travel, Events & more !" />
<meta name="Copyright" content="|| Estero || Travel, Events & more !" />
<meta name="Page-Topic" content="service, journey, tourism," />
<meta name="Audience" content="All" />
<link href="../../Scripts/css.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColLiqHdr #sidebar2, .thrColLiqHdr #sidebar1 { padding-top: 30px; }
.thrColLiqHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script type="text/javascript" src="../../Scripts/menu.js"></script>
<script src="../../Scripts/script.js" type="text/javascript" ></script>
<script src="../../Scripts/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="../../Scripts/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColLiqHdr">
<div id="container">
<div id="header">
<div class="headmenu" > languages: [<a href="http://www.estero-travel.com/nl/index.php" title="nederlands" >NL</a>] [<a href="http://www.estero-travel.com/de/index.php" title="deutsch">DE</a>]</div>
<div class="addthis_toolbox addthis_default_style" style=" margin-top:10px;width:235px; float:left;" >
<a href="http://www.addthis.com/bookmark.php?v=250&pub=estero" class="addthis_button_compact" style="color:#333; font-size:16px; text-decoration:none">Delen</a>
<span class="addthis_separator">||</span>
<a class="addthis_button_favorites"></a>
<a class="addthis_button_print"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_nujij"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=estero"></script>
<script type="text/javascript">var addthis_language = "nl"; </script>
<span class="headmenu2"><span class="addthis_separator">||</span>
<a href="http://www.estero-travel.com/nl/index.php" title="Home NL" >Home</a><span class="addthis_separator">||</span>
<a href="http://www.estero-travel.com/nl/over-ons.php" title="Over ons">Over ons</a><span class="addthis_separator">||</span>
<a href="http://www.estero-travel.com/nl/beoordelingen.php" title="Beeoordelingen">Beoordelingen</a><span class="addthis_separator">||</span>
<a href="http://www.estero-travel.com/letterit2/nieuwsbrief.php" title="Beeoordelingen">Nieuwsbrief</a></span>
<br />
<a href="http://www.estero-travel.com" title="www.estero-travel.com"><img src="http://www.estero-travel.com/images/graphics/logo.png" alt="|| Estero || Travel, Events & more !" width="220" height="160" border="0" /></a><br />
<div class="headmenu1" >
<a href="http://www.estero-travel.com/nl/Bestemmingen/index.php" title="Bestemmingen">Bestemmingen</a>
<a href="http://www.estero-travel.com/nl/Rond-Combinatiereizen/index.php" title="Rond-& Combinatiereizen">Rond-& Combinatiereizen</a>
<a href="http://www.estero-travel.com/nl/Vervoer/index.php" title="Vervoer (BUS * TREIN * VLIEGTICKETS)">Vervoer </a>
<a href="http://www.estero-travel.com/nl/Events/index.php" title="Events">Events</a>
<a href="http://www.estero-travel.com/nl/Autoverhuur/index.php" title="Autoverhuur">Autoverhuur</a>
</div>
</div><div class="header10">
U bent hier :
<?php $navigation = explode("/", $_SERVER['SCRIPT_FILENAME']);
$url = "";
for($i=4; $i < count($navigation)-1; $i++) {
$url .= "/". $navigation[$i];
echo '<a href="'. $url .'">'. $navigation[$i] .'</a> »
';
}?>
</div>
<div id="sidebar1">
<div id="left"><div id="left_navigation">
<img src="../../images/graphics/gtop.gif" alt="Klantenservice" width="180" height="7" />
<div class="title4">Klantenservice</div>
<div class="itemleft" ><span style="text-align:center"><b>
<?php
if ( date ( "H" ) <= 11 ) {
echo "Goeden morgen !";
} elseif ( date ( "H" ) <= 17 ) {
echo "Goeden middag !";
} else {
echo "Goeden avond ! ";
}
?>
</b> <br />
Heeft u een vraag, of hulp nodig ? <br />
Een van onze medewerkers helpt u graag in de Live Chat. </span>
<center>
<br />
<!-- http://www.LiveZilla.net Chat Button Link Code -->
<a href="javascript:void(window.open('http://estero-travel.com/livezilla/livezilla.php','','width=500,height=600,left=0,top=0,resizable=yes,menubar=no,location=no,status=no,scrollbars=yes'))"><img src="http://estero-travel.com/livezilla/image.php?id=01" border="0" alt="LiveZilla Live Help" style="margin:8px" /></a>
<noscript>
<div><a href="http://estero-travel.com/livezilla/livezilla.php" target="_blank">Start Live Help Chat</a></div>
</noscript>
<!-- http://www.LiveZilla.net Chat Button Link Code -->
<!-- http://www.LiveZilla.net Tracking Code -->
<div id="livezilla_tracking" style="display:none"></div>
<script language="JavaScript" type="text/javascript">
<!-- DON'T REMOVE ANY LINE BREAKS-->
<!--
var script = document.createElement("script");script.type="text/javascript";var src = "http://estero-travel.com/livezilla/server.php?request=track&output=jcrpt&nse="+Math.random();setTimeout("script.src=src;document.getElementById('livezilla_tracking').appendChild(script)",1);
// -->
</script>
<!-- http://www.LiveZilla.net Tracking Code -->
<br />
</center>
<span style="text-align:center"><img src="http://estero-travel.com/images/graphics/---.gif" width="160" style="margin:10px" height="8" alt="contact" /><br />
<br />
<a href="http://www.estero-travel.com/nl/contact.php" title="Contact Estero Travel"><strong>« Contact »</strong></a></span></span></div>
<img src="../../images/graphics/gbot.gif" alt="Klantenservice" width="180" height="13" />
</div>
<div ><img src="../../images/graphics/gtop.gif" alt="Bestemmingen" width="180" height="7" />
<div class="title1">Bestemmingen</div>
<div class="itemleft">
<ul>
<?php
while($row = mysql_fetch_array($result)){
echo '<li>'. '<a href="http://www.estero-travel.com/nl/Bestemmingen/' . $row[ 'country' ] . '">' . $row[ 'country' ] . ' (' . $row[ 'total' ] . ')' .'</a></li>';
}
?></ul>
<img src="../../images/graphics/gbot.gif" alt="Bestemmingen" width="180" height="13" /></div>
</div> <br />
<div > <img src="http://www.estero-travel.com/images/graphics/gtop.gif" alt="Bestemmingen" width="180" height="7" />
<div class="title1">TOP Vakanties !</div>
<div class="TOP">
<ul>
<?php
while ($row = mysql_fetch_array( $result_aanbiedingen)) {
echo '<b><a href="http://www.estero-travel.com/nl/aanbiedingen.php" title="Aanbiedingen">' .$row['image'] .'</a></b>';
echo '<b><a href="http://www.estero-travel.com/nl/aanbiedingen.php" title="Aanbiedingen">' .'<br />' .$row['title'] .'</a></b><br />';
echo $row['aanbiedingen'];
echo '<a href="http://www.estero-travel.com/nl/aanbiedingen.php" title="Aanbiedingen" style="font-weight: bold">' .'€ ' .$row['prijs'] .'</a>';
echo '<br /><a href="http://www.estero-travel.com/nl/aanbiedingen.php" title="Aanbiedingen" style="font-style:italic; font-weight: bold ; color:#6F0024" >meer info >></a>';
echo '<img src="http://www.estero-travel.com/images/graphics/---.gif" width="140px" height="8px" border="0" alt="Aanbiedingen" /><br />';
} ?>
</ul>
<img src="http://www.estero-travel.com/images/graphics/gbot.gif" alt="Bestemmingen" width="180" height="13" /></div>
</div><br />
<div ><img src="../../images/graphics/gtop.gif" alt="Zoeken" width="180" height="7" />
<div class="title2">Zoeken</div>
<div class="itemleft" align="center" >
<form method="post" action="http://www.estero-travel.com/nl/zoek.php" >
<br />
<br />
<input type="text" name="search" size="20" maxlength="50" style="background:#FFF; margin:5px" />
<input type="submit" name="Submit" value="Zoeken" style="margin:5px" />
</form>
<img src="../../images/graphics/gbot.gif" alt="Zoeken" width="180" height="13" /></div>
</div>
</div><br /><br />
</div></div>
<div id="mainContent">
<h1> Rondreizen & Combinatiereizen</h1>
<br />
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">voor meer info over de<strong> Rondreizen</strong> klik hier</div>
<div class="CollapsiblePanelContent">Ontdek het fantastische eiland Kreta in 8, of 15 dagen ! Combineer nu de verschillende accommodaties, in de verschillende plaatsen op het eiland in 1 reis !! Onderstaand hebben we enkele voorbeelden voor u samengesteld. Natuurlijk kunt u andere accommodaties in het schema opnemen, voor een andere auto kiezen, etc. E.e.a heeft natuurlijk wel invloed op de prijs. <br />
Bij onderstaande schema's zult u de huurauto ontvangen op de luchthaven van Heraklion, maar het is tevens geen probleem om deze af te leveren bij uw eerste accommodatie, of een andere luchthaven. Ook is het geen enkel probleem om uw reis te beginnen van de luchthaven van Chania en deze te eindigen vanaf de luchthaven Heraklion. <br />
<br />
<br />
U bepaalt zelf uw volgorde ! Daarnaast kunt u ook kiezen uit andere accommodaties. Dit dient u wel te vermelden op het reserveringsformulier. Uiteraard krijgt u van ons een uitgebreide routebeschrijving naar uw accommodatie(s) mee.</div>
</div>
<br />
<br />
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">voor meer info over de <strong>Combinatiereizen ( Island Hopping)</strong> klik hier</div>
<div class="CollapsiblePanelContent"><u>Introductie:</u><br />
<br />
Zolang er toerisme is in Griekenland is het zgn. Island-hopping een populaire manier om in 1 vakantie meerdere eiland te bezoeken. Waar dat in eerste instantie gebeurde door de rugzak-toeristen, is tegenwoordig, mede door toedoen van de steeds beter wordende ferry-verbindingen, ook de wat meer veeleisende toerist prima in staat om 1 of meerdere eiland te bezoeken tijdens zijn/haar vakantie. 1 van de meest populaire eilandengroepen is de Cycladen-groep. deze eilandengroep ligt centraal in Griekenland, ruwweg tussen Athene en Kreta, in de Egeische Zee. De Cycladen bestaan uit ongeveer 29 min of meer bewoonde eilanden, waarvan de meest bekende Mykonos, Naxos, Paros en Santorini zijn. De Cycladen staan, behalve om hun stranden, vooral bekend vanwege hun kunst. Tussen 4000 en 1100 V.Chr werden er op deze eilandengroep kleine in wit marmer, modern ogende beeldjes geproduceerd (idolen), zonder gelaat en alleen een neus. Aanvankelijk werden deze in graftombes gezet als afgodenbeeldjes, later werden ze echt gezien als kunstvorm. Tegenwoordig wordt de Cycladische kunst massaal gereproduceerd en verkocht aan toeristen.<br />
<br />
Een combinatiereis is de manier om meerdere eilanden te ontdekken in 1 vakantie.
U kunt deze naar hartelust combineren, precies zoals u dat wilt ! In feite is iedere denkbare combinatie mogelijk, maar natuurlijk spelen daar wel een aantal factoren een belangrijke rol. Vooral dient u, als u uw eigen combinatiereis gaat plannen rekening te houden met de reistijd. Ook hangt veel af van de onderlinge verbindingen tussen de eilanden. Veel eilanden hebben een dagelijkse verbinding met elkaar, maar sosm is dit ook slechts 1x per week. <br />
<br />
Wij bieden op de volgende eilanden accommodaties aan:<br />
<ul>
<li>Mykonos</li>
<li>Paros </li>
<li>Naxos </li>
<li>Serifos</li>
<li>Santorini </li>
</ul>
<p><br />
<u><strong>Wij stellen uw prijs samen op basis van :</strong></u><br />
</p>
<ul >
<li>Vliegreis vanaf Amsterdam of Brussel (of een andere luchthaven) naar Heraklion v.v.</li>
<li>Transfer van en naar de luchthaven Heraklion.</li>
<li>Verblijf in Appartementen op Kreta en andere eilanden</li>
<li>Transfer van uw accommodatie op Kreta naar de haven van Heraklion v.v.</li>
<li>Transfer van de haven op Santorini / Naxos / Paros e.d. naar Hotel v.v.</li>
<li>Boottickets met Catamaran van Heraklion naar Santorini / Naxos / Paros e.d. v.v. </li>
<li>Evt. autohuur, excursies of duikcursussen</li>
</ul>
Onderstaand hebben wij een aantal voorbeelden gegeven hoe een combinatie-reis eruit zou kunnen zien. Uiteraard kunt u, zoals al eerder aangegeven, zelf u favouriete combinatie bedenken. Wij maken deze graag concreet voor u. U kunt uw wensen aan ons kenbaar maken via ons Offerteformulier.<br />
Teneinde uw droom-combinatie zo goed mogelijk te kunnen samenstellen verzoeken wij u ons van zoveel mogelijk informatie te voorzien, zoals in welke periode u wilt reizen, met hoeveel reizigers, etc.<br />
<br />
</div>
</div>
<br />
<br />
<select name="select" onchange="sort('index.php?sort=', this)">
<option value="" selected="selected">Sorteren op...</option>
<option value="prijs">Prijs </option>
<option value="periode">Periode</option>
</select>
<select name="select" onchange="filter('index.php?filter=', this)">
<option value="" selected="selected">Filter op...</option>
<option value="Rondreis">Rondreis</option>
<option value="Combinatiereis">Combinatiereis</option>
</select>
<br />
<br />
<?php do { ?> <?php
while ($row = mysql_fetch_array( $result_rondreizen)) {
echo '<div id="CollapsiblePanel" class="CollapsiblePanel"> <div class="CollapsiblePanelTab" >' .$row['periode'].' daagse '.$row['name'].'</div> ';
echo ' <div class="CollapsiblePanelContent3"><table width="100%" border="1" bordercolor="#6F0024" cellspacing="2" cellpadding="2"> ' ;
echo '<tr><th valign="top" width="210px" >'.$row['image'].'</th>';
echo '<td width="85%" valign="top"><strong>Land:</strong>'.$row['land'].'<br/><strong>Streek:</strong>'.$row['streek'].'<br/><strong>Plaatsen:</strong>' .$row['plaatsen'] .'<br/><strong>Type reis: </strong>' .$row['type'] .'<br/><br/>'.$row ['omschrijving'] .'<br/>';
echo '<center>' .$row['route'].'</center><br/>';
echo $row['inclusief'].'<br/><br/></td></tr>';
echo '<tr> <td colspan="2" align="center" >' .$row['prijstabel'].'<br/><br/><center>'.$row['extra'].'</center><br/>'.'</td> </tr></table></div> </div><br/>';
echo '<br/><center> * * *</center> </br></br>';
} ?>
</span></p>
</strong></p>
<?php } while ($row_accos = mysql_fetch_assoc($result_rondreizen)); ?>
<p align="center"><a href="<?php printf("%s?pageNum_accos=%d%s", $currentPage, max(0, $pageNum_accos - 1), $queryString_accos); ?>"><strong><<<<</strong></a> Accommodaties <?php echo ($startRow_accos + 1) ?>-<?php echo min($startRow_accos + $maxRows_accos, $totalRows_accos) ?> van totaal <?php echo $totalRows_accos ?> <a href="<?php printf("%s?pageNum_accos=%d%s", $currentPage, min($totalPages_accos, $pageNum_accos + 1), $queryString_accos); ?>"><strong>>>>></strong></a></p>
</div>
<div id="footer">|| <a href="http://www.estero-travel.com/nl/Imprint.php">Imprint</a> ||<a href="http://www.estero-travel.com/nl/Privacyverklaring.php" > Privacyverklaring </a>||<a href="http://www.estero-travel.com/nl/Veelgesteldevragen.php"> Veelgestelde vragen </a>|| <a href="http://www.estero-travel.com/nl/Algemenevoorwaarden.php">Algemene voorwaarden </a>||<a href="http://www.estero-travel.com/nl/links-partners.php"> Partner & links </a>||<a href="http://validator.w3.org/check?uri=referer" target="_blank"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" width="88" height="31" border="0" align="bottom" /></a> <br />
<span class="design"><a href="mailto:dullaart1@gmail.com">« © Webdesign by J.Dullaart »</a></span></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
</script>
</body>
</html>//
// 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.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;
this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN;
this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP;
Spry.Widget.CollapsiblePanel.setOptions(this, opts);
this.attachBehaviors();
};
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(e)
{
this.addClassName(this.getTab(), this.hoverClass);
return false;
};
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
{
this.removeClassName(this.getTab(), this.hoverClass);
return false;
};
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, { duration: this.duration, fps: this.fps, transition: this.transition });
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, { duration: this.duration, fps: this.fps, transition: this.transition });
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(e)
{
if (this.isOpen())
this.close();
else
this.open();
this.focus();
return this.stopPropagation(e);
};
Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
{
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
{
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.CollapsiblePanel.KEY_UP = 38;
Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
{
var key = e.keyCode;
if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
return true;
if (this.isOpen() && key == this.closePanelKeyCode)
this.close();
else if ( key == this.openPanelKeyCode)
this.open();
return this.stopPropagation(e);
};
Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e)
{
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
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(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, 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.addClassName(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.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;
this.onComplete = null;
this.panel = panel;
this.content = panel.getContent();
this.doOpen = doOpen;
Spry.Widget.CollapsiblePanel.setOptions(this, opts, true);
this.interval = Math.floor(1000 / this.fps);
var c = this.content;
var curHeight = c.offsetHeight ? c.offsetHeight : 0;
this.fromHeight = (doOpen && c.style.display == "none") ? 0 : 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";
}
// 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;
}
this.distance = this.toHeight - this.fromHeight;
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.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()
{
var self = this;
this.startTime = (new Date).getTime();
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 property.
this.content.style.overflow = this.overflow;
}
this.timer = null;
};
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
{
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
if (elapsedTime >= this.duration)
{
if (!this.doOpen)
this.content.style.display = "none";
this.content.style.overflow = this.overflow;
this.content.style.height = this.toHeight + "px";
if (this.onComplete)
this.onComplete();
return;
}
var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);
this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
Spry.Widget.CollapsiblePanelGroup = function(element, opts)
{
this.element = this.getElement(element);
this.opts = opts;
this.attachBehaviors();
};
Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions;
Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement;
Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren;
Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget)
{
if (!element || !widget)
return;
if (!element.spry)
element.spry = new Object;
element.spry.collapsiblePanel = widget;
};
Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element)
{
return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null;
};
Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function()
{
if (!this.element)
return [];
return this.getElementChildren(this.element);
};
Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex)
{
return this.getPanels()[panelIndex];
};
Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function()
{
if (!this.element)
return;
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
{
var cpanel = cpanels;
this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts));
}
};
Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex)
{
var w = this.getElementWidget(this.getPanel(panelIndex));
if (w && !w.isOpen())
w.open();
};
Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex)
{
var w = this.getElementWidget(this.getPanel(panelIndex));
if (w && w.isOpen())
w.close();
};
Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function()
{
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
{
var w = this.getElementWidget(cpanels);
if (w && !w.isOpen())
w.open();
}
};
Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function()
{
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
{
var w = this.getElementWidget(cpanels);
if (w && w.isOpen())
w.close();
}
};
[/JS]
