Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Clearing The Previous Table Cell 1

Status
Not open for further replies.
Krus1972

Krus1972

Programmer
Mar 18, 2004
145
US
The following function is called when a onclick event is triggered from within a <TD> tag (table cell). This function simply changes the backgorund color when the table cell is clicked.

function theclick(obj)
{
var tTab=document.getElementById('thetable')
obj.style.backgroundColor = "#EDE9C6";
}

Can someone help me with a method that checks to see if a table cell has been previously clicked and if there has been a previously clicked cell, then change it back to white?

Thanks for any help.
 
Sort by date Sort by votes
Hi

Just save a reference to the previously clicked object.
JavaScript: 
[b]var[/b] prev

[b]function[/b] [COLOR=darkgoldenrod]theclick[/color][teal]([/teal]obj[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal]prev[teal])[/teal] obj[teal].[/teal]style[teal].[/teal]backgroundColor[teal]=[/teal][green][i]'white'[/i][/green][teal];[/teal]
  obj[teal].[/teal]style[teal].[/teal]backgroundColor [teal]=[/teal] [green][i]"#EDE9C6"[/i][/green][teal];[/teal]
  prev[teal]=[/teal]obj[teal];[/teal]
[teal]}[/teal]

Feherke.
 
Upvote 0 Downvote
feherke:

That didn't work. The previously clicked cells insist on staying yellow and don't want to turn white when another cell is clicked :(

Please click just to the RIGHT or LEFT of each of the images on this page:



I am advanced in ASP and ASP.NET , but, a novice in Javascript. Any help would be well appreciated.

Thank You
 
Upvote 0 Downvote
Hi

Oops, sorry. Typo.
JavaScript: 
[b]var[/b] prev

[b]function[/b] [COLOR=darkgoldenrod]theclick[/color][teal]([/teal]obj[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal]prev[teal])[/teal] [highlight]prev[/highlight][teal].[/teal]style[teal].[/teal]backgroundColor[teal]=[/teal][green][i]'white'[/i][/green][teal];[/teal]
  obj[teal].[/teal]style[teal].[/teal]backgroundColor [teal]=[/teal] [green][i]"#EDE9C6"[/i][/green][teal];[/teal]
  prev[teal]=[/teal]obj[teal];[/teal]
[teal]}[/teal]

Feherke.
 
Upvote 0 Downvote
feherke:

That worked with the exception of one minor thing. It cancels out my onmouseover function after the table cell is clicked and turns yellow. I am using the onmouseover to change the background to grey. Previusly clicked cells no longer turn grey when the mouse is over them. Is there a way around this so that previously clicked cells continue to turn grey?

Click to the right or left of the images on this page:


Thanks again for your help, much appreciated.
 
Upvote 0 Downvote
Hi

