Skip to main content
V
19-Tanzanite
Velkumar19-Tanzanite
19-Tanzanite
December 5, 2019
Solved

Navigate between Views using CSS

  • December 5, 2019
  • 2 replies
  • 2160 views

Hello all,

 

Is there any possibility to navigate between different views using CSS.

 

Thanks in Advance.

 

Regards,

VR

Best answer by ClayHelberg

Something like this should work:

 

window.addEventListener("orientationchange", function() {
 alert("rotate!");

 var width = window.innerWidth;
 var height = window.innerHeight;
 // assume your two views are named "Portrait" and "Landscape"
 if(width > height) {
 $scope.app.fn.navigate("Landscape");
 }
 else {
 $scope.app.fn.navigate("Portrait");
 }
});

Note that you'll only want to add this once, in your initial view, since it attaches to the top level window object, and it will trigger no matter which view is active. You don't need separate copies in each view.js panel.

2 replies

C
ClayHelberg18-Opal
18-Opal
December 6, 2019

I don't see how that would work with CSS, but you can certainly do it with Javascript. You can also do it using a UI widget (like a button) with a binding to the navigate service on the view.

    V
    19-Tanzanite
    Velkumar19-TanzaniteAuthor
    19-Tanzanite
    December 11, 2019

    Hello @ClayHelberg 

     

    Thanks for your reply. My use case to switch between views based on Orientation of the device. I tried using using javascript to find orientation of the device, but it doesn't work. So I'm looking in CSS to achieve this.

     

    /VR

    T
    TomasCharvat14-Alexandrite
    14-Alexandrite
    December 11, 2019

    Hello Velkumar

     

    maybe this will help you for detect an orientation:

    $scope.getOrientation = function() {
 var width = window.innerWidth;
 var height = window.innerHeight;
 /**/
 console.info("display size: " + width + "x" + height);
 /**/
 var orientation = "";
 if(width > height) {
 orientation = "landscape";
 }
 else {
 orientation = "portrait";
 }
 console.info(orientation);
 return orientation;
}

     

    Regards

     

    Tomas

     

      I
      InfinityX1-Visitor
      1-Visitor
      December 11, 2019

      its not possible with CSS. its possible with binding of button or toggle button with navigate property

      Terms & ConditionsAccessibility statement