Hi,

First, I moved this to the Javascript forum because this is all about Javascript. But it is also a little about Dreamweaver because you are using Dreamweaver generated Javascript code.

-

You have to call both functions in the same event-handler. An example of an even-handler is:

onClick. 

An example of a function is:

MM_showHideLayers('pic2','','show')

So in your case, you would have:

onClick="MM_showHideLayers('pic2','','show'); MM_showHideLayers('pic','','hide')"

Now, did you notice the semicolon between the function names?

;

That is like a period between sentences. You need to add that if you are calling/using multiple functions with a single event. In this case, the event was: onClick.

I hope that helps,

Stefan

Javascript and Actionscript are two different beasts.

Hi,

As was said before, Actionscript is different, but they are both based on the same language, so learning Actionscript will help you with Javascript and vice versa.

You can learn basic Actionscript 2 here: www.killeractionscript.com

And you can learn the basics of Javascript here: Javascript Tutorial

Stefan

Here's a rough, untested version of how I would do this, using only raw Javascript.

HTML fragment:

<div id="div1" onclick="toggleDivs">Div 1 content</div>
<div id="div2" onclick="toggleDivs">Div 2 content</div>

Javascript

function initPage()
{
   document.getElementById('div1').style.display = 'block';
   document.getElementById('div2').style.display = 'none';
}
window.onload = initPage;

function toggleDivs()
{
   var div1 = document.getElementById('div1');
   var div2 = document.getElementById('div2');
   if( div1.style.display == 'block' )
   {
      div1.style.display = 'none';
      div2.style.display = 'block';
   }
   else 
   {
      div1.style.display = 'block';
      div2.style.display = 'none';
   }
}

..and here's the same functionality using the jQuery framework:

$(function() {
   $('div#div1').click(toggleDivs).show();
   $('div#div2').click(toggleDivs).hide();
});

function toggleDivs()
{
   $('div#div1').toggle();
   $('div#div2').toggle();
}

[1]
I revised the code so that it *should* work, but haven't tested it in a page.

[2]
showing and hiding layers can work, but it is better to change the page.  The reason?  Well, there are a few.  First, search engines visit your site, and see only one page.  Second, if a user goes to you contacts page, and bookmarks it, when they go back, they'll get the homepage again.  Third, what happens when the user has javascript turned off?  Or views the page from a mobile phone?  How about a blind user using a screenreader?  Or a user who has difficulty using a mouse, and uses the tab key on their keyboard to move from field to field?

The bottom line is this - if your page is lightweight and properly built, there should be very little delay between pageloads, as most of the information will be cached on the client's machine between requests.  This is one thing to do the traditional way, with links between pages.

[3]
I'm not quite sure what you mean by this, but I'll explain what I can and see if it helps.

A function is nothing more than a block of code that is executed at a certain point.  There are functions built into the objects inherent in javascript.  A function that is a part of an object is called a method.  An example of a method in javascript is .length(), which is a member of the Array object.   You can take an array and find its length like this:

lengthOfArray = arrayVar.length

This segues into one of our next topics, object-oriented programming.

[4] Two topics on this one.  The first is object-oriented programming. This is really an extensive topic, and you should probably do quite a bit of reading on the subject to get a good grasp on it.  I recommend "Code Complete" by Steve McConnell for a good introduction to OOP concepts and good programming practices in general.  Essentially, an object is a collection of functions (called methods) and variables.

The DOM (Document Object Model) is a collection of objects that represent a document.  It starts with the document node, which (in the case of a web page) has an HTML node under it, which has a <head> node and a <body> node under that.   This goes all the way down to the individual tags on the page, and the text they contain.  For a visual representation of this, download Firebug for Firefox.  It has a DOM browser, which gives you a good feel for what's really going on on the page.

And with that, I'm off to bed    If I've not answered something, feel free to post back and I'll have another whack at it later tonight or tomorrow.

Thanks for your help all. Still looking at the info...Just a quick note -Eric- your site is a great help. I bookmark it as a reference for myself!

Last edited by mslfire (December 23, 2008 10:14 am)

Have you thought about the use of jQuery?

I realise it may seem like overkill for what you are attempting (manipulation of an elements visibility), however the benefit of jQuery is it is unobtrusive.  Inline event handlers are generally frowned upon in most cases.

