473,320 Members | 1,957 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Small corection needed (Cell Rotation with Javascript)

Hie everybody,
Here at this forum I have found something what I was looking for - rotation of cells in html table, here is the link
http://www.thescripts.com/forum/thre...9304-2-10.html
The gue named RobD posted a nice script there. You can easily modify it for the needs of your table, but one problem occured on my way, maybe somebody can help.
For instance if there is <a> tags inside one table cell, the script willl rotate only the first one. Can anyone give me hint of how to force it to rotate each image I am having in my table.

this.pix.push(cell.getElementsByTagName('IMG')[0].src); - this string finds src of the first image only. Maybe I need to change some attributes or something else. I am not really a specialist in Javascript.
thsi string, I guess, write elemenst inside the cell - (el = cell.getElementsByTagName('A')[0]).lastChild.nodeValue =
this.txt[idx];
Can anyone tell me what is lastChild.nodeValue and [0] ??
Thanks in advance
May 21 '06 #1
8 4291
Banfa
9,065 Expert Mod 8TB
getElementsByTagName returns a collection (or an array) of items the [0] is then referencing the 1st item in that collection, you can access the 2nd item with [1] the 3rd with [2] and so on. You can find the number of items with the length method

[php]
var collection = cell.getElementsByTagName('A');

for( var ix=0; ix < collection.length; ix++ )
{
alert( "Link " + ix + " = " + collection[ix].value );
}
[/php]

lastChild refers to the last child element of the current element (a child being an element contain by the current element).
May 22 '06 #2
Had couple of very busy days in university, there is small break before Psychology test on Thursday.
If you have any chance of answering it would be great.
I will eleborate on what I need to do for this university project.
So I have a html table with cell randomly placed inside of it, every time the page is loaded :D
My cell looks like this
[HTML]<td>
<div>
<img src ="/1.PNG"
width ="200" height ="200" border="0"
usemap ="#1" />
<map id ="1"
name="1">
<area shape ="rect" coords ="0,0,100,100"
href ="/info1" target ="_blank"
alt="info 1" />
<area shape ="rect" coords ="100,100,200,200"
href ="/info2" target ="_blank"
alt="info 2" />
</map>
</div>
</td>
[/HTML](I would like to link half of image to first page another to second page)

I think I asked a bit wrong question at first, sorry, but what I really need is to rotate href for both areas, as well as other attributes of 2nd area tag. Thanks for giving me a hint but would you specify (I am not programmer, so it is difficult for me) where to put the code you gave me? and you wrote that it is a php code!
Here the script I am using (found on this forum by the way)
<script>
Expand|Select|Wrap|Line Numbers
  1. //<![CDATA[
  2.  
  3. /**********************************************/
  4. var table_ids = [ 'maintable' ];
  5. /**********************************************/
  6.  
  7. var alldivs = document.getElementsByTagName('DIV');
  8.  
  9.  
  10.  
  11.  
  12. function Rotator(table_id)
  13. {
  14. this.table = document.getElementById(table_id);
  15. this.cells = this.table.getElementsByTagName('TD');
  16. this.ncells = this.cells.length;
  17. this.pix = [];
  18. this.hrefs = [];
  19. this.id = [];
  20. this.n = [];
  21. this.shapehref = [];
  22. this.coordshref = [];
  23. this.idx_array = new Array(this.ncells);
  24.  
  25. function read()
  26. {
  27. var cell, n = 0;
  28. while (cell = this.cells.item(n++))
  29. {
  30. this.pix.push(cell.getElementsByTagName('IMG')[0].src);
  31. this.hrefs.push(cell.getElementsByTagName('AREA')[0].href);
  32. this.id.push(cell.getElementsByTagName('AREA')[0].alt);
  33. this.n.push(cell.getElementsByTagName('IMG')[0].alt);
  34. this.shapehref.push(cell.getElementsByTagName('AREA')[0].shape);
  35. this.coordshref.push(cell.getElementsByTagName('AREA')[0].coords);
  36. } this.shuffle();
  37. }
  38. this.read = read;
  39.  
  40. function shuffle()
  41. {
  42. var idx, i, ind1, ind2, temp;
  43. for (i = 0; i < this.ncells; ++i)
  44. this.idx_array[i] = i;
  45. for (i = 0; i < this.ncells; ++i)
  46. {
  47. ind1 = Math.floor(Math.random() * this.ncells);
  48. ind2 = Math.floor(Math.random() * this.ncells);
  49. temp = this.idx_array[ind1];
  50. this.idx_array[ind1] = this.idx_array[ind2];
  51. this.idx_array[ind2] = temp;
  52. } this.write();
  53. }
  54. this.shuffle = shuffle;
  55.  
  56. function write()
  57. {
  58. var cell, el, idx, n = 0;
  59. while (cell = this.cells.item(n))
  60. {
  61. idx = this.idx_array[n++];
  62. cell.getElementsByTagName('IMG')[0].src = this.pix[idx];
  63. (el = cell.getElementsByTagName('AREA')[0]).href =
  64. this.hrefs[idx];
  65. (el = cell.getElementsByTagName('AREA')[0]).alt =
  66. this.id[idx];
  67. (el = cell.getElementsByTagName('IMG')[0]).alt =
  68. this.n[idx];
  69. (el = cell.getElementsByTagName('AREA')[0]).shape =
  70. this.shapehref[idx];
  71. (el = cell.getElementsByTagName('AREA')[0]).coords =
  72. this.coordshref[idx];
  73. } alldivs.item(0).style.visibility = 'visible';
  74. }
  75. this.write = write;
  76.  
  77. this.read();
  78. }
  79.  
  80. onload = function()
  81. {
  82. if (document.getElementById && document.createElement)
  83. for (var i = 0; i < table_ids.length; ++i)
  84. new Rotator(table_ids[i]);
  85.  

If you know the answer, please help. It would be great if I could do this with your help :)
May 23 '06 #3
Banfa
9,065 Expert Mod 8TB
I will get to this but I just a bit tired right now. It would be helpful if you could post a link to the actual page that needs work or if it is not only yet attach it to a post (you will need to go advanced and rename the file to a text file to do this).
May 23 '06 #4
Here I am attaching a text file with some comments inside, I hope everything what is there is pretty clear. English is my second language by the way.
Thanks again for helping, I spent so much time trying to solve this problem...
I really cannot show the page because I had it maybe a week ago (my friend kindly gave me password and I could test it, so I can assure you the script is working), but right now all I can test it on university server only, but I do not think somebody can access it form outside.
Attached Files
File Type: txt code.txt (7.4 KB, 893 views)
May 24 '06 #5
Banfa
9,065 Expert Mod 8TB
Sorry must of missed the post, unfortunately once again it is midnight here but I will try to look at it tomorrow.
May 30 '06 #6
Banfa
9,065 Expert Mod 8TB
A-ha, right I can see the problem and I have the answer.

