Solved

dynamically resizing two horizontal divs as required by content

Posted on 2006-11-13
3
284 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

707 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