cross browser text wrap within div - javascript

Is there a way to have a block of text fit in a div and wrap mid word with a '-' inserted before the break.
Basically have the text wrap around the elem-ent like that. Then I can create a block of tex-t that will automatically wrap around to the be-ginning when the div id resized

The commenters are right. But for what its worth, this is probably the best you are going to get: http://jsfiddle.net/zB47k/

While waiting cross-browser native support for hyphenation one way could be:
http://code.google.com/p/hyphenator/
Or add soft-hyphens serverside (php):
http://phphyphenator.yellowgreen.de/
I have self used method of adding soft-hyphens in php (using the above library), because site is multi-language one and all language-related stuff occurs serverside.

if you don't absolutely need the '-' you can use word wrap
.wrap {word-wrap:break-word;}
<div class="wrap">dfkajdlkfjkadjfjadjfladjfkajdkjfkajdfad</div>
You could also use the new hyphens spec, but it has limited browser support:
http://caniuse.com/#feat=css-hyphens
-ms-hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens:auto;

Related

"Splitting" long words

I'm making a responsive website for a client using twitter bootstrap, which is responsive by default. However when the words get too long in a <h1> it doesn't fit the mobile sized browser.
What I would like to do is change "thisisaverylongword" into "thisisa-verylongword" with the final part on a new line.
Is there a simple way to do this, maybe with javascript? I'm thinking some condition like "if $word is wider than $body then" or something similar. Any tips will be very useful, gold star if the same code works for any word.
You could use the (experimental) CSS property hyphens:
h1 {
-webkit-hyphens: manual;
-moz-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
and specify the line break by using special unicode characters:
U+2010 (HYPHEN)
The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.
U+00AD (SHY)
An invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.
Browser compatibilty
MDN reference
EDIT
As mentioned by #hustlerinc it might be needed to set word-break: break-all to make it work.
I've written a jQuery plugin that might fit this purpose quite well. Check out ellipsis.js. Using the following configuration should work:
$('h1').ellipsis({visible: 10, more: '…', separator: '', atFront: false})
I guess the advantage of doing it this way is that the users still may display the whole header on tap if they want to.
You can apparently achieve something like this with a bit of CSS, check out the text-overflow property. Perhaps that's the ticket for this case. No JS needed. :)
Can't you set the CSS property word-break to hyphenate?
example here
I think that you must do it by yourself.
With the function "split", you split your string into a table of words. Then, you can check all the words into a for.

Stop text from over running it container

Ive got a container of into which a message gets echoed, the message its self has no fixed size, as its user generated, what can happen though is that if a string of text that is too long is submitted it can over flow its container an break the design..
Is there a way (hopefully with just css, although js is ok) to make the box crop the text and leave it with a ... then i can place a link to the text on another page.
You can obviously stop this happening by using overflow:hidden, but i would like a more elegenat approach rather than just cutting it straight off. I seem to remeber reading about somthing like this with css3, but for the life of me cant figure out what it was called.
Ive made a jsfiddle of the problem here - http://jsfiddle.net/6Fk7B/
CSS property text-overflow:ellipsis, though browser support varies
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
That should do it for you. All need to be included.
You may also want to include the following browser prefixes:
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
It won't be perfect in all browsers, but it should be good for most:
http://caniuse.com/#feat=text-overflow
You might want to tryout http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
The actual code is here http://codepen.io/romanrudenko/pen/ymHFh
Honestly it's tricky to put ellipsis for a paragraph but pretty straight-forward for single line text.
Is this a reasonable starting point for you?
Fiddle: http://jsfiddle.net/QkugN/
Basically you add all the content to the div and hide it using the normal method of overflow:hidden. You also add a tab that, upon hover, displays the rest of the content. If you use absolute positioning for the mouseover state the content will momentarily be removed from the flow and be allowed to overlay any surrounding content. It might not be a complete solution as it stands but it is a pure CSS direction you could explore.
The bit that's doing the business is the General Sibling selector "~" (tilde). Support for it is pretty solid with modern browsers.
Using JavaScript you could achieve this using substring. jQuery isn't necessary, but it makes it a tad easier.
var myText = $('.myBox').text(),
maxLength = 250,
more = '...';
if (myText.length > maxLength) {
myText = myText.substring(0, 250);
$('.myBox p').text(myText + more);
}
See my example example: http://jsfiddle.net/clrux/6Fk7B/14/

Is it okay to rely on javascript for menu layout?

I have a website template where I do not know the number of menu items or the size of the menu items that will be required. The js below works exactly the way I want it to, however this is the most js I've every written. Are there any disadvantages or potential problems with this method that I'm not aware of because I'm a js beginner? I'm currently manually setting the padding for each site. Thank you!
var width_of_text = 0;
var number_of_li = 0;
// measure the width of each <li> and add it to the total with, increment li counter
$('li').each(function() {
width_of_text += $(this).width();
number_of_li++;
});
// calculate the space between <li>'s so the space is equal
var padding = Math.floor((900 - width_of_text)/(number_of_li - 1));
// add the padding the all but the first <li>
$('li').each(function(index) {
if (index !== 0)
{
$(this).css("padding-left", padding);
}
});
You can do this hackily in CSS, using display: inline-block, and text-align: justify
<ul>
<li>thing</li>
<li>thing2</li>
<li>thing3</li>
<li>thing4</li>
<li class="hack"></li>
</ul>
And then:
ul { text-align: justify }
li { display: inline-block }
li.hack { width: 100% } /* force the justified text to wrap */
Demo
​
Yes, there are disadvantages of using JS for formatting.
It is strongly recommended to avoid using JS for formatting and positioning, use CSS whenever possible.
Javascript is interpreted and run very differently from browser to browser, from OS to OS, from OS/browser version to version.
CSS rendering is a native browser engine function and its rendering priority is higher than that of JS.
CSS rendering is much more speedy than JS.
Etc.
What you are doing now I would never suggest doing. IMHO, this is a very wrong approach. JS is absolutely definetely misused in this case. You have to use CSS for this task, and I would suggest posting a question about how to use CSS correctly for this task.
I would suggest having a default spacing between them in a way that would not push them out of their container. The extra javascript to enable them to space equally should be an enhancement only.
I think the answer to your question is, if it works, then it works (and will continue to work), but that doesn't mean that this is the best way to handle it. If you *care about the best way, then investigate how to improve your approach using mostly (or even exclusively) CSS. If you're just looking to get the job done, and it's working, then you're good to go.
Depending on your site visitors, there will be around 3% who visit you with JS disabled. And you want the site to work for them to. Maybe not the unnessecary parts of the site but you want the critical parts to work. Navigation is one of the most important parts of a website.
Make sure the navigation works without JS (doesn't have to be as fancy as with JS) and then you could make some improvements with JS.
You don't need JavaScript as long as you can rely on a CSS algorithm that adapt width to its content: the table layout algorithm :)
See http://jsfiddle.net/r9yrM/1/ from my previous answer for examples.
Don't forget to have a minimum padding on each "cell", text stuck to a border isn't very readable (and ugly). You'll also probably want text-align: center on cells (last CSS rule).
With JS, you could decide of a maximum number of tabs (or a minimum "reasonable" width) and above (below) that number, add a class on the parent that will trigger each tab to render as float: left and block and not table-cell anymore. Then it'll occupy 2 or more lines (like the extension Tab Mix Plus on Firefox)
Note: there're at least 2 algorithms for table: with and without table-layout: fixed, depending on freedom left to the browser when adapting.
Note on your jQuery code above: "each li except the first" can be expressed by $('li + li') (the first one isn't preceded by a li)

How can I cause the browser to scroll an element horizontally to a pre-defined location without using JavaScript?

I'm working on 'timeline' project, where I have content inside of list items, in a horizontal unordered list. This is contained in a div, so you can scroll left to right through the content.
My client would like buttons to 'goto' each era. I know this is easily achieved through JavaScript. However they also want this to be functional without JavaScript. I've tried adding anchors to each item, but this doesn't really work since you can't control the exact position the browser want's to end up at. It's very buggy using the anchors with horizontal scrolling.
Any ideas?
Use a vertical timeline (the whole page scrolls, no inner scrollbars) when JavaScript isn't available. Anchors work reasonably well in that scenario. An easy way to achieve this is to make the styles that collapse your list and its containing div dependent on a class higher up in the DOM hierarchy, and set that class at load-time using JavaScript. Something like,
.jsEnabled .containingDiv { height: 10em; overflow: auto; }
.jsEnabled .timelineList li { width: 6em; float: left; }
...
function loadTimeStuff()
{
// enable styles that require JS-assisted scrolling
document.body.className = "jsEnabled";
// ...
}
Sure, it won't look as fancy as the full-blown JS-enhanced page, but it's a fallback - if users want the fancy stuff, they need only use a JavaScript-enabled browser...
You're stuck with javascript here for the most part -- as you found out, anchors don't really do the job.
You do have one other alternative, though you probably wont like it any better: Flash.
You'd have to position the anchors at a certain offset to the item you want to have displayed. F.e. if you want the item in the middle of the screen you would have to position the anchor at x = item.x-screenWidth/2 and y = item.y-screenHeight/2, approximately.
I don't think there's another solution, but using Javascript.
I'm afraid you are out of luck if you have to make this work without JavaScript. At least without some hideous hacking that would involve postbacks and dynamically generating some CSS for offsetting the position of the timeline ...
But as Shog9 has said, non JavaScript version would be a fall-back and can't be expected to work as well as the JS version (why would you need JS then) ...

Limit displayed length of string on web page

I'm looking for a technique (javascript, CSS, whatever ???) that will let me control the amount of a string that is displayed. The string is the result of a search (and therefore not initially known). A simple Character count approach is trivial, but not acceptable, as it needs to handle proportional fonts. In otherwords if I want to limit to say 70 pixels then the examples below show different character counts (9 and 15) both measuring the same:-
Welcome M...
Hi Iain if I've ...
If you look at Yahoo search results they are able to limit the length of title strings and add ellipsis on the end of long strings to indicate more.
(try site:loot.com wireless+keyboard+and+mouse to see an example of Yahoo achieving this)
Any Ideas?
Perhaps the CSS property overflow: hidden; can help you, in conjuntion with width.
Using a span with fixed width, overflow-x:hidden and white-space:nowrap would be a start.
To get the elipsis in a cross browser scenario will be difficult. IE has text-overflow:elipsis but that is non-standard. This is emulated with -o-text-overflow in Opera. However mozilla doesn't have this. The yahoo Javascript APIs handle this.
Yahoo does this server-side, the truncation and elipsis ('...') is returned in the HTML. Presumably this is done on a character count, and if thats not an option for you then server-side is out.
Other than overflow: hidden I'm not sure CSS can help you here. You could measure the width of the containing element using Javascript, and truncate the text based on that. This could be used in conjunctin with overflow:hidden; so the text elements don't just resize all of a sudden, but you may have to extract the text and add a temporary element onto the page somewhere to do the measurement. Depending on the number of elements to truncate this might not work very well.
Another slightly hacky option is to measure the width of an element containing the letter 'W', then do a character count and truncate if (char_count * width_of_w) > desired_width.
You can use text-wrap: none; to stop text wrapping onto new lines, although this is a CSS3 property and last I checked was only supported by IE (imagine my shock when I found that one out!).
For a cross-browser pure-CSS solution, take a look at Hedger Wang's text-overflow:ellipsis prototype, here:
http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php
In CSS: .class-name{
width: 5em;
white-space: nowrap;
text-overflow: ellipsis; }
Hope it can help you.

Categories

Resources