Posted by jim_at_miramontes on December 6, 2011 at 1:00am
4 followers
| Project: | Drupal for Facebook |
| Version: | 6.x-3.x-dev |
| Component: | User interface |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
| Issue tags: | get involved |
Issue Summary
Is it possible to hide/disable the "zebra bar" indicator that comes up at the top of the browser window when a session_change is happening? It's pretty handy during development, but I'm not sure the flashes and page tweaking it does are the right thing for production. I don't see(?) any config options for it, and looking through the fb module (and childrens') code didn't turn up anything.
Comments
#1
It is drupal's zebra bar. I'm sure it could be hidden via css, or javascript. It's a little hacky I admit, but I thought better to give some kind of feedback, and I didn't bother to figure out how to make a spinning wheel appear in the middle of the page.
The code is in fb.js...
// Feedback that entire page may be reloading.
// @TODO improve the appearance of this, make it customizable.
jQuery('body').prepend('<div id="fb_js_pb" class="progress"><div class="bar"><div class="filled"></div></div></div>');
As the TODO indicates, it could use some work. Would love to see patches from people who really know how to do this sort of thing.
#2
Thanks much. Giving the div's ID a display: none style hides it nicely.
#3
Hello everyone... hope it's okay i posted a comment inside this thread instead of opening a new one. i saw this one is still active. i have a similar problem - i want to hide the progress bar, yet when i tried to put -
#fb_js_pb {display:none;
}
in fb_theme.css and in my theme's (Zen) pages.css file (not at the same time of course), it didn't do the trick, and the progress bar kept showing up. it's very strange, as it supposed to be a simple css attribute. i tried to make sure it's not a theme registry problem by enabling the "Rebuild theme registry on every page" option but the problem remains. anyone have any idea why this is happening? any idea's on other method's of removing \ hiding the progress bar?
thanks a lot!
#4
in recent versions, fb.js does not just add a bar to the top of the screen, it attempts this effect on connect buttons and other facebook-related portions of the page.
Try a style like
#fb_js_pb,.progress .bar .fb_connected,
.progress .bar .fb_not_connected
{
display:none;
}
(I haven't tested that, and might have the classes in the wrong order. Try it and see.)
I'm open to patches that make this easier to customize or improve the effect. I just want some feedback that the page is reloading by default, because in some cases that is slow.
#5
Thanks again for your help! i admire the work you've done and the effort's you make so all of us could enjoy this module and get the best of it.
i tried getting it done with plain CSS
display:none;as you suggested, but for some reason i couldn't get the p-bar to hide itself. so, unable to hide it, i had to go an extra mile and do a little hack that ease the use of custom loading animations... i don't know how to create a patch so I'll just write what I've done -in
fb.user.module, in line 561 as part of thehook_form_alter, I've added a loading animation DIV -//spinner wheel'spinner' => array(
'#markup' => '<img id="img-spinner" src="http://localhost/spinner.gif" alt="Loading"/>',
'#type' => 'markup',
'#prefix' => '<div id="spinner" class="spinner">',
'#suffix' => '</div>',
),
//end of spinner
in
fb.js(line 233) i changed the function a bit -// Feedback that entire page may be reloading.// @TODO improve the appearance of this, make it customizable.
// This unweildy set of tags should make a progress bar in any Drupal site.
var fbMarkup = jQuery('.fb_connected,.fb_not_connected').wrap('<div class="spinner" />');
if (fbMarkup.length) {
fbMarkup.hide(); // Hides FBML, leaves progress bar.
}
else {
// If no markup changed, throw a progress bar at the top of the page.
jQuery('body').prepend('<div id="spinner" class="spinner" >');
}
and last, in
fb.theme.cssi added the attribute to position the loading wheel -.spinner {position: fixed;
top: 80%;
left: 50%;
margin-left: -50px; /* half width of the spinner gif */
margin-top: -50px; /* half height of the spinner gif */
z-index:1234;
overflow: auto;
width: 100px; /* width of the spinner gif */
height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}
of course you can position it however you like, depending on your design needs.
this way, the only thing needed is to point in
fb.user.moduleto the loader's animation path and to position it through the css file. loader animations can be downloaded from here - http://ajaxload.info/it's kind of a hack, but it get's the ugly progress bar out of the way and put's a beautiful spinning wheel (or any other custom animation) instead of it ;) would appreciate your insight's... i'm not sure if adding the spinner DIV to that form in fb.user wont cause it to show anywhere else (other than the loading process). i guess it's alright as long as you wont think these changes could mess something up. hope this solution is good enough and that someone else could enjoy it, you were right saying it's good to give a feedback that the page is loading for slow connections. as i said, i don't know how to compile patches (but would be happy to get a link to a good tut though).
#6
now that i think of it, it might not be the best way to approach it... i looked at it again and if im not mistaking, it basically cancels the progress bar, and adds an animation to the fb_connected DIV.
the problem is, that DIV get's hidden the moment the progress bar is supposed to show. so in case of a slow connection, the user will see the animation as long as the so called "splash screen" appears. BUT, as soon as fb_connected disappears, he would be left with no indication of what's going on. did i understand the workflow correctly? if so, my previous solution isn't too good and I'll have to figure out something else...
#7
To solve that, you want fb.js to simply do
jQuery('body').prepend('<div id="spinner" class="spinner" >');Without the rest of that if clause.
Have you tested this on all major browsers. I think you have a better way here. I will take a stab at making the default behavior more like this.
#8
Thanks a lot!
did you mean like this ?
var fbMarkup = jQuery('.fb_connected,.fb_not_connected').wrap('<div class="spinner" />');
if (fbMarkup.length) {
jQuery('body').prepend('<div id="spinner" class="spinner" >');
}
or like this?
var fbMarkup = jQuery('body').prepend('<div id="spinner" class="spinner" >');for the browsers, both of the codes work fine on all 3 major browsers.
i tested it with Chrome, Firefox and IE, the three of them show the loading animation and redirect correctly. would appreciate your answer regarding which code is a better use so i could get the workflow correctly. of course, some work has to be done on the css code in order for it to look crisp on all three of them. (for some reason, FF and IE throws in some little extra padding - but i guess that's just because the fancy positioning i used and shouldn't happen with "simple" css attributes)
glad i could throw in my 2 cents... thanks a lot again!
#9
Here's what I'm currently testing. It's a D6 diff (because its easier for me to checkin to my D6 branch then merge changes into D7), I think it will apply to D7 as well.
The diff wouldn't include the new fb_spinner.gif so I've attached it. Save into modules/fb/images/
#10
It could be great to add something like Views Sext Throbber support. I'm getting #1884274: 2 Progress bar in the user login block!
#11
I'm curious how the views throbber can be overridden by another module, but don't have time to look at the code right now. Would be great if someone can explain that. I'd like the modules/fb throbber to be customizable the same way.
#12
Agree Dave!