Qbasicnews.com › QbasicNews.Com › QB/FB News v
New QBasic site

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Threaded Mode
New QBasic site
Pete Offline
Senior Member
****
Posts: 443
Threads: 54
Joined: Jul 2004
#11
01-14-2005, 08:25 PM
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
Website Find
Reply
Pete Offline
Senior Member
****
Posts: 443
Threads: 54
Joined: Jul 2004
#12
01-14-2005, 08:29 PM
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
Website Find
Reply
Jark Offline
Senior Member
****
Posts: 566
Threads: 86
Joined: Feb 2003
#13
01-21-2005, 07:18 PM
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]
Website Find
Reply
The walrus Offline
Member
***
Posts: 127
Threads: 9
Joined: Oct 2004
#14
03-16-2005, 08:17 PM
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.
If swimming is so good for your figure, how do you explain walruses?
Website Find
Reply
TheBigBasicQ Offline
Posting Freak
*****
Posts: 4,307
Threads: 63
Joined: May 2003
#15
03-16-2005, 11:12 PM
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:
Website Find
Reply
The walrus Offline
Member
***
Posts: 127
Threads: 9
Joined: Oct 2004
#16
03-16-2005, 11:24 PM
Yeah, IE *GO HOME* Smile
If swimming is so good for your figure, how do you explain walruses?
Website Find
Reply
na_th_an Offline
Posting Freak
*****
Posts: 6,419
Threads: 74
Joined: Mar 2002
#17
03-17-2005, 01:08 PM
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
Website Find
Reply
The walrus Offline
Member
***
Posts: 127
Threads: 9
Joined: Oct 2004
#18
03-23-2005, 09:07 PM
Well, don't we all? Smile It seems that FireFox is gaining popularity, though.
If swimming is so good for your figure, how do you explain walruses?
Website Find
Reply
KiZ Offline
Posting Freak
*****
Posts: 2,771
Threads: 96
Joined: Oct 2003
#19
03-24-2005, 01:50 AM
Quote:btw, I use IE Tongue

noob! Tongue


Hehe remember Oracle's Sig.. how many flamewars/arguments did that start?
Website Find
Reply
TheBigBasicQ Offline
Posting Freak
*****
Posts: 4,307
Threads: 63
Joined: May 2003
#20
03-26-2005, 02:56 PM
Still the majority of market share is with IE and NOT FF Sad
Website Find
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)