CODEWITHSUNDEEP
jquery
Nrc
Nrc

Reputation: 9787

Change an id for a class

I have a div centered vertically and horizontally in the page. But when this div id is larger than the screen cannot be centered and is cut. So I tried to detect if the div is larger than the document change to margin 0 auto. But I don't know how to do that. Is it possible to remove the id properties and give it the class "onTop" properties?

I have it here to play: http://jsfiddle.net/c9unU/

jQuery:

$(function(){      
    var documentHeight = $(document).height();
    var contenttHeight = $("#content").height();

    if(documentHeight < contenttHeight ){
        /* give it the class onTop */
    }else{
        /* give it the id content */
    }   
})

HTML:

<div id="background">
    <div id="content"> some text inside</div>
</div>

CSS:

body {margin: 0;padding: 0;color:#fff; font-size:40px;}

#background {
    position: absolute;
    width:100%;
    height:100%;
    border: 0px;
    background-color:blue;
}

.onTop {
    position: relative;
    top: 0; 
    left: 0;
    margin: 0 auto;
    background-color:green;
    width:300px;
    height:600px;
    border:0px;
  }

#content {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-300px;
    margin-left:-150px;
    background-color: red;
    width:300px;
    height:600px;
    border:0px;
}

Upvotes: 0

Views: 86

Answers (3)

charlietfl
charlietfl

Reputation: 171679

You are approaching situation as if you only have a choice of using ID CSS OR class CSS rules. It's very simple to combine both:

#content {
   /* properties here*/
}

/* CSS for #content when class onTop is added to it*/
#content.onTop {
    position: relative;
    top: 0; 
    left: 0;
    margin: 0 auto;
    background-color:green;
    width:300px;
    height:600px;
    border:0px;
  }

JS

$(function(){      
    var documentHeight = $(document).height();
    var contenttHeight = $("#content").height();
     $('#content').toggleClass('onTop', documentHeight < contenttHeight)

})

Second argument of toggleClass() is a boolean to indicate add or remove class

Upvotes: 1

geekman
geekman

Reputation: 2244

Simple: Give Id by default, and add and remove classes. Make sure the class css is after the default css. Keep ot simple.

CSS:

#content.onTop {
    position: relative;
    top: 0; 
    left: 0;
    margin: 0 auto;
    background-color:green;
    width:300px;
    height:600px;
    border:0px;
  }

JQuery:

if(documentHeight < contenttHeight ){
        /* give it the class onTop */$('#content').addClass('onTop');
    }else{
        /* remove class ontop */
    }

You don't actually need to remove class, as it wont be there in first place. But it's better if you adjust screen on window resize.

Upvotes: 0

Eli
Eli

Reputation: 14827

Try this:

$(function(){      
    var documentHeight = $(document).height();
    var contenttHeight = $("#content").height();

    if(documentHeight < contenttHeight ){
        $('#content').removeAttr('id').addClass('onTop');
    }else{
        $('.onTop').removeClass().attr('id', 'content');
    }   
})

Upvotes: 0

Related Questions