Solved

dynamically resizing two horizontal divs as required by content

Posted on 2006-11-13
3
281 Views
Last Modified: 2008-02-01
Hi,

I have two divs located horizontally next to each other. The positioning and size is defined within the external CSS file for the page as follows,

#pageDiv
{
margin-left: 325px;

padding: .8em;
font-size: 80%;
      font-family:verdana;
}

#pageDivLeft
{
float: left;
width: 325px;
border-right: 0.5px solid gray;
margin: 0;
padding: .5em;
font-size: 80%;
      font-family:verdana;
}

I then use javascript to add the required text, dependent upon the link used on the page, to the specified div. The required div is specified in the javascript function. I'm currently adding first to the left div 'pageDivLeft', and then to the right div 'pageDiv' as required by the user. Basically, what I'm trying to do is get the left div to fill the whole space, the width of both divs, when there is only text in that div. When there is text in both divs, then I would require both divs to resize back to their original widths, ie: side by side as two horizontal divs. Is this possible? Is it possible to dynamically change the size of the divs as required?

Thanks for the help.
0
Comment
Question by:nhay59
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 17935203
paste your javascript as well.

one way i can think of is to set #pageDivLeft to 100% width and set #pageDiv to display:none

so when you insert text in the left div, you do both
document.getElementById('pageDivLeft').style.width = '100%';
document.getElementById('pageDiv').style.display = 'none';
 
and when you insert text into the pageDiv you do
document.getElementById('pageDivLeft').style.width = '325px'
document.getElementById('pageDiv').style.display = 'run-in';
0
 

Author Comment

by:nhay59
ID: 17936807
Hi,

I'm using the following javascript function to load the required xml and render the html for the page.

function displayDay (value)
{
var day = "XML/"+value+".xml";
var xmlDoc=loadXMLDoc(day);
var xa=xmlDoc.getElementsByTagName('paragraph1');
var target = document.getElementById("pageDivLeft");
// this line will empty the old info out of the div before adding the new info.
target.innerHTML = "";

// This will add the contents to the end of the current document body
for ( var i = 0; i < xa.length; i++ ) {
var data = '';
for (var n = 0; n < xa[ i ].childNodes.length; n++)
             
if (xa[i].childNodes[n].nodeName != '#text')
{
data += '<span class="'+xa[i].childNodes[n].nodeName+'">'+
xa[ i ].childNodes[n].firstChild.nodeValue+'</span>';
}
var line= document.createElement('line');
line.innerHTML = data;
target.appendChild(line);
    }
}

I tried adding the suggestions in the above reply, but it just moves the initial 'border-right' in the pageDivLeft to the far right, and then does not add any html from the above function to the required div. Any ideas why this might be happening. Why would it not render the html from the above function as well?

Thanks for the help.
0
 

Author Comment

by:nhay59
ID: 17938091
Hi,

Thanks for all the help and advice. You definitely steered me in the right direction. I've managed to modify your example, and the function and resizing now works as required.

Thanks again for the help
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question