Skip to:
Content
Pages
Categories
Search
Top
Bottom

Transition Effects on Activity/Member/Home

  • Avatar of lflier
    lflier
    Participant

    @lflier

    While working on my own site, I noticed that the activity and members pages have a nice (jquery?) transition effect that crossfades the activity stream (or member list) whenever a new nav item is selected. This has the desirable effect of making the site feel solid and smooth. The transition is accompanied by a spinning icon on the active tab, which lets me know that something is happening in the background and that the page will refresh presently.

    I thought perhaps that this transition was caused by something my own theme was doing (StudioPress Genesis Minimum Pro), but crossing over to the BuddyPress Default Theme on a separate installation of WordPress, I observed the same thing. It appears, then, that this is a BuddyPress function, and a very nice one, at that.

    So far, so good. My second observation, though, is that this effect is not consistent across BuddyPress. On the Activity and Members pages, the transitions are as described above. But on the Home page, the transitions appear to be unmanaged. They are sudden and have the feeling of being more ragged, and there is no spinning icon, either. This behavior is consistent across both of the themes I tested.

    Questions:

    1. Am I seeing things that aren’t there, not seeing things that are there (or otherwise being too fussy)?
    2. If I am not seeing things, is this behavior an artifact of my own installation(s) or is it an issue with BuddyPress? I am using BP 1.8.1 with WP 3.6.1. My browser is the latest version of Chrome on OSX Mountain Lion and I made my observations on MAMP development sites (although my live site seems to behave the same way).
    3. If this is a real issue and not just an artifact of my installation, is there a way to extend the smooth transitions to the home page?

    Your thoughts on any or all of these questions will be very much appreciated.

    LF

Viewing 5 replies - 1 through 5 (of 5 total)
  • Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    when you say front page what do you mean?

    Avatar of Henry
    Henry
    Participant

    @henrywright-1

    1: There is some inconsistency, yes.

    2: It isn’t specific to your installation. bp-default implements the transition effects (see global.js) in certain but not all places

    3: bp-default, whilst a fantastic theme in my opinion, has come to the end of it’s life and will be retired in 1.9 (currently in beta). Look out for the brand new and improved template currently slated for BP 2.0

    Hope this info helps!

    Avatar of lflier
    lflier
    Participant

    @lflier

    Sorry Modemlooper if I wasn’t clear on what I mean by “home page.” I’m new at this game. What I mean is the page with the URI that starts with root/members/username/… . This is the page that shows the user’s activity, profile, messages, friends, groups, forums, and settings. This is the page that appears to lack the transition effects of the other pages (root/activity) and (root/members).

    Thank you Henry for your confirmation of my observations. Common sense tells me to wait for BP 2.0. But curiosity drives me to try to figure this out. I found the following script in buddypress.js (my own application uses the legacy theme):

    	/**** Tabs and Filters ****************************************************/
    
    	/* When a navigation tab is clicked - e.g. | All Groups | My Groups | */
    	jq('div.item-list-tabs').on( 'click', function(event) {
    		if ( jq(this).hasClass('no-ajax') )
    			return;
    
    		var targetElem = ( event.target.nodeName == 'SPAN' ) ? event.target.parentNode : event.target;
    		var target     = jq( targetElem ).parent();
    		if ( 'LI' == target[0].nodeName && !target.hasClass( 'last' ) ) {
    			var css_id = target.attr('id').split( '-' );
    			var object = css_id[0];
    
    			if ( 'activity' == object )
    				return false;
    
    			var scope = css_id[1];
    			var filter = jq("#" + object + "-order-select select").val();
    			var search_terms = jq("#" + object + "_search").val();
    
    			bp_filter_request( object, filter, scope, 'div.' + object, search_terms, 1, jq.cookie('bp-' + object + '-extras') );
    
    			return false;
    		}
    	});

    The conditional statement that checks whether the division has the “no-ajax” class is apparently meant to catch the nav for what I am calling the home page, which has this class attached to it. Merely commenting out those lines results in a non-functional nav (clicking does nothing), so the decision to treat that page differently in the code is surely not arbitrary. There must be some reason for it. What would it be? That there is no ajax on this page?

    Avatar of Henry
    Henry
    Participant

    @henrywright-1

    if ( jq(this).hasClass('no-ajax') )
        return;

    Without looking at buddypress.js, I’m 99.63% sure this tells the script to return (stop executing the function) if a particular page element has class ‘no-ajax’. If the purpose of the function is just to add transition effects then you could add the no-ajax class to the page element to stop the transition effects from happening.

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    no-ajax is for disabling ajax. The profile pages never had the ajax refresh affects on tabs

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.