SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Jun 22, 2007, 02:08 #1
- Join Date
- Apr 2006
- Posts
- 12
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Changing and refreshing div content
Hello all, I have a website with some navigation buttons on top.
When one button is clicked I replace it's content with the content of a red button using this code:
Code:document.getElementById('button').innerHTML = ' <a href="javascript:void(0)"> <img src="header/button_active.jpg" border="0" /> </a>';
Code:<div id="aanbiedingen"> <a href="javascript:void(0)" onclick="open_url('page.php','CONTENT_CENTER');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Aanbiedingen','','button_inactive.jpg',1)" > <img src="1px_tranceparent.gif" name="Aanbiedingen" width="99px" height="20px" border="0" /> </a> </div>
Using this code a button becomkes red once you click it. This is what I want.
Just one problem: when I click on another button, the first one stays red because it doesn't reload the page.
Now I thought, I'll refresh the navigation page using a div and ajax.
Code:open_url('navigation.php', 'navigation');
But when I implement this code before the page load. JavaScript can no longer access the div elements in navigation.php
Anyone knows why?
Firebug says this when I refresh the navigation:
document.getElementById("button") has no properties
Thanks in advance!
-
Jun 22, 2007, 03:09 #2
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
this looks quiet complicated for something that could be very simple.
I am right in assuming that you want to change the img src on click and then when another one is clicked it goes back to the original image? This seems pretty simple.
Could you possibly provide a test page?
-
Jun 22, 2007, 06:30 #3
- Join Date
- Apr 2006
- Posts
- 12
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok I did it else, now i didnt use macromedia's image swapper but made something myself.
Here is an example:
http://www.ival-webdevelopment.nl/new/test/
The problem remains, when I click a button it becomes red, when I click another button, both buttons become red.
THe first one stays red because the page does not reload, it's because of AJAX.
If u need the source code of the files tell me (but u can download it yourself, there's no php, the open url method isn't mine but it doesnt have anything to do with it.
SO, how do I make the first button turn normal again easily, I plan to use more buttons.
-
Jun 22, 2007, 07:18 #4
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This may seem complicated, but infact its quite simple. It loops through all the images on the page, and any with a menuItem class will have 3 events set.
onmouseover = uses the current src and adds _over to the image name.
onmouseout = uses the current src and removes _over from the image name.
onclick = goes through all the images again and resets them all back to the original image, and then adds _active to the clicked image name.
Code:<!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>Untitled Document</title> <script type="text/javascript"> function setup() { var imgs = document.getElementsByTagName('img'); for(var i = 0; i < imgs.length; i++) { if(imgs[i].className.indexOf('menuItem') > -1) { imgs[i].onmouseover = function() { var str = this.src.split('/'); var itm = str[str.length-1].split('.'); var newString = itm[0] + '_over.' + itm[1]; var newSrc = this.src.replace(str[str.length-1], newString); this.src = newSrc; }; imgs[i].onmouseout = function() { var str = this.src.split('/'); var itm = str[str.length-1].split('.'); var newString = itm[0].replace('_over','') + '.' + itm[1]; var newSrc = this.src.replace(str[str.length-1], newString); this.src = newSrc; }; imgs[i].onclick = function() { var imgs_ = document.getElementsByTagName('img'); for(var img = 0; img < imgs_.length; img++) { if(imgs_[img].className.indexOf('menuItem') > -1) { var _str = imgs_[img].src.split('/'); var _itm = _str[_str.length-1].split('.'); var _newString = _itm[0].replace('_over','').replace('_active','') + '.' + _itm[1]; var _newSrc = imgs_[img].src.replace(_str[_str.length-1], _newString); imgs_[img].src = _newSrc; } } var str = this.src.split('/'); var itm = str[str.length-1].split('.'); var newString = itm[0].replace('_over','').replace('_active','') + '_active.' + itm[1]; var newSrc = this.src.replace(str[str.length-1], newString); this.src = newSrc; }; } } } window.onload = setup; </script> </head> <body> <img src="http://www.ival-webdevelopment.nl/new/test/img/news.jpg" class="menuItem" /> <img src="http://www.ival-webdevelopment.nl/new/test/img/forum.jpg" class="menuItem" /> </body> </html>
-
Jun 22, 2007, 07:53 #5
- Join Date
- Apr 2006
- Posts
- 12
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Damn this works and looks alot neater in the HTML! Good job.
Now all I need is to understand the code, if I'm correct it loops through all images with the class MenuItem
I really suck at javascript :P
-
Jun 22, 2007, 08:10 #6
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
at least your learning..
its all about getting the name of the file. Once i have that, I can add _active, or _hover to it, and I can also remove it, then its setting the src to whats left over.
Code:<!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>Untitled Document</title> <script type="text/javascript"> function setup() { var imgs = document.getElementsByTagName('img'); for(var i = 0; i < imgs.length; i++) { if(imgs[i].className.indexOf('menuItem') > -1) { imgs[i].onmouseover = function() { var parts = getFilename(this.src); this.src = setNewPath(this.src, parts[0]+'.'+parts[1], parts[0]+'_over.'+parts[1]); }; imgs[i].onmouseout = function() { var parts = getFilename(this.src); this.src = setNewPath(this.src, parts[0]+'.'+parts[1], parts[0].replace('_over','')+'.'+parts[1]); }; imgs[i].onclick = function() { var imgs_ = document.getElementsByTagName('img'); for(var img = 0; img < imgs_.length; img++) { if(imgs_[img].className.indexOf('menuItem') > -1) { var innerParts = getFilename(imgs_[img].src); imgs_[img].src = setNewPath(imgs_[img].src, innerParts[0]+'.'+innerParts[1], innerParts[0].replace('_active','')+'.'+innerParts[1]); } } var parts = getFilename(this.src); this.src = setNewPath(this.src, parts[0]+'.'+parts[1], parts[0]+'_active.'+parts[1]); }; } } } function getFilename(path) { var parts = path.split('/'); return parts[parts.length-1].split('.'); } function setNewPath(path, previous, newpath) { return path.replace(previous, newpath); } window.onload = setup; </script> </head> <body> <img src="http://www.ival-webdevelopment.nl/new/test/img/news.jpg" class="menuItem" /> <img src="http://www.ival-webdevelopment.nl/new/test/img/forum.jpg" class="menuItem" /> </body> </html>
-
Jun 24, 2007, 06:20 #7
- Join Date
- Apr 2006
- Posts
- 12
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ah I think I quite understand now, thanks!
But how do I build in a check if the current event onClick is going on? Because now when I click on a button and do a mouse over, the filename becomes something like active_over.gif :P
I think it would require an if statement over the onMouseOver part, but I can't seem to get it working.
-
Jun 24, 2007, 22:39 #8
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I can only assume this is what you want. I don't think I can replicate the issue.
Code:<!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>Untitled Document</title> <script type="text/javascript"> function setup() { var imgs = document.getElementsByTagName('img'); for(var i = 0; i < imgs.length; i++) { if(imgs[i].className.indexOf('menuItem') > -1) { imgs[i].onmouseover = function() { var parts = getFilename(this.src); if(parts[0].indexOf('_active')>-1) return; this.src = setNewPath(this.src, parts[0]+'.'+parts[1], parts[0]+'_over.'+parts[1]); }; imgs[i].onmouseout = function() { var parts = getFilename(this.src); this.src = setNewPath(this.src, parts[0]+'.'+parts[1], parts[0].replace('_over','')+'.'+parts[1]); }; imgs[i].onclick = function() { var imgs_ = document.getElementsByTagName('img'); for(var img = 0; img < imgs_.length; img++) { if(imgs_[img].className.indexOf('menuItem') > -1) { var innerParts = getFilename(imgs_[img].src); imgs_[img].src = setNewPath(imgs_[img].src, innerParts[0]+'.'+innerParts[1], innerParts[0].replace('_active','')+'.'+innerParts[1]); } } var parts = getFilename(this.src); this.src = setNewPath(this.src, parts[0]+'.'+parts[1], parts[0]+'_active.'+parts[1]); }; } } } function getFilename(path) { var parts = path.split('/'); return parts[parts.length-1].split('.'); } function setNewPath(path, previous, newpath) { return path.replace(previous, newpath); } window.onload = setup; </script> </head> <body> <img src="http://www.ival-webdevelopment.nl/new/test/img/news.jpg" class="menuItem" /> <img src="http://www.ival-webdevelopment.nl/new/test/img/forum.jpg" class="menuItem" /> </body> </html>
Bookmarks