I think this might be impossible, but is there some way using JQuery to prevent lines of text not fully visible from showing up on the screen when a user scrolls until the entire line is visible? That is, we want to prevent something like this from showing up:
Thanks!
I agree with #rahmanisback, don´t mess with the user's browsing experience.
However, what would perhaps be a nice "inbetween" solution, is using a transparency gradient so that the bottom pixels fade out. But that would apply also to "whole" lines, so perhaps that´s not a good solution for your problem.
I don't know if there is something out there to do that. But I think it will cause confusion more that it would make any visual enhancement ever. A user will not be happy when scrolling down and finds lines just "popup" suddenly, in opposite to normally easing out as a result of scrolling action.
After all, when we speak about a scrollable HTML element with scrollbars visible, a user is aware text might be partially shown and that is normal and needs to be scrolled down to read the remaining. I really would not recommend that.
But for a technical answer, I think you would need to fix the CSS line-height property of that scrolling element, say make it 8px or whatever fits your layout. Then, capture the scroll event and devide the jQuery scrollTop() by that CSS line-height, then check the results: if it have a fraction then that means there is a "partially visible" line. Don't forget aout margin and padding that can cause mistakes when calculating.
I believe I have had this problem also, in that you have a div with a specific height and overflow hidden.
Thinking about it i would resize the div based on the line-height of the text in the div.
Change the height of div so that it equals a multiple of the line height of the containing text....
ie 3 lines of text with line-height = 16 change the div height from 50 to 48px.
( i posted this at the same time as rahmanisback' answer )
Hypothetically you could measure the height of text area, measure the height of the line, find scroll position do some math and then have some way of hiding text that is not fully exposed yet (eg Using a white div of x height depending on your math). However, it seems like a lot of trouble to go to for something that is usually a non-issue. You might also be able to do something with the overflow property, but you might have some issues with that I'm not sure.
I thought of an alternate method that would be easier to implement. Capture scroll events and then change it to the closest multiple of line height.
Related
I have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.
I'm trying to create a editable textbox with HTML/CSS/Javascript that looks and functions like a printed textbox with lines appearing every row.
It must look like this because the form may be printed on paper for people to write in.
I see three approaches to this method:
Table row with 'border-bottom' on each row and using javascript to determine when the text-overflows and move the cursor to the input box on the next row when it does.
This method is probably not very accurate.
Drawing absolute-positioned lines beneath the div/textarea that contains the text.
Using CSS3 repeating gradients to draw the lines behind the div/textarea. Like so: http://net.tutsplus.com/tutorials/html-css-techniques/lets-create-paper-with-css/
. This method is only compatible with modern browsers though.
Which method is the best and why?
Here’s one option. You need a div to draw each line, that could be done beforehand or with JavaScript.
In short, set an explicit line height on your textarea, then absolutely position a container element behind it. Inside that container put a set of elements with a height equal to the line height of the textarea, a one-pixel bottom border, and a negative-one-pixel bottom margin.
It’s most similar to your #2 but a little simpler.
The CSS3 method is best I think. As a fallback for browser that don't support it, you could put a background image of a line there, repeat it both horizontally and vertically, and use CSS to set the font size and line height so the typing aligns with the background image lines.
Well, the CSS3 method would at least let you use relative sizing like ems so people who've resized their fonts will still be ok. If it's not available in older browsers, I don't think that's hugely important, as it's an enhancement to make things easier if people print, rather than something that is essential to people interacting with the textarea.
Absolutely positioned lines might get un-aligned if the user resizes their browser/fonts/etc, although I haven't tested this to confirm. The Javascript seems like overkill for what is just a decorative effect unless the page is printed. And I'm not sure if you can even put tables inside a text-area, although again I haven't tested that.
So I've got a web applcation in the midst of wireframing, but I've run into an issue that requires a technical solution before I can solidify this model; that being:
Fig. #1 User creates new 'text-field'
element (a div with a max-width.)
User then begins typing into said
element until...
Fig. #2 The element reaches it's
max-width, the text drops to a new line and a 'new' background image (in
the form of another div) is created (with it's opacity and position animated for effect) to accommodate the larger element sze.
This is a rough outline of the intended functionality (given at this moment, I'm not sure how to have a text-field that behaves like a div with max-width yet) but I'm curious about how to create the event handler for the 2nd step; I thought about checking on every 'keydown' event, but that seems inefficient...
Does anyone have any advice or ideas for tackling something like this? Thanks!
The 'keydown' or 'keyup' event is the first thing that comes to mind. If you decide to do it this way you will have to
check for the html elements size each time and compare it to the old (save in a variable) one.
Easiest way seems to be to bind a handler to the html element and let it fire when the size changes.
I do not know if such an event exists, but if then thats the way to go.
(+1 for your very descriptive Question)
You could try using the CSS3 transition functionality:
http://slides.html5rocks.com/#slide42
That way the elements you want can be animated by the browser itself.
Disclaimer: Obviously, this doesn't work with more complicated effects.
In MSIE an onresize should fire.
Not sure how to attack the width issue where an input field auto sizes untill max width then wraps. You could use a monospace font inside the text field so that you could use javascript to monitor and control the growth of the box horizontally uptill the max width.
To approach the height auto grow you would be better using a textarea with it set to one row to begin with so it looks like an input box and then when the text auto wraps to the next row, which it will do, you can check the scollHeight of the textarea and check the actual height of the textarea, subtract them and you get the height you need to grow the textarea to stop the vertical scroll bars appearing.
The above will make the scroll bars flick on and off briefly while your javascript does it magic. You can use overflow:auto; to hide the scroll bars but then I don't know if scrollHeight will still read correctly. You will need to experiment.
Also take note on my comment above about setting an interval on keydown and checking the input length to stop the repeating key down text issue.
// Major edit, sorry in bed with back pain, screwed up post
One of the ad agencies I code for had me set up an alternate scrolling solution because you know how designers hate things that just work but aren't beautiful.
The scrolling solution is applied to divs with overflow:hidden and uses jQuery's scrollTo(). It's a set of buttons top and bottom that handle moving the content.
So, this is married in places to their CMS. What I have not been able to sort yet is how to hide the scrolling UI when overflow:auto would not have been triggered by the CMS content and the buttons are not needed.
The divs have set heights and widths. Can i detect hidden content? Or measure the div contents' height?
Any ideas?
So you want to get the height of a hidden element? I found this post maybe it is what you are looking for.
Its using jQuery, but the concept is the same. Hope this helps!
Metropolis
I hope i am mistaken, but you would need to emulate overflow by setting properties using some js, then you can get these values using getAttribute or your own method. Otherwise when you set overflow to auto, then the browser will be doing its own thing and the only value returned as a property of overflow would be a string like 'auto'.
Can you explain this better? You want to hide the scrollbar of a div set to overflow:auto when it doesnt have enough text to overflow? Browser does this for you.
You want to hide the scrollbar of a div set to overflow auto when it is scrolled down to some point, but you arent looking at it or hovering or something? That will be sort of complicated.
If you want to know if a div has overflow set to something, you just do:
object.style.overflow
and it will give you a string.
possible values:
visible
hidden
scroll
auto
inherit
you can set overflow the same way
http://www.w3schools.com/css/pr_pos_overflow.asp
from what i understand now is you have these divs with hidden scroll, but some graphic designer custom scroll bar and you use scrollTo to do the actual scrolling. BUT you problem lies when you dont have enough data to actuall need a scrollbar, but your graphic stuff shows up anyway, so you want to hide it.
so the real question here is how do you get the height of content? you want the property offsetHeight, but im pretty sure its still IE only.
What do you mean by CMS?
Yes you can access the div's content height, since you can access all of the div's children in JavaScript. (Sorry for not including example. I haven't work with pure JS in a while now so I don't want to point you in the wrong direction.)
Doing this, you'll kind of be able to "detect hidden content" and then be able to do what you actually want to do.
About your first question, I doubt you can control scroll bars once you've set overflow to auto.
Using jQuery height() on a div containing the content I am able to show/hide the user interface as needed based on whether height exceeds the CSS height of the div with overflow:hidden.
After googling around and finding a lot of ie bugs I still did not find a description of the problem I have.
The initial situation is a standard one. We have a tooltip which is actually a hidden div that will be displayed on mouseover at a given location. The div is hidden with display:none and contains a table with the content. We tried different libraries for showing the div (scriptaculous and jQuery Cluetip) but the effect is the same.
The problem:
Everything is fine as long as the contents fits the width of my window. But when I resize it until the horizontal scrollbar is activated the content of the hidden div will be shown at the end of the page when the tooltip is activated.
This is really strange as it happens only under these premises. When more than one tooltip is involved the browser might even crash (and under Vista takes the whole system with him duh).
I know it's a bit complicated to explain but I hope that someone at least had heard of that bug and can point me into the right direction.
Setting the width css property to "auto" (defined in the W3C standard) in IE will cause the <div> element to take up the entire space allotted to it. If the <body> element does not have a width applied, then this can result in a page miles and miles wide. This often crashes the browser, depending on the operating system. The best option is to just set it to null instead.
(This is based on actual experience coding for IE6 and may not necessarily apply to IE7+).
Another thing to keep in mind is that most browsers do what's called "lazy rendering" which means that if an element is hidden on the page, it won't render it. It won't even acknowledge its existence as a potentially visible object until it is unhidden. This means having no idea how big that object is going to be until you reveal it. This can cause problems if you're trying to figure out how big something will be once you make it visible. Basically the only way around it is to unhide it, read its size, re-hide it, then proceed.
The way that I did my tool tip is to use visibility hidden and visible. Once the mouse is off, I set the x and y to 0 to move the tooltip out of the viewing space.
This only works if the position is set to absolute.
Edit: How did you position the tooltip when showing it:
I positioned the tooltip by changing the css values of "top" and "left".
box.css("left, e.pageX+1);
box.css("top", e.pageY+1);
Where 'e' is my event variable from:
mousemove(function(e){});