JavaScript 'Simplification'

[Pauly]

[syntax:ede1c5016c="javascript"]// Below detect browser
var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}

// Below hides and shows the control panel
function hide() {
if (browserType == "gecko" )
document.poppedLayer = eval('document.getElementById(\'control\')');
else if (browserType == "ie")
document.poppedLayer = eval('document.all[\'control\']');
else
document.poppedLayer = eval('document.layers[\'`control\']');
document.poppedLayer.style.visibility = "hidden";
document.poppedLayer.style.height = "1px";
document.poppedLayer.style.display = "none";
}

function show() {
if (browserType == "gecko" )
document.poppedLayer = eval('document.getElementById(\'control\')');
else if (browserType == "ie")
document.poppedLayer = eval('document.all[\'control\']');
else
document.poppedLayer = eval('document.layers[\'`control\']');
document.poppedLayer.style.visibility = "visible";
document.poppedLayer.style.height = "auto";
document.poppedLayer.style.display = "block";
}[/syntax:ede1c5016c]

Basically what this does, it detects the the div id control and changes its values. I would prefer to use display: none; and display: block; only. The above code works, but not effectively and produces some visual flaws such as the sapce being taken up after showing doesn't "disappear" when hiding it again. The visibility and display aren't both required either but I had to do that to get it working.

By clicking one of these;

[syntax:ede1c5016c="javascript"]<a class="lc" onclick="show()">
<img src="$stylevar[imgdir_misc]/control_plus.gif" alt="Show Control Panel" title="Show Control Panel" border="0" />
</a>[/syntax:ede1c5016c]

or

[syntax:ede1c5016c="javascript"]<a class="lc" onclick="hide()">
<img src="$stylevar[imgdir_misc]/control_minus.gif" alt="Hide Control Panel" title="Hide Control Panel" border="0" />
</a>[/syntax:ede1c5016c]

Depends whether to hide or show it, which is what I want. I just need to find out a way to do this more effectively, also as I'm learning JS can you explain how / why you've edited or done whatever you do please :)

[the_pm]

Hey Paul - Are you trying out a different method for that control panel? I'm not sure how I feel about doing it by browser, but I guess that's every developers prerogative. After having formatted this as JS code, it appears you have an extra single quote in a couple of eval statements, which might be causing you problems.

To prevent the space from being there, you may want to neglect the use of visibility alltogether. Visibility creates room for the space, even when the object is hidden. Theoretically, having display="none" after the hidden statement should negate the space, but it seems for some reason this isn't happening. I would leave visibility out of it entirely and see what happens.

[sonicgroup]

I generally only use display for switching things on and off using JS (none and block).

Also, for future reference, you can compact Gecko and IE because IE understands document.getElementById.

Try this:

[syntax:887e39390c="javascript"]
// Below detect browser
var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}

// Below hides and shows the control panel
function toggle() {
if (browserType == 'gecko' || browserType == 'ie') {
elem = eval('document.getElementById(\'control\')');
} else {
elem = eval('document.layers[\'control\']');
}
if (elem.style.display == 'none') {
elem.style.display = 'block';
} else {
elem.style.display = 'none';
}
}
[/syntax:887e39390c]

[Pauly]

Paul - Since I have started integrating the site pages with vB I have found it easier to change some elements of the control panel. Thanks for the explanation :)

Dave - Thanks for the note about Gecko and IE. I'll try this code out once I get back :)