Take a look at the following example which uses the jQuery .click event handler to provide you with the same functionality yet with the removal of the inline event handler.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#box_one {
    width: 300px;
    height: 300px;
    background-color: yellow;
}
#box_two {
    width: 300px;
    height: 300px;
    background-color: blue;
}
</style>
<script type="text/javascript">
// when the document has fully loaded
$(document).ready(function()
{
    // this line removes the inline css
    // however it still provides the same functionality
    // I.E. hide #box_n on document load if it has a class 'hidden'
    //$('.hidden').hide();
    // slighty more advanced method of hiding the box divs
    // uses a regular expression to find all divs in the document
    // that have an id beginning with 'box'
    $('div[id^=box]').hide();
    
    // locate all hyperlinks that have the class toggle
    $('a.toggle').click(function()
    {
        // retrieve the id of the hyperlink just clicked
        // this will be used to access the respective div
        var box_num = ($(this).attr('id'));
        
        // test to see if the #box_n is not visible (CSS - display:none)
        // if #box_n is not visible, make it visible
        if (!$('#box_'+box_num).is(':visible'))
        {
            // when a hyperlink is clicked slideDown the box_n div
            // chose one of the following lines to uncomment
            $('#box_'+box_num).slideDown('fast'); // text based speed
            //$('#box_'+box_num).slideDown(5000); // time based speed (ms)
        // else if #box_n is visible, make it invivisble
        } else {
            // when a hyperlink is clicked slideDown the box_n div
            // chose one of the following lines to uncomment
            $('#box_'+box_num).slideUp('fast'); // text based speed
            //$('#box_'+box_num).slideUp(5000); // time based speed (ms)
        }
        // this line prevents the hyperlink from being followed
        return false;
    }
    );
    // the above function could be added to the switch statement if desired
    
    // target all hyperlinks in the document
    $('a').click(function()
    {
        // access the class of the clicked hyperlink
        var action = $(this).attr('class');
        // access all div elements with an id beginning 'box'
        var boxes = $('div[id^=box]');
        
        // switch action
        switch ( action )
        {
            // hyperlink class 'toggle_all_on'
            case 'toggle_all_on':
                // iterate over each div with id beginning 'box'
                boxes.each(function()
                {
                    // show the div
                    $(this).show();
                }
                );
                // don't follow hyperlink
                return false;
                break;
            // hyperlink class 'toggle_all_off'
            case 'toggle_all_off':
                // iterate over each div with id beginning 'box'
                boxes.each(function()
                {
                    // hide the div
                    $(this).hide();
                }
                );
                // don't follow hyperlink
                return false;
                break;
            // hyperlink class 'invert_toggle'
            case 'invert_toggle':
                // iterate over each div with id beginning 'box'
                boxes.each(function()
                {
                    // determine if the div is visible
                    if ( $(this).is(':visible') )
                    {
                        // if true, hide the div
                        $(this).hide();
                    } else {
                        // if false show the div
                        $(this).show();
                    }
                }
                );
                // don't follow hyperlink
                return false;
                break;
            // hyerplink has no class
            default:
                // follow hyperlink
                return true;
                break;
        }
    }
    );
    
}
);
</script>
</head>

<body>
    <div id="box_one">
    </div>
    <div id="box_two">
    </div>
    <a href="http://google.co.uk" class="toggle" id="one">Click Me (div one (yellow))</a>
    <a href="http://google.co.uk" class="toggle" id="two">Click Me (div two (blue))</a>
    <a href="http://google.co.uk">Google.co.uk</a>
    <hr />
    <a href="http://google.co.uk" class="toggle_all_on">Toggle All On</a>
    <a href="http://google.co.uk" class="toggle_all_off">Toggle All Off</a>
    <a href="http://google.co.uk" class="invert_toggle">Invert Toggle</a>
</body>

</html>

I realise there is quite a lot there and appologise if it is in conflict with spam rules, this was not my intention.

On a side note, something to get into the habit of (if you haven't already) is the safe degradation of your code.  As you can see from my example, each of my hyperlinks has a valid href attribute (not the # symbol).  This would generally be replaced with a hyperlink to a page where the information contained within the div is located.  Idea being that if the user has JavaScript disabled and they click one of your links, they still get to vue the information rather than the link being dead.

Even if you decided this example is a bit over the top for your requirements, hope it is of some use to yourself or anyone else in the future.

>>  Your jQuery attaches the event handler to every link in the document

The second method does so yes.  The first method of attaching click event handlers to hyperlinks does not.  I was attempting to show different methods for achieving a similar effect.  However I understand where you are coming from on this and agree it is very inefficient.

>>  Also, you've used the

$('#box_' + ... )

I agree it is fairly poor, however I didn't see the harm for this example.

>>it is better practice (and faster) to do

$('div#someID')

I didn't realise there was a performance benefit to that.  I've seen official examples that include and exclude that step.  I do so love conformity.  Cheers for the heads up though.

>> I posted a short bit of jQuery above that should do what the OP is trying to do, in less than 10 lines of code.
True, I did notice your .toggle() event.  There is always more than one way to skin a cat though.

>>  Your discussion of graceful degradation is spot on.  I tend to be in the "progressive enhancement" crowd, but it is realyl two ways of saying the same thing.

Haha, yeah.  I'm becoming more and more of a fan of safe degradation.  Come across a fair number of sites that don't degrade nicely and render the majority of the site useless.

>> Also, I've not seen you around - welcome to KS!

Thanks.