View Full Version : HTML How was this effect done? Flash and ajax..
Env
October 26th, 2009, 11:17 AM
Move your mouse over the cart or add a product and move over the view shopping bag - a hover box ajax div comes up... just add an item or view shopping bag (move the mouse over it)
http://www.matalan.co.uk/fcp/product/fashion-to-buy-online/Jeans/heavyweight-jersey-jog-pants-with-taping-detail/6414&resultsPerPage=100&attrList=Dept,brand
Also move your mouse up and down this woman's leg.. (flash)
http://www.kswiss.com/content/running/
NeoDreamer
October 28th, 2009, 01:11 AM
The stroking the woman's leg Flash is done like this. Make a movie clip with the woman's picture in it and name it "sexyWomanLegPicture".
dampen = 10;
sexyWomanLegPicture.onEnterFrame = function()
{
xRatio = _root._xmouse / Stage.width;
yRatio = _root._ymouse / Stage.height;
xDest = xRatio * (Stage.width - this._width);
yDest = yRatio * (Stage.height - this._height);
this._x += (xDest - this._x) / dampen;
this._y += (yDest - this._y) / dampen;
}
I am not an Actionscript expert. This may not be the best way to do it, but at least it works.
NeoDreamer
October 28th, 2009, 01:19 AM
The shopping cart dropdown is done like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
new Event.observe(
window,
'load',
function() {
new Event.observe(
$('cartButton'),
'mouseover',
function() {
Effect.BlindDown('cart');;
}
);
new Event.observe(
$('cartButton'),
'mouseout',
function() {
Effect.BlindUp('cart');;
}
);
}
);
//]]>
</script>
</head>
<body>
<div id="cartButton" style="height: 40px; width: 200px; background: #ccffff;">
shopping cart
</div>
<div id="cart" style="display: none; width: 200px; width: 200px; background: #ffffcc;">
your cart is empty
</div>
</body>
</html>
Env
October 29th, 2009, 06:25 AM
The shopping cart dropdown is done like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
new Event.observe(
window,
'load',
function() {
new Event.observe(
$('cartButton'),
'mouseover',
function() {
Effect.BlindDown('cart');;
}
);
new Event.observe(
$('cartButton'),
'mouseout',
function() {
Effect.BlindUp('cart');;
}
);
}
);
//]]>
</script>
</head>
<body>
<div id="cartButton" style="height: 40px; width: 200px; background: #ccffff;">
shopping cart
</div>
<div id="cart" style="display: none; width: 200px; width: 200px; background: #ffffcc;">
your cart is empty
</div>
</body>
</html>
Hi thanks so much! Its not working though, their are not a lot of posts about BlindDown and the function is not in the file your linking. fx.Slide seems to be an option for me now, but I want it to hover not slide.
NeoDreamer
October 29th, 2009, 03:25 PM
My code was not tested. With some debugging, it will work.
NeoDreamer
October 31st, 2009, 08:30 PM
Oh, I forgot to link Scriptaculous. You need that to use the Effects class.
Env
November 1st, 2009, 08:54 AM
Hi
Thanks again for the reply. I tried using scriptulous library but its still not working!
simplistik
November 1st, 2009, 01:05 PM
the dropdown that happens when you hover over "Your Shopping Bag"?
Env
November 7th, 2009, 10:24 AM
@simplistik yes - just visit
http://www.matalan.co.uk/fcp/product/fashion-to-buy-online/Jeans/heavyweight-jersey-jog-pants-with-taping-detail/6414&resultsPerPage=100&attrList=Dept,brand
Top right of the page, move your mouse over the box that says "Your Shopping Bag" - and a div box appears - how has this been done?
simplistik
November 7th, 2009, 11:25 AM
really simple to do with jquery, here's a sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Jquery Slide Toggle</title>
<style type="text/css" media="screen">
#content { display: none; }
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#toggle').click(function() { return false; });
$('#toggle').hover(
function() {
$('#content').slideToggle("slow");
},function() {
$('#content').slideToggle("slow");
});
});
</script>
</head>
<body>
<a href="#" id="toggle">Toggle</a>
<div id="content">Lorem ipsum dolor sit amet</div>
</body>
</html>
anything else jquery related you can look at their docs: http://docs.jquery.com/Main_Page
Env
November 16th, 2009, 09:20 AM
The stroking the woman's leg Flash is done like this. Make a movie clip with the woman's picture in it and name it "sexyWomanLegPicture".
dampen = 10;
sexyWomanLegPicture.onEnterFrame = function()
{
xRatio = _root._xmouse / Stage.width;
yRatio = _root._ymouse / Stage.height;
xDest = xRatio * (Stage.width - this._width);
yDest = yRatio * (Stage.height - this._height);
this._x += (xDest - this._x) / dampen;
this._y += (yDest - this._y) / dampen;
}
I am not an Actionscript expert. This may not be the best way to do it, but at least it works.
I know this is asking a lot but can you attach an example as I cannot get this to work.
Env
December 2nd, 2009, 07:01 AM
Anyone with a working example of this in flash cs3?
Env
December 2nd, 2009, 08:46 AM
OK. I found some Image panning tutorials including the one on Kirupa.
This is the code I have though. I want it 100% like Kswiss though
this.onMouseMove = function() {
constrainedMove(bg_mc, 4, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
var mousePercent:Number = _ymouse/Stage.height;
var mSpeed:Number;
if (dir == 1) {
mSpeed = mousePercent;
} else {
mSpeed = mousePercent;
}
target.destY = Math.round(-((target._width-Stage.height)*mSpeed));
target.onEnterFrame = function() {
if (target._y == target.destY) {
delete target.onEnterFrame;
} else if (target._y>target.destY) {
target._y -= Math.ceil((target._y-target.destY)*(speed/100));
} else if (target._y<target.destY) {
target._y += Math.ceil((target.destY-target._y)*(speed/100));
}
};
}
Basically the image just scrolls straight into white space. I want it to scroll up to the top of the image, and down to the bottom of the image with no pixel gaps or anything - to the border, pixel by pixel. The code has been modified from Kirupa tutorial to be a vertical pane.
NeoDreamer
December 3rd, 2009, 04:52 AM
didn't I post a solution to your Flash question a long time ago?
Env
December 3rd, 2009, 10:43 AM
It does not work.. I want mine vertical and stopping at the bottom - exactly like kswiss.com - yours did not work for me and generated errors - this method seems the best way to do things.. can you help?
I just want it to stop the end of the picture res..
NeoDreamer
December 4th, 2009, 03:17 AM
It's the code I copied and pasted from my previous work: http://www.threadless.com/submission/174583/High_Hopes/showmore,designs . How can it have errors if it works perfectly there?
Env
December 7th, 2009, 11:02 AM
Can you send me the FLA? I am using Flash CS3 and havbe tried creating the movie clip but it just limits it - saying that the code has to placed inside the body - I tried using the placing it in a mouse hover (onMouse) but it still does not work - do you want my fla?
Nice client.. threadless
Env
December 7th, 2009, 11:03 AM
Did you use on Roll?
Env
December 9th, 2009, 06:48 AM
The stroking the woman's leg Flash is done like this. Make a movie clip with the woman's picture in it and name it "sexyWomanLegPicture".
dampen = 10;
sexyWomanLegPicture.onEnterFrame = function()
{
xRatio = _root._xmouse / Stage.width;
yRatio = _root._ymouse / Stage.height;
xDest = xRatio * (Stage.width - this._width);
yDest = yRatio * (Stage.height - this._height);
this._x += (xDest - this._x) / dampen;
this._y += (yDest - this._y) / dampen;
}
I am not an Actionscript expert. This may not be the best way to do it, but at least it works.
Hi man,
Sorry to keep bumping this up.
I get this error
Description:
Statement must appear within on/onClipEvent handler
Source:
sexyWomanLegPicture.onEnterFrame = function()
Env
December 17th, 2009, 04:56 AM
Can you attach an fla??
Powered by vBulletin® Version 4.1.10 Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.