Groups > comp.lang.javascript > #14055 > unrolled thread

Testing if ready after class change

Started by	j <mung_me@att.net>
First post	2012-05-21 13:40 -0400
Last post	2012-05-22 00:07 -0400
Articles	3 — 2 participants

Back to article view | Back to comp.lang.javascript

  Testing if ready after class change j <mung_me@att.net> - 2012-05-21 13:40 -0400
    Re: Testing if ready after class change Gus Richter <gusrichter@netscape.net> - 2012-05-21 21:49 -0400
      Re: Testing if ready after class change j <mung_me@att.net> - 2012-05-22 00:07 -0400

#14055 — Testing if ready after class change

From	j <mung_me@att.net>
Date	2012-05-21 13:40 -0400
Subject	Testing if ready after class change
Message-ID	<jpdum7$48m$1@news.albasani.net>

   I have a CSS3 slideshow. I'm setting a class (element.className) 
which is the starting point of the transition, and then setting a class 
which is the end point.

For example to zoom in center:
/* starting point */
.enlarged img{
	width: 150%;
	height: 150%;
	opacity: 0;
	margin-left: -25%;
	margin-top: -25%;
}

.shrink_center_center img{
	width: 100%;
	height: 100%;
...
	transition-property:margin,opacity,width,height;
...
}


There needs to be sufficient time between setting the starting class and 
setting the transition, if not, the transition gets garbled. (slower in 
my Chrome,~100 mS)

How can you tell when the class for the image is ready? I see that 
readystate does not work on individual elements (at least in FF).

Jeff

[toc] | [next] | [standalone]

#14069

From	Gus Richter <gusrichter@netscape.net>
Date	2012-05-21 21:49 -0400
Message-ID	<jperb4$3ns$1@dont-email.me>
In reply to	#14055

On 5/21/2012 1:40 PM, j wrote:
> I have a CSS3 slideshow. I'm setting a class (element.className) which
> is the starting point of the transition, and then setting a class which
> is the end point.
>
> For example to zoom in center:
> /* starting point */
> .enlarged img{
> width: 150%;
> height: 150%;
> opacity: 0;
> margin-left: -25%;
> margin-top: -25%;
> }
>
> .shrink_center_center img{
> width: 100%;
> height: 100%;
> ...
> transition-property:margin,opacity,width,height;
> ...
> }
>
>
> There needs to be sufficient time between setting the starting class and
> setting the transition, if not, the transition gets garbled. (slower in
> my Chrome,~100 mS)
>
> How can you tell when the class for the image is ready? I see that
> readystate does not work on individual elements (at least in FF).

I gave you a link which would have lead you to:
   <https://developer.mozilla.org/en/CSS/CSS_transitions>
There are detailed descriptions and examples. There is one demo 
including -moz-, -webkit- and -ms- proprietory prefixes:
   <http://jsfiddle.net/RwtHn/5/>

-- 
Gus

[toc] | [prev] | [next] | [standalone]

#14072

From	j <mung_me@att.net>
Date	2012-05-22 00:07 -0400
Message-ID	<jpf3e7$tei$1@news.albasani.net>
In reply to	#14069

On 5/21/2012 9:49 PM, Gus Richter wrote:
> On 5/21/2012 1:40 PM, j wrote:
<snip>

>> How can you tell when the class for the image is ready? I see that
>> readystate does not work on individual elements (at least in FF).
>
> I gave you a link which would have lead you to:
> <https://developer.mozilla.org/en/CSS/CSS_transitions>
> There are detailed descriptions and examples. There is one demo
> including -moz-, -webkit- and -ms- proprietory prefixes:
> <http://jsfiddle.net/RwtHn/5/>

My fault. I looked through that before but I didn't really read it. It 
has everything I need. Been rushed...

   Thanks,
Jeff



>

[toc] | [prev] | [standalone]

csiph-web

Testing if ready after class change

Contents

#14055 — Testing if ready after class change

#14069

#14072