disappearing divs

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

OK, this might be a tough one. I've got a page with two divs on it. By
default, one is set to show, the other to be hidden. In design mode and in
split mode, sometimes I can see the hidden div and other times I can't. I'll
be working on the hidden div -- then it will become hidden and I won't be
able to work on it without going into the code. What gives?

Brian
 
Sorry, but my post is too long. I'll work on paring it down. BTW, I've found
that I can make the div show by switching between Design and Split modes. But
it's still a pain.
 
In Design view a hidden div is not visible
(just as it is not visible in the browser)
- work on it in Code view or temporarily set it to visible

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Sorry, but my post is too long. I'll work on paring it down. BTW, I've found
| that I can make the div show by switching between Design and Split modes. But
| it's still a pain.
|
|
| "Murray" wrote:
|
| > <shrug> It's impossible to know. Can you show me the page, please?
| >
| > --
| > Murray
| > ============
| >
| > | > > OK, this might be a tough one. I've got a page with two divs on it. By
| > > default, one is set to show, the other to be hidden. In design mode and in
| > > split mode, sometimes I can see the hidden div and other times I can't.
| > > I'll
| > > be working on the hidden div -- then it will become hidden and I won't be
| > > able to work on it without going into the code. What gives?
| > >
| > > Brian
| >
| >
| >
 
Here's the code. The hidden div is visible in Split mode, but if I edit it in
the GUI side, then it disappears.

<html>

<head>

<meta http-equiv="Content-Language" content="en-us">

<title></title>

<SCRIPT>
// Image Preloads

loadImg('closeButton','images/closeButton.gif');
loadImg('closeButtonMO','images/closeButtonMO.gif');
loadImg('createPasswordButton','images/createPasswordButton.gif');
loadImg('createPasswordButtonMO','images/createPasswordButtonMO.gif');
loadImg('createRecordButton','images/createRecordButton.gif');
loadImg('createRecordButtonMO','images/createRecordButtonMO.gif');
loadImg('createPasswordButtonSubmittable','images/createPasswordButtonSubmittable.gif');
loadImg('createUserButton','images/createUserButton.gif');
loadImg('createUserButtonMO','images/createUserButtonMO.gif');
loadImg('deleteUserButton','images/deleteUserButton.gif');
loadImg('deleteUserButtonMO','images/deleteUserButtonMO.gif');
loadImg('lookupButton','images/lookupButton.gif');
loadImg('lookupButtonMO','images/lookupButtonMO.gif');
loadImg('lookupButtonSubmittable','images/lookupButtonSubmittable.gif');
loadImg('saveButton','images/saveButton.gif');
loadImg('saveButtonMO','images/saveButtonMO.gif');
loadImg('saveAndCloseButtonMO','images/saveAndCloseButtonMO.gif');
loadImg('saveAndCloseButtonSubmittable','images/saveAndCloseButtonSubmittable.gif');
loadImg('selectButtonMO','images/selectButtonMO.gif');
loadImg('selectButtonSubmittable','images/selectButtonSubmittable.gif');
loadImg('saveButtonSubmittable','images/saveButtonSubmittable.gif');
loadImg('saveAndCreateAnotherButton','images/saveAndCreateAnotherButton.gif');
loadImg('saveAndCreateAnotherButtonMO','images/saveAndCreateAnotherButtonMO.gif');
loadImg('searchButton','images/searchButton.gif');
loadImg('searchButtonMO','images/searchButtonMO.gif');
loadImg('searchButtonSubmittable','images/searchButtonSubmittable.gif');
loadImg('searchButton2','images/searchButton2.gif');
loadImg('searchButtonMO2','images/searchButtonMO2.gif');
loadImg('searchButtonSubmittable2','images/searchButtonSubmittable2.gif');

// Image Preload Function
function loadImg(imgObj,imgSrc) {
if(document.images) {
eval(imgObj+' = new Image()');
eval(imgObj+'.src = "'+imgSrc+'"');
}
}

// Image Rollover Code
function rollImage(srcObject, state) {
//alert(document.getElementById(srcObject));
eval('document.getElementById(srcObject).src = ' + state + '.src');
}

