473,320 Members | 1,862 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Why is this doing that?

Well, nobody in alt.html wants to answer this question, so I'll ask it
here:

I have a button and associated text in a container. When one clicks the
button it brings up additional buttons and text in a container to the
right of the first container. I get more than I bargained for...it also
brings up unwanted space below the dual container line. I can't figure out
why, so I can't fix it.

If you go to <http://www.edbj.aes-intl.com/brcaform1.html> and click on
'Patient is symptomatic of breast disease:' you'll observe the errant
behavior.

Basically, the markup and code is:

<Form....>
<div style="float:right">
Patient is symptomatic of breast disease :
<checkbox... onClick="show additional text">
<div id='div1' onClick="show more text below>
</div></div>
</Form>

<br clear=all><br>Show the next text block independent of the above>

--
Ed Jay (remove M to respond by email)
Nov 23 '05 #1
7 1332
> it also brings up unwanted space below the dual container line

Try setting the margin-bottom (or padding-bottom) on whatever is being
toggled; what is happening is you are making stuff appear with a bottom
margin/padding.

Simple.

Nov 23 '05 #2
Ed Jay wrote on 12 nov 2005 in comp.lang.javascript:
Well, nobody in alt.html wants to answer this question, so I'll ask it
here:

I have a button and associated text in a container. When one clicks
the button it brings up additional buttons and text in a container to
the right of the first container. I get more than I bargained for...it
also brings up unwanted space below the dual container line. I can't
figure out why, so I can't fix it.

If you go to <http://www.edbj.aes-intl.com/brcaform1.html> and click
on 'Patient is symptomatic of breast disease:' you'll observe the
errant behavior.

Basically, the markup and code is:

<Form....>
<div style="float:right">
Patient is symptomatic of breast disease :
<checkbox... onClick="show additional text">
<div id='div1' onClick="show more text below>
</div></div>
</Form>

<br clear=all><br>Show the next text block independent of the above>


do not use float here, change it, temporarily adding a border, to:
<div NOstyle="float:left;" style="border:6px solid green;">

and move the end </div> to the group if </div>'s further down.

Then see what happens.

You could change the toggling of:
<div id="div1" style="display:none;border:1px solid black;">
from
target.style.display = "";
meaning target.style.display = "block";
to
target.style.display = "inline";
and see what happens

Adding inlines on the right is better than floating the original on the
left, IMHO. Floating is for images in a text, not for this.

===========================================

A better way, detecting the checkbox state, is:

function toggle(what,targetId) {
target = document.getElementById(targetId);
target.style.display=(what.checked)?'inline':'none ';
}

and

<input type=checkbox onClick="toggle(this,'div1')">

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Nov 23 '05 #3
"Joshie Surber" <jo**********@gmail.com> wrote:
it also brings up unwanted space below the dual container line


Try setting the margin-bottom (or padding-bottom) on whatever is being
toggled; what is happening is you are making stuff appear with a bottom
margin/padding.

Simple.


Simple, but not the answer. Proven empirically.

--
Ed Jay (remove M to respond by email)
Nov 23 '05 #4
"Evertjan." <ex**************@interxnl.net> wrote:
Ed Jay wrote on 12 nov 2005 in comp.lang.javascript:
I have a button and associated text in a container. When one clicks
the button it brings up additional buttons and text in a container to
the right of the first container. I get more than I bargained for...it
also brings up unwanted space below the dual container line. I can't
figure out why, so I can't fix it.

If you go to <http://www.edbj.aes-intl.com/brcaform1.html> and click
on 'Patient is symptomatic of breast disease:' you'll observe the
errant behavior.

Basically, the markup and code is:

<Form....>
<div style="float:right">
Patient is symptomatic of breast disease :
<checkbox... onClick="show additional text">
<div id='div1' onClick="show more text below>
</div></div>
</Form>

<br clear=all><br>Show the next text block independent of the above>

do not use float here, change it, temporarily adding a border, to:
<div NOstyle="float:left;" style="border:6px solid green;">


Doing this caused an extra line to appear below the 'Patient is
symptomatic' line, even when the form box wasn't checked. It also extended
it's container to the right margin. Checking the box displayed 'div1'
immediately below, without adding another blank line.
and move the end </div> to the group if </div>'s further down.
Then see what happens.
The only additional change was the inclusion of 'div1' as a subset of the
'Patient is symptomatic' container.
You could change the toggling of:
<div id="div1" style="display:none;border:1px solid black;">
from
target.style.display = "";
meaning target.style.display = "block";
to
target.style.display = "inline";
and see what happens
No change.
Adding inlines on the right is better than floating the original on the
left, IMHO. Floating is for images in a text, not for this.
Understood. Thanks for the tip.

