CODEWITHSUNDEEP
javascriptjqueryhtmlcssember.js
Ian Steffy
Ian Steffy

Reputation: 1234

I want my function to be triggered when the route changes

I have a function that changes the css of a class and I want that function to be called anytime that the route changes. I also want this logic to be placed inside the ApplicationView so it will be called anywhere at anytime the route changes.

The class that is being altered by the function (we'll call that class .float-right-col) is created once on every .hbs template in my app.

<div class="float-right-col">
</div>

The pseudo code of what I want

Whenever we are transitioned to a new route {
  Set the css of float-right-col to this by toggle classes with overriding attributes
}

Information that I left out for simplicity's sake (optional) AKA The Big Picture:

Eventually the pseudo code mentioned above will have another condition && that requires the screen to be > 800px.

Whenever we are transitioned to a new route {
  check if the screen size is below 800px & if it is {
    Set the css of float-right-col to this
  }
}

Ideally the css would just know the screen size and adjust the css before the page loads. With this pseudo code above, the page will load with the default css, and then the function will be called which makes float-right-col transition into a new position.

To toggle the css of this element i add and remove these two classes to .float-right-col.

 .openCol {
    position:absolute;
    right: 0px;
    transition: all .2s ease 0s;
  }
  .closeCol {
    position:fixed;
    right: -290px;
    transition: all .2s ease 0s;
  }

I've also tried using .css()

Finally, I've tried media queries, but those seem to only work on the initial load of the first page

@media screen and (max-width: 800px) {
  .float-right-col {
    position: fixed !important;
    right: -290px;
  }
}

Upvotes: 1

Views: 76

Answers (1)

Oliver
Oliver

Reputation: 978

You could observe the currentPath in the ApplicationController and react on any changes.

App.ApplicationController = Ember.Controller.extend({
  currentPathChanged: function() {
    console.log(this.get('currentPath'));
  }.observes('currentPath')
});

Upvotes: 1

Related Questions