I''ve been trying to get a good handle on prototype but I''ve
been
unsuccessful in selecting elements I want.
When you click on a thumbnail it displays the larger version of the
image. That works great.
What I''d like to do next is select one of the thumbnail images and add
a class value.
gallery.html
===============================================================================<div
class="thumbnails" id="thumbnails" >
<img src="images/thumbnail_houseboat_00.gif" alt=""
id="houseboat_00"
onClick="change_image(''00'');" />
<img src="images/thumbnail_houseboat_01.gif" alt=""
id="houseboat_01"
onClick="change_image(''01'');" />
<img src="images/thumbnail_houseboat_02.gif" alt=""
id="houseboat_02"
onClick="change_image(''02'');" />
<img src="images/thumbnail_houseboat_03.gif" alt=""
id="houseboat_03"
onClick="change_image(''03'');" />
<img src="images/thumbnail_houseboat_04.gif" alt=""
id="houseboat_04"
onClick="change_image(''04'');" />
<img src="images/thumbnail_houseboat_05.gif" alt=""
id="houseboat_05"
onClick="change_image(''05'');" />
</div><!-- thumbnails -->
<img src="images/houseboat_00.gif" alt=""
id="display" />
===============================================================================
main.js
===============================================================================function
change_image(index)
{
$(''display'').src = "images/houseboat_" + index +
".gif";
path = ''div.thumbnails img.houseboat_'' + index;
$$(path).className = "active";
};
===============================================================================
I''d also like to know how I could reference the element that is
calling the function.
So for instance if the img with id houseboat_03 called the
change_image function
how could can I have direct reference to that element with the keyword
this?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2007-Mar-17 16:53 UTC
Re: [$$] trouble selecting elements with prototype
OmenKing a écrit :> path = ''div.thumbnails img.houseboat_'' + index;Your "houseboat_" thing is an ID, not a class. Just go: $(''houseboat_'' + index).addClassName(''active''); WAY faster, and safer ;-)> I''d also like to know how I could reference the element that is > calling the function.By not using inline event binders, but using Event.observe: your function will get an Event object as its argument (even in MSIE!), and you can then use Event.element(yourArg) to get the (unextended) ref. The best way here would be to register only ONE handler at the div level, and use this to detect that the click is on an image indeed, then use this image: function changeImage(e) { var elt = Event.element(e); if (elt.tagName != ''IMG'') return; Event.stop(e); $(''display'').src = "images/" + elt.id + ".gif"; $(elt).addClassName(''active''); } Event.observe(window, ''load'', function() { $(''thumbnails'').observe(''click'', changeImage); }); -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I''m having a difficult time to get events working at all.
I came across this link:
http://encytemedia.com/blog/articles/2006/02/08/working-with-events-in-prototype
When I try what is suggested:
<a id="clicker" href="http://foo.com">Click
me</a>
Event.observe(''clicker'', ''click'',
function(event)
{ alert(''clicked!'');});
I always get an error:
element has no properties
_observeAndCache(null, "click", function(), false)prototype.js (line
2239)
observe(null, "click", function(), false)prototype.js (line 2266)
[Break on this error] if (element.addEventListener) {
On Mar 17, 12:53 pm, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org>
wrote:> OmenKing a écrit :
>
> > path = ''div.thumbnails img.houseboat_'' + index;
>
> Your "houseboat_" thing is an ID, not a class. Just go:
>
> $(''houseboat_'' +
index).addClassName(''active'');
>
> WAY faster, and safer ;-)
>
> > I''d also like to know how I could reference the element that
is
> > calling the function.
>
> By not using inline event binders, but using Event.observe: your
> function will get an Event object as its argument (even in MSIE!), and
> you can then use Event.element(yourArg) to get the (unextended) ref.
>
> The best way here would be to register only ONE handler at the div
> level, and use this to detect that the click is on an image indeed, then
> use this image:
>
> function changeImage(e) {
> var elt = Event.element(e);
> if (elt.tagName != ''IMG'')
> return;
> Event.stop(e);
> $(''display'').src = "images/" + elt.id +
".gif";
> $(elt).addClassName(''active'');
>
> }
>
> Event.observe(window, ''load'', function() {
> $(''thumbnails'').observe(''click'',
changeImage);
>
> });
>
> --
> Christophe Porteneuve a.k.a. TDD
> "[They] did not know it was impossible, so they did it." --Mark
Twain
> Email: t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2007-Mar-17 21:28 UTC
Re: [$$] trouble selecting elements with prototype
OmenKing a écrit :> element has no propertiesThat''s because you put your Event.observe call at a point in time where your DOM element has not been created yet. Likely in a script loaded from the head, but at the root level, not in a function that gets called once the DOM is loaded. That''s a common mistake for people just starting to put their JS outside their HTML. If you look at my code in my previous reply, it''ll bind your event in response to window''s load event: the DOM will be there then. -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I attempted to use your function but I get the following error. event has no properties element(undefined)prototype.js (line 2197) changeImage(undefined)main.js (line 27) onclick(click clientX=0, clientY=0)gallery.html (line 1) [Break on this error] return event.target || event.srcElement; I have my javascript file externally linked in the head. Did you say that my problem could be due with the fact how I included my javascript and what order things are loading in? On Mar 17, 5:28 pm, Christophe Porteneuve <t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:> OmenKing a écrit : > > > element has no properties > > That''s because you put your Event.observe call at a point in time where > your DOM element has not been created yet. > > Likely in a script loaded from the head, but at the root level, not in a > function that gets called once the DOM is loaded. That''s a common > mistake for people just starting to put their JS outside their HTML. > > If you look at my code in my previous reply, it''ll bind your event in > response to window''s load event: the DOM will be there then. > > -- > Christophe Porteneuve a.k.a. TDD > "[They] did not know it was impossible, so they did it." --Mark Twain > Email: t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2007-Mar-18 16:00 UTC
Re: [$$] trouble selecting elements with prototype
You must not have used the whole setting. Maybe you used an inline handler? You should post a minimal reproduction online so we can get the whole picture on how you use this stuff, and tell you exactly what needs adjustment. -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
gallery.html
==================================================================================================<!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">
<head>
<title>Cruise Beautiful Lake Temagami</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta name="generator" content="NotePad++" />
<link href="css/basic.css" rel="stylesheet"
type="text/css"
media="all" />
<script type="text/javascript"
src="scripts/prototype.js"></script>
<script type="text/javascript"
src="scripts/main.js"></script>
</head>
<body>
<div class="container">
<div class="header"><h1><span>Cruise
Beautiful</span></h1></
div><!-- header -->
<div class="navigation">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="gallery.html"
class="active">Gallery</a></li>
</ul>
</div><!-- navigation -->
<div class="content_wrap">
<div class="content">
<a id="clicker" href="gallery.html">Click me</a>
<div class="thumbnails" id="thumbnails" >
<img src="images/thumbnail_houseboat_00.gif" alt=""
id="houseboat_00"
onClick="changeImage()" />
<img src="images/thumbnail_houseboat_01.gif" alt=""
id="houseboat_01" />
<img src="images/thumbnail_houseboat_02.gif" alt=""
id="houseboat_02" />
<img src="images/thumbnail_houseboat_03.gif" alt=""
id="houseboat_03" />
<img src="images/thumbnail_houseboat_04.gif" alt=""
id="houseboat_04" />
<img src="images/thumbnail_houseboat_05.gif" alt=""
id="houseboat_05" />
</div><!-- thumbnails -->
<img src="images/houseboat_00.gif" alt=""
id="display" />
</div><!-- content -->
</div><!-- content_wrap -->
<div class="footer"><p>©2007 Cruise
Beautiful</p></div><!--
footer -->
</div><!-- container -->
</body>
</html>
==================================================================================================
main.js
==================================================================================================/*
function change_image(index)
{
this.src = "images/houseboat_00"
$(''display'').src = "images/houseboat_" + index +
".gif";
path = ''houseboat_'' + index;
$(path).className = "active";
}; */
// function change_image(event)
// {
// var element_tag = Event.element(event);
// if (element_tag.tagName != ''img'')
// return;
// Event.stop(event);
// $(''display'').src = "images/" + element_tag.id +
".gif";
// $(element_tag).addClassName(''active'');
// }
// Event.observe(window, ''load'',
// function()
// {
// $(''thumbnails'').observe(''click'',
change_image);
// }
// );
function changeImage(e) {
var elt = Event.element(e);
if (elt.tagName != ''IMG'')
return;
Event.stop(e);
$(''display'').src = "images/" + elt.id +
".gif";
$(elt).addClassName(''active'');
}
Event.observe(window, ''load'', function() {
$(''thumbnails'').observe(''click'',
changeImage);
});
//Event.observe(''clicker'', ''click'',
function(event)
{ alert(''clicked!'');});
==================================================================================================
On Mar 18, 12:00 pm, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org>
wrote:> You must not have used the whole setting. Maybe you used an inline
handler?
>
> You should post a minimal reproduction online so we can get the whole
> picture on how you use this stuff, and tell you exactly what needs
> adjustment.
>
> --
> Christophe Porteneuve a.k.a. TDD
> "[They] did not know it was impossible, so they did it." --Mark
Twain
> Email: t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
what do you think my problem with my code is? On Mar 18, 1:30 pm, "OmenKing" <omen.k...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> gallery.html > ==================================================================================================> <!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"> > <head> > <title>Cruise Beautiful Lake Temagami</title> > <meta http-equiv="content-type" content="text/html;charset=utf-8" /> > <meta name="generator" content="NotePad++" /> > <link href="css/basic.css" rel="stylesheet" type="text/css" > media="all" /> > <script type="text/javascript" src="scripts/prototype.js"></script> > <script type="text/javascript" src="scripts/main.js"></script> > </head> > <body> > <div class="container"> > <div class="header"><h1><span>Cruise Beautiful</span></h1></ > div><!-- header --> > <div class="navigation"> > <ul> > <li><a href="index.html">About</a></li> > <li><a href="gallery.html" class="active">Gallery</a></li> > </ul> > </div><!-- navigation --> > <div class="content_wrap"> > <div class="content"> > <a id="clicker" href="gallery.html">Click me</a> > <div class="thumbnails" id="thumbnails" > > <img src="images/thumbnail_houseboat_00.gif" alt="" id="houseboat_00" > onClick="changeImage()" /> > <img src="images/thumbnail_houseboat_01.gif" alt="" > id="houseboat_01" /> > <img src="images/thumbnail_houseboat_02.gif" alt="" > id="houseboat_02" /> > <img src="images/thumbnail_houseboat_03.gif" alt="" > id="houseboat_03" /> > <img src="images/thumbnail_houseboat_04.gif" alt="" > id="houseboat_04" /> > <img src="images/thumbnail_houseboat_05.gif" alt="" > id="houseboat_05" /> > </div><!-- thumbnails --> > <img src="images/houseboat_00.gif" alt="" id="display" /> > > </div><!-- content --> > </div><!-- content_wrap --> > <div class="footer"><p>©2007 Cruise Beautiful</p></div><!-- > footer --> > </div><!-- container --> > </body> > </html> > ==================================================================================================> > main.js > ==================================================================================================> /* function change_image(index) > { > this.src = "images/houseboat_00" > $(''display'').src = "images/houseboat_" + index + ".gif"; > path = ''houseboat_'' + index; > $(path).className = "active"; > > }; */ > > // function change_image(event) > // { > // var element_tag = Event.element(event); > // if (element_tag.tagName != ''img'') > // return; > // Event.stop(event); > // $(''display'').src = "images/" + element_tag.id + ".gif"; > // $(element_tag).addClassName(''active''); > // } > > // Event.observe(window, ''load'', > // function() > // { > // $(''thumbnails'').observe(''click'', change_image); > // } > // ); > > function changeImage(e) { > var elt = Event.element(e); > if (elt.tagName != ''IMG'') > return; > Event.stop(e); > $(''display'').src = "images/" + elt.id + ".gif"; > $(elt).addClassName(''active''); > > } > > Event.observe(window, ''load'', function() { > $(''thumbnails'').observe(''click'', changeImage); > > }); > > //Event.observe(''clicker'', ''click'', function(event) > { alert(''clicked!'');}); > ==================================================================================================> > On Mar 18, 12:00 pm, Christophe Porteneuve <t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote: > > > You must not have used the whole setting. Maybe you used an inline handler? > > > You should post a minimal reproduction online so we can get the whole > > picture on how you use this stuff, and tell you exactly what needs > > adjustment. > > > -- > > Christophe Porteneuve a.k.a. TDD > > "[They] did not know it was impossible, so they did it." --Mark Twain > > Email: t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Event.observe(window, ''load'', function() {
$$(''.thumbnails img'').each(
function (thumb) { Event.observe(thumb, ''click'',changeImage);
}); });
You are assigning a click event to the thumbnail div which is not an img
tag- the above code will assign the click event to all the thumbnails in the
div.
On 3/21/07, OmenKing <omen.king-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
>
> what do you think my problem with my code is?
>
> On Mar 18, 1:30 pm, "OmenKing"
<omen.k...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > gallery.html
> >
>
==================================================================================================>
> <!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">
> > <head>
> > <title>Cruise Beautiful Lake
Temagami</title>
> > <meta http-equiv="content-type"
> content="text/html;charset=utf-8" />
> > <meta name="generator"
content="NotePad++" />
> > <link href="css/basic.css"
rel="stylesheet"
> type="text/css"
> > media="all" />
> > <script type="text/javascript"
> src="scripts/prototype.js"></script>
> > <script type="text/javascript"
> src="scripts/main.js"></script>
> > </head>
> > <body>
> > <div class="container">
> > <div
class="header"><h1><span>Cruise
> Beautiful</span></h1></
> > div><!-- header -->
> > <div class="navigation">
> > <ul>
> > <li><a
href="index.html
> ">About</a></li>
> > <li><a
href="gallery.html"
> class="active">Gallery</a></li>
> > </ul>
> > </div><!-- navigation -->
> > <div class="content_wrap">
> > <div class="content">
> > <a id="clicker" href="gallery.html">Click
me</a>
> > <div class="thumbnails" id="thumbnails" >
> > <img src="images/thumbnail_houseboat_00.gif"
alt=""
> id="houseboat_00"
> > onClick="changeImage()" />
> > <img src="images/thumbnail_houseboat_01.gif"
alt=""
> > id="houseboat_01" />
> > <img src="images/thumbnail_houseboat_02.gif"
alt=""
> > id="houseboat_02" />
> > <img src="images/thumbnail_houseboat_03.gif"
alt=""
> > id="houseboat_03" />
> > <img src="images/thumbnail_houseboat_04.gif"
alt=""
> > id="houseboat_04" />
> > <img src="images/thumbnail_houseboat_05.gif"
alt=""
> > id="houseboat_05" />
> > </div><!-- thumbnails -->
> > <img src="images/houseboat_00.gif" alt=""
id="display" />
> >
> > </div><!-- content -->
> > </div><!-- content_wrap -->
> > <div
class="footer"><p>©2007 Cruise
> Beautiful</p></div><!--
> > footer -->
> > </div><!-- container -->
> > </body>
> > </html>
> >
>
==================================================================================================>
>
> > main.js
> >
>
==================================================================================================>
> /* function change_image(index)
> > {
> > this.src = "images/houseboat_00"
> > $(''display'').src =
"images/houseboat_" + index + ".gif";
> > path = ''houseboat_'' + index;
> > $(path).className = "active";
> >
> > }; */
> >
> > // function change_image(event)
> > // {
> > // var element_tag = Event.element(event);
> > // if (element_tag.tagName != ''img'')
> > // return;
> > // Event.stop(event);
> > // $(''display'').src = "images/" +
element_tag.id + ".gif";
> > // $(element_tag).addClassName(''active'');
> > // }
> >
> > // Event.observe(window, ''load'',
> > // function()
> > // {
> > //
$(''thumbnails'').observe(''click'',
change_image);
> > // }
> > // );
> >
> > function changeImage(e) {
> > var elt = Event.element(e);
> > if (elt.tagName != ''IMG'')
> > return;
> > Event.stop(e);
> > $(''display'').src = "images/" + elt.id +
".gif";
> > $(elt).addClassName(''active'');
> >
> > }
> >
> > Event.observe(window, ''load'', function() {
> > $(''thumbnails'').observe(''click'',
changeImage);
> >
> > });
> >
> > //Event.observe(''clicker'',
''click'', function(event)
> > { alert(''clicked!'');});
> >
>
==================================================================================================>
>
> > On Mar 18, 12:00 pm, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:
> >
> > > You must not have used the whole setting. Maybe you used an
inline
> handler?
> >
> > > You should post a minimal reproduction online so we can get the
whole
> > > picture on how you use this stuff, and tell you exactly what
needs
> > > adjustment.
> >
> > > --
> > > Christophe Porteneuve a.k.a. TDD
> > > "[They] did not know it was impossible, so they did
it." --Mark Twain
> > > Email: t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---