0

I have a container of fixed height and fixed width. Within that i have two more div's one is top, another is bottom with fixed width. If height of the top increases the text inside the bottom div goes beyond the height of the container, I dont want like that. I want to know how much text goes beyond the container height and what is that text. I want to save that text in a variable.

my jQuery code what i wrote:

var conheight = $("#container").height();
console.log("conheight",conheight);

var botheight = $("#bottom").height();
console.log("botheight",botheight);

var topheight = $("#top").height();
console.log("topheight",topheight);

var heightdiff = conheight - topheight;
console.log("heightdiff",heightdiff);

var bottext = $("#bottom").html();
console.log(bottext);

if ( bottext.length > heightdiff ) {
   console.log("exceeded");
   console.log(bottext.length);
}
else {
    console.log("within div");
}

I dont have any idea what to write inside if tag.

This is my fiddle link what i did upto now.

http://jsfiddle.net/nTHzS/

Any help would be appreciated.

krishna bhargavi
  • 961
  • 4
  • 15
  • 24
  • what is it you want to have happen when the top box is about to exceed the limit? get a scrollbar? stop the outputting text? move the remaining text into the bottom box? – haxxxton Mar 28 '14 at 16:12
  • @haxxxton no i dont want scroll bar...i want save that text in a variable – krishna bhargavi Mar 28 '14 at 16:12
  • I would suggest to look at [this](http://dotdotdot.frebsite.nl/) , which must have some kind of algortihm to detect overflowing text... – Laurent S. Mar 28 '14 at 16:13
  • @Bartdude i dont want to show that overflowing text..i want to save that overflowing text in a variable – krishna bhargavi Mar 28 '14 at 16:15
  • I totally understood it. I pointed you to a direction where you might find code helping you to identify overflowing text. what you do next is up to you. So don't use this plugin, but look at it and extract the part of the code you need. – Laurent S. Mar 28 '14 at 16:17
  • line-height and font size varies significantly between browsers, and say.. when a user zooms the website.. this is a worry because on some browsers you may encounter a point where you could fit 'half' of a lines worth of text.. if you dont have to worry about design using a 'mono spaced' font like 'courier' should reduce some of the guess work – haxxxton Mar 28 '14 at 16:18
  • is the height of the bottom `div` fixed? or is that variable too? is it likely that the bottom `div` will ever be bigger than the container? – haxxxton Mar 28 '14 at 16:22

1 Answers1

0

if you know the width of both of your divs and your bottom box is a fixed height you can use a combination of this solution for detecting overflow https://stackoverflow.com/a/143889/648350 and a loop where you .slice(-1) and .substring(0, text.length - 1) to gradually remove characters from the div until it no longer overflows

i have provided a jsFiddle http://jsfiddle.net/nTHzS/3/

i changed the test text to Lorem Ipsum to make it clearer what was being returned as 'overflowing'

EDIT: updated my jsfiddle here http://jsfiddle.net/nTHzS/6/ with solution that provides overflowing text from the bottom box based on commented discussion that further explained the request.. this solution uses content from http://davidwalsh.name/detect-scrollbar-width to detect scrollbar width and from https://stackoverflow.com/a/143889/648350 to detect content overflow

EDIT2: fixed bug where i was referencing the wrong length in the for loop.. added feature where it reduces overflow by whole words rather than individual characters to stop breaking of words http://jsfiddle.net/nTHzS/10/

EDIT3: added the ability for the code to measure both the top and bottom depending upon if the top has more text in it that the container. http://jsfiddle.net/nTHzS/11/

Community
  • 1
  • 1
haxxxton
  • 6,422
  • 3
  • 27
  • 57
  • so both the top AND the bottom boxes are of variable height? and you only want to know when the top box gets overflowing text? what happens if the bottom box has too much text? do you need to know both overflowing sets of text? – haxxxton Mar 28 '14 at 16:50
  • No..what i want is if text in the top div increases then it will push the below div,then the text in the bottom div if overflows then cut that text and save that text in new variable.Both top and bottom div's height is variable – krishna bhargavi Mar 28 '14 at 16:52
  • right.. but what happens if either of the two boxes has more text in it that the container can fit? in your fiddle example.. what if there were another 30-40 'blah's? are you looking to be returned with the last 1 or 2 lines of the 'blue' bottom box? – haxxxton Mar 28 '14 at 16:55
  • I am not worrying about the top div...i want only the bootom div text. – krishna bhargavi Mar 28 '14 at 16:58
  • ya...i checked that..but i dont want to display that overflowed text..just cut the text upto the container height... – krishna bhargavi Mar 28 '14 at 17:26
  • If i increase the top div's text the code is not working.It is not showing the overflowing text.check this fiddle...http://jsfiddle.net/nTHzS/7/ – krishna bhargavi Mar 28 '14 at 17:43
  • didnt you say you want to store it as a variable? so just take the part where im outputting into the div and send it to wherever you want.. this is a test space designed to show you how to get the last part of the text.. if you dont want to see it and dont want to store it you can reduce all this complexity with simple css `overflow:hidden;` – haxxxton Mar 28 '14 at 17:43
  • @krishnabhargavi updated to fix the not working part.. now am reducing length by whole words rather than individual characters to stop the code from splitting words – haxxxton Mar 28 '14 at 18:00
  • @krishnabhargavi http://jsfiddle.net/nTHzS/10/ will work as long as the first lot of text is not longer than the containing div.. (ie so that the top div doesnt have more text in it than there is space in the box.. your requirements said this wasnt going to be the case? – haxxxton Mar 29 '14 at 07:42
  • What i exactly want is if the text inside the top div more than the container height then save that text also in a variable – krishna bhargavi Apr 01 '14 at 14:49
  • @krishnabhargavi your specs for this piece of code are continually changing.. please SCOPE the requirements for your question BEFORE posting it.. otherwise trying to help you with a solution is incredibly difficult.. – haxxxton Apr 01 '14 at 23:58
  • @krishnabhargavi http://jsfiddle.net/nTHzS/11/ here is an update to measure BOTH top AND bottom overflow, even if the `.top` section is longer than the container. You can then use both the `topOverflowText` and `botOverflowText` and store these variables somewhere rather than outputting them. They are output purely for debugging purposes – haxxxton Apr 02 '14 at 00:36