// Flip a Div
function flipDiv(openDiv,closeDivs) {
for (var divNumber in closeDivs) {
document.getElementById(closeDivs[divNumber]).style.display="none";

}
document.getElementById(openDiv).style.display="block";
}


// Cursor in first field
function setfocus( aForm )
{
if( aForm.elements[0]!=null) {
var i;
var max = aForm.length;
for( i = 0; i < max; i++ ) {
if( aForm.elements[ i ].type != "hidden" &&
!aForm.elements[ i ].disabled &&
!aForm.elements[ i ].readOnly ) {
aForm.elements[ i ].focus();
break;
}
}
}
}


</SCRIPT>

<link rel="stylesheet" type="text/css" href="../StyleSheets/myStylesheet.css">
</head>

<body onload="setfocus(createUserForm)" link="#000000" vlink="#000000"
alink="#000000" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"
class="whitebg">

<table cellSpacing="0" cellPadding="0" width="100%" border="0"
height="100%" class="sunken">
<tbody>
<tr>
<td width="100%" valign="top">
<div id="createUser" style="display=block">

<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%">
<tr>
<td>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" height="1">
<img border="0" src="images/A_MINIBOX.gif" width="1"
height="1"></td>
<td width="50%" height="1">
<img border="0" src="images/A_MINIBOX.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="50%" height="24">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3"><img border="0" src="../images/A_MINIBOX.gif"
width="1" height="1"></td>
<td>
<a href="index.htm"
onMouseOver="rollImage('saveAndCloseButtonSubmittable',
'saveAndCloseButtonMO')" onFocus="rollImage('saveAndCloseButtonSubmittable',
'saveAndCloseButtonMO')"
onMouseOut="rollImage('saveAndCloseButtonSubmittable',
'saveAndCloseButtonSubmittable')"
onBlur="rollImage('saveAndCloseButtonSubmittable',
'saveAndCloseButtonSubmittable')">
<img id="saveAndCloseButtonSubmittable"
src="images/saveAndCloseButtonSubmittable.gif" width="101" height="21"
border="0"></a></td>
<td width="2">
<img border="0" src="images/A_MINIBOX.gif" width="1"
height="1"></td>
<td><a href="http://www.google.com"
onMouseOver="rollImage('saveAndCreateAnotherButton',
'saveAndCreateAnotherButtonMO')"
onFocus="rollImage('saveAndCreateAnotherButton',
'saveAndCreateAnotherButtonMO')"
onMouseOut="rollImage('saveAndCreateAnotherButton',
'saveAndCreateAnotherButton')"
onBlur="rollImage('saveAndCreateAnotherButton',
'saveAndCreateAnotherButton')">
<img id="saveAndCreateAnotherButton"
src="images/saveAndCreateAnotherButton.gif" width="159" height="21"
border="0"></a></td>
</tr>
</table>
</td>
<td width="50%" height="24">
<div align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a onMouseOver="rollImage('closeButton', 'closeButtonMO')"
onFocus="rollImage('closeButton', 'closeButtonMO')"
onMouseOut="rollImage('closeButton', 'closeButton')"
onBlur="rollImage('closeButton', 'closeButton')" href="index.htm">
<img id="closeButton" src="images/closeButton.gif" width="20"
height="21" border="0"></a></td>
<td width="3"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="100%" height="1" colspan="2"><img border="0"
src="../images/A_MINIBOX.gif" width="1" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr>


<td height="100%">
<div class="scrollingdiv">

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="12"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td valign="bottom" height="35">
<b class="pageheader2">Create
Judge</b></font></td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td height="12" width="12"></td>
<td height="12" width="140"></td>
<td height="12">
</td>
</tr>
<form>
<tr>
<td height="23" width="12"></td>
<td height="23" width="140"><span class="label">User:<span
class="required">*</span></span></td>
<td height="23">
<table cellSpacing="0" cellPadding="0" border="0">
<tbody>
<tr>
<td>
<input type="text" name="T30" size="30" class="textboxw163withbg"></td>
<td width="2">
</td>
<td><a href="javascript:
flipDiv('lookup',['createUser','lookup'])"
onMouseOver="rollImage('lookupButton', 'lookupButtonMO')"
onFocus="rollImage('lookupButton', 'lookupButtonSubmittable')"
onMouseOut="rollImage('lookupButton', 'lookupButton')"
onBlur="rollImage('lookupButton', 'lookupButton')">
<img id="lookupButton" src="images/lookupButton.gif" width="17"
height="18" border="0"></a></td>

