I making bookReader and one page will fit to user viewport. For this approach i make div
<div id="book">Long text...</div>
with
#book {
overflow: hidden
}
Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.
DEMO: I show in red color what i need find and hide.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
DEMO 2: It can contains anything (header tags, img, <code> , etc.)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
P.S. Make all the same line-height is not solution. Change content styles is not solution too.
IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps
Check this out: http://jsfiddle.net/jd7mum6c/5/
Related
there is a html page of 400vh height and divided into two parts. I want the first part to be hidden and importantly non-scrollable by having a button
for that, the way once the user clicks the button, second part supersedes the first and the whole hight turns to 200vh so that only the second part is visible and scrollable.
how to do so?
Requirement is not very clear. But I guess you would hide the first div with css
diplay: none
then you would have the second div set as:
overflow-y: auto
And if this has to be done with a button, on click, link a js method which would update the style attributes to the desired css elements.
all. I'm a beginner trying to create my own website.
For an input field, I want the text to appear behind horizontal lines. To achieve this, I created a container div element with many sub divs each two pixels high with a bottom border of one pixel, then placed the container div in front of the input field.
The problem is that when hovering over the input field, the cursor only changes into the "text" style cursor in the small area at the very left edge of the input field not covered by the horizontal lines created by the sub div elements.
What I would like to happen, and I fear I may need Javascript, is to have the cursor, when hovering over the container div's horizontal lines, turn into the "text" cursor and when clicked for the focus to activate within the input field.
I hope my question isn't confusing. Thank you in advance.
Add this CSS to your div with horizontal lines:
pointer-events: none;
This indicates that your div element should not become the target of mouse events, effectively letting them "pass through" it.
For more information, see the MDN article on pointer-events.
Assuming that I'm understanding your question, you do need to use JavaScript. Using jQuery you can do the following:
$('.horizontalLines').click(function() {
$('.inputField').focus();
});
This just makes it so that clicking one div will select the text input box.
Consider the following HTML:
<div id="mydiv">Big shiny error goes here</div>
Using below CSS, this div sticks to the top right corner, even if the page is scrolled.
#mydiv {
position:fixed;
right:0;
top:0;
background-color: red;
}
Is it possible to have mydiv fade out to, say, 10% of opacity on hover and allow user to use page elements underneath, such as select text and copy to clipboard? The idea is that mydiv should stay visible at all times, but it should NOT block user's actions.
As an added bonus, it would be nice to select mydiv's text, if no elements are found underneath.
EDIT: hover + z-index approach does not seem to work well, see this jsfiddle.
The closest I can think of is to give the content area a z-index of, say, 1. Then, using :hover, give the error div a lower z-index to position it behind the main area. This will allow mouse events on the main content. You can also adjust opacity to fade it out as needed. I believe that IE will allow you to click/drag/whatever on the element if there's nothing else in front of it, but Chrome and Firefox will consider it hidden by the content area even if there's "nothing" actually there.
$(document).ready(function(){
var id = $('#selector')
id.mouseover(function(){
id.fadeOut(800,function(){
id.hide();
});
})
id.mouseout(function(){
id.fadeIn(800,function(){
});
})
});
selector should point the division on top
I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.
Imagine search bar on html page, it has, say 4 controls on the same line, each wrapped in DIV.
E.g. a few listboxes on the same line:
searchbyX, byY, byZ, byN
After some clicks, some of these controls are hidden, some are displayed (using JQuery).
The problem is that I want each control to keep it's place, but if I hide it's left neighbour, it will move to the left, thus not keeping its original position.
How to show/hide controls keeping their locations the same?
If I understand you correctly,
visibility: hidden
will do the trick.
It will hide the element, but reserve the space it needs.
To make it visible again, remove the property or set a explicit
visibility: visible
Instead of hiding them by setting "display" to "none", set "visibility" to "hidden".