[headbirth]

Hey guys, I'm looking for a bit of free JavaScript coding.

Basically I have a tab bar with 3 tabs, that when one tab is clicked the clicked tab image is swapped as well as the images for the other two tabs.

I built a version of the bar using GoLive actions which are notoriously bloated. It works and you can see the functionality I'm after here: http://home.earthlink.net/~headbirth/

I'm just looking for some simpler code I can control. I've pretty much forgotten everything I sort of knew about JavaScript :-( So, any help would be greatly appreciated or even directing me to a piece of free code online.

// I need 3 rollover arrays - one for each tab with a function to execute the rollovers
// or maybe it's one array with 3 items ... each item executes a series of rollovers for a specific tab click?

var tabRollover = new Array('image','tabName');

tabRollover[0] = "image1.gif","Services"; "image2.gif","Scenarios";"image3.gif","Clients ";
tabRollover[1] = "image4.gif","Services"; "image5.gif","Scenarios";"image6.gif","Clients ";
tabRollover[2] = "image7.gif","Services"; "image8.gif","Scenarios";"image9.gif","Clients ";

function RotateImg(TabImage){


}



< img name="TabImage" src="" border="0" >

[milf]

This hasn't been tested and I have no idea if it will work on not. Give it a whirl and let me know or I'll test it when I get home and post a follow up then.

Code:
// Javascript function
function swapPics(whichOne) {
   switch(whichOne) {
    case 1:
      document.image2.src = "blah4.jpg";
      document.image3.src = "blah5.jpg";
      break;
    case 2:
      document.image1.src = "blah6.jpg";
      document.image3.src = "blah7.jpg";
      break;
    case 3:
      document.image1.src = "blah8.jpg";
      document.image2.src = "blah9.jpg";
      break;
   }   
}

// Your named image files in HTML page
[a onClick="swapPics(1);"][img name="image1" src="blah1.jpg"][/a]
[a onClick="swapPics(2);"][img name="image2" src="blah2.jpg"][/a]
[a onClick="swapPics(3);"][img name="image3" src="blah3.jpg"][/a]

[headbirth]

Thanks mlif! Works beautifully. So much more understandable than GoLives script.

Do you think the same technique could be used with layers to show and hide their visibility?

[ameat]

Originally posted by headbirth:
Thanks mlif! Works beautifully. So much more understandable than GoLives script.

Do you think the same technique could be used with layers to show and hide their visibility?

try these:
[PHP]
/**
Get the users browser type.
*/
var ns6 = (!document.all && document.getElementById) ? true : false;
var ns4 = (document.layers) ? true : false;
var ie4 = (document.all) ? true : false;

/**
Utility function that returns the appropriate layer
reference, dependent on the browser.
*/
function getLayerRef(theString)
{
if (ns4) var ref = 'document.' + theString;
if (ie4) var ref = 'document.all.' + theString + '.style';
if (ns6) var ref = 'document.getElementById("' + theString + '").style';
return eval(ref);
}

/**
This function shows the layers passed in the
function argument
*/
function showLayer(theLayer)
{
if (ns4) getLayerRef(theLayer).visibility = "show";
if (ie4 || ns6) getLayerRef(theLayer).visibility = "visible";
}

/**
This function hides the layers passed in
the function argument
*/
function hideLayer(theLayer)
{
if (ns4) getLayerRef(theLayer).visibility = "hide";
if (ie4 || ns6) getLayerRef(theLayer).visibility = "hidden";
}
[/PHP]

...then use as such...

[PHP]
<a href="javascript:showLayer('zeLayer');">show</a> | <a href="javascript:hideLayer('zeLayer');">hide</a>
<div name="zeLayer">now you see me...</div>
[/PHP]

...hope it works for you. everything's a little more complicated due to the fact that gecko, ie, and older browsers handle layer and style references differently.

[headbirth]

Thanks ameat ... looks very clean, but I'm not at all familiar with PHP (eager to learn though).

I was think along the lines of the above JavaScript except instead of swaping out the images in the array, toggling the visibility of layers instead.

[calimehtar]

Why not use html? I'm really curious. It will be easier to maintain. there is really no advantage to using frames in this case at all as far as I can tell except that the tabs will switch a millisecond faster.

It's my opinion that static html pages are the greatest achievement of web design. Let the browser do the hard work for you and concern yourself with typography and graphics rather than behaviours.

It's a beautiful site, though.

[ameat]

Originally posted by headbirth:
Thanks ameat ... looks very clean, but I'm not at all familiar with PHP (eager to learn though).

I was think along the lines of the above JavaScript except instead of swaping out the images in the array, toggling the visibility of layers instead.

...oops, that is javascript. i used the php tags so that we could get some pretty syntax coloring. guess i should say that next time...

[ameat]

Originally posted by calimehtar:
Why not use html? I'm really curious. It will be easier to maintain. there is really no advantage to using frames in this case at all as far as I can tell except that the tabs will switch a millisecond faster.

It's my opinion that static html pages are the greatest achievement of web design. Let the browser do the hard work for you and concern yourself with typography and graphics rather than behaviours.

It's a beautiful site, though.

i generally agree with your point except i think that your opinion may be a bit to the extreme. typography and graphics (well integrated to a thoughtful layout) i believe are fundamental to conveying to your user what it is they should be looking at, but is not behaviour part of that notion as well?

this is why operating systems (osx and now the previews of windows) are gravitating so much towards visual user feedback...you interact with something, you don't want it to disappear for a second as it redraws itself or polls the server for data. it moves, it readjusts...you are working in a dynamic environment and i believe the web and any interface that you use to interact with data should react in response to your behavior. it could be a simple rollover, it could be dynamic content generated to reflect your viewing interests. it really depends on your goals, and if the technology to accomplish that natural behavior is javascript and frames, it should be used.

naturally there are always better ways to do something...and there are always ways to simplify something as well. and i don't believe this should affect maintainability...if anything, there are many technologies that enable an incredible amount of reusability and maintability, more so than a static html file (unless of course the creation of that static file was via a dynamic process...)

anyways, i mean no offense to your opinion.

[headbirth]

Actually I find that frames make it a little easier for me to maintain and organize a site. I do like having navigation items always present that don't reload.

Layers and DHTML code though I think need to be given a lot of thought before using ... I'm weighing at the moment whether to use layers or just build seperate pages.

Thanks for the input though!

Oh ... does anyone know if it's possible to control another frames contents from a seperate frame (i.e. if I wanted a click on one of the tabs capable of toggling the visibility of a layer in the other frame.) Don't think I swould use it, but would be nice to know.

[ameat]

Originally posted by headbirth:
Oh ... does anyone know if it's possible to control another frames contents from a seperate frame (i.e. if I wanted a click on one of the tabs capable of toggling the visibility of a layer in the other frame.) Don't think I swould use it, but would be nice to know.

...yeah, you should be able to reference the name of the frame, but i'm not quite sure of the syntax.

[derbs]

to reference one frame from another, you need to go back up a level to 'parent'

eg

onclick="parent.frameName.showLayer('whatever');"

where frameName is the name of the frame, and a proper layername...

[calimehtar]

no offense taken.

I think you'll find that frames and dhtml both will cause you and your users problems that switching to simple html would fix. They may find themselves at a page without navigation if they find your site on google. Users with browsers that you haven't tested the site on will cause unpredictable problems with DHTML. Also, Internet Explorer (windows and mac both) don't cope with frames very well in general. IE Mac loads pages almost at random into framesets (this is my experience as a user, not as a developer... I don't know how to replicate this problem precisely), and IE Windows, last I checked, holds on the history only of the top frame so clicking the back button will always take users to your hompage rather than the previous page.

As a web designer I have built only one application in frames and did so because it was an application that had to hold data in separate states for independent submission to the server. As a rule I always advise against using frames.

[headbirth]

thanks again for the input ... I think I pretty much agree with all of what's been said. As far as frames go, I think they only really become a problem if your dealing with a large complicated site using alot of heavy navigational scripting.

As for the search engine taking you to a specific page in your site, using a JavaScript to Force a Frameset works great.

I'm going to see how my new site functions without frames and DHTML and do some comparisons.