morph to same style wackyness

dave

unread,

Aug 6, 2008, 9:00:40 AM8/6/08

to Prototype & script.aculo.us

Hello,
In my app I'm doing a lot of morphing from style to style. It works
great... with one exception. If I morph to the same style it goes
wacky. Example below. Any suggestions? Is this a known bug?

Thanks in advance!
david
-------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="javascripts/prototype.js" type="text/javascript"></
script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></
script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nodeA {
width:80px;
background-color:#FF3366;
border:solid #333333 thin;
margin:6px;
}
</style>
</head>
<body>
<div class='nodeA' id="a" onclick="new Effect.Morph('a',
{style:'nodeA'})">click me</div>
</body>
</html>

Matt Petrovic

unread,

Aug 6, 2008, 9:38:26 AM8/6/08

to Prototype & script.aculo.us

wackiness is not a valid adjective. Be more specific please.

dave

unread,

Aug 6, 2008, 9:52:11 AM8/6/08

to Prototype & script.aculo.us

when you click on the div, it is morphing to the same style that it
already has..
which would mean it wouldn't move, or visually change at all. ( i
would assume )
but it scales, changes the font size, color, etc.

It seems that it removes the style, then morphs to the assignment.
rather than taking a status of what it's state CURRENTLY is and
morphing the diff.

The same goes if you morph to a style, then morph to it again, instead
of not changing on the 2nd morph, it changes back to the original then
morphs to the assigned.. (see new example below that demonstrates
both behaviors. click on each div more than once.

Thanks!
-----------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="javascripts/prototype.js" type="text/javascript"></
script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></
script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nodeA {
width:80px;
background-color:#FF3366;
border:solid #333333 thin;
margin:6px;
}

.nodeB {
width:80px;
background-color:#FF33FF;

border:solid #333333 thin;
margin:6px;
}
</style>
</head>
<body>

<div class='nodeA' id="b" onclick="this.innerHTML = this.className;
new Effect.Morph('b',{style:'nodeA'})">click me</div>

<div class='nodeA' id="a" onclick="new Effect.Morph('a',

{style:'nodeB'})">click me</div>
</body>
</html>.

david

unread,

Aug 7, 2008, 7:31:27 AM8/7/08

to Prototype & script.aculo.us

Hi Dave,

I'm not really sure of my response, but in scriptaculous, when you
define the style to morph to as a class, internally, scriptaculous
append a DOM element, apply the class to this element and save result
of getStyle, then remove the class save the result of the new getStyle
value. With thos two result, it reject the value of the second one to
from the first one !

So you should have an empty resulting object That's why all you
properties are reseted (start color of the morph is white, with no
border and the text inside the div have no margin ! )

I think you should test yourself if the class to morph to is not the
one applied on your element before launching it.

--
David

Reply all

Reply to author

Forward