CODEWITHSUNDEEP
angularjsfullscreen
wildcolor
wildcolor

Reputation: 574

angularjs fullscreen homepage only

I am working on a website that has a fullscreen background only on the homepage. On other pages, they use normal bootstrap container. I used an additional view in order to pass the 100% height to its inner css. But this way, all other pages are forced to moved down, because the space above them are the 100% height. My question is how I do remove the 'style = height:100%' if I am not at homepage?

<body>
    <div ui-view="enterHome" style="height:100%;"></div> <!-- additional view -->

    <div ui-view="navbar"></div>
    <div ui-view="body"></div>
    <div ui-view="footer"></div>    
</body>

my app.js is like below: (ie, for state = enterHome, I only have the enterHome template displayed.)

.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
    .state('enterHome',{
        url:"/",            
        views:{
            "navbar":{
            },
            "carousel":{
            },
            "enterHome":{
                templateUrl:"templates/enterHome.body.html",
                controller: "EnterHomeBodyController"
            },
            "footer":{                  
            }               
        }
    })

Upvotes: 0

Views: 1199

Answers (2)

asm0dey
asm0dey

Reputation: 2931

You can use CSS like

.full-height {
    height:100%;
}

Than you can use ng-class in your template

<div ui-view="enterHome" ng-class="full-height: isHomePage"></div>

And in your homepage controller:

$scope.isHomePage = true;

In other pages variable won't be defined, so it will be false and full-height class won't be applied.

Upvotes: 1

JB Nizet
JB Nizet

Reputation: 691715

Test that the current state is the homepage state:

<div ui-view="enterHome" style="{{ ('homepage' | isState) ? 'height:100%;' : '' }}></div>

Or, to be cleaner, define a full-height css class with height: 100%, and apply the class if the state is homepage:

<div ui-view="enterHome" ng-class="{ 'full-height' : ('homepage' | isState) }></div>

Upvotes: 1

Related Questions