Navigate between Views using CSS

[Velkumar]

Hello all,

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

Thanks in Advance.

Regards,

VR

[ClayHelberg]

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.

[Velkumar]

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

[TomasCharvat]

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

[ClayHelberg · Accepted solution]

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.

[InfinityX]

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