?
Solved

dynamically resizing two horizontal divs as required by content

Posted on 2006-11-13
3
Medium Priority
?
286 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 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month10 days, 18 hours left to enroll

770 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