js advice please

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

js advice please

Marc Delisle-2
Hi,
I'm working on a bug [0]. The solution I'm trying is:

- use display:none on the throbber
- temporarily replace the navi reload image with the throbber image

My problem is that the reloading operation is so fast (less than one
second) that I cannot see the throbber image. When I add an alert just
before putting back the reload image, I have the proof that the throbber
image is there.

So, how can I ensure that the throbber image stays there at least, say,
one or two seconds? I tried with setTimeout() to no avail.

[0] https://sourceforge.net/p/phpmyadmin/bugs/3920/

--
Marc Delisle
http://infomarc.info | http://phpmyadmin.net

------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Phpmyadmin-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
Reply | Threaded
Open this post in threaded view
|

Re: js advice please

sheressa


> Date: Mon, 30 Dec 2013 13:03:54 -0500

> From: [hidden email]
> To: [hidden email]
> Subject: [Phpmyadmin-devel] js advice please
>
> Hi,
> I'm working on a bug [0]. The solution I'm trying is:
>
> - use display:none on the throbber
> - temporarily replace the navi reload image with the throbber image
>
> My problem is that the reloading operation is so fast (less than one
> second) that I cannot see the throbber image. When I add an alert just
> before putting back the reload image, I have the proof that the throbber
> image is there.
>
> So, how can I ensure that the throbber image stays there at least, say,
> one or two seconds? I tried with setTimeout() to no avail.
>
> [0] https://sourceforge.net/p/phpmyadmin/bugs/3920/
>
> --
> Marc Delisle
> http://infomarc.info | http://phpmyadmin.net
Hi, 
From what I understand the issue to be, I gathered the following:

    <div id="loaderImage"></div>
<script type="text/javascript">
var cSpeed=11;
var cWidth=128;
var cHeight=128;
var cTotalFrames=18;
var cFrameWidth=128;
var cImageSrc='images/sprites.gif';
var cImageTimeout=false;
var cIndex=0;
var cXpos=0;
var cPreloaderTimeout=false;
var SECONDS_BETWEEN_FRAMES=0;
function startAnimation(){
document.getElementById('loaderImage').style.backgroundImage='url('+cImageSrc+')';
document.getElementById('loaderImage').style.width=cWidth+'px';
document.getElementById('loaderImage').style.height=cHeight+'px';
//FPS = Math.round(100/(maxSpeed+2-speed));
FPS = Math.round(100/cSpeed);
SECONDS_BETWEEN_FRAMES = 1 / FPS;
cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000);
}
function continueAnimation(){
cXpos += cFrameWidth;
//increase the index so we know which frame of our animation we are currently on
cIndex += 1;
 
//if our cIndex is higher than our total number of frames, we're at the end and should restart
if (cIndex >= cTotalFrames) {
cXpos =0;
cIndex=0;
}
if(document.getElementById('loaderImage'))
document.getElementById('loaderImage').style.backgroundPosition=(-cXpos)+'px 0';
cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000);
}
function stopAnimation(){//stops animation
clearTimeout(cPreloaderTimeout);
cPreloaderTimeout=false;
}
function imageLoader(s, fun)//Pre-loads the sprites image
{
clearTimeout(cImageTimeout);
cImageTimeout=0;
genImage = new Image();
genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)};
genImage.onerror=new Function('alert(\'Could not load the image\')');
genImage.src=s;
}
//The following code starts the animation
new imageLoader(cImageSrc, 'startAnimation()');
</script>                      
> ------------------------------------------------------------------------------
> Rapidly troubleshoot problems before they affect your business. Most IT
> organizations don't have a clear picture of how application performance
> affects their revenue. With AppDynamics, you get 100% visibility into your
> Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
> http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
> _______________________________________________
> Phpmyadmin-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Phpmyadmin-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
Reply | Threaded
Open this post in threaded view
|

Re: js advice please

Marc Delisle-2
Le 2013-12-30 08:55, SHERESSA HILL a écrit :

>
>
>  > Date: Mon, 30 Dec 2013 13:03:54 -0500
>  > From: [hidden email]
>  > To: [hidden email]
>  > Subject: [Phpmyadmin-devel] js advice please
>  >
>  > Hi,
>  > I'm working on a bug [0]. The solution I'm trying is:
>  >
>  > - use display:none on the throbber
>  > - temporarily replace the navi reload image with the throbber image
>  >
>  > My problem is that the reloading operation is so fast (less than one
>  > second) that I cannot see the throbber image. When I add an alert just
>  > before putting back the reload image, I have the proof that the throbber
>  > image is there.
>  >
>  > So, how can I ensure that the throbber image stays there at least, say,
>  > one or two seconds? I tried with setTimeout() to no avail.
>  >
>  > [0] https://sourceforge.net/p/phpmyadmin/bugs/3920/
>  >
>  > --
>  > Marc Delisle
>  > http://infomarc.info | http://phpmyadmin.net
>
> Hi,
>  From what I understand the issue to be, I gathered the following:

Thanks; any simpler solution involving jQuery?


--
Marc Delisle
http://infomarc.info | http://phpmyadmin.net

------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Phpmyadmin-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
Reply | Threaded
Open this post in threaded view
|

Re: js advice please

sheressa


> Date: Mon, 30 Dec 2013 14:06:19 -0500

> From: [hidden email]
> To: [hidden email]
> Subject: Re: [Phpmyadmin-devel] js advice please
>
> Le 2013-12-30 08:55, SHERESSA HILL a écrit :
> >
> >
> > > Date: Mon, 30 Dec 2013 13:03:54 -0500
> > > From: [hidden email]
> > > To: [hidden email]
> > > Subject: [Phpmyadmin-devel] js advice please
> > >
> > > Hi,
> > > I'm working on a bug [0]. The solution I'm trying is:
> > >
> > > - use display:none on the throbber
> > > - temporarily replace the navi reload image with the throbber image
> > >
> > > My problem is that the reloading operation is so fast (less than one
> > > second) that I cannot see the throbber image. When I add an alert just
> > > before putting back the reload image, I have the proof that the throbber
> > > image is there.
> > >
> > > So, how can I ensure that the throbber image stays there at least, say,
> > > one or two seconds? I tried with setTimeout() to no avail.
> > >
> > > [0] https://sourceforge.net/p/phpmyadmin/bugs/3920/
> > >
> > > --
> > > Marc Delisle
> > > http://infomarc.info | http://phpmyadmin.net
> >
> > Hi,
> > From what I understand the issue to be, I gathered the following:
>
> Thanks; any simpler solution involving jQuery?
>
>
> --
> Marc Delisle
> http://infomarc.info | http://phpmyadmin.net
Assuming that tools such as preloaders.net was not what you were
looking for, I found the following on GitHub. (Let me know if this is not what you
had in mind and I will share the other examples I found as well.)

/**
* @preserve throbber.js v 0.1 2011-09-18
* http://aino.com
*
* Copyright (c) 2011, Aino
* Licensed under the MIT license.
*
*/

/*global Image, Throbber:true*/

(function( window ) {

    var document = window.document,

        M = Math,
        setTimeout = window.setTimeout,

        support = ( 'getContext' in document.createElement('canvas') ),

        _extend = function( defaults, obj ) {
            defaults = defaults || {};
            for (var i in obj) {
                defaults[i] = obj[i];
            }
            return defaults;
        },

        // convert any color to RGB array
        _getRGB = function( color ) {
            if ( !support ) { return { rgb:false, alpha:1 }; }

            var t = document.createElement( 'i' ), rgb;

            t.style.display = 'none';
            t.style.color = color;
            document.body.appendChild( t );

            rgb = window.getComputedStyle( t, null )
                .getPropertyValue( 'color' )
                .replace( /^rgba?\(([^\)]+)\)/,'$1' ).replace( /\s/g, '' ).split(',').splice( 0, 4 );

            document.body.removeChild( t );
            t = null;

            return {
                alpha: rgb.length == 4 ? rgb.pop() : 1,
                rgb: rgb
            };
        },

        // used when rotating
        _restore = function( ctx, size, back ) {
            var n = back ? -2 : 2;
            ctx.translate( size/n, size/n );
        },

        // locar vars
        fade, i, l, ad, rd,

        // draw the frame
        _draw = function( alpha, o, ctx, step ) {

            fade = 1-alpha || 0;
            ad = 1; rd = -1;

            var size = o.size;

            if ( o.clockwise === false ) {
                ad = -1;
                rd = 1;
            }

            ctx.clearRect(0, 0, size, size);
            ctx.globalAlpha = o.alpha;
            ctx.lineWidth = o.strokewidth;

            for (i=0; i < o.lines; i++) {

                l = i+step >= o.lines ? i-o.lines+step : i+step;

                ctx.strokeStyle = 'rgba(' + o.color.join(',') + ',' + M.max(0, (l/o.lines - fade) ) + ')';
                ctx.beginPath();

                ctx.moveTo( size/2, size/2-o.padding/2 );
                ctx.lineTo( size/2, 0 );
                ctx.stroke( o.strokewidth );
                _restore( ctx, size, false );
                ctx.rotate( ad * ( 360/o.lines ) * M.PI/180 );
                _restore( ctx, size, true );
            }

            if ( o.rotationspeed ) {
                ctx.save();
                _restore( ctx, size, false );

                ctx.rotate( rd * ( 360/o.lines/( 20-o.rotationspeed*2 ) ) * M.PI/180 ); //rotate in origin
                _restore( ctx, size, true );
            }
        };


    // Throbber constructor
    Throbber = function( options ) {

        var elem = this.elem = document.createElement('canvas'),
            scope = this;

        if ( !isNaN( options ) ) {
            options = { size: options };
        }

        // default options
        // note that some of these are placeholder and calculated against size if not defined
        this.o = {
            size: 34, // diameter of loader
            rotationspeed: 6, // rotation speed (1-10)
            clockwise: true, // direction, set to false for counter clockwise
            color: '#fff', // color of the spinner, can be any CSS compatible value
            fade: 300, // duration of fadein/out when calling .start() and .stop()
            fallback: false, // a gif fallback for non-supported browsers
            alpha: 1 // global alpha, can be defined using rgba as color or separatly
        };

        /*
// more options, but these are calculated from size if not defined:

fps // frames per second (~size)
padding // diameter of clipped inner area (~size/2)
strokewidth // width of the lines (~size/30)
lines // number of lines (~size/2+4)

*/

        // _extend options
        this.configure( options );

        // fade phase
        // -1 = init
        // 0 = idle
        // 1 = fadein
        // 2 = running
        // 3 = fadeout
        this.phase = -1;

        // references
        if ( support ) {
            this.ctx = elem.getContext('2d');
            elem.width = elem.height = this.o.size;
        } else if ( this.o.fallback ) {
            elem = this.elem = new Image();
            elem.src = this.o.fallback;
        }

        ///////////////////
        // the loop

        this.loop = (function() {

            var o = scope.o,
                alpha = 0,
                fade = 1000/o.fade/o.fps,
                interval = 1000/o.fps,
                step = scope.step,

                style = elem.style,
                currentStyle = elem.currentStyle,
                filter = currentStyle && currentStyle.filter || style.filter,
                ie = 'filter' in style && o.fallback && !support;

            // the canvas loop
            return function() {

                if ( scope.phase == 3 ) {

                    // fadeout
                    alpha -= fade;
                    if ( alpha <= 0 ) {
                        scope.phase = 0;
                    }

                }

                if ( scope.phase == 1 ) {

                    // fadein
                    alpha += fade;
                    if ( alpha >= 1 ) {
                        scope.phase = 2;
                    }
                }

                if ( ie ) {
                    style.filter = 'alpha(opacity=' + M.min( o.alpha*100, M.max(0, Math.round( alpha*100 ) ) ) + ')';
                } else if ( !support && o.fallback ) {
                    style.opacity = alpha;
                } else if ( support ) {
                    _draw( alpha, o, scope.ctx, step );
                    step = step === 0 ? scope.o.lines : step-1;
                }

                window.setTimeout( scope.loop, 1000/o.fps );
            };
        }());
    };

    // Throbber prototypes
    Throbber.prototype = {

        constructor: Throbber,

        // append the loader to a HTML element
        appendTo: function( elem ) {

            this.elem.style.display = 'none';
            elem.appendChild( this.elem );

            return this;
        },

        // _extend options and apply calculate meassures
        configure: function( options ) {

            var o = this.o, color;

            _extend(o, options || {});

            color = _getRGB( o.color );

            // do some sensible calculations if not defined
            _extend( o, _extend({
                padding: o.size/2,
                strokewidth: M.max( 1, M.min( o.size/30, 3 ) ),
                lines: M.min( 30, o.size/2+4 ),
                alpha: color.alpha || 1,
                fps: M.min( 30, o.size+4 )
            }, options ));

            // grab the rgba array
            o.color = color.rgb;

            // copy the amount of lines into steps
            this.step = o.lines;

            return this;
        },

        // starts the animation
        start: function() {

            this.elem.style.display = 'block';
            if ( this.phase == -1 ) {
                this.loop();
            }
            this.phase = 1;

            return this;
        },

        // stops the animation
        stop: function() {
            this.phase = 3;
            return this;
        },

        toggle: function() {
            if ( this.phase == 2 ) {
                this.stop();
            } else {
                this.start();
            }
        }
    };

}( this ));

