Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #400344 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    I’m trying to create a progress bar that counts downwards from top to bottom. I can get it to work if I use a color for the fill and background, but not if I use the “default” image. To get it to work with the colors, the bar needs to have the “Empty Bar” checked.

    When I look at the HTML, it looks like the “top” and “height” of the “fill” are what changes, specifically the top and height values. Forward increases the height and decreases the top values.

    I’m guessing that if I could use the image as the background and a color for the fill, this would work? I’m just stumped on how I could do that OR a property for the bar that would do so.

    Attachments:
    1. InvertProgress.zip
    #400347 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Addendum: What I’m trying to achieve works if I add an image, then layer a progress bar with a transparent background above the image. To me, this is gross, because now I have 2 “images” and would need to do this for any progress bar that I want to behave this way.

    (Context: I have progress page that has a button for each chapter that opens a menu to access the pages. The chapter buttons go down vertically with a progress bar between them that needs to “tick down” to show progress towards the next chapter.)

    • This reply was modified 2 years, 4 months ago by Profile photo of Jason Dalrymple Jason Dalrymple. Reason: New attachment
    #400391 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    131 pts
    @mnotermans5114

    Hi Jason,

    Quite easy. Check the attached sample. I think this works exactly the way you want. The left one that is..
    I changed a few things… Setting the initial value to 100… and on the button changed the direction to ‘Backward’
    Then it works as you wanted…

    Regards,
    Math

    #400561 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Hi Math – Looking at the sample you sent, the left one isn’t what I was hoping for. When I look at the sample you posted, it starts with the “image” filled in the progress, then it “covers” the green ticks from the top down. The one on the right is what I was hoping for, where it starts with an “empty” bar, then adds the green boxes from top to bottom.

    The one on the right uses a progress bar that does count forward, so it’s basically going from grey to transparent so that the image behind it can be seen.

    Hopefully that makes sense – I’d tried the starting at the max, then stepping backward and it wasn’t quite what I was looking for.

    #400766 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    355 pts
    @timk

    Why not use CSS to rotate the default progress bar by 180deg?

    #progress39 {
    transform:rotate(180deg);
    }

    #400774 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Because it’d be more efficient to add a class? 😉 Seriously, though – Tim, you’ve come through again. The real answer is “because I don’t know enough HTML5 to have considered or even known the transform property existed.”

    Thanks to both for the help!!!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.