RaseCidraen
Hey: Okay, here's the code I'm going after.
Text, overlaid over a transparent image (Center is hollowed out), overlaid over an adjustable image that changes width.
...I absolutely love this forum. Every time I go to post here for help, I inadvertantly end up solving my own problem.
I present, an adjustable XP Bar!
Comments
So, dumb question: Is there more to it than that?
That's a neat little toy. I might just use that in the next game I start.
(as a side note, it's exciting to finally be just a player instead of DMing all the time)
I like the look of it for my "new character":http://www.obsidianportal.com/campaigns/the-circle-of-thirteen/characters/berien, but it is interacting strangely with the Dynamic Character sheet (Chainsaw's 4E).
Any suggestions for easily making these two great tastes taste great together?
That's fine! Enjoy the code! 'swhat it's here for. I'm toying around with new forms of displaying it. I think it's a nifty little addition... I have no idea how to make it behave kindly with the DCS... I've never used one. Maybe you could switch to absolute positioning to fix the issue?
I think your best bet is going to be taking the image source for the XP bar background and removing the white space to make it transparent. It'll blend better with the background that way (although my solution won't be the prettiest for you... you'll have to tool with the div containing the XP fill a bit.)
I present my latest and greatest creation: the Bardichebar!
0/1,000 XP
I've also included a Scott Pilgrim inspired variant...
@
Edit: Also, a link to this has been added to the FAQ.
Thanks a ton for adding it to the FAQ!
One other trick you can do with a more typically shaped bar is to put end caps on the bar itself, like you see in the example linked above. They're easy to add - just check out the code on that page, and look for _left.png_ and _right.png_ - and add a nice flare of polish to things.
Gaaran, I'm happy to help, but I don't actually see the problem you're describing at the page you linked. Did you get it fixed up on your own, or am I just misunderstanding what the issue is?
And those test bars are exactly what I was talking about, the code is nice and clean, and the bars look great, i might adopt those instead of mine, even if they are tailor shaped to fit the character, cause yours looks a lot cleaner, and it'll fix that problem :).
Edit: To center a block element, such as a _div_, you should add _margin-left:auto;margin-right:auto;_ to its style. This tells the browser to automatically split the leftover space to either side of the element. For this to work correctly, the element must also have a width value set, so the browser can figure out how much left over space there is.
CurrentXP / TotalXP = % = Xpx / 730px
It's a small price to pay for the perfection that yours offers. The only thing I can think of is maybe using a container div of the 730px size, then everything else being nested within, to give you the option of running the % div command. Something like "here":http://www.obsidianportal.com/campaign/ragged-vestiges/wikis/rases-testing-area
But yes, we are using the newer textile parser(I think)... I've encountered some niggly bits with it, but they've been minor so far.
Rase, what you described would absolutely work for switching over to percentage based bar width. I can put that together when I get home from work if you want, but I suspect you're more than capable of doing that yourself, since you're the one who suggested it. All you should have to do is set the width of the existing div to maximum (730px for your bar, or 560px for mine), keeping the positioning on it, then create a new div inside it and move the background stuff over to that one.