> ------------------------------------------------------------------------------
> Rapidly troubleshoot problems before they affect your business. Most IT
> organizations don't have a clear picture of how application performance
> affects their revenue. With AppDynamics, you get 100% visibility into your
> Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
> http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
> _______________________________________________
> Phpmyadmin-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Phpmyadmin-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
Reply | Threaded
Open this post in threaded view
|

Re: js advice please

sheressa
In reply to this post by Marc Delisle-2


> Date: Mon, 30 Dec 2013 14:06:19 -0500

> From: [hidden email]
> To: [hidden email]
> Subject: Re: [Phpmyadmin-devel] js advice please
>
> Le 2013-12-30 08:55, SHERESSA HILL a écrit :
> >
> >
> > > Date: Mon, 30 Dec 2013 13:03:54 -0500
> > > From: [hidden email]
> > > To: [hidden email]
> > > Subject: [Phpmyadmin-devel] js advice please
> > >
> > > Hi,
> > > I'm working on a bug [0]. The solution I'm trying is:
> > >
> > > - use display:none on the throbber
> > > - temporarily replace the navi reload image with the throbber image
> > >
> > > My problem is that the reloading operation is so fast (less than one
> > > second) that I cannot see the throbber image. When I add an alert just
> > > before putting back the reload image, I have the proof that the throbber
> > > image is there.
> > >
> > > So, how can I ensure that the throbber image stays there at least, say,
> > > one or two seconds? I tried with setTimeout() to no avail.
> > >
> > > [0] https://sourceforge.net/p/phpmyadmin/bugs/3920/
> > >
> > > --
> > > Marc Delisle
> > > http://infomarc.info | http://phpmyadmin.net
> >
> > Hi,
> > From what I understand the issue to be, I gathered the following:
>
> Thanks; any simpler solution involving jQuery?
>
>
> --
> Marc Delisle
> http://infomarc.info | http://phpmyadmin.net
I generated this at: http://cssload.net/
<style>
#floatingCirclesG{
position:relative;
width:128px;
height:128px;
-o-transform:scale(0.6);
}

.f_circleG{
position:absolute;
background-color:#FFFFFF;
height:23px;
width:23px;
-o-border-radius:12px;
-o-animation-name:f_fadeG;
-o-animation-duration:1.84s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
}

