![]() |
![]() |
||||||
|
|||||||
| Tags: div, overlay, tags |
![]() |
|
|||
|
Is there a way to overlay div tags? They are both hidden, and each contains a
response to a question "Yes you are correct" or "No, you are incorrect." Once the user clicks the submit button, I call JavaScript to show either the answerCorrect div orthe answerIncorrect div... but I want them to appear in exactly the same spot on the page |
| Sponsored Links |
|
|||
|
Any element that is absolutely positioned is entirely removed from the flow
of the code on the page. This means that it can be placed *anywhere* you want, and it will stay in that location no matter what else happens to the page rendering dynamics, subject to the requirements for calculating positions. So, at first blush, it would appear that two absolutely positioned containers would solve your problem. You could then use the Change Property behavior to change the display style of the desired div from display:none to display:block, making it appear on the page. -- Murray --- ICQ 71997575 Adobe Community Expert (If you *MUST* email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "Jim Rehmann" <webforumsuser@macromedia.com> wrote in message news:g6a7up$ip1$1@forums.macromedia.com... > Is there a way to overlay div tags? They are both hidden, and each > contains a > response to a question "Yes you are correct" or "No, you are incorrect." > Once > the user clicks the submit button, I call JavaScript to show either the > answerCorrect div orthe answerIncorrect div... but I want them to appear > in > exactly the same spot on the page > |
|
|||
|
Are you familiar with Z index? It allows you to define the order in which you
layer DIV tags. The "z-index" label -- This label determines the third dimension of positioning when several layers occupy the same pixel of the user's screen. The value of the "z-index" label determines which layer will be placed over the other. If two layers vie for the same spot, one has a "z-index" value of "1" and the other a "z-index" value of "2," then the "2" value layer will be placed over the "1" value layer. http://www.web-source.net/web_develo...t_graphics.htm |
|
|||
|
> Are you familiar with Z index? It allows you to define the order in which
> you > layer DIV tags. Only when they are positioned. By the way, that link is pretty antique, you know? -- Murray --- ICQ 71997575 Adobe Community Expert (If you *MUST* email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "Bowdeni" <webforumsuser@macromedia.com> wrote in message news:g6a99j$k55$1@forums.macromedia.com... > Are you familiar with Z index? It allows you to define the order in which > you > layer DIV tags. > > The "z-index" label -- > > This label determines the third dimension of positioning when several > layers > occupy the same pixel of the user's screen. The value of the "z-index" > label > determines which layer will be placed over the other. If two layers vie > for the > same spot, one has a "z-index" value of "1" and the other a "z-index" > value of > "2," then the "2" value layer will be placed over the "1" value layer. > > http://www.web-source.net/web_develo...t_graphics.htm > |
|
|||
|
I thought about using the AP Div, but then if the user resizes the page, the
Div tag doesn't position itself correctly. Let's say this: I have a whole bunch of text plus a wash-out picture on the page in a table. I want the two div tags to appear in the upper left corner (overlaying) the picture. If the user resizes the window, the AP Div tags won't necessarily appear in the upper left corner of the picture any more. |
|
|||
|
>I thought about using the AP Div, but then if the user resizes the page,
>the > Div tag doesn't position itself correctly. It would if you knew how! 8) That's why I said my answer would depend on your layout methods. Change this - </head> to this - <style type="text/css"> <!-- body { text-align:center; } #wrapper { text-align:left; width:760px; margin:0 auto;position:relative; } /* 760px will display on an 800px screen maximized browser window without */ /* horizontal scrollbars. */ --> </style> </head> change this - <body ...> (the ellipsis represents any other attributes that might be mentioned in the body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!) to this - <body ...> <div id="wrapper"> and this - </body> to this - <!-- /wrapper --> </div> </body> and see if that helps. -- Murray --- ICQ 71997575 Adobe Community Expert (If you *MUST* email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "Jim Rehmann" <webforumsuser@macromedia.com> wrote in message news:g6ag14$raa$1@forums.macromedia.com... >I thought about using the AP Div, but then if the user resizes the page, >the > Div tag doesn't position itself correctly. > > Let's say this: > > I have a whole bunch of text plus a wash-out picture on the page in a > table. > I want the two div tags to appear in the upper left corner (overlaying) > the > picture. If the user resizes the window, the AP Div tags won't > necessarily > appear in the upper left corner of the picture any more. > |
|
|||
|
On Jul 24, 1:17*pm, "Murray *ACE*" <for...@HAHAgreat-web-sights.com>
wrote: > >I thought about using the APDiv, but then if the user resizes the page, > >the > >Divtag doesn't position itself correctly. > > It would if you knew how! 8) *That's why I said my answer would depend on > your layout methods. > > Change this - > > </head> > > to this - > > <style type="text/css"> > <!-- > body { text-align:center; } > #wrapper { text-align:left; width:760px; margin:0 auto;position:relative;} > /* 760px will display on an 800px screen maximized browser window without*/ > /* horizontal scrollbars. */ > --> > </style> > </head> > > change this - > > <body ...> > (the ellipsis represents any other attributes that might be mentioned in the > body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!) > > to this - > > <body ...> > *<divid="wrapper"> > > and this - > > </body> > > to this - > > * <!-- /wrapper --> > *</div> > </body> > > and see if that helps. > > -- > Murray --- ICQ 71997575 > Adobe Community Expert I'm struggling with it. Here's the code for the page without anything (above) added: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ethics 2008</title> <link href="../CSS/Ethics08.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" src="scripts/behActions.js"></script> <script language="JavaScript" src="scripts/behCourseBuilder.js"></ script> <script language="JavaScript" src="scripts/interactionClass.js"></ script> <script language="JavaScript" src="scripts/elemInptClass.js"></script> </head> <body onload="MM_initInteractions();"> <br /> <div id="header"> <table style="border-left:1px solid #AEA397; border-right:1px solid #AEA397; border-bottom:1px solid #AEA397" width="749" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="697" bgcolor="#6C0E04"><img src="../images/ header.jpg" alt="Header" width="740" height="61" /></td> </tr> </table> </div> <div id="menu"> <table style="border-left:1px solid #AEA397; border-right:1px solid #AEA397; border-bottom:1px solid #AEA397" width="749" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="407" bgcolor="#FFFFCC"><span class="style9"><strong>Legal and Ethical Compliance</strong></span></ td> <td width="88" bgcolor="#FFFFCC"><div align="center"><span class="style8"><a href="../docs/EthicsGuide.pdf" target="_blank">Ethics Guide</a></span></div></td> <td width="116" bgcolor="#FFFFCC"><div align="center"><a href="#"><span class="style8" onclick="MM_openBrWindow('../ policies.html','','width=800,height=400')">Company Policies</span></ a></div></td> <td width="49" bgcolor="#FFFFCC"><div align="center"><span class="style8"><a href="../docs/Help.pdf" target="_blank">Help</a></ span></div></td> <td width="37" bgcolor="#FFFFCC"><div align="center"><span class="style8"><a href="../quitExit.htm" target="contentFrame">Exit</ a></span></div></td> </tr> </table> </div> <div id="content"> <table width="749" align="center" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" style="border-left:1px solid #999999; border-right: 1px solid #999999; border-bottom:1px solid #999999"> <tr> <td width="2"><p align="right" class="style6"></p></td> <td width="403" bgcolor="#FFFFFF"><interaction name="MultCh_Radios01" object="G01" template="010_Multiple Choice/ 020_MultCh_Radios_03.agt" includesrc="interactionClass.js,elemInptClass.js"> <div name="G01Layer"> <span class="style13" name="G01question"><br /> Our commitment to ethical behavior includes knowing:</ span> <form name="G01choices"> <span class="style11" name="G01choice1"> <input name="G01RadioInp" type="radio" onclick="G01.e['choice1'].update()" /> A) There is a need for open and honest <br /> &n bsp; communication between employees and <br /> &n bsp; senior management.<br /> <br /> </span> <span class="style11" name="G01choice2"> <input name="G01RadioInp" type="radio" onclick="G01.e['choice2'].update()" /> B) Employees will not engage in activities that <br /> &n bsp; conflict with or compromise the goals or <br /> &n bsp; integrity of the company in any way.<br /> <br /> </span> <span class="style11" name="G01choice3"> <input name="G01RadioInp" type="radio" onclick="G01.e['choice3'].update()" /> C) It is everyone's responsibility to make the<br / > &n bsp; right choices. Employees should understand<br /> &n bsp; and comply with the spirit of our <br /> &n bsp; commitment to ethical behavior.<br /> <br /> </span> <span class="style11" name="G01choice4"> <input name="G01RadioInp" type="radio" onclick="G01.e['choice4'].update()" /> D) All of the above.</span><span name="G01choice4"><br /> </span> </form> <form name="G01controls"> <div align="center"> <input name="G01judge" type="button" value="Submit" onclick="MM_judgeInt('G01')" /> </div> </form> </div> <script language="JavaScript"> <!-- // Copyright 1998,1999 Macromedia, Inc. All rights reserved. function newG01() { G01 = new MM_interaction('G01',0,0,1,null,0,0,0,'','','c','' ,0); G01.add('inpt','choice1',0,1,0,0); G01.add('inpt','choice2',0,1,0,0); G01.add('inpt','choice3',0,1,0,0); G01.add('inpt','choice4',0,1,1,0); G01.init(); G01.am('segm','Segment: Correctness_',1,0); G01.am('cond','Correct_01','G01.correct == true',0); G01.am('actn','Call JavaScript','MM_callJS(\'picCell.style.backgroundI mage = \\\"url(../ images/LEC_Q1_faded.jpg)\\\";\')',''); G01.am('actn','Call JavaScript','MM_callJS(\'ansCorrect.style.visibili ty = \\\"visible\\\"; \')',''); G01.am('actn','Set Text of Layer','MM_setTextOfLayer(\'theAnswer\', \'\',\'<b>Jim Rehmann</b>\')',''); G01.am('actn','Set Interaction Properties','MM_setIntProps(\'G01.setDisabled(true );\')',''); G01.am('end'); G01.am('cond','Incorrect_','G01.correct == (false)',0); G01.am('actn','Call JavaScript','MM_callJS(\'picCell.style.backgroundI mage = \\\"url(../ images/LEC_Q1_faded.jpg)\\\"; \')',''); G01.am('actn','Call JavaScript','MM_callJS(\'ansIncorrect.style.visibi lity = \\\"visible\\ \";\')',''); G01.am('actn','Set Interaction Properties','MM_setIntProps(\'G01.setDisabled(true );\')',''); G01.am('actn','Set Text of Layer','MM_setTextOfLayer(\'theAnswer\', \'\',\'No, that is incorrect!\')',''); G01.am('end'); G01.am('cond','Unknown Response_','G01.knownResponse == false',0); G01.am('actn','Popup Message','MM_popupMsg(\'Unknown Response \')',''); G01.am('end'); } if (window.newG01 == null) window.newG01 = newG01; if (!window.MM_initIntFns) window.MM_initIntFns = ''; window.MM_initIntFns += 'newG01();'; //--> </script> <cbi-select object="G01"> </interaction></td> <td width="6"> </td> <td id="picCell" width="296" valign="top" background="../ images/LEC_Q1.jpg"><p> </p></td> </tr> </table> </div> <div id="progress"> <div align="center"><table style="border-left:1px solid #AEA397; border-right:1px solid #AEA397; border-bottom:1px solid #AEA397" width="749" align="center" cellpadding="5" cellspacing="0"> <tr> <td bgcolor="#FFFFCC"><div align="left">Progress: <img src="../images/Progress1.jpg" alt="progress" width="155" height="15" / ></div></td> </tr> </table> </div> </div> </body> </html> |
|
|||
|
On Jul 30, 2:16*pm, Jim <jlrehm...@gmail.com> wrote:
> On Jul 24, 1:17*pm, "Murray *ACE*" <for...@HAHAgreat-web-sights.com> > wrote: > > > > > > > >I thought about using the APDiv, but then if the user resizes the page, > > >the > > >Divtag doesn't position itself correctly. > > > It would if you knew how! 8) *That's why I said my answer would depend on > > your layout methods. > > > Change this - > > > </head> > > > to this - > > > <style type="text/css"> > > <!-- > > body { text-align:center; } > > #wrapper { text-align:left; width:760px; margin:0 auto;position:relative; } > > /* 760px will display on an 800px screen maximized browser window without */ > > /* horizontal scrollbars. */ > > --> > > </style> > > </head> > > > change this - > > > <body ...> > > (the ellipsis represents any other attributes that might be mentioned in the > > body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!) > > > to this - > > > <body ...> > > *<divid="wrapper"> > > > and this - > > > </body> > > > to this - > > > * <!-- /wrapper --> > > *</div> > > </body> > > > and see if that helps. > > > -- > > Murray --- ICQ 71997575 > > Adobe Community Expert > > I'm struggling with it. > > Here's the code for the page without anything (above) added: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml"> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Ethics 2008</title> > <link href="../CSS/Ethics08.css" rel="stylesheet" type="text/css" /> > <script language="JavaScript" src="scripts/behActions.js"></script> > <script language="JavaScript" src="scripts/behCourseBuilder.js"></ > script> > <script language="JavaScript" src="scripts/interactionClass.js"></ > script> > <script language="JavaScript" src="scripts/elemInptClass.js"></script> > </head> > > <body onload="MM_initInteractions();"> > <br /> > > * <divid="header"> > * * <table style="border-left:1px solid #AEA397; border-right:1px > solid #AEA397; border-bottom:1px solid #AEA397" width="749" > align="center" cellpadding="0" cellspacing="0"> > * * * <tr> > * * * * <td width="697" bgcolor="#6C0E04"><img src="../images/ > header.jpg" alt="Header" width="740" height="61" /></td> > * * * </tr> > * * </table> > * </div> > * <divid="menu"> > * * <table style="border-left:1px solid #AEA397; border-right:1px > solid #AEA397; border-bottom:1px solid #AEA397" width="749" > align="center" cellpadding="5" cellspacing="0"> > > * * * <tr> > * * * * <td width="407" bgcolor="#FFFFCC"><span > class="style9"><strong>Legal and Ethical Compliance</strong></span></ > td> > * * * * <td width="88" bgcolor="#FFFFCC"><divalign="center"><span > class="style8"><a href="../docs/EthicsGuide.pdf" > target="_blank">Ethics Guide</a></span></div></td> > * * * * <td width="116" bgcolor="#FFFFCC"><divalign="center"><a > href="#"><span class="style8" onclick="MM_openBrWindow('../ > policies.html','','width=800,height=400')">Company Policies</span></ > a></div></td> > * * * * <td width="49" bgcolor="#FFFFCC"><divalign="center"><span > class="style8"><a href="../docs/Help.pdf" target="_blank">Help</a></ > span></div></td> > * * * * <td width="37" bgcolor="#FFFFCC"><divalign="center"><span > class="style8"><a href="../quitExit.htm" target="contentFrame">Exit</ > a></span></div></td> > * * * </tr> > * * </table> > * </div> > * <divid="content"> > * * <table width="749" align="center" cellpadding="5" cellspacing="0" > bgcolor="#FFFFFF" style="border-left:1px solid #999999; border-right: > 1px solid #999999; border-bottom:1px solid #999999"> > * * * <tr> > * * * * <td width="2"><p align="right" class="style6"></p></td> > * * * * <td width="403" bgcolor="#FFFFFF"><interaction > name="MultCh_Radios01" object="G01" template="010_Multiple Choice/ > 020_MultCh_Radios_03.agt" > includesrc="interactionClass.js,elemInptClass.js"> > * * * * * * <divname="G01Layer"> <span class="style13" > name="G01question"><br /> > * * * * * * Our commitment to ethical behavior includes knowing:</ > span> > * * * * * * * * <form name="G01choices"> > * * * * * * * * * <span class="style11" name="G01choice1"> > * * * * * * * * * <input name="G01RadioInp" type="radio" > onclick="G01.e['choice1'].update()" /> > * * * * * * * * * * A) There is a need for open and honest <br /> > > &n bsp; > communication between employees and <br /> > > &n bsp; senior > management.<br /> > * * * * * * * * * * <br /> > * * * * * * * * * </span> <span class="style11" name="G01choice2"> > * * * * * * * * * <input name="G01RadioInp" type="radio" > onclick="G01.e['choice2'].update()" /> > * * * * * * * * * * B) Employees will not engage in activities > * * * * * * * * * * that <br /> > > &n bsp; > * * * * * * * * * * conflict with or compromise the > * * * * * * * * * * goals or <br /> > > &n bsp; > * * * * * * * * * * integrity of the company in any > * * * * * * * * * * way.<br /> > * * * * * * * * * * * * * * * * * <br /> > * * * * * * * * * </span> <span class="style11" name="G01choice3"> > * * * * * * * * * <input name="G01RadioInp" type="radio" > onclick="G01.e['choice3'].update()" /> > * * * * * * * * * * C) It is everyone's responsibility to make the<br / > > > > &n bsp; > right choices. Employees should understand<br /> > > &n bsp; > * * * * * * * * * * and comply with the spirit of our<br /> > > &n bsp; > commitment to ethical behavior.<br /> > * * * * * * * * * * <br /> > * * * * * * * * * </span> <span class="style11" name="G01choice4"> > * * * * * * * * * <input name="G01RadioInp" type="radio" > onclick="G01.e['choice4'].update()" /> > * * * * * * * * * * D) All of the above.</span><span > name="G01choice4"><br /> > * * * * * * * * * * * </span> > * * * * * * * * </form> > * * * * * * * <form name="G01controls"> > * * * * * * * * * <divalign="center"> > * * * * * * * * * * <input name="G01judge" type="button" > value="Submit" onclick="MM_judgeInt('G01')" /> > * * * * * * * * * </div> > * * * * * * * </form> > * * * * * </div> > * * * * * <script language="JavaScript"> > <!-- > * // Copyright 1998,1999 Macromedia, Inc. All rights reserved. > * function newG01() { > * * G01 = new MM_interaction('G01',0,0,1,null,0,0,0,'','','c','' ,0); > * * G01.add('inpt','choice1',0,1,0,0); > * * G01.add('inpt','choice2',0,1,0,0); > * * G01.add('inpt','choice3',0,1,0,0); > * * G01.add('inpt','choice4',0,1,1,0); > * * G01.init(); > * * G01.am('segm','Segment: Correctness_',1,0); > * * G01.am('cond','Correct_01','G01.correct == true',0); > * * G01.am('actn','Call > JavaScript','MM_callJS(\'picCell.style.backgroundI mage = \\\"url(../ > images/LEC_Q1_faded.jpg)\\\";\')',''); > * * G01.am('actn','Call > JavaScript','MM_callJS(\'ansCorrect.style.visibili ty = \\\"visible\\\"; > \')',''); > * * G01.am('actn','Set Text of Layer','MM_setTextOfLayer(\'theAnswer\', > \'\',\'<b>Jim Rehmann</b>\')',''); > * * G01.am('actn','Set Interaction > Properties','MM_setIntProps(\'G01.setDisabled(true );\')',''); > * * G01.am('end'); > * * G01.am('cond','Incorrect_','G01.correct == (false)',0); > * * G01.am('actn','Call > JavaScript','MM_callJS(\'picCell.style.backgroundI mage = \\\"url(../ > images/LEC_Q1_faded.jpg)\\\"; \')',''); > * * G01.am('actn','Call > JavaScript','MM_callJS(\'ansIncorrect.style.visibi lity = \\\"visible\\ > \";\')',''); > * * G01.am('actn','Set Interaction > Properties','MM_setIntProps(\'G01.setDisabled(true );\')',''); > * * G01.am('actn','Set Text of Layer','MM_setTextOfLayer(\'theAnswer\', > \'\',\'No, that is incorrect!\')',''); > * * G01.am('end'); > * * G01.am('cond','Unknown Response_','G01.knownResponse == false',0); > * * G01.am('actn','Popup Message','MM_popupMsg(\'Unknown Response > \')',''); > * * G01.am('end'); > * } > * if (window.newG01 == null) window.newG01 = newG01; > * if (!window.MM_initIntFns) window.MM_initIntFns = ''; > window.MM_initIntFns += 'newG01();'; > //--> > * * * * * * </script> > * * * * * * <cbi-select object="G01"> > * * * * </interaction></td> > * * * * <td width="6"> </td> > * * * * <td id="picCell" width="296" valign="top" background="../ > images/LEC_Q1.jpg"><p> </p></td> > * * * </tr> > * * </table> > * * </div> > > * <divid="progress"> > * * <divalign="center"><table style="border-left:1px solid #AEA397; > border-right:1px solid #AEA397; border-bottom:1px solid #AEA397" > width="749" align="center" cellpadding="5" cellspacing="0"> > > * * * <tr> > * * * * <td bgcolor="#FFFFCC"><divalign="left">Progress: <img > src="../images/Progress1.jpg" alt="progress" width="155" height="15" /></div></td> > > * * * </tr> > * * * </table> > * * </div> > </div> > </body> > </html>- Hide quoted text - > > - Show quoted text - Never mind... I got it to work! Thanks a TON Murray! |
![]() |
| Thread Tools | |
| Display Modes | |
|
|
- Contact Us
-|-
Adobe Dreamweaver Forums -|-
Archive -|-
Top -|-Rules/Disclaimer-|-Help/Support-|-Advertise