473,401 Members | 2,139 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,401 software developers and data experts.

Dynamically resize visible text and append dot dot dot (like gmail subject lines.. ) how to question?

I have a list of links that are sometimes too long to display on a
given screen. I want to trim the ends of them if they are too long, and
show dot dot dot. If the browser is widened, though, and there is more
room, i want to see all the link.

I want to have 1 line of text that is say 40% of the screen. When
someone enlargens the browser window, it shows more of the text.

If the text is longer than the 40% I want to trim it and display dot
dot dot.

So an example

when the page is narrow:

| |
|Tracing the effe...|
| |

widen the browser:

|
|
|Tracing the effects of migratory fowl on gmail usage |
|
|

I'm having a really hard time thinking of good search keywords. I
haven't found anything yet. I've tried searching for:
concetanate javascript text dynamically
visible text area resize javascript
span text resizes with browser

Dec 12 '05 #1
6 4619
I keep looking.

I found a <nobr> tag that prevents text from breaking, no matter how
long it is. Could I have that in a span (or use some other css property
to prevent line breaks) and enclose it in a span.

Somehow it would work like the sliding doors css button methodology.
You would only see what fits out the "door" and anything longer would
get a dot dot dot and would not show...

Dec 12 '05 #2
jcobbers wrote:
I keep looking.

I found a <nobr> tag that prevents text from breaking, no matter how
long it is. Could I have that in a span (or use some other css property
to prevent line breaks) and enclose it in a span.


No, don't use that. <nobr> was a Netscape invention that never made it
into any W3 HTML specification. The closest similar thing is the
deprecated 'nowrap' attribute for TR and TD elements (but don't use that
either).

Another kludge to stop wrapping is to replace all spaces with &nbsp; -
but I wouldn't suggest that either.

The correct way to stop wrapping is to set the CSS 'white-space'
property to 'nowrap':

<URL:http://www.w3.org/TR/CSS2/text.html#propdef-white-space>
There is no reasonable way to determine if a character string is too
long to fit within an element that will work in a good number of
browsers. You might try asking in a CSS group.

Anyhow, here is a script that does it in IE and Firefox, it's just shows
a method, you'll need to clean it up with feature detection and make it
degrade gracefully. You could run it onload and onresize.

I may well leave a space between the last letter or digit and the
ellipsis, that shouldn't happen so you should clean that up.
<script type="text/javascript">

function trimMenu(id)
{
var d = document.getElementById(id);
var spans = d.getElementsByTagName('span');
for (var i=0, len=spans.length; i<len; ++i){
addEllipsis(spans[i]);
}
}

function addEllipsis(d)
{
var x = d.parentNode.offsetWidth;
var txt = d.firstChild.data;
while (x < d.offsetWidth){
txt = txt.substring(0,txt.length-1);
d.firstChild.data = txt + '\u2026';
}
}

</script>

<!-- Style attribute wrapped for posting -->
<div id='divA')
style="border:1px solid blue; width:100px; white-space: nowrap;
overflow: hidden;">
<span>Here is some too-long text</span><br>
<span>Another bit of too-long text</span><br>
<span>Yup, too-long text</span><br>
</div>
<input type="button" value="Trim menu items"
onclick="trimMenu('divA')">

--
Rob
Dec 12 '05 #3

ja******@gmail.com wrote:

[snip]
I have a list of links that are sometimes too long to display on a
given screen. I want to trim the ends of them if they are too long, and
show dot dot dot.
[snip] I'm having a really hard time thinking of good search keywords.


RobG has given you the clue: ellipsis.

There is a proposed CSS3 property (currently in IE6 and Safari) called
text-overflow.

See the following for an analysis of support:-

<URL:http://wiki.fastmail.fm/wiki/index.php/TextOverflowEllipsis>

Regards

Julian Turner

Dec 12 '05 #4
Thank you so very much.

I tried Rob's script and it worked just like I wanted.

Julian's CSS based method also worked, i.e. this example:
http://joelpt.eml.cc/TextOverflowEllipsis.html or this one:
http://robm.fastmail.fm/web/table_autosize.html

My final followup is -- from a design perspective does anyone have
suggestions as to using javascript or css to accomplish this? I'm in
the process of investigating the versions of IE or firefox or Opera /
etc. that my target audience will be using... are there any 'gotcha's
I should look out for?

