Hi Daryl,
what you are suggesting sounds like a plan, however when I use the
following syntax
var thisInstance = this;
myListItem.onclick = function () { thisInstance.doMakeActive( this ); }
And output the dom as a string, the whole onclick event is not there, any ideas?
thanks.
On 2/21/06, darryl lyons <[EMAIL PROTECTED]> wrote:
> Your problem is that you need to reference the function in the onclick as
> part of the INSTANCE of the object. Otherwise, the onclick event is firing
> a call to a global method.
>
> E.g.
>
> TabbedInterface.prototype.doMakeActive = function(obj)
> {}
>
> TabbedInterface.prototype.doAddTab = function()
> {
> var thisInstance = this;
>
> var myListItem = document.createElement( "li" );
> var myLink =
> document.createElement( "a" );
> var myIFrame =
> document.createElement( "iframe" );
> myLink.onclick =
> "return false;";
> myLink.innerHTML =
> linkText;
> myLink.href = "";
> myListItem.onclick
> = function () { thisInstance.doMakeActive( this ); }
>
> }
>
> Darryl
>
>
>
> On 2/21/06, Taco Fleur <[EMAIL PROTECTED] > wrote:
> >
> >
> > Doesn't work, see attached;
> > <script>
> > //var activeTab = null;
> > function _doMakeActive( object )
> > {
> > var layerType = "iframe";
> > if ( activeTab != null )
> > {
> >
> activeTab.style.backgroundColor = "##D4D0C8";
> >
> activeTab.childNodes[ 0 ].style.color = "##000";
> > }
> >
> object.style.backgroundColor = "##0A246A";
> > object.childNodes[ 0
> ].style.color = "##fff";
> > activeTab = object;
> >
> object.getElementsByTagName( layerType )[ 0 ].style[ "display" ] = "block";
> > var listItemCollection =
> object.parentNode.getElementsByTagName ( "li" );
> > for ( var i = 0; i <
> listItemCollection.length; i++ )
> > {
> > if (
> listItemCollection[ i ] != object )
> > {
> >
> listItemCollection[ i ].getElementsByTagName( layerType )[
> 0
> > ].style[ "display" ] = "none";
> > }
> > //alert(
> listItemCollection[ i ].innerHTML );
> > }
> > }
> >
> > function TabbedInterface(
> identity )
> > {
> > this.activeTab = null;
> > this.dom =
> document.createElement( "ul" );
> > this.dom.id = identity;
> > return this;
> > }
> > TabbedInterface.prototype =
> > {
> > init:function()
> > {
> > return this;
> > },
> > getActiveTab:function()
> > {
> > return
> this.activeTab;
> > },
> > setActiveTab:function(
> activeTab )
> > {
> >
> this.setActiveTab = activeTab;
> > return this;
> > },
> > getDOM:function()
> > {
> > return this.dom;
> > },
> > doAddTab:function(
> linkText, source )
> > {
> > var myListItem =
> document.createElement ( "li" );
> > var myLink =
> document.createElement( "a" );
> > var myIFrame =
> document.createElement( "iframe" );
> > myLink.onclick =
> "return false;";
> > myLink.innerHTML
> = linkText;
> > myLink.href = "";
> >
> myListItem.onclick = function () { doMakeActive( this ); }
> >
> >
> //myListItem.onclick = "doMakeActive( this );";
> >
> myListItem.appendChild( myLink );
> > myIFrame.src =
> source;
> >
> myListItem.appendChild( myIFrame );
> >
> this.getDOM().appendChild( myListItem );
> >
> > return this;
> > },
> > doWrite:function() //
> Writes the DOM to the document
> > {
> > document.write(
> this.getDOM().outerHTML );
> > alert(
> this.getDOM().outerHTML );
> > return this;
> > },
> > doMakeActive:function(
> object, selfReference )
> > {
> > alert( 'yup' );
> > var layerType =
> "iframe";
> > var activeTab =
> this.activeTab;
> > if ( activeTab !=
> null )
> > {
> >
> activeTab.style.backgroundColor = "##D4D0C8";
> >
> activeTab.childNodes[ 0 ].style.color = "##000";
> > }
> >
> object.style.backgroundColor = "##0A246A";
> >
> object.childNodes[ 0 ].style.color = "##fff";
> >
> this.setActiveTab( object );
> >
> object.getElementsByTagName( layerType )[ 0 ].style[ "visibility"
> > ] = "visible";
> > var
> listItemCollection = object.parentNode.getElementsByTagName
> ( "li" );
> > for ( var i = 0;
> i < listItemCollection.length; i++ )
> > {
> > if (
> listItemCollection[ i ] != object )
> > {
> >
> listItemCollection[ i ].getElementsByTagName( layerType )[
> 0
> > ].style[ "visibility" ] = "hidden";
> > }
> > }
> >
> > return this;
> > }
> > }
> >
> > var tabbedInterface = new TabbedInterface(
> "tabbed-interface" ).init();
> > //doMakeActive =
> tabbedInterface.doMakeActive;
> > tabbedInterface.doAddTab ( "Job", "job-detail.cfm"
> );
> > tabbedInterface.doAddTab( "Company",
> "company-detail.cfm" );
> > tabbedInterface.doAddTab( "Skills", "
> job-skill.cfm" );
> > tabbedInterface.doAddTab( "Internal",
> "internal.cfm" );
> > tabbedInterface.doAddTab( "Other", "other.cfm" );
> > tabbedInterface.doWrite();
> > </script>
> >
> > On 2/21/06, Steve Onnis <[EMAIL PROTECTED]> wrote:
> > >
> > > Try this
> > >
> > > doAddTab:function( linkText, source )
> > > {
> > > var myListItem = document.createElement( "li" );
> > > var myLink = document.createElement( "a" );
> > > var myIFrame = document.createElement( "iframe" );
> > > myLink.onclick = "return false;";
> > > myLink.innerHTML = linkText;
> > > myLink.href = "";
> > > myListItem.onclick = function () {
> > > doMakeActive( this );
> > > }
> > > return this;
> > > },
> > >
> > > That is ofcourse you have the doAddTab function associated with the rest
> of
> > > the object.
> > >
> > > Probably better to use prototypes for something like this
> > >
> > >
> > >
> > > -----Original Message-----
> > > From: cfaussie@googlegroups.com [mailto:[EMAIL PROTECTED] On
> Behalf
> > > Of Taco Fleur
> > > Sent: Tuesday, February 21, 2006 10:22 PM
> > > To: cfaussie@googlegroups.com
> > > Subject: [cfaussie] [OT] Reference to JS object
> > >
> > >
> > > I have a JS object with the following method;
> > >
> > > doAddTab:function( linkText, source )
> > > {
> > > var myListItem = document.createElement( "li" );
> > > var myLink = document.createElement( "a" );
> > > var myIFrame = document.createElement( "iframe" );
> > > myLink.onclick = "return false;";
> > > myLink.innerHTML = linkText;
> > > myLink.href = "";
> > > myListItem.onclick = "doMakeActive( this );";
> > > ................
> > > return this;
> > > },
> > >
> > > The problem is with myListItem.onclick = "doMakeActive( this );";
> > > as it should really have a reference to the object itself, eg.
> > > myListItem.onclick = "SomeObject.doMakeActive( this );";
> > >
> > > But ofcourse I don't know what SomeObject is until the object is
> > > instantiated like so;
> > > myObject = new SomeName().init();
> > >
> > > Does anyone know a way around this?
> > >
> > > --
> > > Taco Fleur - http://www.pacificfox.com.au
> > > Web Design, Web development, Graphic Design and Complete Internet
> Solutions
> > > an industry leader with commercial IT experience since 1994 .
> > >
> > >
> > >
> > >
> > >
> > >
> >
> >
> > --
> > Taco Fleur - http://www.pacificfox.com.au
> > Web Design, Web development, Graphic Design and Complete Internet
> Solutions
> >
> >
> >
>
--
Taco Fleur - http://www.pacificfox.com.au
Web Design, Web development, Graphic Design and Complete Internet Solutions
an industry leader with commercial IT experience since 1994 …
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"cfaussie" group.
To post to this group, send email to cfaussie@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at http://groups.google.com/group/cfaussie
-~----------~----~----~----~------~----~------~--~---
