Fossil SCM

Replaced the "hasOwnProperty" test for CSS transition support in the animated hamburger menu JS code with a better test that not only works on old IE but also on some truly ancient versions of SeaMonkey, Firefox, Chrome, etc.

wyoung 2018-09-21 01:52 trunk
Commit ee074372e834aa71dc9b4f3ade369d45b908269d98c88b7da079ea3c04964947
1 file changed +5 -6
--- skins/default/js.txt
+++ skins/default/js.txt
@@ -18,20 +18,19 @@
1818
** menu button.
1919
*/
2020
(function() {
2121
var panel = document.getElementById("hbdrop");
2222
if (!panel) return; // site admin might've nuked it
23
+ if (!panel.style) return; // shouldn't happen, but be sure
2324
var panelBorder = panel.style.border;
2425
2526
// Disable animation if this browser doesn't support CSS transitions.
2627
//
27
- // We need this ugly calling form for IE < 9 since it doesn't give you
28
- // a true Object for host-provided values such as 'panel'. That is,
29
- // panel.style.hasOwnProperty() doesn't exist on IE8! Since the whole
30
- // point of this test is to allow the code below to run without a JS
31
- // error on deficient browsers, we can't just ignore this problem.
32
- var animate = Object.prototype.hasOwnProperty.call(panel.style, 'transition');
28
+ // We need this ugly calling form for old browsers that don't allow
29
+ // panel.style.hasOwnProperty('transition'); catering to old browsers
30
+ // is the whole point here.
31
+ var animate = panel.style.transition !== null && (typeof(panel.style.transition) == "string");
3332
var animMS = 400;
3433
3534
// Calculate panel height despite its being hidden at call time.
3635
// Based on https://stackoverflow.com/a/29047447/142454
3736
var panelHeight; // computed on sitemap load
3837
--- skins/default/js.txt
+++ skins/default/js.txt
@@ -18,20 +18,19 @@
18 ** menu button.
19 */
20 (function() {
21 var panel = document.getElementById("hbdrop");
22 if (!panel) return; // site admin might've nuked it
 
23 var panelBorder = panel.style.border;
24
25 // Disable animation if this browser doesn't support CSS transitions.
26 //
27 // We need this ugly calling form for IE < 9 since it doesn't give you
28 // a true Object for host-provided values such as 'panel'. That is,
29 // panel.style.hasOwnProperty() doesn't exist on IE8! Since the whole
30 // point of this test is to allow the code below to run without a JS
31 // error on deficient browsers, we can't just ignore this problem.
32 var animate = Object.prototype.hasOwnProperty.call(panel.style, 'transition');
33 var animMS = 400;
34
35 // Calculate panel height despite its being hidden at call time.
36 // Based on https://stackoverflow.com/a/29047447/142454
37 var panelHeight; // computed on sitemap load
38
--- skins/default/js.txt
+++ skins/default/js.txt
@@ -18,20 +18,19 @@
18 ** menu button.
19 */
20 (function() {
21 var panel = document.getElementById("hbdrop");
22 if (!panel) return; // site admin might've nuked it
23 if (!panel.style) return; // shouldn't happen, but be sure
24 var panelBorder = panel.style.border;
25
26 // Disable animation if this browser doesn't support CSS transitions.
27 //
28 // We need this ugly calling form for old browsers that don't allow
29 // panel.style.hasOwnProperty('transition'); catering to old browsers
30 // is the whole point here.
31 var animate = panel.style.transition !== null && (typeof(panel.style.transition) == "string");
 
 
32 var animMS = 400;
33
34 // Calculate panel height despite its being hidden at call time.
35 // Based on https://stackoverflow.com/a/29047447/142454
36 var panelHeight; // computed on sitemap load
37

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button