Dec 12 '05 #5
jcobbers wrote:
Thank you so very much.

I tried Rob's script and it worked just like I wanted.

Julian's CSS based method also worked, i.e. this example:
http://joelpt.eml.cc/TextOverflowEllipsis.html or this one:
http://robm.fastmail.fm/web/table_autosize.html

My final followup is -- from a design perspective does anyone have
suggestions as to using javascript or css to accomplish this? I'm in
The better solution is CSS, you may be able to detect support for
"text-overflow:ellipsis" and substitute script (but ensure appropriate
feature detection there too).

the process of investigating the versions of IE or firefox or Opera /
etc. that my target audience will be using... are there any 'gotcha's
I should look out for?


If it is for a general purpose web site, you'll probably get plenty of
complaints from the maybe 10% whose browser doesn't have suitable CSS or
the 10% who don't have script support. Those numbers are of course very
open to question, your own site logs will give you better numbers (but
still not perfect).

Think carefully about your UI and see what you can do for them - they
should still get a (less spoofy) fully functional site.

Ask in a CSS forum - comp.infosystems.www.authoring.stylesheets should
do the trick.
--
Rob
Dec 12 '05 #6
RobG wrote:
jcobbers wrote:
the process of investigating the versions of IE or firefox or Opera /
etc. that my target audience will be using... are there any 'gotcha's
I should look out for?
If it is for a general purpose web site, you'll probably get plenty of
complaints from the maybe 10% whose browser doesn't have suitable CSS or
the 10% who don't have script support. Those numbers are of course very
open to question, your own site logs will give you better numbers (but
still not perfect).


I see the "still not perfect" remark and still feel obliged to comment
on both :) The site logs will only show _past_ data, whether that is your
"target audience" or users with "suitable CSS support" or "script support".
Meaning that if you optimize your site so that it applies to that data,
you will inevitably only attract the respective users in the future --
that is pessimization[tm], not optimization.

IOW: Design the site IE-only, and you will attract mostly, if not only,
IE users; design it script-only, and you will attract only users with
scripting enabled. Then your logs will indeed show mostly IE users or
only users with enabled script support, and you could infer from them
that you made the right design decision -- however, you did not.
Think carefully about your UI and see what you can do for them - they
should still get a (less spoofy) fully functional site.

Ask in a CSS forum - comp.infosystems.www.authoring.stylesheets should
do the trick.


Full ACK.
PointedEars
Dec 12 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Donald Xie | last post by:
Hi, I noticed an interesting effect when working with controls that are dynamically loaded. For instance, on a web form with a PlaceHolder control named ImageHolder, I dynamically add an image...
4
by: al | last post by:
Hi, When Resizing (maximize and minimize actions) a window, does IE 5.0 adjust asp.net page controls so they are aligned, or do i have to do it(aligning) in code? MTIA, Grawsha
2
by: sck10 | last post by:
Hello, I am trying to programically make the following TemplateField ("MyTemplate") visible when the user clicks on the "Edit" Button using the PreRender handle event. My question is, how do...
0
by: Yunus's Group | last post by:
Yunus's Group May 23, 3:36 pm show options Newsgroups: microsoft.public.dotnet.languages.vb From: "Yunus's Group" <yunusasm...@gmail.com> - Find messages by this author Date: 23 May 2005...
15
by: David Lozzi | last post by:
Howdy, I have a function that uploads an image and that works great. I love ..Nets built in upload, so much easier than 3rd party uploaders! Now I am making a public function that will take the...
13
by: DH | last post by:
Hi, I'm trying to strip the html and other useless junk from a html page.. Id like to create something like an automated text editor, where it takes the keywords from a txt file and removes them...
7
by: RichB | last post by:
I am trying to get to grips with the asp.net ajaxcontrol toolkit, and am trying to add a tabbed control to the page. I have no problems within the aspx file, and can dynamically manipulate a...
3
by: Allen Chen [MSFT] | last post by:
Hi Richard, Quote from Richard================================================== However I also want to be able to remove the panes. I have tried to include this, but find that when I first...
5
by: Yun | last post by:
I have a frameset initially loaded to a page <frameset id=SV name=SV></frameset> Now I want to use JavaScript to dynamically add frames to this frameset. I have tried to use code like...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
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,...
0
Oralloy
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,...
0
tracyyun
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...
0
agi2029
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,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.