Changing Div width dynamically according to the contents.

65 New Member

Hi all,

I have a situation where i need to change the width of a div automatically according to the contents in it.

So say if width of the contents inside the div is 400 px then the width of div should be 400px, and also if it exceeds 600px the width should not increase beyond 600, but a horizontal scrollbar should come.

Thanks in advance,
Nitin

Jan 19 '09 #1

Subscribe Reply

7062

gits

5,390

Recognized Expert Moderator Expert

could you show what you have done so far? ...

kind regards

Jan 19 '09 #2

Nitinkcv

New Member

Hi,

This is the javascript code:

Expand|Select|Wrap|Line Numbers

 
var widthDiv  = document.getElementById('mydiv');

var len = width.innerHTML.length;

if(len > 800){

widthDiv.style.overflow ='scrollbar'

}

And initially i dont set the width of my div

Thanks,
Nitin

Jan 19 '09 #3

gits

5,390

Recognized Expert Moderator Expert

1. in line 2 what is width? another div or should it be widthDiv?

2. length would give you the no of characters ... so you want to check that? but 800 chars are a lot ... i guess you want to set a width in px?

kind regards

Jan 19 '09 #4

Nitinkcv

New Member

Hi,

Sorry ya typo error in line2 its widthDiv. And yes i do want to set the width in px. So are you suggesting that i approximate the width, say by dividing the var len by a constant value?

Jan 19 '09 #5

gits

5,390

Recognized Expert Moderator Expert

that would be one option ... but you could even retrieve the current width of an object (like your div) ... have a look here

kind regards

Jan 19 '09 #6

Nitinkcv

New Member

I looked the link you sent. But the problem is that offsetWidth gives the value as 1024 even if i dont give any initial width for my div.. So my condition for checking width>600 is always true, even if the contents inside the div take up 100 px.

So i guess dividing by a const is the only soln?

Jan 19 '09 #7

gits

5,390

Recognized Expert Moderator Expert

you may use the float css additionally ... have a look at this:

Expand|Select|Wrap|Line Numbers

 <html>

    <body>

        <div onclick="alert(this.offsetWidth);" style="float:left; border: 1px solid red;">

            foo

        </div>

    </body>

</html>

kind regards

Jan 19 '09 #8

gits

5,390

Recognized Expert Moderator Expert

and just to make it a bit more complete, here is a quick-hacked example:

Expand|Select|Wrap|Line Numbers

 <html>

    <body>

        <div onclick="if (this.offsetWidth > 200) {

            this.style.width='200px'; 

            this.style.overflow='auto'; 

         }" style="float:left; border: 1px solid red;">

            foooooooooooooooooooooooooooooooooooooooooooooo

        </div>

    </body>

</html>

kind regards

Jan 19 '09 #9

Nitinkcv

New Member

Thanks a lot. Works like a gem :)

Jan 20 '09 #10

gits

5,390

Recognized Expert Moderator Expert

no problem ... you are welcome. post back to the forum anytime you have more questions ...

kind regards

Jan 20 '09 #11

Similar topics

9941

Dynamically changing a cell content

by: Joe Smith | last post by:

Hi, I'm using the code below to change the contents of a cell table in IE. The problem is that the cell size won't adjust to the size of the content, as its positions have been declared 'absolute'....

Javascript

5659

Q: Automatically Changing Background Color of a Table Cell?

by: Arthur Shapiro | last post by:

I'm the webmaster for a recreational organization. As part of one page of the site, I have an HTML "Calendar at a Glance" of the organization's events for the month. It's a simple table of a...

Javascript

3554

Table width error???

by: Norman L. DeForest | last post by:

Am I misunderstanding the CSS specifications or is Firefox (version 1.0.6) (and Opera) doing the wrong thing? It appears that Firefox 1.0.6 includes the border in width calculations for tables...

HTML / CSS

2671

DATAGRID - How can I change UpdateCommand dynamically ?

by: Andrew Dodgshun | last post by:

I have 2 grids - one shows a list of table names in a database and when you click on a table name the other grid dynamically populates the grid with the table contents. My problem is that I cannot...

C# / C Sharp

1930

Help - Changing the output of a repeater depending on the data

by: Henry Nelson | last post by:

Hi all I'm very new to dotNet and just trying to get my head around the right way to do the thing that I would normally do in asp. In asp I would loop through a recordset and output all the...

ASP.NET

6941

Dynamically Changing the length of a varchar(n) field

by: John | last post by:

Hi Everyone, I have a question about dynamically changing the length of a varchar(n) field, in case the value I'm trying to insert is too big and will give a "truncated" error, but before the...

Microsoft SQL Server

26978

dynamically resizing height of textarea of known width

by: gilbert.george | last post by:

Hi, I am setting the width of a textarea using the style.width to ensure the textarea is exactly the right width. I want to set the height/rows of the textarea depending on it's contents (so...

Javascript

7086

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7332

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

6991

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

7462

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

4673

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3167

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3154

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1512

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

736

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP