author | Dan |
Sat, 06 Oct 2007 20:36:40 -0400 | |
changeset 166 | d53cc29308f4 |
parent 57 | b354deeaa4c4 |
child 362 | 02d315d1cc58 |
permissions | -rw-r--r-- |
1 | 1 |
// Sliding drawers on the sidebar |
2 |
||
3 |
// our global vars |
|
4 |
// the delay between the slide in/out, and a little inertia |
|
5 |
||
6 |
var sliders_initted = false; |
|
7 |
||
8 |
function initSliders() |
|
9 |
{ |
|
10 |
sliders_initted = true; |
|
57
b354deeaa4c4
Vastly improved compatibility with older versions of IE, particularly 5.0, through the use of a kill switch that turns off all AJAX functions
Dan
parents:
1
diff
changeset
|
11 |
if ( KILL_SWITCH ) |
b354deeaa4c4
Vastly improved compatibility with older versions of IE, particularly 5.0, through the use of a kill switch that turns off all AJAX functions
Dan
parents:
1
diff
changeset
|
12 |
return false; |
1 | 13 |
// detect whether the user has ie or not, how we get the height is different |
14 |
var useragent = navigator.userAgent.toLowerCase(); |
|
15 |
var ie = ((useragent.indexOf('msie') != -1) && (useragent.indexOf('opera') == -1) && (useragent.indexOf('webtv') == -1)); |
|
16 |
||
17 |
if(ie) |
|
18 |
return; |
|
19 |
||
20 |
var divs = getElementsByClassName(document, "div", "slideblock"); |
|
21 |
||
22 |
for(var i=0; i<divs.length; i++) |
|
23 |
{ |
|
24 |
// set a unique id for this slider |
|
25 |
divs[i].metaid = i; |
|
26 |
||
27 |
// get the original height |
|
28 |
var baseheight = (ie) ? divs[i].offsetHeight + "px" : document.defaultView.getComputedStyle(divs[i], null).getPropertyValue('height', null); |
|
29 |
||
30 |
// use cookies to toggle whether to display it or not |
|
31 |
var id = ( divs[i].parentNode.firstChild.nextSibling ) ? divs[i].parentNode.firstChild.nextSibling.firstChild : divs[i].parentNode.parentNode.firstChild.nextSibling.firstChild; |
|
32 |
||
33 |
if(id.innerHTML || id.nextSibling.length < 1) id = id.innerHTML; |
|
34 |
else id = id.nextSibling.innerHTML; // Gecko fix |
|
35 |
||
36 |
var cookieName = 'mdgSliderState_'+i; // id.replace(' ', '_'); |
|
37 |
//alert(cookieName + ': ' + readCookie(cookieName)); |
|
38 |
if(readCookie(cookieName)=='closed') |
|
39 |
{ |
|
40 |
divs[i].style.display = "none"; |
|
41 |
} |
|
42 |
else |
|
43 |
{ |
|
44 |
divs[i].style.display = "block"; |
|
45 |
} |
|
46 |
||
47 |
// "save" our div height, because once it's display is set to none we can't get the original height again |
|
48 |
var d = new div(); |
|
49 |
d.el = divs[i]; |
|
50 |
d.ht = baseheight.substring(0, baseheight.indexOf("p")); |
|
51 |
||
52 |
// store our saved version |
|
53 |
divheights[i] = d; |
|
54 |
} |
|
55 |
} |
|
56 |
||
57 |
// this is one of our divs, it just has a DOM reference to the element and the original height |
|
58 |
function div(_el, _ht) |
|
59 |
{ |
|
60 |
this.el = _el; |
|
61 |
this.ht = _ht; |
|
62 |
} |
|
63 |
||
64 |
function toggle(t) |
|
65 |
{ |
|
66 |
if(IE) |
|
67 |
return false; |
|
57
b354deeaa4c4
Vastly improved compatibility with older versions of IE, particularly 5.0, through the use of a kill switch that turns off all AJAX functions
Dan
parents:
1
diff
changeset
|
68 |
if ( KILL_SWITCH ) |
b354deeaa4c4
Vastly improved compatibility with older versions of IE, particularly 5.0, through the use of a kill switch that turns off all AJAX functions
Dan
parents:
1
diff
changeset
|
69 |
return false; |
1 | 70 |
if ( !sliders_initted ) |
71 |
initSliders(); |
|
72 |
// reset our inertia base and interval |
|
73 |
inertiabase = inertiabaseoriginal; |
|
74 |
clearInterval(slideinterval); |
|
75 |
||
76 |
// get our block |
|
77 |
block = t.parentNode.nextSibling; |
|
78 |
||
79 |
// for mozilla, it doesn't like whitespace between elements |
|
80 |
if(block.className == undefined) |
|
81 |
block = t.parentNode.nextSibling.nextSibling; |
|
82 |
||
83 |
if(block.style.display == "none") |
|
84 |
{ |
|
85 |
block.style.display = "block"; |
|
86 |
block.style.height = "1px"; |
|
87 |
||
88 |
// our goal and current height |
|
89 |
targetheight = divheight(block); |
|
90 |
heightnow = 1; |
|
91 |
||
92 |
// remember toggled state |
|
93 |
cookieName = 'mdgSliderState_'+block.metaid; // t.innerHTML.replace(' ', '_'); |
|
94 |
createCookie(cookieName, 'open', 3650); |
|
95 |
||
96 |
// our interval |
|
97 |
slideinterval = setInterval(slideout, slideintervalinc); |
|
98 |
} |
|
99 |
else |
|
100 |
{ |
|
101 |
// our goal and current height |
|
102 |
targetheight = 1; |
|
103 |
heightnow = divheight(block); |
|
104 |
||
105 |
// remember toggled state |
|
106 |
cookieName = 'mdgSliderState_'+block.metaid; // t.innerHTML.replace(' ', '_'); |
|
107 |
createCookie(cookieName, 'closed', 3650); |
|
108 |
||
109 |
// our interval |
|
110 |
slideinterval = setInterval(slidein, slideintervalinc); |
|
111 |
} |
|
112 |
} |
|
113 |
||
114 |
// this is our slidein function the interval uses, it keeps subtracting |
|
115 |
// from the height till it's 1px then it hides it |
|
116 |
function slidein() |
|
117 |
{ |
|
118 |
if(heightnow > targetheight) |
|
119 |
{ |
|
120 |
// reduce the height by intertiabase * inertiainc |
|
121 |
heightnow -= inertiabase; |
|
122 |
||
123 |
// increase the intertiabase by the amount to keep it changing |
|
124 |
inertiabase += inertiainc; |
|
125 |
||
126 |
// it's possible to exceed the height we want so we use a ternary - (condition) ? when true : when false; |
|
127 |
block.style.height = (heightnow > 1) ? heightnow + "px" : targetheight + "px"; |
|
128 |
} |
|
129 |
else |
|
130 |
{ |
|
131 |
// finished, so hide the div properly and kill the interval |
|
132 |
clearInterval(slideinterval); |
|
133 |
block.style.display = "none"; |
|
134 |
} |
|
135 |
} |
|
136 |
||
137 |
// this is the function our slideout interval uses, it keeps adding |
|
138 |
// to the height till it's fully displayed |
|
139 |
function slideout() |
|
140 |
{ |
|
141 |
block.style.display = 'block'; |
|
142 |
if(heightnow < targetheight) |
|
143 |
{ |
|
144 |
// increases the height by the inertia stuff |
|
145 |
heightnow += inertiabase; |
|
146 |
||
147 |
// increase the inertia stuff |
|
148 |
inertiabase += inertiainc; |
|
149 |
||
150 |
// it's possible to exceed the height we want so we use a ternary - (condition) ? when true : when false; |
|
151 |
block.style.height = (heightnow < targetheight) ? heightnow + "px" : targetheight + "px"; |
|
152 |
||
153 |
} |
|
154 |
else |
|
155 |
{ |
|
156 |
// finished, so make sure the height is what it's meant to be (inertia can make it off a little) |
|
157 |
// then kill the interval |
|
158 |
clearInterval(slideinterval); |
|
159 |
block.style.height = targetheight + "px"; |
|
160 |
} |
|
161 |
} |
|
162 |
||
163 |
// returns the height of the div from our array of such things |
|
164 |
function divheight(d) |
|
165 |
{ |
|
166 |
for(var i=0; i<divheights.length; i++) |
|
167 |
{ |
|
168 |
if(divheights[i].el == d) |
|
169 |
{ |
|
170 |
return divheights[i].ht; |
|
171 |
} |
|
172 |
} |
|
173 |
} |
|
174 |
||
175 |
/* |
|
176 |
the getElementsByClassName function I pilfered from this guy. It's |
|
177 |
a useful function that'll return any/all tags with a specific css class. |
|
178 |
||
179 |
Written by Jonathan Snook, http://www.snook.ca/jonathan |
|
180 |
Add-ons by Robert Nyman, http://www.robertnyman.com |
|
181 |
||
182 |
Modified to match all elements that match the class name plus an integer after the name |
|
183 |
This is used in Enano to allow sliding sidebar widgets that use their own CSS |
|
184 |
*/ |
|
185 |
function getElementsByClassName(oElm, strTagName, strClassName) |
|
186 |
{ |
|
187 |
// first it gets all of the specified tags |
|
188 |
var arrElements = (strTagName == "*" && document.all) ? document.all : oElm.getElementsByTagName(strTagName); |
|
189 |
||
190 |
// then it sets up an array that'll hold the results |
|
191 |
var arrReturnElements = new Array(); |
|
192 |
||
193 |
// some regex stuff you don't need to worry about |
|
194 |
strClassName = strClassName.replace(/\-/g, "\\-"); |
|
195 |
||
196 |
var oRegExp = new RegExp("(^|\\s)" + strClassName + "([0-9]*)(\\s|$)"); |
|
197 |
var oElement; |
|
198 |
||
199 |
// now it iterates through the elements it grabbed above |
|
200 |
for(var i=0; i<arrElements.length; i++) |
|
201 |
{ |
|
202 |
oElement = arrElements[i]; |
|
203 |
||
204 |
// if the class matches what we're looking for it ads to the results array |
|
205 |
if(oElement.className.match(oRegExp)) |
|
206 |
{ |
|
207 |
arrReturnElements.push(oElement); |
|
208 |
} |
|
209 |
} |
|
210 |
||
211 |
// then it kicks the results back to us |
|
212 |
return (arrReturnElements) |
|
213 |
} |
|
214 |