Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old January 1st, 2005, 11:00 PM
Friend of Wrox
 
Join Date: Aug 2004
Location: , , .
Posts: 117
Thanks: 0
Thanked 2 Times in 2 Posts
Default Table and border

Hi
I'm not good on javascript and
I'm trying to make a search engine like yahoo (I'm talking about design). in yahoo if we click on images or ..... the bgcolor and border color will change. I try to do that on php, but when they click on images link the IE will read the whole page and after that it will change but in yahoo only the search table will change and IE will read only that part not a whole page.(I mean on yahoo when you click on images you not gonna see the loader on bottom)
So i wondering maybe you guys can help me to create it.

Thanks
Regards
Mani_he

Reply With Quote
  #2 (permalink)  
Old January 2nd, 2005, 08:42 AM
Imar's Avatar
Wrox Author
Points: 71,164, Level: 100
Points: 71,164, Level: 100 Points: 71,164, Level: 100 Points: 71,164, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,960
Thanks: 79
Thanked 1,559 Times in 1,536 Posts
Default

Hi there,

They do this by dynamically changing the class name of the object you click on.

If you look at the source for, say, the Search Images button, you'll see this:
Code:
<a id=v2 class=o onfocus=t(this) onclick="return false" href="r/00/*-
http://images.search.yahoo.com/search/images" title="Search 
Images"><b></b>Images</a>
When the button gets the focus (e.g. by clicking it or tabbing to it) onfocus fires and calls the function t. This function then dynamically changes the className for the object.

Check out this code snippet for a very basic idea on how to implement this yourself:

http://Imar.Spaanjaars.Com/QuickDocId.aspx?QUICKDOC=299

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Tiny tears by Tindersticks (From the album: Donkeys 92-97) What's This?
Reply With Quote
  #3 (permalink)  
Old January 2nd, 2005, 03:28 PM
Friend of Wrox
 
Join Date: Aug 2004
Location: , , .
Posts: 117
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Hi
Thanks for your reply.
you code is really use full.
and i also find out if i put return false on href="" the link will never gose anywhere, but still i have some problem:
here is the code that i made:

function on('id')
{
var action = document.getElementById('id');
if(action == e1)
document.bgColor = 'RED';
}

<a id=e1 href="../index.php" onClick="on('e1'}; return false">1</a>

but the problem is when they click on that link, the body bgColor will change instead of table bgColor.
the things that i really do not understand is how can i chnage the style on that function about and put it on other table. for example:
if they click on the link above i want the class of this table change

<table class=""></table>

if i can change the class on on() and put it on the table above, i can be able to change the table color.
and also i will work on the code that you gave me.

Thanks
Regards
Mani_he

Reply With Quote
  #4 (permalink)  
Old January 2nd, 2005, 03:46 PM
Imar's Avatar
Wrox Author
Points: 71,164, Level: 100
Points: 71,164, Level: 100 Points: 71,164, Level: 100 Points: 71,164, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,960
Thanks: 79
Thanked 1,559 Times in 1,536 Posts
Default

You're mixing things up. First of all, you're passing a string in the on method, not a parameter:
Code:
function on('id')
should be:
Code:
function on(id)
Further, try to stay away from reserved words. On and id sound reserved to me:
Code:
function SetBackground(tableId)
is less likely to cause conflicts.

Next,
Code:
var action = document.getElementById('id');
gets a reference to an object in the page called id. So, after this statement, action contains a reference to an object, not just a simple string. Again, action sounds like a reserved word, so it's probably better to change it.

Next, you *are* setting the background of the document, so I am not surprised the document changes and not the table:
Code:
document.bgColor = 'RED';
With this code you are setting the HTML bgcolor attribute to Red.

I suggest you change it all to something like this:
Code:
function SetBackground(tableId)
{
  var theTable = document.getElementById(tableId);
  theTable.style.backgroundColor = 'Red';
}
Combined with the following HTML markup, things will work as expected:
Code:
<table width="100%" border="1" id="MyTable">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<input type="button" onclick="SetBackground('MyTable');" value="Click to change Color" />
Cheers,


Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Daydreaming by Massive Attack (Track 7 from the album: Blue Lines) What's This?
Reply With Quote
  #5 (permalink)  
Old January 3rd, 2005, 10:35 PM
Friend of Wrox
 
Join Date: Aug 2004
Location: , , .
Posts: 117
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Hi
your code is working perfectly, but I have another question:
if we have two input like:

<input type="button" onclick="SetBackground('MyTable1');" value="Click to change Color" />

<input type="button" onclick="SetBackground('MyTable2');" value="Click to change Color" />
so the code will be:

function SetBackground(tableId)
{
  var theTable = document.getElementById(tableId);
  theTable.style.backgroundColor = 'Red';
}

<table width="100%" border="1" id="MyTable">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<input type="button" onclick="SetBackground('MyTable1');" value="Click to change Color" />
<input type="button" onclick="SetBackground('MyTable2');" value="Click to change Color" />

so when the people click on the first button i have to change the <table id="MyTable1"> and for 2nd button to <table id="MyTable2">

so my function will be like this:
function SetBackground(tableId)
{
  var theTable = document.getElementById(tableId);
  if(theTable == MyTable1)
  {
    theTable.style.backgroundColor = 'Red';
    document.write(MyTable1)
  }
  if(theTable == MyTable2)
  {
    theTable.style.backgroundColor = 'Red';
    document.write(MyTable2)
  }
}

<table width="100%" border="1" id="SetBackground()">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<input type="button" onclick="SetBackground('MyTable1');" value="Click to change Color" />
<input type="button" onclick="SetBackground('MyTable2');" value="Click to change Color" />

the output for <table id=""> is correct, that means the document.write will write MyTable1 but the background never chnage and i have no idea why

can you please help me for that.

Thanks
Regards
Mani_he





Reply With Quote
  #6 (permalink)  
Old January 4th, 2005, 03:34 PM
Friend of Wrox
 
Join Date: Aug 2004
Location: , , .
Posts: 117
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Hi Imar
Thnaks finaly I found it and it works perfectly.

Thanks
Regards
Mani_he

Reply With Quote
  #7 (permalink)  
Old January 4th, 2005, 05:27 PM
Imar's Avatar
Wrox Author
Points: 71,164, Level: 100
Points: 71,164, Level: 100 Points: 71,164, Level: 100 Points: 71,164, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,960
Thanks: 79
Thanked 1,559 Times in 1,536 Posts
Default

Great. I hoped you changed the function to this:

function SetBackground(tableId)
{
  var theTable = document.getElementById(tableId);
  theTable.style.backgroundColor = 'Red';
}

Since the parameter tableId that is passed to this function is dynamic (that is, it can contain multiple values, depending on how you call the function) you don't need to check it against known values. Just getting a reference to the object using getElementById and then change its background is more than enough.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Half the Man by Hed Planet Earth (Track 7 from the album: Blackout ) What's This?
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Change border color for every cell of a table jdang67 CSS Cascading Style Sheets 10 May 6th, 2010 01:21 AM
border to button rupal .NET Framework 2.0 1 November 15th, 2008 08:35 AM
Border help! Rodney Dreamweaver (all versions) 8 July 20th, 2006 04:34 PM
CSS for Table border. rupen CSS Cascading Style Sheets 2 March 29th, 2006 09:41 AM
static HTML table border problem Robin1 HTML Code Clinic 4 August 12th, 2004 05:58 AM



All times are GMT -4. The time now is 08:52 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.