#frotateG_01{
left:0;
top:52px;
-o-animation-delay:0.69s;
}

#frotateG_02{
left:15px;
top:15px;
-o-animation-delay:0.92s;
}

#frotateG_03{
left:52px;
top:0;
-o-animation-delay:1.15s;
}

#frotateG_04{
right:15px;
top:15px;
-o-animation-delay:1.38s;
}

#frotateG_05{
right:0;
top:52px;
-o-animation-delay:1.61s;
}

#frotateG_06{
right:15px;
bottom:15px;
-o-animation-delay:1.84s;
}

#frotateG_07{
left:52px;
bottom:0;
-o-animation-delay:2.07s;
}

#frotateG_08{
left:15px;
bottom:15px;
-o-animation-delay:2.3s;
}

@-o-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

</style>
<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01">
</div>
<div class="f_circleG" id="frotateG_02">
</div>
<div class="f_circleG" id="frotateG_03">
</div>
<div class="f_circleG" id="frotateG_04">
</div>
<div class="f_circleG" id="frotateG_05">
</div>
<div class="f_circleG" id="frotateG_06">
</div>
<div class="f_circleG" id="frotateG_07">
</div>
<div class="f_circleG" id="frotateG_08">
</div>
</div> - See more at: http://cssload.net/#sthash.X1pouDSG.dpuf

> ------------------------------------------------------------------------------
> Rapidly troubleshoot problems before they affect your business. Most IT
> organizations don't have a clear picture of how application performance
> affects their revenue. With AppDynamics, you get 100% visibility into your
> Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
> http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
> _______________________________________________
> Phpmyadmin-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Phpmyadmin-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
Reply | Threaded
Open this post in threaded view
|

Re: js advice please

Atul Pratap Singh
In reply to this post by Marc Delisle-2
On Mon, Dec 30, 2013 at 11:33 PM, Marc Delisle <[hidden email]> wrote:
Hi,
I'm working on a bug [0]. The solution I'm trying is:

- use display:none on the throbber
- temporarily replace the navi reload image with the throbber image

Sounds like a better solution!
 
My problem is that the reloading operation is so fast (less than one
second) that I cannot see the throbber image. When I add an alert just
before putting back the reload image, I have the proof that the throbber
image is there.

So, how can I ensure that the throbber image stays there at least, say,
one or two seconds? I tried with setTimeout() to no avail.

setTimeout() should have worked to delay it; means, make it visible on start of some operation; and on finishing operation, put setTimeout() to hide it sometime later..


Regards
--
Atul Pratap Singh

------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Phpmyadmin-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel
Reply | Threaded
Open this post in threaded view
|

Re: js advice please

Marc Delisle-2
Le 2013-12-30 10:34, Atul Pratap Singh a écrit :

> On Mon, Dec 30, 2013 at 11:33 PM, Marc Delisle <[hidden email]
> <mailto:[hidden email]>> wrote:
>
>     Hi,
>     I'm working on a bug [0]. The solution I'm trying is:
>
>     - use display:none on the throbber
>     - temporarily replace the navi reload image with the throbber image
>
> Sounds like a better solution!
>  
>
>     My problem is that the reloading operation is so fast (less than one
>     second) that I cannot see the throbber image. When I add an alert just
>     before putting back the reload image, I have the proof that the throbber
>     image is there.
>
>     So, how can I ensure that the throbber image stays there at least, say,
>     one or two seconds? I tried with setTimeout() to no avail.
>
> setTimeout() should have worked to delay it; means, make it visible on
> start of some operation; and on finishing operation, put setTimeout() to
> hide it sometime later..

Please have a look at
https://github.com/phpmyadmin/phpmyadmin/commit/c1d8d80f754bf2d9853c4b8a71d1be1358a7b6d0

(current QA_4_1); it looks ok to me and I'll port to master if it looks
ok to others.


--
Marc Delisle
http://infomarc.info | http://phpmyadmin.net

------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Phpmyadmin-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel