0

I managed to get the appending of the hash tag to the URL depending on the ID, however, it is not properly hiding/showing the DIVs within IE8. Also, I noticed that the part of the jQUery that adds the .selected class is not functioning properly. Any change someone can lend me some expertise? It works perfectly fine in Chrome/Firefox/Safari, but, the dreaded IE is being a stubborn mule!

Thanks ahead of time!

P.S. - I used the method outlined here: jqueryfordesigners.com/enabling-the-back-button/

Here is the code I'm using as well:

    jQuery(window).load(function () {
        var selectCont = jQuery('.selectCont > div');
        selectCont.hide().filter(':first').show();

        jQuery(window).bind('hashchange', function () {
        var hash = window.location.hash || '#clinicalfaculty';

        selectCont.hide();
        selectCont.filter(hash).show();
            e.preventDefault();

        jQuery('#selectBtn ul.btnNav a').removeClass('selected');
        jQuery('a[hash=' + hash + ']').addClass('selected');
        });
    jQuery(window).trigger('hashchange');
    });

@Dan Puzey --

Sorry about that! I'm new to stackoverflow.

The base code that I'm working with can be found here: massgeneral.org/emergencymedicine/ourdoctors/EM-Listing.htm

The ID(s) that I'm depending on are: #clinicalfaculty, #researchfaculty and #fellows which can be found on lines 34-36 of the HTML I just referred. When a user clicks one of the buttons (with the IDs), the JavaScript hides the other two DIVs associated with the IDs and shows the ID which the user clicked. At the same time, the hashtag with the ID name is appended to the user for "Back" capabilities. As you can see, within Firefox, it works exactly the way it should. However, when you load it within IE8, it does not properly work.

In terms of the .selected, I wanted to be able to have the class .selected apply to the button that is clicked to apply a custom style to visual notify the user that the button is the selected and the content associated with that button is currently being displayed. However, .selected is not properly being added as a class. I'm not exactly sure why either.

My initial jQuery I wrote to operate the filtering properly is below. However, it did not append the # hashtag and did not support the usage of the "Back" button.

var index = 0, hash = window.location.hash;
    jQuery(window).load(function(){
        jQuery('#selectBtn a').click(function(e) {
        jQuery('.selectCont > div').hide();
        jQuery(this.hash).show();
            e.preventDefault(); //to prevent scrolling
    });
});

Reference Link

Asciiom
  • 9,867
  • 7
  • 38
  • 57
Joey O
  • 315
  • 2
  • 17
  • Your question is lacking the detail that would help readers unfamiliar with your system to understand it. Which ID are you depending on? What hash tag are you adding? In what way is your `.selected` class not functioning? It seems that you have more than one question, and I can't tell from what you've posted exactly what the problems are. Try to explain your question without the reference link: if we have to spend 5 minutes playing with your webpage to work out what the question is, you won't get any answers. – Dan Puzey Sep 20 '12 at 14:42
  • Dan, I just replied to your questions in the original post. Please let me know if you have further questions! – Joey O Sep 20 '12 at 15:49

2 Answers2

0

I'm not 100% sure you'll want to move to this after writing so much of your own code already, but History.js does all of this for you, and is cross-browser compatible, it's an amazing library for what you're trying to achieve as it's a full JavaScript state handling library.

http://balupton.github.com/history.js/demo/

Chris Dixon
  • 9,147
  • 5
  • 36
  • 68
  • I can explore this in the future, however, is there anyway to quickly fix the issue I'm having in my current setup in IE? I can attempt to implement this in the future for sure! Thanks for the suggestion! – Joey O Sep 20 '12 at 16:07
0

Not sure if this is the fix but it appears that you've forgotten to pass the event argument into the haschange function. Change the signature to this.

jQuery(window).bind('hashchange', function (e) { ... });
Sam R
  • 415
  • 3
  • 10
  • This seems to have worked at removing the filtering issue. Any idea what is happening with the .selected not being passed into the HTML properly? – Joey O Sep 20 '12 at 17:37
  • hash isn't the right attribute selector. After looking through your code it looks like the proper attribute is href. – Sam R Sep 20 '12 at 17:53
  • Thanks! That fixed my .selected issue as well! – Joey O Sep 20 '12 at 19:10