The problem is that when the images are display randomly the 1st link (top left) moves with the image but the second link (bottom right) stays in it's original table cell instead of moving with the image.

The answer is that you are only altering the data for the first link (which I think you knew) and what I have already said does apply, because you are only accessing the first elements in the collections.

In this line (by the way none of what I have posted is php I just use the php tages because it colours the code and makes it easier to follow, it is all Javascript)

[php]
this.hrefs.push(cell.getElementsByTagName('AREA')[0].href);
[/php]

the function call cell.getElementsByTagName('AREA') returns a collection, as I said. A collection is an array of objects so cell.getElementsByTagName('AREA')[0] references the first array element or the first AREA tag in the cell. However there are 2 AREA tags in the cell and you wish to swop the href values of both of them so you will need to access the second array element as well cell.getElementsByTagName('AREA')[1].

To fix the script everywhere you use the this.hrefs0 object you need to double up to handle not just the first href but the second href to so this

[php]
this.hrefs0 = [];

...

this.hrefs0.push(cell.getElementsByTagName('AREA')[0].href);

...

(el = cell.getElementsByTagName('AREA')[0]).href = this.hrefs0[idx];
[/php]

becomes this

[php]
this.hrefs0 = [];
this.hrefs1 = [];

...

this.hrefs0.push(cell.getElementsByTagName('AREA')[0].href);
this.hrefs1.push(cell.getElementsByTagName('AREA')[1].href);

...

(el = cell.getElementsByTagName('AREA')[0]).href = this.hrefs0[idx];
(el = cell.getElementsByTagName('AREA')[1]).href = this.hrefs1[idx];
[/php]

Note, I have left out vast tracts of code to highlight the changes

Also I think this

[php](el = cell.getElementsByTagName('AREA')[0]).href = this.hrefs0[idx];[/php]

will work just as well if it is written like

[php]cell.getElementsByTagName('AREA')[0].href = this.hrefs0[idx];[/php]



Lastly at the moment you are swopping the href values of the AREAs, however if you need to have different MAPs associated with each image (i.e. not as it currently stands all MAPs are geometrically the same) then it might be easier to swop the usemap value of each image rather than altering the AREA values directly.
May 31 '06 #7
Banfa
9,065 Expert Mod 8TB
P.S. here is my altered version of the code you posted
Attached Files
File Type: txt code.txt (7.7 KB, 794 views)
May 31 '06 #8
Something weird happens, I was trying to do what you proposed here myself even before you posted the reply, but for some strange reason it cannot do this. Simple can't see another area tag. CHanging [0] to [1] is not working(((((
But as you proposed I was experimenting with usemap, but it cant see it as well. Would you be so kind to make it clear of how to swap usemap since the way I am doing is no good?
Just give me a hint about usemap
Thanks again

P.S. the thing is that when I suplemented my code with all these three line hrefs1 with [1], it stops rotating((((
Jun 8 '06 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Xenophobe | last post by:
I'm having a brain freeze on how to go about creating the logic for evenly distributing a group of items in rotation through multiple iterations. I'm particularly looking for logic flow help and...
21
by: M. Clift | last post by:
Hi All, Could someone help me out with this? items = ('a', 'b', 'c', 'd') items + 1 = ( 'b', 'c', 'd', 'a') items + 2 = ( 'c', 'd', 'a', 'b') items + 3 = ( 'd', 'a', 'b', 'c') trans = 1
1
by: Rick | last post by:
I have a script of rolling images. I would like it so that each time an image changes in cell1 some text in cell2 changes. How can this be done. <html> <head> <title>TITLE</title>
3
by: Peter Williams | last post by:
Hi All, I want to write some javascript for a html page which does the following. Imagine that the page contains a table with 2 columns and 3 rows, e.g.: +---+---+ | A | B | +---+---+
13
by: Giggle Girl | last post by:
My pages need to unfold gracefully even if Javascript is disabled, but I can't get this to work? Please help, Javascript Gurus!! <noscript> document.write('<span class=warning><b>Warning</b>:...
2
by: Peter | last post by:
Hi, this is the code, and new row and new cell generated ok, but why the onclick and onmouseover doen't work? Thank you in advance! <html> <head> <script language="javascript"> function...
5
by: Russell Warren | last post by:
Does anyone have an easier/faster/better way of popping from the middle of a deque than this? class mydeque(deque): def popmiddle(self, pos): self.rotate(-pos) ret = self.popleft()...
2
by: the other john | last post by:
I am looking for ideas on how to create a rollover that triggers an image rotation in another location. I know how to create a function for basic rollovers, image swapping sort of thing, but I...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.