Jquery Debugging issues with
I have this jquery script/plugin and what it does it two things. It allows scrolling to the link on the page, instead of jumping there, and it opens and closes (toggles) a slider box from the top to reveal some more html.
-
<script> |
|
var $root = $('html, body'); |
|
$('a').click(function() { |
|
var href = $(this).attr('href'); |
|
$root.animate({ |
|
scrollTop: $(href).offset().top |
|
}, 500, function () { |
|
window.location.hash = href; |
|
}); |
|
return false; |
|
}); |
|
// yeah let's do vanilla JS just for fun :P |
|
|
|
var toggle = document.getElementsByClassName('toggle'); |
|
var slider = document.querySelector('.slider'); |
|
|
|
for(var i = 0; i < toggle.length; i++) { |
|
toggle[i].addEventListener('click', toggleSlider, false); |
|
} |
|
|
|
function toggleSlider(){ |
|
if (slider.classList.contains('opened')) { |
|
slider.classList.remove('opened'); |
|
slider.classList.add('closed'); |
|
} else { |
|
slider.classList.remove('closed'); |
|
slider.classList.add('opened'); |
|
} |
|
} |
|
</script> |
and here is html that triggers different events.
This one triggers the toggle of the slider:
- <a href="#venue" class="toggle">Venue</a>
This one allows for jumping on the page:
- <a href="#designers">Designers</a>
- <a id="designers" class="hidden-nav">Designers</a>
I have been fighting all kinds of conflicts and issues with this script. Although there is a bug, the script works fine in all browsers except for IE9 and below. Firebug gives me several issues:
I get this warning when triggering page scrolling:
body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.
I get this error when toggling slider:
- Uncaught TypeError: Cannot read property 'top' of undefined (index):131
-
-
-
r.handle
Any ideas how I can fix this?