[jQuery] Problem executing functions based on class (making Google Reader-like interface)

[jQuery] Problem executing functions based on class (making Google Reader-like interface)


With a little downtime and an interest in learning jQuery... I decided
to build a light version of Google Reader's interface (works/only
tested in Firefox). It's day 4 and I'm getting close, but I seem to
have a problem thats preventing me from moving forward.
Project Location: http://www.rwbaker.com/resources/threadreader/
On $(document).ready I'm reading a cookie to determine your "View
State" (expanded or list), defaulting to the List view. I have a
button click and hover state that are dependent on the "View" you're
in.
My problem is after the "View" is set on page load, the functions only
operate based on that originally view state from page load -- no
matter what I change the view to there-after.
To reproduce problem:
On page load (assuming you have no preference set in the cookie) in
the "List View" -- div#wrapper now has a class of .list. At this
point my "Expanded View Actions" do not and should not fire (will put
a 2px purple border around the thread your 'reading'). However, if I
switch to the "Expanded View" the hovers (hover is on the white divs
w/ 'Lorem ipsum') don't work either (but they should). Now refresh
the page, on page load we read the cookie and load in "Expanded View"
automatically -- and the hover now works. However, switch back to
"List View" and the hover still works on the collapsed threads -- but
it shouldn't be.
I also have the same issue with the title (h2) click -- should only
work in "List View."
I'm sure this is something fairly simple, perhaps I'm not tracking my
classes right or not covering my tracks, but so far it just haven't
found it.
Any thoughts?
Project page: http://www.rwbaker.com/resources/threadreader/
Project javascript: http://www.rwbaker.com/resources/threadreader/javascript/actions.js
Example code:
//Get cookie
var _viewState = jQuery.cookie('viewState'); //get cookie
$(document).ready(function(){
/*Initialization
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*/
    //Check cookie
    if ( _viewState == null ) { //if empty
        _viewState = $.cookie("viewState","list"); //default to List view
    };
    //Set view state
    $("div#wrapper").changeView(_viewState);
    ...
    /*EXPANDED VIEW Actions
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*/
    $(".exp .thread").hover(
        function() {
            var obj=this;
            $(this).not("read").addClass("reading").removeClass("new");
            $(this).not("new").addClass("reading").removeClass("read");
        },
        function() {
            $(this).addClass("read").removeClass("reading");
        }
    );
    ...
});
//Sets Expanded / List view; calls setActive -- HAS DEBUG
jQuery.fn.changeView = function(newView) {
        var obj = this
        //Set state
        $(obj).attr("class",newView);
        _viewState = $.cookie("viewState",newView);
        //Set thread style based on view state
        $(".list .thread").addClass("collapsed").removeClass("expanded");
        $(".exp .thread").addClass("expanded").removeClass("collapsed");
        //Set tab state
        $(obj).not(".exp").parent().find("span#list-view").setActive();
        $(obj).not(".list").parent().find("span#expanded-view").setActive();
        return this;
};










































































    • Topic Participants

    • rich