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
10  7073  gits 5,390
Recognized Expert Moderator Expert
could you show what you have done so far? ...
kind regards
Hi,
This is the javascript code: -
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
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
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?
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
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?
gits 5,390
Recognized Expert Moderator Expert
you may use the float css additionally ... have a look at this: - <html>
-
<body>
-
<div onclick="alert(this.offsetWidth);" style="float:left; border: 1px solid red;">
-
foo
-
</div>
-
</body>
-
</html>
kind regards
gits 5,390
Recognized Expert Moderator Expert
and just to make it a bit more complete, here is a quick-hacked example: - <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
Thanks a lot. Works like a gem :)
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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'. If I change that to
relative, the cell is sized to contain all the contents, and not just the
visible one.
Is there any solution to this? What I would like is, ideally, that the cell
size takes the largest width and height it is going to have,...
|
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 calendar, 7 across by whatever needed
down, and I manually create it each month - not a big deal.
Every day I go in and darken the background color of the current day's cell
by changing the appropriate <TD> entry to <TD bgcolor="c63800"> and...
|
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 but not in height calculations.
Oh, and Opera version 8.02 does the same thing.
|<-->| |<-->| <------ border
|<------------>| <------ table contents
|
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 get any
changes I do in the grid of a given table saved back to the database
unless I nominate a particular table in the SQLDataAdapter but this is
not dynamic as the table changes when the user picks another table
I have the first part working...
|
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 html dynamically
for the layout I want. I have seen some examples of
using a repeater and they seem to be the thing to use when you don't want a
table of results, but I'm not sure how to change the
<ItemTemplate> depending on the contents of the...
| | |
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 error is given! i.e. Is there some
kind of a way to "test" the length of the field while Inserting the
value into it, and to have it automatically increase its length to the
length of the value being inserted, in case the value is too big?
I've...
|
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 that it dynamically grows and shrinks as the contents
alter) however I can not see a way to calculate the required number of
rows (or height) for a given content string.
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| | |
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