</tr>
</tbody>
</table>
</td>
<td height="23" width="12"></td>
</tr>
<tr>
<td height="23" width="12"></td>
<td height="23" width="140"><span class="label">Bar
Number:</span></td>
<td height="23">
<input type="text" name="T20" class="textboxw183" size="1"></td>
</tr>
</table>
<p> </p>
<p>
</p>
<p> </p>
</td>
</div>
</tr>
</table>
</div>
<div id="lookup" style="display=none">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%">
<tr>
<td>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" height="1">
<img border="0" src="images/A_MINIBOX.gif" width="1"
height="1"></td>
<td width="50%" height="1">
<img border="0" src="images/A_MINIBOX.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="50%" height="24">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3"><img border="0" src="../images/A_MINIBOX.gif"
width="1" height="1"></td>
<td>
<a href="javascript: flipDiv('createUser',['lookup','createUser'])"
onMouseOver="rollImage('selectButtonSubmittable', 'selectButtonMO')"
onFocus="rollImage('selectButtonSubmittable', 'selectButtonMO')"
onMouseOut="rollImage('selectButtonSubmittable', 'selectButtonSubmittable')"
onBlur="rollImage('selectButtonSubmittable', 'selectButtonSubmittable')">
<img id="selectButtonSubmittable" img border="0"
src="images/SelectButtonSubmittable.gif" width="59" height="21"></a></td>
</tr>
</table>
</td>
<td width="50%" height="24">
<div align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="javascript: flipDiv('createUser',['lookup','createUser'])"
onMouseOver="rollImage('closeButton2', 'closeButtonMO')"
onFocus="rollImage('closeButton2', 'closeButtonMO')"
onMouseOut="rollImage('closeButton2', 'closeButton')"
onBlur="rollImage('closeButton2', 'closeButton')">
<img id="closeButton2" src="images/closeButton.gif" width="20"
height="21" border="0"></a></td>
<td width="3"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="100%" height="1" colspan="2"><img border="0"
src="../images/A_MINIBOX.gif" width="1" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr>


<td height="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0"
height="100%">
<tr>
<td width="12"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td valign="bottom" height="35">
<b class="pageheader2">Select Person</b></td>
</tr>
</table>
</td>
<td width="12"></td>
</tr>
<tr>
<td height="12" width="12"></td>
<td height="12" width="140"></td>
<td height="12" width="12"></td>
</tr>
<tr>
<td height="100%" width="12"></td>
<td class="sunken" height="100%">
<table border="0" cellpadding="0" cellspacing="0"
height="100%" width="100%">
<tr> <div id="users_tools">

<td height="25" valign="top">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" height="24">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3"><img border="0" src="../images/A_MINIBOX.gif"
width="1" height="1"></td>
<td><a href="http://www.google.com"
onMouseOver="rollImage('createRecordButton', 'createRecordButtonMO')"
onFocus="rollImage('createRecordButton', 'createRecordButtonSubmittable')"
onMouseOut="rollImage('createRecordButton', 'createRecordButton')"
onBlur="rollImage('createRecordButton', 'createRecordButton')">
<img id="createRecordButton" src="images/createRecordButton.gif"
width="24" height="21" border==/a></td>
<td width="2">
</td>
<td>
<input type="text" name="T29" class="textboxW129" size="1"></td>
<td width="2">
<img border="0" src="images/A_MINIBOX.gif" width="1" height="1"></td>
<td><a href="http://www.google.com"
onMouseOver="rollImage('searchButton2', 'searchButtonMO2')"
onFocus="rollImage('searchButton2', 'searchButtonSubmittable2')"
onMouseOut="rollImage('searchButton2', 'searchButton2')"
onBlur="rollImage('searchButton2', 'searchButton2')">
<img id="searchButton2" src="images/searchButton2.gif" width="20"
height="21" border==/a></td>
</tr> </tr>
</table>
</td>
<td width="50%" height="24">
<img border="0" src="images/A_MINIBOX.gif" width="1" height="1"></td>
</tr>
</table>

</td></div>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">

<div class="scrollingdiv">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<th width="15" class="tableheader"> </th>
<th class="tableheader" width="50">
ID</th>
<th class="tableheaderselectedcolumn">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="listitem">Name</td>
<td width="17" align="center">
<img border="0" src="images/arrowDown.gif" width="7" height="7"></td>
</tr>
</table>
</th>

<tr>
<td width="15" class="selectbox" >
</td>
<td class="tabledataSelectedRow" width="50" >
988776</td>
<td class="tabledataSelectedRow">
<a href="http://www.google.com" class="listitem">Last Name, First
Name</a></td>
</tr>
<tr>
<td width="15" class="selectbox" >
</td>
<td class="tabledata" width="50" >
987876</td>
<td s class="tabledata">
<a href="http://www.google.com" class="listitem">Last Name, First
Name</a></td>
</tr>
<tr>
<td width="15" class="selectbox" >
</td>
<td class="tabledata" width="50" >
988776</td>
<td s class="tabledata">
<a href="http://www.google.com" class="listitem">Last Name, First
Name</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td height="100%" width="12"></td>
</tr>
<form>
</table>
</td>
</tr>
<tr>


<td height="12">
</td>
</tr>
</table>
</div>

</td>
</tr>
</tbody>
</table>
</body>
</html>
 
You are incorrect. As I said in my original post, "In design mode and in
split mode, sometimes I can see the hidden div and other times I can't."
 
<div id="lookup" style="display=none">

This is improper syntax, as is this -

<div id="createUser" style="display=block">

It should be this -

<div id="lookup" style="display:none">

or this -

<div id="createUser" style="display:block">

I assume that these are the divs you are mentioning?
 
Thanks for the tip. I made the change, but the display:none div still goes
away as soon as I modify the page in either Design or Split mode.
 
1. If display:none means not to display the div on the page, then why does it
show initially?

2. I changed the div to display:block and it still disappears when I edited
the page.

Like I said, this might be a hard one.
 
1. If display:none means not to display the div on the page, then why does
it
show initially?
Click to expand...

It should never display.
2. I changed the div to display:block and it still disappears when I
edited
the page.
Click to expand...

It should not. What edits are you doing?
 
"Show initially" means that when I load the page in Design or Split mode,
both divs show, regardless of whether they are Block or None. As soon as I
edit the page in any way, the None (hidden) div disappears and I can't edit
it any more without going into the code. I don't think I can explain it any
more simply than that. My guess is that it has to do with my FlipDiv function.
 
Just read the end of this and if using FrontPage 2003 all you have to do is
go to the menu on the right and highlight the "Layer" you wish to work on.
When you highlight it in the layer view it will be visible (Even if the
properties are hidden).

I hope this makes since. If you click outside of the Layer (and it is
hidden) it will not be shown.

I hope I am not too far off base here..

T
| "Show initially" means that when I load the page in Design or Split mode,
| both divs show, regardless of whether they are Block or None. As soon as I
| edit the page in any way, the None (hidden) div disappears and I can't
edit
| it any more without going into the code. I don't think I can explain it
any
| more simply than that. My guess is that it has to do with my FlipDiv
function.
|
|
| "Murray" wrote:
|
| > > 1. If display:none means not to display the div on the page, then why
does
| > > it
| > > show initially?
| >
| > It should never display.
| >
| > > 2. I changed the div to display:block and it still disappears when I
| > > edited
| > > the page.
| >
| > It should not. What edits are you doing?
| >
| > --
| > Murray
| > ============
| >
| >
| >
 
To clarify this a little more....

To get the menu on the right go to View> Tool Bars> Task Pane (Opens task
Pane on right) Use the getting started dropdown to select "Layers" You
should now see a list of all the layers on the page!



Highlight the one you want to work on.



Note if you click outside of the layer and it is a hidden one it will
disappear. To view it again just select it from the layers list.

T
| Just read the end of this and if using FrontPage 2003 all you have to do
is
| go to the menu on the right and highlight the "Layer" you wish to work on.
| When you highlight it in the layer view it will be visible (Even if the
| properties are hidden).
|
| I hope this makes since. If you click outside of the Layer (and it is
| hidden) it will not be shown.
|
| I hope I am not too far off base here..
|
| T
| || "Show initially" means that when I load the page in Design or Split mode,
|| both divs show, regardless of whether they are Block or None. As soon as
I
|| edit the page in any way, the None (hidden) div disappears and I can't
| edit
|| it any more without going into the code. I don't think I can explain it
| any
|| more simply than that. My guess is that it has to do with my FlipDiv
| function.
||
||
|| "Murray" wrote:
||
|| > > 1. If display:none means not to display the div on the page, then why
| does
|| > > it
|| > > show initially?
|| >
|| > It should never display.
|| >
|| > > 2. I changed the div to display:block and it still disappears when I
|| > > edited
|| > > the page.
|| >
|| > It should not. What edits are you doing?
|| >
|| > --
|| > Murray
|| > ============
|| >
|| >
|| >
|
|
 
This is a good suggestion, which I just tested. For me, in FP 2003, a div
or a table or any page element with style of display:none is always shown on
the design view page. Preview hides it as it should. There is nothing,
however, that I can do to make that element disappear from design view,
other than to set its visibility to hidden.

Honestly, this is a bug. A display:none has to remove the element from
design view always.

But I have no idea why it seems to display intermittantly for Brian. It
certainly should not.
 
Well, I thank you for acknowleging the problem. It really is strange. I've
tried to edit the page with different numbers of divs, both Block and None,
and all divs except for the first one disappear as soon as I try to edit
anything on the page. So I moved the top div to the bottom and tried to edit
the page. Again, all divs except for the top one disappear.
 
FrontPage "Layers" on a page look like >

<body>

<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
visibility: hidden" id="layer1">
&nbsp;</div>
<div style="position: absolute; left: 247px; top: 36px; width: 135px;
height: 111px; z-index: 2; visibility: visible" id="layer2">
&nbsp;</div>

</body>

Is that a layer or a div??????????

T
| This is a good suggestion, which I just tested. For me, in FP 2003, a div
| or a table or any page element with style of display:none is always shown
on
| the design view page. Preview hides it as it should. There is nothing,
| however, that I can do to make that element disappear from design view,
| other than to set its visibility to hidden.
|
| Honestly, this is a bug. A display:none has to remove the element from
| design view always.
|
| But I have no idea why it seems to display intermittantly for Brian. It
| certainly should not.
|
| --
| Murray
| ============
|
| | > Just read the end of this and if using FrontPage 2003 all you have to do
| > is
| > go to the menu on the right and highlight the "Layer" you wish to work
on.
| > When you highlight it in the layer view it will be visible (Even if the
| > properties are hidden).
| >
| > I hope this makes since. If you click outside of the Layer (and it is
| > hidden) it will not be shown.
| >
| > I hope I am not too far off base here..
| >
| > T
| > | > | "Show initially" means that when I load the page in Design or Split
| > mode,
| > | both divs show, regardless of whether they are Block or None. As soon
as
| > I
| > | edit the page in any way, the None (hidden) div disappears and I can't
| > edit
| > | it any more without going into the code. I don't think I can explain
it
| > any
| > | more simply than that. My guess is that it has to do with my FlipDiv
| > function.
| > |
| > |
| > | "Murray" wrote:
| > |
| > | > > 1. If display:none means not to display the div on the page, then
| > why
| > does
| > | > > it
| > | > > show initially?
| > | >
| > | > It should never display.
| > | >
| > | > > 2. I changed the div to display:block and it still disappears when
I
| > | > > edited
| > | > > the page.
| > | >
| > | > It should not. What edits are you doing?
| > | >
| > | > --
| > | > Murray
| > | > ============
| > | >
| > | >
| > | >
| >
| >
|
|
 
Back
Top