If the throbber sprite is supposed to be used not only by Drupal core, but also by contrib modules and work with contrib themes, then I believe the height of the image needs to be increased.
The tiny difference of just a few pixels between the active and inactive areas of the sprite makes both states visible at the same time in many cases, for example when used as a background image on textfield that are a little taller than normal . Can the difference be increased to something like a 100px without compromising too much filesize?
Comment | File | Size | Author |
---|---|---|---|
#19 | throbber-active.gif | 2.31 KB | eigentor |
#19 | throbber-inactive.png | 1.17 KB | eigentor |
#13 | throbber-bf.png | 757 bytes | fehin |
#13 | throbber-after.png | 541 bytes | fehin |
#7 | 1153366.jpg | 9.55 KB | seandunaway |
Comments
Comment #1
anonsubscribing
Comment #2
rfayI don't see anything here but your opinion that the size should be increased. Is this just a matter of your aesthetic opinion, or is there some other reason for the increased size?
Comment #3
bryancasler CreditAttribution: bryancasler commentedhttp://www.youtube.com/watch?v=pWdd6_ZxX8c
Comment #4
rfay:-)
Comment #5
betamos CreditAttribution: betamos commented@rfay If you read carefully, what I mean is that the current throbber icon sometimes introduces a design bug which can't be worked around without replacing the throbber icon with a custom one, since CSS background images can't be cropped in CSS 2.1. I proposed a 100px height delta since it seems enough to me, but that's just an arbitrary number. It would eliminate the design bug in most cases, I think.
Comment #6
rfayComment #7
seandunaway CreditAttribution: seandunaway commentedI run into this as well and always have to override the throbber. See attached image.
A better solution might be having two separate images that are replaced instead of having the height adjusted.
But, that's just, like, my opinion, man. :)
Comment #8
doublejosh CreditAttribution: doublejosh commentedHere's the bigger one I use: throbber.gif
Posted about it here: http://forrst.com/posts/7_AJAX_Loading_Icon_Generators_Plus_a_new_Drup-Y3K
Comment #9
fehin CreditAttribution: fehin commentedHaving the same issue as #7 too.
Comment #10
fehin CreditAttribution: fehin commentedHi doublejosh, I tried your image but it doesn't change when throbbing.
Comment #11
doublejosh CreditAttribution: doublejosh commentedThe image is extra tall so that you can have bigger inputs, you'll need to adjust your CSS to fit your site.
I put this throbber up so folks wouldn't have to create the image too.
Comment #12
droplet CreditAttribution: droplet commentedThere has a patch with fix: #1069152: Throbber in textfield is misaligned when browser hardware acceleration enabled (gfx)
Comment #13
fehin CreditAttribution: fehin commentedI changed the default bg image position with css and it looks fine (see images below) but for some reason this change made it stop switching to the throbber part when a user is entering data. I tested the positioning first with firebug and the throbber worked but once I made the change in my local.css the throbber stoped switching. I'm using corporate clean theme.
The css I used is:
Before:
After:
Comment #14
droplet CreditAttribution: droplet commentedsame issue and #1069152: Throbber in textfield is misaligned when browser hardware acceleration enabled (gfx) (February 22, 2011 ) is opened before this one
Comment #15
doublejosh CreditAttribution: doublejosh commentedDid you make the .throbbing class never fire? Need to create a rule for that to keep the behavior?
I'm guessing the class is still getting attached when it's suppose to.
Comment #16
gmclelland CreditAttribution: gmclelland commented+1 - Just ran into this today, this is needed for designs with large input fields.
Comment #17
relaxpor CreditAttribution: relaxpor commentedoverride the css file with these value
For an idea, in the corolla subtheme.
This is an example to display no throbber when no load
and display a mythrobber.gif when there is load
html.js input.form-autocomplete {
background-image: none;
}
html.js input.throbbing {
background-image: url(../../../../misc/mythrobber.gif);
background-position: 98% 10px;
}
Comment #18
eigentor CreditAttribution: eigentor commentedI filed a competing issue to this one, sorry https://drupal.org/node/2046869
Wouldn't it make more sense to use two images instead of increasing the throbbers height?
This is easier to manage because you just center the images vertically.
Using a sprite in this scenario won't improve Drupals performance footprint to any perceivable amount I would claim.
Comment #19
eigentor CreditAttribution: eigentor commentedtwo images attached
Comment #20
eigentor CreditAttribution: eigentor commentedFinally I see I was linking to the wrong issue.
Corrected now: https://drupal.org/node/2046869
Any opinions on if two images could resolve the discussions as to how high the one image should be?
Is there anything I am missing why this has to be a sprite? the passive part of the gif is not even moving, so filesize-wise, it should be even smaller. Is it two http requests, one for each image?
Comment #21
sphism CreditAttribution: sphism commentedThis is great, i always use taller field items, and the standard throbber always looks broken, i think 2 images is good solution
Comment #22
YesCT CreditAttribution: YesCT commentedthis issue is marked a duplicate in #14. Please discuss there, or reopen this and explain the difference.