in partnership with mediatemple

Ticket #834 (closed defect: fixed)

Opened 3 months ago

Last modified 1 month ago

passing a property to FX.Tween on creation causes 'camelCase is not a function'

Reported by: Ariel Owned by:
Type: defect Priority: major
Milestone: Mootools version 1.2 Component: Core
Keywords: getStyle camelCase integer FX.Tween Cc: aeron.glemann@…

Description

Hello. Using latest SVN version (2008-02-17 build 1398 (i think)) I'm having the next error:

property.camelCase is not a function (line 2011)

that line is: (in getStyle: function(property))

property = property.camelCase();

using FireFox? I can see that the problem is, that "property" is a number... is 1 (integer)... so camelCase() doesn't exists.

This didn't happen before (I just upgrade to the latest version from the SVN).

Thanks

Change History

Changed 3 months ago by 131

  • priority changed from major to minor

you should not use effect or effects anymore.
I guess you'r using Fx.Tween.start or something like that
As written in rev1378, arguments list have change, so, you need yo send proper args in the right order. 

	effect: function(property, options){
		return new Fx.Tween(this, $merge({property:property},options) );
	}

This can be usefull to you, if not, please send more concrete code example on what you'r working on

Changed 3 months ago by kamicane

  • status changed from new to closed
  • resolution set to invalid

Changed 3 months ago by upandhigh

  • priority changed from minor to major
  • status changed from closed to reopened
  • resolution deleted

seems you need to update your help then, I got the same issue but already with Fx.Tween - so will take example in your docs12b help: 

    var myFx = new Fx.Tween($('email'));
    myFx.start('background-color', '#000', '#f00');

and i'am getting this error:
property has no properties
http://localhost/casino/mootools.js
Line 1896

property has no properties
setStyle(undefined, [0, 0, 0])mootools.js (line 1896)
render(input#email.serch gfdgdfdsf sdfs dfsd ..., undefined, [Object value=[3] parser=Object])mootools.js (line 3148)
set([Object value=[3] parser=Object])mootools.js (line 3240)
(?)()mootools.js (line 862)
step()mootools.js (line 2993)
returns()mootools.js (line 495)
[Break on this error] property = property.camelCase();

but this code works for me fine: 

var myTween = new Fx.Tween($('email'), 'background-color', { 'link': 'chain' });
myTween.start('#c03').start('#fff').start('#369');}}}

Changed 3 months ago by kamicane

  • status changed from reopened to closed
  • resolution set to worksforme

Works for me, using the latest revision. Upload a test case and reopen (in this exact order) if you still experience the issue.

Changed 2 months ago by lgladdy

  • cc liam@… added
  • summary changed from property.camelCase is not a function to passing a property to FX.Tween on creation causes 'camelCase is not a function'

I'm not sure if this is the right way to provide a test case, i did try and search for help on how to create one, but didn't get anywhere.

Anyway, this error is triggered when you pass a CSS property to tween into Fx.Tween on creation (as the 1.2b's docs say is possible). This only happens on the SVN build, not 1.2b. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bug 834 Test Case</title>
<style type="text/css">
<!--
body {
	background-color: #0099FF;
}
div#content {
	background-color: #660066;
	color: #FFFFFF;
	width: 400px;
	height: 200px;
}
-->
</style>
</head>
<script type="text/javascript" src="mootools-trunk-1485.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	bladeFx = new Fx.Tween('content','height',{
		unit: 'px',
		link: 'chain',
		duration: 5000
	}).start(30);
});
</script>
<body>
<div id="content">Bla bla</div>
</body>
</html>

Getting rid of 'height' from the creation and adding height to the start: 

bladeFx = new Fx.Tween('content',{
	unit: 'px',
	link: 'chain',
	duration: 5000
}).start('height',30);

works fine - Maybe just the documentation needs to be updated if this is expected behaviour.

Changed 2 months ago by lgladdy

  • keywords FX.Tween added
  • status changed from closed to reopened
  • resolution deleted

Changed 2 months ago by jaik

  • priority changed from major to minor
  • type changed from defect to enhancement

The documentation is perhaps not 100% clear, but the property should only be passed as an argument if options are not passed. So the following are both correct: 

var bladeFx = new Fx.Tween('content', 'height').start(30);

var bladeFx = new Fx.Tween('content', {
	property: 'height',
	unit: 'px',
	link: 'chain',
	duration: 5000
}).start(30);

This should either be closed or kept open as a documentation enhancement.

Changed 2 months ago by lgladdy

  • priority changed from minor to major
  • type changed from enhancement to defect 
var bladeFx = new Fx.Tween('content', 'height').start(30);

Still triggers the 'property.camelCase is not a function' error - try with my test case just substituting the bladeFx with your first example which should work.

Setting this back to major defect, as your solution still triggers it! (Sorry if thats the wrong thing today, i'm new to mootools!)

Changed 2 months ago by lgladdy

Prodding around a bit more in a debugger, when it gets to the point where it runs the start method inside the Fx.Tween class, 

start: function(property, from, to){
      if (!this.check(property, from, to)) return this;

When you set height as a lone option (as in the example my last comment), it calls the anonymous function incorrectly, the property parameter is the from parameter, and the other 2 are void.

When you set height inside a group of options, or as part of the start: function, its called correctly, with property as 'height' and from as some sort of ID. (30, in my testcase example)

Hope this makes sense to a developer, basically is calling function(30), instead of function('height',30) for the start: function.

Changed 2 months ago by kamicane

  • status changed from reopened to closed
  • resolution set to fixed

fixed in [1489]. The documentation was wrong.

Changed 1 month ago by rloaderro

  • cc aeron.glemann@… added; liam@… removed
  • status changed from closed to reopened
  • resolution deleted

From the docs: 

el.set('tween', {duration: 'long'});
el.tween('color', '#f00');

The above works. However, the following will fail with "property has no properties" property.camelCase error: 

el.get('tween', 'color').set('#f00');

The problem has to do with the internal setting of the "property" variable for the tween class. The following will also work: 

tween = el.get('tween', 'color');
tween.property = 'color';
tween.set('#f00');

Changed 1 month ago by kamicane

  • status changed from reopened to closed
  • resolution set to fixed

fixed documentatior for the getter and setter in [1536].

Note: See TracTickets for help on using tickets.