Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have an HTML table. Nothing too fancy. It has the thead and the tbody. I was wondering how I can using javascript or jQuery to move the tbody only down.
Edit:
So to give you some context about what I'm doing. I have a table with some information(who cares what it is). Using jQuery I fixed the header in place so that when I scroll down the header is still in place. It is all working well, with the little problem that the header and the first row overlap. So I need to move the top of the tbody down. Meaning The header will stay in place and the body will be moved down a little so that I can see the first row of the table(ie. first row after the header).
I was wondering if there was a way of doing this with jQuery or javascript.
I've tentatively tried to reproduce your issue here. There are certainly better ways to achieve the same effect, but is this the kind of code you have? There's no need to use jquery to keep the table header fixed, so I used css:
http://jsfiddle.net/LLjdk/
Relevant CSS:
thead {
position: fixed;
background: #fff;
}
table {
margin-top: 28px
}
Note that the table header is fixed (moves with scroll), and the background is set so that when the rest of the table goes behind it, it doesn't show through. Finally, there's a margin added to the top of the table to bump it down so they don't overlap.
I am not sure if this is what you are looking for but from your description I understand that you're trying to make the thead always appear on the top of the page. Here is what I came up with.
thead {
position: fixed;
top: 0;
left: 0;
background-color: white;
}
table {
margin-top: 30px;
}
DEMO
Hope it'll help you
You could use jQuery's scroll method http://api.jquery.com/scroll/
I would need more information but it sounds like you'd do something like this:
$(window).scroll(function(){
$("table").animate({marginTop: 50}, 250);
});
EDIT: I know this answer has been accepted as correct but it seems I misunderstood the question, as apparent by the downvotes. I thought OP was after getting the table to slide down and stay fixed just as the header does. I suggested the scroll method as that is how you'd get the table to change position states on scroll.
As others have pointed out you simply want to push the table down for the height of the header + the spacing desired, like so:
table {
margin-top: 80px;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
fixed div through position:sticky and after scrolling navbar which is fixed overlaps div. How can this be fixed?
Navbar from bootstrap
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
You can use z-index property in CSS, imagine you have 2 divs, div-1 which has it's position sticky and and div-2
the code would be:
.div-1 {
position: sticky;
z-index: 0;
}
.div-2 {
z-index: 1;
}
I didn't understand what you want please write your code here, before that try the code below and see its work or not
* {
padding:0;
margin:0;
box-sizing: border-box;
}
#your-id-name-for-navbar{
z-index:99;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I cannot get my #supportive DIV to sit underneath it's preceding div and I'm unsure why:
I was going to solve this by adding a 'margin-top' dynamically in javascript as the slider's height will change based on the screen size however I'm certain there must be a way to do this in CSS?
Will absolute positioning be the problem when trying to float elements 'under' each other?
Here's the website: https://dl.dropboxusercontent.com/u/4469116/new/index.html
(to reach the issue, please click on 'projects', then the first image on the top left).
Your slider has absolute positioning, therefore you must compensate for its height by applying a margin-top of the amount of the absolutely positioned items height, in this case it was around 380px
Add this CSS to your stylesheet for that view:
#supportive {
margin-top: 380px;
}
Furthermore, the float is not doing anything as I can see so you should be able to remove it
If you would like your solution not fixed, the easy way with your current markup would be to give the slider a percentage height and then give a margin-top of th#e #supportive node
.slider {
height: 30%;
width: auto;
}
#supportive {
margin-top: 30%;
}
Or you can put the .slider inside of a separate container, and give the container the dimensions you want. This way your node will always be on the bottom as you wish as it and the container of .slider will be in natural flow for the document.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have three social icons which grow when hovered (css element:hover) - I want them to shrink slowly to the initial size when user stops hovering them - how could I solve it with Javascript, CSS or jQuery?
You can use CSS alone to achieve this via the transition property, no Javascript required.
.icon {
font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
transition: font-size 0.3s;
}
.icon:hover {
font-size: 4em;
}
Working example
Well, jQuery has a handy-dandy function set called .mouseenter() and .mouseleave() that I'm sure you've heard of :).
You obviously know how to get the elements to grow, so for them to shrink I would reverse what you've done and decrease the size after .mouseleave() Something like this, I think, would work:
$(document).ready(function(){
$('your_element_here').on('mouseleave', function(){
$(this).animate({height: '20px', width: '20px'}, 500);
});
});
Only you'd replace the '20px''s with whatever height and width you want the icon to shrink down to. I hope this helps and I would be glad to expand on this as much as you need so comment if you need anything else.
now I've been researching for a while about how to code a table so that the thead (or th) parts of a table become fixed when you scroll down on the overflow scrollbar. I haven't been been very successful since I either find something that is not what I'm imagining or uses a plugin which I don't understand how to work. An example of something that I was looking at is like http://mkoryak.github.io/floatThead/ with their overflow option. I just seem to be getting frustrated and lost, so I figured I'd ask you guys. (I'm a beginning web designer so as dumbed down as possible is good. and im fine with working with jQuery and Javascript if that matters)
Here's my code so far: http://codepen.io/PorototypeX/pen/iKJAq
#header_row {
background: #636363;
position: absolute;
width: 1210px;
z-index: 100;
}
The below code will make the tr for thead come out of the srolling area. It's the best I could get with out messing up all the other code.
thead tr{
position: relative;
top: 100px;
}
This works, but you'll have set the sizes on the th for it to make sense.
see an old post below to help you with floating headers
http://linodh.blogspot.com.au/2011/03/gridview-header-floating-using-jquery.html
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
Can anyone recommend a jquery plugin that would allow you to stick a few rows at the top of the page
i.e. page loads, the content is in the right place, then once the content reaches the top of the page it gets fixed in place while the user scrolls...then if they scroll back up the content will go back to it's original place?
The content in question, would be a few TR elements.
I tried a few, but all the ones I tried had major issues, so I'm wondering if you could recommend a few more options for me? thanks
OK, here's how I'd approach this.
First, we'd have a "target" div like this:
<div id="fixedHeader">
<table>
<thead></thead>
</table>
</div>
that has the following CSS:
#fixedHeader
{
position: fixed;
top: 0;
float, left, right, margin, etc: as you want them;
}
#fixedHeader:not(.active)
{
display: none;
}
When the page first loads, we copy the table's thead into this div. Then when the user scrolls such that the top of the table is no longer visible, show this. When they scroll back up, hide it again. Hiding and showing I'll do by adding/removing the active class.
$(document).ready(function() {
// copy over the thead
$('#fixedHeader > table > thead').html($('#theTable > thead').html());
// show or hide the div as necessary.
$(window).scroll(function() {
if ( $('#theTable > thead').offset.top < $(window).scrollTop() )
{
$('#fixedHeader').addClass('active');
}
else
{
$('#fixedHeader').removeClass('active');
}
});
});
Will run into problems if the user can scroll past the end of the table; if necessary, you can expand the if condition for that case.
Just use this:
$("body").on("scroll",function(){
$("tr.stickToTop").each(function(){
if($(this).offset().y<=0){
$(this).css({
position: "fixed",
top:0
});
} else {
$(this).css({
position: "static",
top:''
});
}
});
});
Replace $("tr.stickToTop") with some jQuery selector that works for your <tr /> elements.