I would remove the event handler resetting from the [tt]onclick[/tt] handlers :
Code: 
[b]<td[/b] [maroon]onmouseover[/maroon][teal]=[/teal][green][i]"roll(this)"[/i][/green] [maroon]onmouseout[/maroon][teal]=[/teal][green][i]"rollout(this)"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"theclick(this)"[/i][/green] [b]>[/b]
Then I would use the same prev variable to identify the currently selected cell :
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]roll[/color][teal]([/teal]obj[teal])[/teal]
[teal]{[/teal]
  [highlight][b]if[/b] [teal]([/teal]obj[teal]==[/teal]prev[teal])[/teal] [b]return[/b][teal];[/teal][/highlight]
  obj[teal].[/teal]style[teal].[/teal]backgroundColor [teal]=[/teal] [green][i]"#EBEBEB"[/i][/green][teal];[/teal]
  obj[teal].[/teal]style[teal].[/teal]borderRight [teal]=[/teal] [green][i]"1px"[/i][/green][teal];[/teal]
  obj[teal].[/teal]style[teal].[/teal]borderColor [teal]=[/teal] [green][i]"#000000"[/i][/green][teal];[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]rollout[/color][teal]([/teal]obj[teal])[/teal]
[teal]{[/teal]
  [highlight][b]if[/b] [teal]([/teal]obj[teal]==[/teal]prev[teal])[/teal] [b]return[/b][teal];[/teal][/highlight]
  obj[teal].[/teal]style[teal].[/teal]backgroundColor [teal]=[/teal] [green][i]"#FFFFFF"[/i][/green][teal];[/teal]
  obj[teal].[/teal]style[teal].[/teal]border [teal]=[/teal] [green][i]"0px"[/i][/green][teal];[/teal]
  obj[teal].[/teal]style[teal].[/teal]bordercolor [teal]=[/teal] [green][i]"#FFFFFF"[/i][/green][teal];[/teal]
[teal]}[/teal]
Note that [tt]id[/tt] means identifier and identifiers must be unique. Do not use the same identifier for more then one element in the same document. ( I am talking about "column". )

Feherke.
 
Upvote 0 Downvote
feherke

This is working perfect thank you very much.

One last question,

If you visit my website at:
you will see that it works perfectly in the "Reviews" section. Just below you will see a "Comparisons" section. Each of these sections utilize an Iframe that contains a different webpage.

If a cell is clicked in the "reviews" section is there a way to turn back to white if a cell is cliked in the "comparisons" section? Right now it is possible for one cell in the "reviews" section and one cell in the "comparisons" section to be yellow. Although this webpage uses many Iframes, I only want ONE cell to be yellow at a time.

Is there a way to accomplish this?

Thank you.

Jeff
 
Upvote 0 Downvote
Hi

Is possible, supposing that the content of the [tt]iframe[/tt]s are downloaded from the same domain as the parent document.
[ul]
[li]Remove the [tt]var prev[/tt] declarations from the inner documents[/li]
[li]Add a [tt]var prev[/tt] declaration to the outer document[/li]
[li]In all inner documents change [tt]prev[/tt] to [tt]parent.prev[/tt][/li]
[/ul]


Feherke.
 
Upvote 0 Downvote
feherke:

This is working perfect thanks again for your help.
 
Upvote 0 Downvote
feherke:

If any of the the inner pages within their iframe is refreshed then none of the cells turn yellow in any of the iframes anymore. This only occurs if the parent page is not refreshed and one of the innrer iframe pages is refreshed.

You can see at and right click or press the "next" arrow on any of the iframes to refresh.

Is there a way to fix this so that the yellow will ALWAYS appear when the mouse is clicked?

Thanks.
 
Upvote 0 Downvote
feherke:

in IE8 It's reporting "Permission Denied" Code 0. This happens only if one of the inner pages is refreshed and the parent is not. It has something to do with the parent.prev variable after one of the inner pages is refereshed. Maybe because it's declared in the parent page? Is there some sort of sequence the pages must be loaded in ordeer for it to not to report this error?

This is frustrating.

Thanks for your help
 
Upvote 0 Downvote
Hi

That sounds like a browser bug to me. According to the Same origin policy there should be no problem accessing the parent's variable.

What I would try is to use full URLs in the next links, for example :
Code: 
[b]<a[/b] [maroon]title[/maroon][teal]=[/teal][green][i]"Next 8 Reviews"[/i][/green] [maroon]href[/maroon][teal]=[/teal][green][i]"[highlight][URL unfurl="true"]http://www.product.info[/URL][/highlight]/Featured_Video/f8_Video_Reviews.asp?thesearch=motorola+droid+review&keywords=motorola+droid&page=2"[/i][/green][b]><img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"/images/rightarrow.jpg"[/i][/green] [maroon]height[/maroon][teal]=[/teal][green][i]"25"[/i][/green] [maroon]width[/maroon][teal]=[/teal][green][i]"25"[/i][/green][b]></a>[/b]
But I would not expect too much from this. :-(

Sorry, no idea.

Feherke.
 
Upvote 0 Downvote
feherke:

Ok it only does this error if you refresh AFTER anyone one of the cells are clicked. If you refresh the inner pages when none of the cells have been clicked, then it will work perfectly.

The permissions denied error occurs only after "theclick(obj)" has been activated at least once.

Any ideas?

This is so frustrating.

Thanks for your help.
 
Upvote 0 Downvote
Hi

Hmm... Let us try on thing. Enclose the restoring code in error handler block :
Code: 
[b]function[/b] [COLOR=darkgoldenrod]theclick[/color][teal]([/teal]obj[teal])[/teal]
[teal]{[/teal]
  [highlight][b]try[/b] [teal]{[/teal][/highlight]
    [b]if[/b] [teal]([/teal]parent[teal].[/teal]prev[teal])[/teal] parent[teal].[/teal]prev[teal].[/teal]style[teal].[/teal]backgroundColor[teal]=[/teal][green][i]'white'[/i][/green][teal];[/teal]
  [highlight][teal]}[/teal] [b]catch[/b] [teal]([/teal]e[teal])[/teal] [teal]{}[/teal][/highlight]
  obj[teal].[/teal]style[teal].[/teal]backgroundColor [teal]=[/teal] [green][i]"#EDE9C6"[/i][/green][teal];[/teal]
  parent[teal].[/teal]prev[teal]=[/teal]obj[teal];[/teal]
[teal]}[/teal]

Feherke.
 
Upvote 0 Downvote
feherke:

I think that worked! I am going to continue testing.

Before placing the error catch, I tired it using Mozilla and Netscape. It worked fine without modifying the script. I have no idea why the "Permission Denied" error came up using only IE8. It appears that the error catch is working.

Thankyou so much for helping me on this. I never expected a simple thing like this to be so complicated.

Thanks again!

Jeff
 
Upvote 0 Downvote
Hi

Jeff said:
I have no idea why the "Permission Denied" error came up using only IE8.
Click to expand...
Well, parent.prev is a reference to an object. That object is one of those objects which builds up the DOM. The DOM is an object oriented representation of the HTML document's structure and content.

When you navigate forward clicking the "next" link, the current document is disposed, its representation is removed from the memory.

So somehow I can understand the error thrown by Explorer. As the related document was disposed, in that moment parent.prev probably pointed to an unallocated piece of memory.

However, only objects without reference should be eligible for garbage collection.

So the behavior I would expect, is that of the majority of the browsers. But I am not sure if Explorer's behavior is actually erroneous in this case.

Feherke.
 
Upvote 0 Downvote
I was going to use CSS instead of Javascript. Using the Pseudo class "TD:hover" is only supported by later browsers and I don't think all of the later browsers support it either. The Javascript is much more compatiable.

I really didn't want use the full URL path that loads the Iframes. The primary focus of this website is to have anyone use sub-domains to search, find product reviews, and other usefull information from their browser's address bar. Anyone can use keywords and type in sub-domainn such as:




Thanks again for all of your help and if you need some ASP help please ask

Jeff
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
298
coldbohemia
coldbohemia
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
333
malpa
malpa
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
324
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
365
xwb
xwb
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
127
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top