Search jQuery

jQuery Forum

Using jQuery

garavani

problem with e.data syntax

in Using jQuery • 10 years ago

Hello all,

this refers to a recent post of mine which nobody wants to help me about:-(

So I reduce this a little.

Can someone tell me why this:

function animateImage(e)

{

var ww = $(window).width();

var newiw = (ww/100)*e.data.percent;

$("#imageIn") .stop().animate({'width': e.data.imageExtend+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

$("#shadow") .stop().animate({'left': e.data.imageExtend+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

if (newiw < 2000)

{

$("#character_lab") .stop().animate({'margin-left': e.data.charLeft+'%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, e.data.duration, 'ease'+e.data.ease+'Back');

}

else

{

$("#character_lab") .stop().animate({'margin-left': e.data.charLeft+'%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, e.data.duration, 'ease'+e.data.ease+'Back');

}

$("#letters_2") .stop().animate({'margin-left': e.data.lettersLeft+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

$("#name") .stop().animate({'margin-left': e.data.nameLeft+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

};

and in the html:

$('#arrowField').bind('mouseenter',{percent: 94, imageExtend: 6, duration: 950, ease: 'out', charLeft: 4, lettersLeft: 2, nameLeft: 3}, animateImage);

does not work?

I inserted an „alert“ into the function which worked so it means there could be only a problem inside the animateImage function.

Did I introduce a syntax error somewhere?

I tried to cancel different parts without any success at all

I am desperated a little here

Thank you!

Garavani

Replies(16)

jakecigar

Re: problem with e.data syntax

10 years ago

This stub works. It must be something else going on.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$('#arrowField').bind('mouseenter',
{percent: 94, imageExtend: 6, duration: 950, ease: 'out', charLeft: 4, lettersLeft: 2, nameLeft: 3},
animateImage);
})
function animateImage(e){
console.log(e.data)
}
</script>
</head>
<body>
<div id='arrowField'>arrowField</div>
</body>
</html>

JΛ̊KE

garavani

Re: problem with e.data syntax

10 years ago

Thanks Jake for your response,

sadly I do not understand completely the meaning of stubs…

I had this code (with the first general function animateImage(e) I wished to substitute the following four and implement them on my html like below of it:

function animateImage(e)

{

var ww = $(window).width();

var newiw = (ww/100)*e.data.percent;

$("#imageIn") .stop().animate({'width': e.data.imageExtend+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

$("#shadow") .stop().animate({'left': e.data.imageExtend+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

if (newiw < 2000)

{

}

else

{

$("#character_lab") .stop().animate({'margin-left': e.data.charLeft+'%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, e.data.duration, 'ease'+e.data.ease+'Back');

}

$("#letters_2") .stop().animate({'margin-left': e.data.lettersLeft+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

$("#name") .stop().animate({'margin-left': e.data.nameLeft+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

};

/* Trial end*/

function suggestImage()

{

var ww = $(window).width();

var newiw = (ww/100)*94;

$("#imageIn") .stop().animate({'width': '6%'}, 950, 'easeOutBack');

$("#shadow") .stop().animate({'left': '6%'}, 950, 'easeOutBack');

if (newiw < 2000)

{

$("#character_lab") .stop().animate({'margin-left': '4%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, 950, 'easeOutBack');

}

else

{

$("#character_lab") .stop().animate({'margin-left': '4%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, 950, 'easeOutBack');

}

$("#letters_2") .stop().animate({'margin-left': '2%'}, 950, 'easeOutBack');

$("#name") .stop().animate({'margin-left': '3%'}, 950, 'easeOutBack');

};

function letImage()

{

var ww = $(window).width();

var newiw = (ww/100)*100;

$("#imageIn") .stop().animate({'width': '0%'}, 950, 'easeInBack');

$("#shadow") .stop().animate({'left': '0%'}, 950, 'easeInBack');

if (newiw < 2000)

{

$("#character_lab") .stop().animate({'margin-left': '0%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, 950, 'easeInBack');

}

else

{

$("#character_lab") .stop().animate({'margin-left': '0%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, 950, 'easeInBack');

}

$("#letters_2") .stop().animate({'margin-left': '0%'}, 950, 'easeInBack');

$("#name") .stop().animate({'margin-left': '0%'}, 950, 'easeInBack');

};

function fullImage()

{

var ww = $(window).width();

var newiw = (ww/100)*76;

$("#imageIn") .animate({'width': '24%'}, 1900, 'easeOutBack');

$("#shadow") .animate({'left': '24%'}, 1900, 'easeOutBack');

if (newiw < 2000)

{

$("#character_lab") .animate({'margin-left': '22%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, 1900, 'easeOutBack');

}

else

{

$("#character_lab") .animate({'margin-left': '22%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, 1900, 'easeOutBack');

}

$("#letters_2") .animate({'margin-left': '24%',}, 1900, 'easeOutBack');

$("#name") .animate({'margin-left': '21%'}, 1900, 'easeOutBack');

$("#text") .animate({'margin-left': '36%', 'margin-right': '19%'}, 1900, 'easeOutBack');

imageout = 1;

}

function removeImage()

{

var ww = $(window).width();

var newiw = (ww/100)*100;

$("#imageIn") .animate({'width': '0%'}, 1900, 'easeOutBack');

$("#shadow") .animate({'left': '0%'}, 1900, 'easeOutBack');

if (newiw < 2000)

{

$("#character_lab") .animate({'margin-left': '0%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, 1900, 'easeOutBack');

}

else

{

$("#character_lab") .animate({'margin-left': '0%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, 1900, 'easeOutBack');

}

$("#letters_2") .animate({'margin-left': '0%'}, 1900, 'easeOutBack');

$("#name") .animate({'margin-left': '0%'}, 1900, 'easeOutBack');

$("#text") .animate({'margin-left': '19%'}, 1900, 'easeOutBack');

imageout = 0;

}

html:

$(document).ready(function(){

//Suggesting to move out on click image by showing a part and remove if mouse leaves again (on an invisible field-complete left margin of the page)

$('#arrowField').bind({

mouseenter: function(){ suggestImage(); arrowFieldOut(); },

mouseleave: function(){ letImage(); arrowFieldIn(); },

click: function(){

//Disactivates invisible field

$(this).css('cursor','auto').unbind('mouseenter mouseleave');

//Moves out and rotates arrow

var $arrowIn = $('#arrowIn');

$arrowIn.animate({'left': '24%','margin-left': '-2%'}, 1900, 'easeOutBack', function(){

$arrowIn.rotate({

duration:600,

angle:0,

animateTo:180,

easing: $.easing.easeOutExpo

});

//Completely moves out image

fullImage();

}

});

Thanks for your patience

Garavani

PS the original functions (without e.data) worked perfectly

jakecigar

Re: problem with e.data syntax

10 years ago

A stub or snippet is a bit of code where you can add to it. It is just to see that the feature works.

e.data works. I pass the data, and I get the data. I didn’t want to get into your previous posts, because your idea is a good one. passing data in the .bind or .on is brilliant.

JΛ̊KE

garavani

Re: problem with e.data syntax

10 years ago

Yes, I thought so, that it would be a good idea to do so. Also it would let me create fast similar animation situations elsewhere just adjusting a little the dat depending on image sizes etc.

(Although I thought there might be even better/shorter solutions for the real profs amongst you)

And also I used e.data (through a lot of google and reading for I am not a programmer) in other places without problems, but this time it does not work. I tried everything for nearly a week now. No way.

But the original functions (as posted above) do work. So I guess I am forced to let them be as they are :-((

I am aware that it would be too much work getting into my complicated stuff here…

thanks anyhow

maybe some other ideas around?

salutes

Garavani

Although I tried it also with a simple .bind('mouseenter', function…) etc. and it didn’t work

can you maybe give me the right syntax for binding e.data into multiple binding siutation like:

.bind({mouseenter:function(){ suggestImage(); arrowFieldOut(); },mouseleave:function(){ letImage(); arrowFieldIn(); } });

for example? Let’s say you would want to subsitute the „suggestImage()“ and „letImage()“

with the {…},animateImage()

because I couldn’t find nowhere (and believe me I googled for it!) the correct syntax to put it in there. This would a least let me learn something theoretically.

Thanks!

jakecigar

Re: problem with e.data syntax

10 years ago

Every idea to make it shorter (fewer characters) is based on the event data.

1. You don’t need to add 'px' for each value in a call to .animate.

2. You don’t need quotes around the attributes like left & width. 'margin-left' becomes marginLeft.

3. You could add the % in the bind step so you don’t have to add it in animateImage.

4. You could create a var data=e.data, so you never have to refer to e. again.

5. You could create a var easing= 'ease' + e.data.ease + 'Back', and not have to remake the string 6 times.

6. You could create a var dur=data.duration …

JΛ̊KE

garavani

Re: problem with e.data syntax

10 years ago

Thanks for these cool ideas!

Anyhow I discovered now that even

function animateImage(e)

{

alert(percent+','+imageExtend+','+duration+','+ease+','+charLeft+','+lettersLeft+','+nameLeft);

}

does not work,

but:

function animateImage(e)

{

alert('hello');

}

does.

So I guess he couldn’t pass the data.

But why???

jakecigar

Re: problem with e.data syntax

10 years ago

function animateImage(e)

{

var data=e.data,

percent=data.percent,

imageExtend=…

alert(percent+','+imageExtend+','+duration+','+ease+','+charLeft+','+lettersLeft+','+nameLeft);

}

percent is nothing until you define it.

JΛ̊KE

PS You are using a current version of jQuery aren’t you???

garavani

Re: problem with e.data syntax

10 years ago

Hello Jake!

Thanks for being still with me! :-)

Of course I failed to do with the e. …

Yet, correcting this he returned:

undefined,undefined,undefined,undefined,undefined,undefined,undefined

in the JS alert window (I guessed so)

Yes, I am using <script src="edge_includes/jquery-1.8.3.min.js"></script> correctly defined at the beginning

(otherwise the functions without e.data wouldn’t work either, wouldn’t they?)

Then I thought it has to be a problem with the placement of the e.data function externally within a separate JS file, but now I put it in the main file, didn’t work either :-(

I guess I failed to do everything correct elsewhere…

If I may ask you a last favor may you look at this code briefly?

Code:

<!DOCTYPE html>

<html>

<head>

<head><title>blabla</title>

<style>

body {

background-color: #ffffff;

overflow-y: scroll;

}

</style>

$(document).ready(function(){

$('#arrowField').bind('mouseenter',{percent: 94, imageExtend: 6, duration: 950, ease: 'out', charLeft: 4, lettersLeft: 2, nameLeft: 3},animateImage);

});

function animateImage(e)

{

alert(e.percent+','+e.imageExtend+','+e.duration+','+e.ease+','+e.charLeft+','+e.lettersLeft+','+e.nameLeft)

};

</script>

</head>

<body>

</body>

</html>

I cut out all the rest and still he gives me the „undefined,undefined,undefined,undefined…“ message

Thanks Jake!!

Garavani

garavani

Re: problem with e.data syntax

10 years ago

Hi Jake,

I finally found the bug:

$('#arrowField').bind('mouseenter',{percent:94,imageExtend:6,duration:950,ease:'Out',charLeft:4,lettersLeft:2,nameLeft:3},animateImage);

I wrote 'out' with a minor 'o' which broke everything up since it has to end up as easeOutBack and not easeoutBack

Thanks for your patience and the other good ideas that I will make use of in my new code!

There is only one question unanswered and that is about the multiple binding in the main page.

How is this peace of code:

.bind('mouseenter',{percent:94,imageExtend:6,duration:950,ease:'Out',charLeft:4,lettersLeft:2,nameLeft:3},animateImage);

to be introduced in something like:

/$('#arrowField').bind({

mouseenter: function(){ suggestImage(); arrowFieldOut(); },

mouseleave: function(){ letImage(); arrowFieldIn(); },

click: function(){…

Thank you very much!!!

jakecigar

Re: problem with e.data syntax

10 years ago

Now that so much is working, it is time to change .bind( to .on( . On is shorter and bind is the older, deprecated, a less cool function.

Keep passing e around to all the functions.

$('#arrowField').on({
mouseenter: function(e){ suggestImage(e); arrowFieldOut(e); },
mouseleave: function(e){ letImage(e); arrowFieldIn(e); },
click: function(e){…}
},{
percent:94,
imageExtend:6,
duration:950,
ease:’Out',
charLeft:4,
lettersLeft:2,
nameLeft:3
});

JΛ̊KE

garavani

Re: problem with e.data syntax

10 years ago

Thanks for great help Jake!

Everything solved

garavani

Re: problem with e.data syntax

10 years ago

Sorry Jake :-(

Me again.

I was a little too fast yesterday.

The code you send me couldn’t work. Maybe I didn’t explain myself too good.

What I would need is something with different e.data for each event. That was the original idea,

to use the same animateImage(e) function with different parameters.

It must be something like this perhaps:

$('#arrowField').on({

mouseenter: function(e){ animateImage(e); arrowFieldOut(e); },{

percent:94,

imageExtend:6,

duration:950,

ease:'Out',

charLeft:4,

lettersLeft:2,

nameLeft:3

mouseleave: function(e){ animateImage(e); arrowFieldIn(e); },{

percent:100,

imageExtend:0,

duration:950,

ease:'In',

charLeft:0,

lettersLeft:0,

nameLeft:0

click: function(e){

animateImage(e);},

{

percent:76,

imageExtend:24,

duration:1900,

ease:'Out',

charLeft:22,

lettersLeft:24,

nameLeft:21

});

I tried some things but couldn’t get it running.

I am not familar with the syntax for the multiple binding (because there is also arrowFieldOut(e)/arrowFieldIn(e); to happen but only on mouseenter/leave).

How is the each time different e.data to embed in it all?

Thanks again

now that so much is done already!!

Garavani

jakecigar

Re: problem with e.data syntax

10 years ago

one data per on, regardless of how many events you use, is how I would do it.

$(function () {
$('#arrowField').on({
mouseenter: function (e) {
animateImage(e);
arrowFieldOut(e);
}
}, {
percent: 94,
imageExtend: 6,
duration: 950,
ease: 'Out',
charLeft: 4,
lettersLeft: 2,
nameLeft: 3
})
.on({
mouseleave: function (e) {
animateImage(e);
arrowFieldIn(e);
}
}, {
percent: 100,
imageExtend: 0,
duration: 950,
ease: 'In',
charLeft: 0,
lettersLeft: 0,
nameLeft: 0
})
.on({
click: function (e) {
animateImage(e);
}
}, {
percent: 76,
imageExtend: 24,
duration: 1900,
ease: 'Out',
charLeft: 22,
lettersLeft: 24,
nameLeft: 21
})
});

JΛ̊KE

garavani

Re: problem with e.data syntax

10 years ago

Hi Jake!

thanks a lot.

This is how I thought. Because I couldn’t either find in the web a syntax with „all in one“+e.data, too.

I will do so.

By the way which nationality are you for the special a in your name, or is it just fun?

Thanks again

Garavani

jakecigar

Re: problem with e.data syntax

10 years ago

There may be a syntax that allows it all on one on call, but I know that it works the way I last posted.

A lambda with a circle over it is not used in any earth language. It was used in the movie and TV program STΛ̊RGATE. I am an American who speaks and reads a few languages. I can read some Italian, but don’t test me on it. And I enjoy playing with unicode characters.

JΛ̊KE

garavani

Re: problem with e.data syntax

10 years ago

Adesso mi ricordo il segno! :-)) [Test]

I am a German guy enjoying making his new webpage playing with Jquery

Stefan

Top Reply

Response title

Attachments

jQuery Forum

problem with e.data syntax

Replies(16)

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Re: problem with e.data syntax

Statistics

Tags

Actions