Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
New QBasic site
#11
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.
Pete's QB Site: http://www.petesqbsite.com
Reply
#12
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.
Pete's QB Site: http://www.petesqbsite.com
Reply
#13
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 !
hink Global, Make Symp' All ! ®
[Image: Banner.gif]
Reply
#14
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.
Reply
#15
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:
Reply
#16
Yeah, IE *GO HOME* Smile
Reply
#17
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 Tongue
SCUMM (the band) on Myspace!
ComputerEmuzone Games Studio
underBASIC, homegrown musicians
[img]http://www.ojodepez-fanzine.net/almacen/yoghourtslover.png[/i
Reply
#18
Well, don't we all? Smile It seems that FireFox is gaining popularity, though.
Reply
#19
Quote:btw, I use IE Tongue

noob! Tongue


Hehe remember Oracle's Sig.. how many flamewars/arguments did that start?
Reply
#20
Still the majority of market share is with IE and NOT FF Sad
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)