CODEWITHSUNDEEP
css
Himmators
Himmators

Reputation: 15006

How to use css to put an item just above the top of the screen?

I'm working on a page that animates slides out of the screen. This is how I currently do it.

var previousOffset = ($(window).height())*-1;
previousOffset = previousOffset+'px'
$('.current').animate({
    top: previousOffset,
}, 500, function(){...}

I was wondering, is there a cleaner way to do it, with pure css, without measuring the height of the of the screen. Currently, the item has position:absolute, but that is not a requierment.

To be clear currently the css of .current is:

.current{
  top: -"height of screen";
  position: absolute;
}

I would like to do it without "height of screen".

Upvotes: 1

Views: 124

Answers (2)

Goran Mottram
Goran Mottram

Reputation: 6304

This may depend heavily on your other markup, but you could try setting the height of the .current element to 100% and just deal with percentages. This will implicitly handle the resizing of the window for you.

Note that you must set the html & body element to 100% for this to work.

CSS 

html, body {
    margin:0;
    height:100%;
}

.current { 
    position:absolute;
    height:100%;
    width:100%;
}

JS 

$('#nextButton').click(function(){
    $('.current').animate({
        top: '-100%'
    }, 500, function(){
       // do something
    }); 
});

DEMO

http://jsfiddle.net/GoranMottram/BQdtm/

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Specify the position as fixed then set top to the appropriate negative value.

.current{
    position: fixed;
    height: 10px;
    top: -10px; /* This will need adjusted */
}

Working Example: http://jsfiddle.net/UH4p7/

Upvotes: 1

Related Questions