Solved

dynamically resizing two horizontal divs as required by content

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

708 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

13 Experts available now in Live!

Get 1:1 Help Now