I have been using overflow scroll to display the text. I realize that the overflow property can detect when the data is larger than will fit.
I need to fill one div element, then another, and so on until all the data is set within pages. The breaks can't break a word.
Only one page/div will be display: block; and the rest will be display: none;
What is the best way to allow data to be displayed on multiple div pages?
Why not you use css for this purpose?
<div style="height:50px; width:50px; overflow:hidden">testing</div>
Ali is right in using CSS to address this, but you should use the CSS word-wrap property to easily acheive your desired effect with the overflow content, as Ali's example edited below.
<div style="height:auto; min-height:50px; width:50px; word-wrap:break-word;">testing<div>
The word-wrap property is now supported in all major browsers.
Also as shown above, if you want to be sure that all the text shows as well as wraps in the correct place, then change your height CSS to 'height:auto; min-height:50px;'. This will allow the div to expand in height to show any overflow that would normally be hidden just defining a fixed height, while retaining the preferred size of 50px if possible, and retaining the desired word wrap not breaking a word in the middle.
The only exception where this will not work, is if a word is so long as to be longer than the width of the containing div, in which case it will break the long word at the last character that will fit on the line before continuing the word on the next line.
It's got to be an awfully long word though to run into this. If you use auto for the width property as done in the example with the height, it will fix the word break problem by allowing the width of the div to change, although in page layout it is usually more important to constrain a width much more than a height.
Related
I have a slider in a <div>. The slider takes an array of slides and each element has a text where there is no word-limit on the text. When I slide left or right, and the different texts are of different lengths, the height of the <div> varies, making it look ugly. I tried using a min-height or a fixed height, but those don't solve the problem, since there will either be too much empty space underneath the text, or, a text once in a while will be longer than the min-height and the size of the <div> will vary again.
What could I do now? Is there a way for me to find out what maximum height the div should have (based on what's the longest text in my array of slides) and then give my div this height? This way there would still be some empty space with the shorter texts, but at least it wouldn't be arbitrary.
Does this sound like an ok solution? I am wondering how I can measure this beforehand though? So I'm thankful for any clues!
If I understand your situation, you have a <div> element that wraps multiple "slide elements" where;
each slide element varies in height based on their text content and,
you'd like the wraping div to natually expand to fit around all slides regardless of the arbitrary height of their content
One solution to this would be to use flex-box which would allow your slides to be arranged horizontally within the wrapper div, while also ensuring that the wrapper naturally expands to fit around it's children (of arbitrary height).
To illustrate this approach, consider the following example where flex box is used to ensure the pink div correctly wraps green slides (of differing height):
#wrapper {
display:flex;
flex-direction:row;
overflow-x:scroll;
background:pink;
}
#wrapper > div {
min-width:30rem;
margin:1rem;
background:green;
}
<div id="wrapper">
<div><p>Short</p></div>
<div><p>Tallest<br>Tallest<br>Tallest<br>Tallest<br>Tallest</p></div>
<div><p>Tall<br>Tall<br>Tall</p></div>
</div>
You could try to use flex display to achieve this. Not sure if it will work with your slider tho, since tho have not posted your code.
You can find an example here
I need help sizing the post-title div correctly at the following link. If you scale the result panel so that it is narrower, eventually the title will overlap the date. Rather than overlapping as shown here:
I would prefer that the title wrap onto a new line to avoid this collision. optimally, I would like it to also make use of the area above the the date like so:
Currently, the title will wrap once it reaches the end of the containing post div, as shown by the blue line beneath the title.
I have included a JSFiddle for you to test with.
http://jsfiddle.net/sph74/
You can use float: right on the date to get close to what you want. No more absolute positioning:
http://jsfiddle.net/sph74/1/
This is done via float: right (and that alone on the date). The .post-title element has to be display: inline or inline-block You could also use float: left, but that makes things a lot more hectic.
You also need to properly clear after the .post-heading element which I have done the old fashioned way via overflow: hidden.
I've tried to find an answer for a long time but I didn't find anything.
I'm using contentEditable div to write a text exactly on 210x297mm page. When page ends javascript adds next one:
if(container.scrollHeight > container.clientHeight)
{
page_number = page_number+1
$('#editor').append('<div id="page_'+page_number+'" class="page" onkeyup="javascript:check_page(this);" contentEditable></div><div class="marginbottom"></div>');
$("#page_"+page_number).attr("tabindex",-1).focus();
}
Everything works fine, unless I paste any longer text inside the div at the end of each page. Then only the part of the text apears and the rest goes outside div (and because of 'overflow: hidden' is invisible).
Is there any javascript/jquery method to detect overflow's content and move it into the next page (I didn't find it) or any CSS style that will allow me to separate the text inside each div?
I've read about CSS3 multi-column and I need sth doing similar operations, but separating rows, not columns.
I think your best bet is to not use overflow: hidden but auto and try to detect with JavaScript if there's an overflow by checking for scroll height.
In this case you can dynamically start moving parts of the text (word by word maybe) until the content can fit the available space.
For some concrete techniques check this thread out for example: detect elements overflow using jquery
I have built a music player which loads songs from a database in a random order. I would like to display track info in an info panel. Because I do not know the length of artist/track names, I would like the info to scroll with a marquee effect if it's too big. I'm told browser implementations of the marquee tag are bad so I have got a jquery plugin to do that for me in a nice smooth way (I assume the auther knows why they're bad and has sorted it).
So far so good.
The trouble is the marquee doesnt work out whether it is needed, so I would like to run a check to see if it is necessary (ie if the length of the text warrants it or not) before calling it.
Now I'm sure the problem here is a simple css one but I cannot for the life of me figure it out - you know when you've been staring at something too long...
What I am attempting to do is call the marquee on an inner div if the contents of the inner div are bigger than the outer div but no matter what I do I can't seem to get my inner div to stretch horizontally beyond my outer div unless I set a fixed width (which isn't very helpful since I don't know the width of the content).
Here is my simplified HTML (wrapper contains some other stuff floated either side):
<div id="mplayerinfo_wrapper"><div id="mplayerinfo_trackinfo"><div id="ti_inner"></div></div></div>
Here is my simplified css:
#mplayerinfo_wrapper{
width:545px;
height:30px;
margin-top:32px;
display:inline-block;
float:left;
}
#mplayerinfo_trackinfo{
height:30px;
width:238px;
display:inline-block;
overflow:hidden;
float:left;
}
#ti_inner{
float:left;
height:30px;
width:auto;
}
I am then hoping to use jquery to get the width of both elements, compare them and if inner is bigger than outer, launch the marquee like so:
var owidth=$('#mplayerinfo_trackinfo').width();
var iwidth=$('#ti_inner').width();
if(iwidth>owidth){$('#ti_inner').marquee();};
If this can't be solved through css, is there away to get content width with jquery/javascript. Any ideas? Thanks in advance
Since you already know the width of the outer div, it may be easier to compare against that measurement rather that ask for that width dynamically. I've tried to re-create your simplified program and the problem I ran into was that the width() function only returned the default width of the div's, not the width as modified by css.
Your CSS looks appropriate for what you are trying to accomplish. I would try this for the comparison:
if ($('#mplayerinfo_trackinfo').innerWidth() < $('#ti_inner').outerWidth()) {
$('#ti_inner').marquee();
}
I have had better results when using JQuery's inner and outer measurements.
the ti_inner CSS needs to have
white-space: nowrap;
to prevent the div just increasing in height,
We can then check the widths to see if a marquee is required.
I prefer to check the scrollWidth and the offsetWidth of the outer mplayerinfo_trackinfo instead of comparing the width of the 2 separate divs, mainly so that and margins,borders or padding dont get in the way, but in this example it doesnt really matter.
Heres a sample on JSFiddle marquee if required
Sorry it's in mootools but I'm new to all this web stuff myself and have not used any JQuery but from what I've read it should be easy to swap.
I was wandering, is there a way to check how many lines will a text in a <p> tag occupy after beeng wrapped? I know the width & height of <div> that contains this <p>.
This question came up when I was trying to cut a text if it's more then 3 lines long, and make it expandable later. I know I can achieve this by cutting the text with fixed length (average symbol count in a line). But I was just wandering :)
you don't actually need to know how many pixels the text is long if you use relative units for font-size, line-height and height: see this fiddle - http://jsfiddle.net/6WRsg/
I set a line-height: 1.3 and height: 3.9em /* (1.3 * 3 lines) */; so no matter what the font-size is, you always display at most three lines of text.
When you need to show all the content just switch programmatically (via javascript) the height to auto
You could place the para temporarily miles outside the visible page with position:absolute, left:-2000px and then check its offsetHeight to get an idea of how many lines it will have. Not sure how you'd find exact line breaks tho.