SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help debugging Javascript in IE9

    I have this code that basically toggles a window to open and close from the top, in IE9 it simply refuses to open. Works across other browsers fine.

    Code:
    <script>
    var $root = $('html, body');
    $('a').click(function() {
        var href = $.attr(this, '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>
    I'm using simple link to toggle open and close like so:
    HTML Code:
    <a href="#" class="toggle">Open</a>
    When using IE develop tools IE generates this error "Unable to get value of the property 'top' : object is null or undefined"

    Then it shows the possible area of where the error is occuring:

    Code:
     $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
    Does anybody know whats going on here?

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah, nevermind, I did mis-read your code. Lemme look some more, I do this vanilla only.

    I tend to get the destination like this
    $('a').click(function() {
    var link = this.href; // may be slightly different per browser but we only care about the hash, right?
    var destination = document.getElementById(link.hash.substr(1));

    now destination points to an element with #theID, if it exists.


    Okay no, I still don't see how
    scrollTop: $(href).offset().top
    can work in other browsers: href is an attribute, you set $(href) to the attribute, not some-element-whose-ID-matches-the-hash-of-the-attribute, and an attribute can't have an offset().top right? Are we supposed to scroll to the position of $(this) (the anchor) instead?

    But the whole scrolling thing confuses me since this is a toggle opening/closing something and not a link clicked to scroll to a destination.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •