Modify transition style to fade instead of drop-up/down

The Option Force TopBar to Be Fixed On Top of Page, when set to YES, will push the page down. To Overlay and not push down the page, set that to NO and update the CSS for CSS Option C per the instructions on that page:

Use this CSS to fix the TopBar to the top of the page and OVERLAY the contents of the page:

position:fixed; top: 40; padding:0; margin:0; width: 100%; z-index: 99999;

Bob

Thank you Bob:

However, that does not solve the problem because under your suggestion above, the top of my site gets covered by the topbar. Here is what I am hoping can be done.

All I want to do is change the method of transition between the different topbars. Currently it uses a slide down/slide up transition style. I would like to have it use a fade-in/fade-out style instead.

Is there no way to have the topbar:

1. Fixed at the top of the page;
2. Not cover content; and
3. Fade-In/Fade-Out instead of slide-down/slide-up.

looking at the wp-topbar.php file, I found the following:

function wptbbar_show".$wptbTopBarNumber."() {
	if(wptbshow_open_button".$wptbTopBarNumber.") {
	  jQuery('.wptbbar-stub".$wptbTopBarNumber."').slideUp('fast', function() {";

	 $html_out .= "
	  	jQuery('.wptbbar".$wptbTopBarNumber."').slideDown(".$wptbOptions['slide_time'];

If I change the .slideUp and .slideDown to .fadeIn and .fadeOut will that provide me with the preferred end result?

The code you reference above is for opening up a TopBar that has a closed button.

For your request, the plugin would need some modifications:

1. Update Global Options page to allow user to select rotating TopBar transition method (or to allow you to enter your own.)
2. Figure out a way to push the page down for the first TopBar (otherwise, as you note, the Top of your page is overlaid.)
3. Modify all the various javascript functions to use the custom transition method selected by the user
4. Also need to add code to calculate the largest height of all of TopBars. Otherwise, if TopBars have different heights, the webpage will joggle up and down as they fade in/out. Then for any TopBar that is shorter than the tallest, need to add padding to make it the same height as the tallest TopBar.
5. Test, Test, Test to make sure it works and does not break any existing functionality.

I test another option on one of my sites and this works. You can try this:

1. Modify your theme’s CSS to have a blank space at the Top of the page that is equivalent to your tallest TopBar. The site I tested this had a Navigation Menu at the very top. I only had to add a top margin padding to .nav-primary. This then pushed down the entire page when it was loaded and made room for my TopBars.
2. Set “Force TopBar to be Fixed” to be NO for ALL TopBars.
3. Add “position:fixed; top: 40; etc etc etc” to the CSS Option C for All TopBars.

I can put the plugin modification option on the feature backlog for a future release.

Bob

Yes Bob, I noticed my error in the code I posted soon after my posting. It also appears that the .fadeIn and .fadeOut jQuery commands have issues of their own in that each “fade” results in the removal of the div completely and will still result in a “shifting” of the site. I need more of a fade TO, not in/out.

It also was suggested on the jQuery site that I use the .animate command. I will try and figure this out. If you have any ideas, I would gladly give you access to the site and the pages I am using your plugin (site currently locked while in development) take any jQuery help I can get.

Thank you Bob, I only wish other plugin authors would give as much attention to their work as you have. Thank you so much.

If you care to leave this thread open a few days, I will try various things and report here on the results for the benefit of other users.

Bob:

Yeah, I noticed that about the code I posted being that while using the open/close button.

Apparently also, according to my research, the .fadeIn and .fadeOut commands will also cause the site to “shift up/down” as that command completely removes/add the div each time it is processed.

It was suggested I use the .animate feature to add/remove opacity. I don’t know much about jQuery, so any help is appreciated. I am developing a replacement site, so it’s currently behind the “under construction” page, but can make available if needed.

Anyway, I appreciate the prompt response, a thing “of old” with plugin authors of of late.

If you care to leave this thread open for about a week, I will try various things and report here for other who may want the same desired result.

Thanks again.

Closed – per request.