We Keep Coding

Hide part view text in overflow hidden

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/

html5: link to the #id of a div at a certain point on the page

I have a responsive header that I'm working on for a site that turns into a fixed-position navbar as you scroll down. It takes up roughly the upper quarter of the page.
The content of the page is in a series of divs / cards that slide up as you scroll down.
I want to add <a href> links to the navbar that correspond to the ids of the divs. However, when I do so, the div content moves to the top of the page.
So I get something like the following when I navegate to /localhost#first_card
---- TOP OF PAGE
[<div id="first_card"> begins here]
---- bottom border of navbar
[<div id="first_card"> continues here]
when what I really want is this:
---- TOP OF PAGE
---- bottom border of navbar
[<div id="first_card"> begins here]
Is there a way to control where on the page the hash link might render the <div id="first_card"> after navigating to /localhost#first_card?

I've been trying to solve this for you in JSFiddle for a bit now, and from what I can find, the best way would be to box all the cards into a seperate element with overflow:auto
The result of this, and as proof of it working can be found at http://jsfiddle.net/Entoarox/TT2JN/
This may not work for your site, but the only alternative is using javascript to solve this and I cant recommend that because it would cause a massive load on the visitors PC due to most hash related javascript functionality being either static or very new, meaning that to support older browsers, you'd need to manually poll if the hash has changed, either taking up a lot of CPU time, or having a very slow response to when the hash has changed.

Try the jQuery scrollTop() command. This will give you the precise positioning that you need.
http://api.jquery.com/scrollTop/
You might have to change your links up a little. Example with jQuery and a wrapper div:
<a id="first-card-jump" href="#first_card">Jump to First Card</a>
<div id="wrapper">
NAVBAR
first div
second div
...
nth div
</div>
<script>
$('a#first-card-jump).on('click', function(event) {
event.preventDefault(); // Not sure if this is needed
$('div#wrapper).scrollTop(500); // you have to measure how far down you want to scroll
});
</script>
Note that this might mess up your in-page back button support. Not sure if that's an issue for you.
p.s. If you're in time trouble, the simplest fix is to add a top margin to each div equal to the height of the fixed navbar.
Hope this helps!

I made you a jsfiddle
it uses padding-top to create the offset to the top, then it uses margin-bottom to remove the offset between the elements.
the relevant css:
/*
add top padding and substract the same amount from bottom margin
*/
.card {
padding-top: 200px;
margin-bottom: -200px;
position: relative;
}
/*
we need to reverse the stacking for this solution, so the elements later in
the document don't cover the elements before
either you know how many cards you have, so you can solve this in a central
css file (like below)
or you must add the stacking upon creation (in your template)
or use the javascript
starts from 2 because nav is :nth-child(1) in this example
*/
.card:nth-child(2){
z-index: 0;
}
.card:nth-child(3){
z-index: -1;
}
.card:nth-child(4){
z-index: -2;
}
javascript to reverse the stacking, using jQuery
$(function(){ //on load
$('body>.card').each(function(i, elem){$(elem).css('z-index', -i)})
})

If I understand your question correctly, you want to make a div appear in the middle of the page, right? So, to do this, you can just direct the page to the div above it. You can also make another div above it with a fixed height.

keep div on top of the page while scrolling

==================
Name: //html text box//
age: //text box//
//div//
//table//
==================
Assume the above as a HTML page. Also assume the table has atleast 50 rows so that, the entire page could be scrolled. currently, when I scroll the page, the entire page (div, table) scrolls. I want the div to be at top of the page while scrolling such as the figure below:
==================
//div//
...
...
...
//row21//
//row22//
...
...
==================
I would like to know if this is possible at all. I tried using CSS for div:
//CSS for div:
position: fixed;
width: 100;
But, it displays the position of the div exactly where it was earlier. But, I would like to move the div to the top of the page while scrolling.
Thanks.

This is NOT trivial
You will need to use JavaScript to copy div and make its position fixed.
You will need to handle scroll event to hide and show fixed div
I have a small library to do such thing for table headers , I think you can read the source code or use as-it-is for a table
demo : http://www.agyey.com/demo/stickyhead/demo.html
code: https://bitbucket.org/anuraguniyal/stickyhead

This is not possible in the CSS alone. As you already know you can use:
position: fixed
to keep the element in the same place with respect to the browser window, but in order to move it to the top when the content is scrolled you need to use JavaScript.
You may want to look at this SO post to get an idea how to achieve that effect.

You need to add this to the css.
top:100px;//adjust til the div is below the name and age section.
position:fixed;
I think that's what you are looking for.

styling floating table headers

I am using the JavaScript/jQuery script available here to have the table headers floating while scrolling down/up. My table is center aligned. When I scroll down, the headers float but they get left aligned, rest of the table is center aligned though. Here is the snapshot of the output that I am getting right now:
What exactly do I need to edit in this JavaScript/jQuery code or my PHP/HTML code to have them center aligned?
Update
Example of problem

It's not the most elegant of scripts you've found, so I think yaponyal's advice is sound.
There were a few reasons why your fiddle didn't work: jsfiddle doesn't like the script's direct onload event attachment, so you can change it to:
window.addEvent("domready", function() {
this.build_header();
});
Additionally, the setheader function that runs every time you scroll, has to also set a horizontal position for the header.
this.header.style.left = this.table_obj.offsetLeft + "px";
See here for the reason why it can't be automatically centered. You could instead modify the script to put the cloned table header in a div with centered text alignment if you wanted to.
Also, the script sets a top value for the header without appending "px". That didn't work in my browser, I had to change it into:
this.header.style.top=Math.round(screenpos) + "px";
http://jsfiddle.net/VHaaw/3/

On page load, does the header appear right at the top? If so, I would suggest detaching the header into a separate div, styling it according to your needs and then setting a position fixed to the div. You can use the css property margin: 0 auto; to center data according to the width of the page.

How to remove the scrollbar without scrolling the content?

I have a website that uses dialogs. When I open that dialogs the body scrollbar is hidden and the scrollbar of the div that contains the dialog shows its scrollbar.
But, when I hide the body scrollbar, the content moves to the begining. How do I keep the position of the content when the dialog is opened?
For more information about this question, look the photos on Facebook. When you click a photo, I like to do that.

Can you give us the code you are using or a link to the site you are talking about? How are you hiding the scroll bar?
If it is by changing the overflow style property to hidden then am I correct in guessing that this only occurs the first time you show the dialog and subsequent appearances of the dialog do not move the content back to the top? If so I am not sure of the best way to prevent this but a quick hack would be to get your javascript to assign the overflow style property of the 'body's container div to auto upon loading.
Add the following to the top of your javascript:
window.onload = function ()
{
document.getElementById('container').style.overflow = 'auto';
}
where container is the id of the div containing your 'body' code.

try to use JavaScript to move the scroll to position:
document.getElementById('container').scrollTop = 50;
above will move scroll bar 50pix to the top, and you can get the max scroll height by:
document.getElementById('container').scrollHeight

Wait, I can't understand your question to well. If you wish to hide the scrollbars, use CSS to hide them.
<style type="text/css">
selector {
overflow: hidden;
}
</style>