keep div on top of the page while scrolling - javascript

==================
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.

Related

Set Footer To Bottom Of Page Using JavaScript only

I'm trying to hack a Squarespace template to turn an announcement bar into a footer.
Can anyone advise how to force an element to the bottom of the page using JavaScript only.
No CSS, no jQuery.
Thanks
James
Without CSS you can not place anything in a specific location on the page. You can move things to the end of the HTML (The last tags of the <body> element) But they will still just show inline with the rest of the page.
CSS is required if you want to change the visible location of an element or set of elements.
I am not sure what you mean by no CSS. I understood you want to apply CSS changes with DOM manipulation.
You can apply a position: fixed and float it to bottom.
var container = document.querySelector('.announcement');
container.style.position = 'fixed';
container.style.bottom = 0;
Working fiddle

jQuery scrolling doesn't show up

I'm writting a dynamic page using jQuery and I have a problem. I'm for example adding to my html file div's using append() function like this:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'></div>");
I will be creating different amount of that div's base on datebase so that's why I use this variable i to assign different id's for each div.
My problem is that even if I'm creating that div's in body and when I look at code they are in it, if I check body's height it is 0 (width is ok, something like 1200).
Main problem with that is when there are too many div's they are beyond screen but there is no scroll bar. It's something like div's aren't in body although in code they are in.
Could you propose me any solution for that? Or what am I doing wrong? My line of thought is that I'm using $(document).ready so html file is creating a page, but see empty body so height = 0 and all my div's are beyond body. What do you think about that?
Take care of positioning; position:fixed removes your divs from normal flow ->
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
as W3C says
An empty <div> does not have a height. Thus you could add as many as you want to the page and it will never get any longer. For the scroll-bar to appear you need to either set a height to the <div> with CSS like this:
.diamond_div{
height:100px;
}
Or add some content to the <div> so you would have something like this instead:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'>hello</div>");
Then your <div> would have height and once there are enough on the page to go beyond the height of the browser, the scroll-bar will then appear.
Following on from your comments. Setting the position to "fixed" removes the element from the workflow and thus will not extend the length of the page in the normal way.

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.

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>

Categories