New QBasic site - Pete - 01-14-2005
I would suggest switching from your current JavaScript method for the menus to a simple DIV swapping method using CSS and a small bit of very simple JavaScript.
I've used this method before, and it's compatible with just about every curent browser, including IE, FireFox, Opera, Netscape and AvantBrowser.
Here's an example from the W3c:
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>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<title>show/hide div</title>
<style type="text/css">
/*<![CDATA[*/
h1, h2 {
text-align: center;
}
img {
float: left;
clear: left;
margin-right: 1em;
margin-bottom: 2px;
width:70px;
height: 50px;
border: 3px red outset;
background-color: silver;
}
img:hover {
cursor: pointer;
}
img:active {
border: 3px red inset;
}
#div1 {
padding: 5px 15px;
background-color: #f99;
}
#div2 {
padding: 5px 15px;
background-color: #9f9;
}
#div3 {
padding: 5px 15px;
background-color: #99f;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function change(which) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById(which).style.display = 'block';
}
function showall() {
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'block';
document.getElementById('div3').style.display = 'block';
}
//]]>
</script>
</head>
<body>
<h1>Switch Divs</h1>
<div>
<img src="some.jpg" alt="Toggle Div 1"
onclick="change('div1');" /> <img src="some.jpg"
alt="Toggle Div 2" onclick="change('div2');" /> <img
src="some.jpg" alt="Toggle Div 3"
onclick="change('div3');" /><img src="some.jpg" alt="Toggle All"
onclick="showall();" />
<div id="div1" style="display: block;">
<h2>Watch Here for Coming Attractions</h2>
</div>
<div id="div2" style="display: none;">
<h2>Division 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus suscipit velit eu sapien. Curabitur non dui. Praesent
wisi dolor, tincidunt id, iaculis sed, sollicitudin eget, quam.
Quisque feugiat, nulla elementum interdum fermentum, ante
mauris venenatis purus, nec egestas quam risus nec lectus.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Fusce non elit. In non eros ac
wisi condimentum interdum. Sed ac pede. Duis in enim. Maecenas
porttitor mi faucibus enim. Duis luctus.</p>
<p>Praesent id justo. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Cras
sagittis metus eu tortor. Nullam leo metus, scelerisque quis,
semper ut, rhoncus ac, ligula. Proin congue nunc at lacus.
Vivamus velit nisl, volutpat ut, dictum sit amet, tempor id,
est. Phasellus feugiat purus eu mauris. Vestibulum non wisi.
Quisque felis urna, vestibulum quis, eleifend placerat,
pulvinar et, eros. Vivamus nonummy hendrerit massa. Mauris
urna. Etiam tempor, tortor et mattis condimentum, risus felis
cursus nulla, nec blandit mauris metus eget purus. Morbi
vehicula, ligula eget rutrum dapibus, libero magna tristique
tortor, ut convallis ante nibh ac turpis. In adipiscing nulla
et quam. Nulla blandit quam at libero. Sed tortor nibh, viverra
ut, lobortis a, ultricies vitae, lorem. Duis faucibus. Cras sed
ligula ac lacus imperdiet cursus. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</p>
</div>
<div id="div3" style="display: none;">
<h2>Division 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus suscipit velit eu sapien. Curabitur non dui. Praesent
wisi dolor, tincidunt id, iaculis sed, sollicitudin eget, quam.
Quisque feugiat, nulla elementum interdum fermentum, ante
mauris venenatis purus, nec egestas quam risus nec lectus.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Fusce non elit. In non eros ac
wisi condimentum interdum. Sed ac pede. Duis in enim. Maecenas
porttitor mi faucibus enim. Duis luctus.</p>
</div>
</div>
</body>
</html>
This would solve a lot of headaches for you.
New QBasic site - Pete - 01-14-2005
By the way, you'll have to use absolute placement of your divs across the top of the frame, right where you want them to pop up, and the "onmouseover" command instead of the "onclick" that's in the example.
You can do submenus pretty easily too.
Danish only ? - Jark - 01-21-2005
I know a few words of Danish, but they are unsufficient here :wink:
I understand "Webmaster" and "email", but the rest would be worth a translation help...
Nice job anyway !
New QBasic site - The walrus - 03-16-2005
Well, sorry if my site had some "childhood" problems, but they should all be worked out by now...
And Pete: Thank you for your code, but I think I'll stick to the current design. I still appreciate your help, though.
New QBasic site - TheBigBasicQ - 03-16-2005
Quote:I dislike frames >_<
Isn't it easier making one page compatible with firefox so tha tit works everywhere?
nope. I was recently making a website and IE was being an a$$ :evil:
New QBasic site - The walrus - 03-16-2005
Yeah, IE *GO HOME*
New QBasic site - na_th_an - 03-17-2005
You like it or you don't, you still have to code your sites with IE in mind 'cause most people is using it. Sad, but true.
btw, I use IE
New QBasic site - The walrus - 03-23-2005
Well, don't we all? It seems that FireFox is gaining popularity, though.
New QBasic site - KiZ - 03-24-2005
Quote:btw, I use IE
noob!
Hehe remember Oracle's Sig.. how many flamewars/arguments did that start?
New QBasic site - TheBigBasicQ - 03-26-2005
Still the majority of market share is with IE and NOT FF
|