Solved

dynamically resizing two horizontal divs as required by content

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

932 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now