Got it working...sort of.

When I removed the float I noted that the primary container extended to
the right margin. It occurred to me that what was possibly happening was
that the hidden text container width plus the primary container width was
causing line wrapping. So, I limited the widths of the two and apparently,
I was correct. Toggling 'div1' stopped adding an extra blank line.
However, with the float gone, I was still introducing a blank line, but
it's static. Regardless of whether I used a block or inline style for
'div1'. If I add back the float and limit the width of the sum of the two
containers, it seems to work, whether I use inline or block; however, only
if the float is present.

Changing the above introduces a couple of new issues:

When I select 'Burning, Pain or Numbness,' 'div2' appears as it should,
below 'div1,' but it now introduces an extra blank line below it, even
though I've guaranteed no wrapping by limiting its width.

Further, when one of the choices (left/right/both) is selected in 'div2',
'div3' is displayed but with an extra added line above the text.

I tried adding margin:0px and padding:0px to both 'div2' and 'div3' but to
no avail.

Also, if I don't limit the width of 'div2', I experience the same behavior
as with 'div3.'===========================================

A better way, detecting the checkbox state, is:

function toggle(what,targetId) {
target = document.getElementById(targetId);
target.style.display=(what.checked)?'inline':'none ';
}

and

<input type=checkbox onClick="toggle(this,'div1')">


Thanks. Done.

--
Ed Jay (remove M to respond by email)
Nov 23 '05 #5
> Simple, but not the answer. Proven empirically.

Sorry, I didn't have time to test... priority interrupt from the SO.
Sounded good in my head though.

Nov 23 '05 #6
"Joshie Surber" <jo**********@gmail.com> wrote:
Simple, but not the answer. Proven empirically.


Sorry, I didn't have time to test... priority interrupt from the SO.
Sounded good in my head though.


No problem. I've employed your fix elsewhere and it's worked fine. :-)

--
Ed Jay (remove M to respond by email)
Nov 23 '05 #7
Ed Jay <ed***@aes-intl.com> wrote:
I have a button and associated text in a container. When one clicks the
button it brings up additional buttons and text in a container to the
right of the first container. I get more than I bargained for...it also
brings up unwanted space below the dual container line. I can't figure out
why, so I can't fix it.

Issue resolved by using visibility:visible/hidden instead of
display:inline/none for the first container, and not including the subset
containers as part of the visibility-controlled container.

The final code is in <www.edbj.aes-intl.com/projform2.html>.

Thanks to everyone for your help. You taught me a lot. :-)

--
Ed Jay (remove M to respond by email)
Nov 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Daniel Kasak | last post by:
Hi all. I need to test whether the first bit of a field is numeric. For example, the field might contain: 154 boxes I'm currently testing it by doing: if(abs(left(field,locate(' ',...
96
by: Karen Hill | last post by:
SELECT surgeries.*, animals.* FROM surgeries INNER JOIN animals ON .=. AND WHERE ((.=Date()) Or .=Date()); I'm trying to write a query that joins two table together, animals and surgeries...
6
by: Chris Calzaretta | last post by:
Just wanted to get a post out there to get some information on best way to do .net updates at runtime. Throw any and all ideas out there please Thanks Chris
4
by: c++ newbie | last post by:
hello gurus of C++ programming, I am a student doing my masters in computer applications.I am a bit experienced in VB 6.0.I am currently doing a project in vb 6. To accompish a certain task I...
9
by: Ron | last post by:
I am trying to populate a listbox with dates of easter from 1901 to 2099. My code is not doing it. Here is what I have. What am I doing wrong? Private Sub Form1_Load(ByVal sender As...
0
by: shapper | last post by:
Hello, I am creating a class with a control. I compiled the class and used it on an Asp.Net 2.0 web site page. I can see the begin and end tags of my control (<oland </ol>) but somehow the...
56
by: valentin tihomirov | last post by:
{ int i = 2; } int i = 1; There is no 'i' defined in the 'parent' context from the moment of declaration on. So what is the problem? They tell us they pursue language simplicity. The rule "do...
2
by: goodstufffilms | last post by:
Story: (adds extra flavor) I'm not much of a pro at web design, but I made a site for myself and som eone noticed and asked me to make a site for their organization. Usually I use just html...
1
by: Jeremy | last post by:
I've got a GridView control in an updatepanel. Each row has two controls. one control only affects the display of things inside the update panel, so I want it to be asynchronous, but the other...
10
by: DavidSeck.com | last post by:
Hi, I am working with the Facebook API right now, an I have kind of a problem, but I don't know what I am doing wrong. So I have a few arrays, f.ex.: User albums: array(2) {
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.