Wrox Home  
Search P2P Archive for: Go

  Return to Index  

javascript_howto thread: SV: Re: SV: Re: SV: Moving DIVS Continued


Message #1 by "Robert Nyman" <robert.nyman@c...> on Fri, 13 Dec 2002 14:28:03 +0100
Hi Keith,

I see. Thanks again for your explanation and tip to use cascading..
Your post was very helpful indeed.

Cheers,

Claudio

> Hi Claudio
I just find tables very useful for structureing layout.  The top attribute 
will align the div relative to the top of the table cell.  In this case 
they are not needed,it works just as well if you cut the : "TOP:10px; " 
out of the Style defanition.  You can also make each one different, to 
give a casscadeing affect.

Glad my first post could be of help.... :)>

Keith 
VAncouver BC.


----- Original Message ----- 
From: "Claudio Pallone" <pallone@l...>
To: "JavaScript HowTo" <javascript_howto@p...>
Sent: Friday, December 13, 2002 5:11 PM
Subject: [javascript_howto] Re: SV: Re: SV: Re: SV: Moving DIVS Continued


> Hi Keith,
> 
> thanks!  That did the trick. I really appreciated your help. I was 
getting 
> frustrated :).
> 
> By the way what is the logic of putting the divs in a table? The TOP 
> attribute is still the same to all the divs 10px??
> 
> Cheers,
> 
> Claudio
> 
> > her is something i knoked up this morning- while dressing and feeding 
my
> daughter.
>  There are probably al ot beter ways of doing this but it sort of works, 
> and
> is nice and simple:
> put all the divs in a table :
> 
> 
> <HTML>
> <HEAD>
> <TITLE>Visibility Demo</TITLE>
> <STYLE> P {font-weight:bold}
> </STYLE>
> <SCRIPT language="jscript">
> <!--
> function change_display(nLayer) {
> if (nLayer.style.display == "block") {
> nLayer.style.display = "none";}
>  else{
> nLayer.style.display= "block";
> }
> }
> -->
> </SCRIPT>
> <meta name="GENERATOR" Content="Microsoft Visual Studio
> 7.0">
> <meta name="CODE_LANGUAGE" Content="C#">
> <meta name="vs_defaultClientScript" content="JavaScript">
> <meta name="vs_targetSchema"
> content="http://schemas.microsoft.com/intellisense/ie5">
> </HEAD>
> <body MS_POSITIONING="GridLayout" TOPMARGIN="0" LEFTMARGIN="0"
> BGPROPERTIES="fixed" BGCOLOR="#ffffff" LINK="#000000" VLINK="#808080"
> ALINK="#000000">
> <form id="Form1" method="post" runat="server">
> <BLOCKQUOTE CLASS="body">
> <!--<P>Click the Button to change the
> visibility of the DIV</P>
> <P></P>
> <DIV ID="MyDiv1"
> 
STYLE="LEFT:20px;VISIBILITY:hidden;WIDTH:100px;POSITION:relative;TOP:10px;H
> EIGHT:100px;BACKGROUND-COLOR:blue"></DIV>
> <P></P>
> <P>A paragraph below the DIV object</P>
> <P><BUTTON onclick="change_visibility()"
> style="COLOR:white;BACKGROUND-COLOR:blue" type="button">
> Change Visibility </BUTTON>
> </P>
> <HR>
> -->
> 
>     <P>Click the Button to change the display of the DIV</P>
>     <table width="17%" border="0" cellspacing="0" cellpadding="0">
>       <tr>
>         <td><DIV ID="Layer1"
> 
STYLE="DISPLAY:block;LEFT:20px;WIDTH:100px;POSITION:relative;TOP:10px;HEIGH
> T:100px;BACKGROUND-COLOR:lightblue">
>       <table border="1">
>         <tr>
> <td><span
> onclick="change_display(Layer1);"
> style="cursor:arrow;cursor:pointer">1</span></td>
> </tr>
> </table>
> </DIV></td>
>         <td><DIV ID="Layer2"
> 
STYLE="DISPLAY:block;LEFT:20px;WIDTH:100px;POSITION:relative;TOP:10px;HEIGH
> T:100px;BACKGROUND-COLOR:lightblue">
> 
> <table>
> <tr>
> <td><span
> onclick="change_display(Layer2);"
> style="cursor:arrow;cursor:pointer">2</span></td>
> </tr>
> </table>
> 
> </DIV></td>
>         <td><DIV ID="Layer3"
> 
STYLE="DISPLAY:block;LEFT:20px;WIDTH:100px;POSITION:relative;TOP:10px;HEIGH
> T:100px;BACKGROUND-COLOR:lightblue">
> 
> <table>
> <tr>
> <td><span
> onclick="change_display(Layer3);"
> style="cursor:arrow;cursor:pointer">3</span></td>
> </tr>
> </table>
> 
> </DIV>
> </td>
>       </tr>
>     </table>
>     <P>&nbsp;</P>
> <P></P>
> 
> <P></P>
> 
> <P></P>
> 
> 
> </BLOCKQUOTE>
> </form>
> 
> </body>
> </HTML>
> 
> ----- Original Message -----
> From: "Claudio Pallone" <pallone@l...>
> To: "JavaScript HowTo" <javascript_howto@p...>
> Sent: Friday, December 13, 2002 4:16 PM
> Subject: [javascript_howto] Re: SV: Re: SV: Re: SV: Moving DIVS Continued
> 
> 
> > Sorry,
> >
> > I forgot to mention that you should click the numbers to hide the divs.
> >
> > Cheers,
> >
> > Claudio
> >
> >
> >
> > ---
> > Change your mail options at http://p2p.wrox.com/manager.asp or
> > to unsubscribe send a blank email to
> 
> >
> ---
> Change your mail options at http://p2p.wrox.com/manager.asp or 
> to unsubscribe send a blank email to 
> 


  Return to Index