Changing and refreshing div content

**Mortier** · Jun 22, 2007, 02:08

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>';

The original code was enclosed in a DIV and I cant just change the img src because the original code is:

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>

But when the orignal button is clicked, a ajax event goes off and loads the new page without reloading the button.
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');

Open url sends navigation.php GET result to the div navigation, works fine, firebug says.
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!

**gRoberts** · Jun 22, 2007, 03:09

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?

**Mortier** · Jun 22, 2007, 06:30

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.

**gRoberts** · Jun 22, 2007, 07:18

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>

**Mortier** · Jun 22, 2007, 07:53

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

**gRoberts** · Jun 22, 2007, 08:10

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>

**Mortier** · Jun 24, 2007, 06:20

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.

**gRoberts** · Jun 24, 2007, 22:39

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>

The SitePoint Forums have moved.

User Tag List

Thread: Changing and refreshing div content

Thread Tools

Display

Changing and refreshing div content

Bookmarks

Bookmarks

Posting Permissions