[RESOLVED]Display a Progress Bar over an Image using CSS and a Javacript Event

I have a Progress Bar that functions correctly but is outside of an enlarged Image cycling Update Panel. 

I want to show the Progress Bar over the image using CSS and JavaScript.

As of now it is under the image as:

 

<div class="HoverProgressBar"><div class="container"><div class="progressbar"></div></div></div>

I want to do something like:

                   HoverProgressBar.css({
                        'left': '50px',
                        'top': '200px',
                        'height': settings.height,
                        'text-align': 'right',
                        'vertical-align': 'middle',
                        'color': '#fff',
                        'width': '0px',
                        'border-radius': '3px',
                        'background-color': settings.color,
                        'z-index': '999'
                    });

Where the z-index for the image is around 500.

How do I display a Progress Bar over an Image using CSS and a Javacript Event?

 

    HoverProgressBar.css({
                        'left': '50px',
                        'top': '200px',
                        'height': settings.height,
                        'text-align': 'right',
                        'vertical-align': 'middle',
                        'color': '#fff',
                        'width': '0px',
                        'border-radius': '3px',
                        'background-color': settings.color,
                        'z-index': '999',
'position:'absolute',
});

use this i have added a absolute property on it
hope this will help you.

That worked it put it on top but it put the Progress Bar in the upper right hand corner and no matter what top or left: (% or px) it will not move

HoverProgressBar.css({
                        'left': '50px',
                        'top': '10%',
                        'height': settings.height,
                        'text-align': 'right',
                        'vertical-align': 'middle',
                        'color': '#fff',
                        'width': '0px',
                        'border-radius': '3px',
                        'background-color': settings.color,
                        'z-index': '999',
                        'position:'absolute',

                    });

TRY TO ADD style="position:relative;" in your image container whaere images i placed

Leave a Reply