Two small visual issues with Pomodoro Clock

1

90% satisfied with my Pomodoro Clock but I have two [hopefully simple] issues I need assistance with!

  1. When I start my clock I want my divs that allow the selection of session and break length to fade out. The animation works, but what happens is it then shifts my clock off center which looks lousy! I use bootstrap to align buttons & clock.

I had tried using jquery to change the bootstrap class of my clock so that after the buttons fade out it will be center again, but there is still a half second where it goes off center and then snaps back.

How can I get it to just stay where it is?

  1. When I start my timer I use jquery to populate a div that counts the number of sessions/breaks. Right now it just pops in and out a bit crudely. I want to fade it in/out but the problem is fadeIn doesn’t work. If I have it before the field has been filled there’s nothing to fade in, but if I have it after it’s already popped up on screen.

How can I get it to populate the field and then fade in?

Many thanks! :slight_smile:

2

For #1 it looks like when the timer starts, the div changes to display:none, which acts like it’s not there at all (affecting your clock time alignment). Try setting it to visibility:hidden, which will keep the element but not actually draw it, so it still takes up space.

1 Like
3

hey,

In your code the line which keeps on extending with time,what is the way to do that?

I wanted to do some similar thing if you could guide me…:slight_smile:

1 Like
4

@yuzu-r I was about to ask how I could change the visibility to be hidden as I was using jquery’s fade out which changes it to display none automatically. Before I could ask I thought of a solution: I’ll create a css animation, and add that class to the respective divs when needed. Thanks for getting me thinking in the right direction!

@pd21 There’s probably other (better?) ways to go about it but here is what I did.

  1. Create a container div that will hold your progress bar;
  2. In that div have another div that is the exact same height as the container. Set a desired background colour, and a width of 0.
  3. Use a jquery setInterval to increase to width of your progress div every second. You will need to think of a basic equation that takes the remaining time in you session and gives you a percentage amount you need to increase the progress bar each second.

I’ve been purposely vague in hopes that you can fill in the blanks yourself, but if you want me to shed any more light on it please drop me a line :slight_smile:

1 Like
5

@doug20000 Thanx a lot.Will get back to you in case I need some help…:relieved:

1 Like