<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../ForwardHo/morpher.css" type="text/
css" />
<!-- put your mootools reference in like this -->
<script type="text/javascript" src="../ForwardHo/mootools.js"></
script>
<!-- now you're rollin' -->
<script type="text/javascript" src="../ForwardHo/morpher.js"></
script>
<title></title>
</head>
<body>
<p>
<a href="morpher.html" id="morph1">morph to morph1</a> | <a
href="morpher.html" id="morph2">morph to morph2</a>
</p>
<div id="morpher" class="morph1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Without including the mootools file in your header you'll never get
any mootools javascript to work, it contains all the stuff that makes
stuff do stuff. When you ask it to morph, your browser looks for the
function "morph" and can't find it because you haven't included it.
There's javascript, and then there's mootools. Mootools is a whole
bunch of javascript that makes javascript work the way it should have
in the first place (my own feelings). Your "javascript" isn't really
javascript code, it's mootools code. So again, you need mootools
loaded in your page the way I showed you up top to make things morph.
Good luck!
p.s. Javascript drove me nuts until I found mootools--now my wife
thinks I like writing code more than her, but that's not true at all.
Anyway, stick with it, you'll love it when some of the basics stick.
On Jan 26, 1:45 am, ksq08 <keith.sp...@ntlworld.com> wrote:
> I agree my tone was cold and abrasive. Apologies for that. You
> wouldn't believe I've been a writer for 30 years. Or perhaps you
> would. Anyway an unpleasant tone is ugly to me, so I apologise for my
> own. You are quite right to tick me off for it. I cringe when I read
> it again. My background is graphics based and JS still intimidates the
> heck out of me. If I understand you correctly, the JS script is not
> working because I haven't put the script on the page. But can't this
> be done with script tags? i.e:
>
> <script type="text/javascript" src="../ForwardHo/morpher.js"></script>
>
> Which is how I referenced it on this link:
>
> http://www.ksqdesign.com/signature/ForwardHo/morpher.html
>
> If a link rel works for the CSS i.e:
>
> <link rel="stylesheet" href="../ForwardHo/morpher.css" type="text/
> css" />
>
> and it obviously works because the text colour and font obey the above
> CSS href,
>
> what's preventing the JS script tag from doing the same job with the
> script tag?
>
> but I note you also point out my syntax here:
>
> (myMorph.start('.className'); //notice the dot?)
>
> I'll check the syntax errors in the morning as it's 10 pm here and I
> need a fresh brain to take this stuff on board. I'm setting up an
> image morphing project on my own site. And the purpose of this for me
> is to have a "Before" and "After" [the morph to morph1 and 2 hrefs]
> below each image so that users will click after to see my Photoshop
> skills. Once I make the JS engage, the next step for me is to set up a
> cross-fading background image script. Having explained that, am I just
> barking up the wrong tree trying to employ this framework? And if so,
> if you could guide me to a better method, I'd be very grateful. I
> don't want to just get my hand held and learn nothing. I want to
> learn. And get beyond HTML and CSS and make real progress with JS and
> all round front end development. I know MooTools is not strictly JS
> and that there's also JQuery and DevNet and many other ports of call.
> My point is I want to grow as a developer. I could do all this with
> Flash but I want to do it with a JS script so I can stop being a baby
> with the language.
>
> Many thanks for your help and patience. And apologies again for my
> cold tone.
>
> Keith
>
> On Jan 26, 7:00 pm, Tom Occhino <tomocch...@gmail.com> wrote:
>
>
>
> > 1. Please use a nicer tone. Typing in capital letters LIKE THIS is
> > not going to get your question answered any faster.
>
> > 2. Include mootools.js in your pages. None of the links you shared
> > include any script more than a snippet of MooTools-like code. You
> > need to actually include the framework in your pages if you want to
> > use it.
>
> > 3. Even if you included the script, you're missing some things, your
> > syntax is incorrect. (myMorph.start('.className'); //notice the dot?)
>
> > 4. Background images cannot be transitioned. More on that:
>
> > * Only Mathematically Calculable values can be transitioned.
> > * Background Images cannot be animated using CSS / Fx.Morph alone.
> > * If it's not a color, a dimension / location, or opacity, it cannot
> > be animated with Fx.Tween or Fx.Morph.
>
> > As Guillermo said, time-based calculations between two numeric
> > values. If you want some kind of cross fading background image
> > script, then you can search for that, but if you post again, please
> > try to use a bit of a nicer tone.
>
> > Thanks,
> > Tom
>
> > On Jan 25, 2009, at 9:52 PM, Guillermo Rauch wrote:
>
> > > Morph works with time-based calculations between two numeric values.
> > > It won't work with the background-image property.
> > > I suggest you overlap images and use fade('out') (optionally combined
> > > with fade('in') on the second image).
>
> > > On Sun, Jan 25, 2009 at 8:35 PM, ksq08 <keith.sp...@ntlworld.com>
> > > wrote:
>
> > >> Dear Users
>
> > >> I cannot make the morph feature work. I've tried it locally on
> > >> Dreamweaver, just testing on Firefox. And I've also launched it to
> > >> two
> > >> live links and they both don't work. The CSS is engaging but it's
> > >> static and does not morph to the second state.
>
> > >>http://www.ksqdesign.com/signature/ForwardHo/morpher.html
>
> > >>http://www.ksqdesign.com/morphthisone.html
>
> > >> Both links fail to engage the javascript. I've ensured that the "Dom
> > >> ready" line starts the javascript file. As per your instructions to
> > >> users, I'm not "just cutting and pasting", I'm evaluating the
> > >> javascript and I SPECIFICALLY want to know if a CSS background-image
> > >> value can be added to the javascript file so that I can make the
> > >> morph
> > >> asset work with images. But before I can do that, I need to
> > >> understand
> > >> why only the CSS is working and NOT the javascript. Please, what am I
> > >> doing wrong? I worked with it for hours yesterday. I've made the
> > >> other
> > >> mootools morph asset work but this one is structured better for my
> > >> needs. Why can't I make this one work?
>
> > >> Would you also please be kind enough to advise if I add a
> > >> "background-
> > >> image" CSS value here:
>
> > >> Fx.CSS.Styles = ["backgroundColor",
> > >> "backgroundPosition", "color",
> > >> "width", "height", "left", "top", "bottom", "right", "fontSize",
> > >> "letterSpacing", "lineHeight", "textIndent", "opacity"];
>
> > >> Will that make the morph work with background images?
>
> > >> Many thanks for your time and assistance.
>
> > > --
> > > Guillermo Rauch
> > >http://devthought.com
