Topic awaiting preservation: JavaScript Q $Pages that link to <a href="https://ozoneasylum.com/backlink?for=9008" title="Pages that link to Topic awaiting preservation: JavaScript Q" rel="nofollow" >Topic awaiting preservation: JavaScript Q\$

Author	Thread
imagineme Obsessive-Compulsive (I) Inmate From: Lahore, Pakistan Insane since: Feb 2004	posted 02-03-2004 19:14 First off I have to apologise for not posting in the form for the last couple months. Guess I was just to busy to do anything. Anyway I finally got time to get back to the forum and I as usual got a question. Now that I'm free I've finally gotten time to work on me site. I want to know how to get an effect like so. I rollover a link and it displays a huge paragraph of text 'to the right' of it eh or even better click on it and it display the para, then click/rollover another link and it displays the 'next' para also 'to the right' of it. Bit confusing but I really to know how to do this or it's back to the drawing board for me. Once again sorry for not posting all this time. Oh and I think my 'previous' account has been removed ah well who cares. // Imagine Studios // Imagination in Form //
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 02-03-2004 20:05 There are a million ways to do this and some better than others in certain situations, the basic idea is to toggle the the visibility of the element - I'm not going to go into great detail on this or css but a simple working script is below (just custom built it for you). No styling so you will have to do that, easy tho. There are neater ways to do it, but this is straight forward and easy. code: <html> <head> <script> var current = ''; var curr = '' function toggleVis(id,vis) { para = document.getElementById(id); current ? curr = document.getElementById(current) : null; if (vis == 'show') { curr ? curr.style.display = 'none' : null para.style.display = 'block'; current = id; } else { para.style.display = 'none'; current = ''; } } </script> </head> <body> <a href="javascript:;" onclick="toggleVis('paraOne', 'show');">show one</a> <br /> <a href="javascript:;" onclick="toggleVis('paraTwo', 'show');">show two</a> <br /> <a href="javascript:;" onclick="toggleVis('paraThree', 'show');">show three</a> <p id="paraOne" style="display:none">paraOne yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</p> <p id="paraTwo" style="display:none">paraTwo yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</p> <p id="paraThree" style="display:none">paraThree yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</p> </body> </html> <A HREF="http://www.cryokinesis.co.uk" TARGET=_blank>visit
Cameron Bipolar (III) Inmate From: Brisbane Insane since: Jan 2003	posted 02-03-2004 20:06 "or it's back to the drawing board for me" You really shouldn't be designing for something you don't know how to impliment :P But that's ok, this isn't too difficult. You'll want to read up on mouse events (onmouseover onmouseout onclick etc) and the CSS properties for "absolute positioning" and for "display" and "hidden". Reading thorugh a bunch of DHTML primer tutorials would also be a good idea. Edit: dang smonkey, you got some fast fingers there. [This message has been edited by Cameron (edited 02-03-2004).]

Topic awaiting preservation: JavaScript Q\$

Author

Thread

imagineme
Obsessive-Compulsive (I) Inmate

From: Lahore, Pakistan
Insane since: Feb 2004

posted 02-03-2004 19:14

First off I have to apologise for not posting in the form for the last couple months. Guess I was just to busy to do anything. Anyway I finally got time to get back to the forum and I as usual got a question. Now that I'm free I've finally gotten time to work on me site. I want to know how to get an effect like so. I rollover a link and it displays a huge paragraph of text 'to the right' of it eh or even better click on it and it display the para, then click/rollover another link and it displays the 'next' para also 'to the right' of it.

Bit confusing but I really to know how to do this or it's back to the drawing board for me.

Once again sorry for not posting all this time.
Oh and I think my 'previous' account has been removed ah well who cares.

// Imagine Studios // Imagination in Form //

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 02-03-2004 20:05

There are a million ways to do this and some better than others in certain situations, the basic idea is to toggle the the visibility of the element - I'm not going to go into great detail on this or css but a simple working script is below (just custom built it for you). No styling so you will have to do that, easy tho. There are neater ways to do it, but this is straight forward and easy.

code:

<html>

<head>

<script>



var current = '';

var curr = ''



function toggleVis(id,vis) {



    para = document.getElementById(id);

    current ? curr = document.getElementById(current) : null;



    if (vis == 'show') {

          curr ? curr.style.display = 'none' : null

          para.style.display = 'block';

          current = id;

    }

    else {

          para.style.display = 'none';

          current = '';

    }



}



</script>

</head>

<body>



<a href="javascript:;" onclick="toggleVis('paraOne', 'show');">show one</a>

<br />

<a href="javascript:;" onclick="toggleVis('paraTwo', 'show');">show two</a>

<br />

<a href="javascript:;" onclick="toggleVis('paraThree', 'show');">show three</a>



<p id="paraOne" style="display:none">paraOne yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</p>

<p id="paraTwo" style="display:none">paraTwo yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</p>

<p id="paraThree" style="display:none">paraThree yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</p>



</body>

</html>

<A HREF="http://www.cryokinesis.co.uk" TARGET=_blank>visit

Cameron
Bipolar (III) Inmate

From: Brisbane
Insane since: Jan 2003

posted 02-03-2004 20:06

"or it's back to the drawing board for me"

You really shouldn't be designing for something you don't know how to impliment :P

But that's ok, this isn't too difficult.

You'll want to read up on mouse events (onmouseover onmouseout onclick etc) and the CSS properties for "absolute positioning" and for "display" and "hidden". Reading thorugh a bunch of DHTML primer tutorials would also be a good idea.

Edit: dang smonkey, you got some fast fingers there.

[This message has been edited by Cameron (edited 02-03-2004).]