cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

How to create Sliding Buttons and there sequences

manojpandey
12-Amethyst

How to create Sliding Buttons and there sequences

I want to learn how to create the sliding buttons as there in the image also how the sequence steps have been created oppo

1 ACCEPTED SOLUTION

Accepted Solutions

Hello manojpandey


for sliding panels I am using a CSS:

.panel-hide {
  position: fixed;
  right: -300px;
  top: 0;
  width: 300px;
  height: 100vh
}

.panel-show {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh
}

Then it is up to you how you assign these styles via JS. You can for example call a function under  Play button (or in "Play Started" event under model) which will check step number for displaying/changing a specific widgets - for example simple way via switch:

$scope.setStepWdgs = function() {
    var step = $scope.view.wdg['model-1']['currentStep'];
    switch(step) {
      case 4:
        // Display panel on start of step #4:
        $scope.view.wdg['panel-1']['class'] = "panel-show";
        break;
      case 5:
        // Hide panel on start of step #5:
        $scope.view.wdg['panel-1']['class'] = "panel-hide";
        break;
      default:
        /*some code for common steps*/
    }
}

Tomas

 

PS: This code is only example I didn't try it 😅

View solution in original post

3 REPLIES 3

These have most likely been done using CSS animations to animate out the panels.  I've used something similar in the past, but really it was just a test to see how it worked.  It's all explained at W3 schools: https://www.w3schools.com/css/css3_animations.asp 

 

Hope this helps.

Hello manojpandey


for sliding panels I am using a CSS:

.panel-hide {
  position: fixed;
  right: -300px;
  top: 0;
  width: 300px;
  height: 100vh
}

.panel-show {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh
}

Then it is up to you how you assign these styles via JS. You can for example call a function under  Play button (or in "Play Started" event under model) which will check step number for displaying/changing a specific widgets - for example simple way via switch:

$scope.setStepWdgs = function() {
    var step = $scope.view.wdg['model-1']['currentStep'];
    switch(step) {
      case 4:
        // Display panel on start of step #4:
        $scope.view.wdg['panel-1']['class'] = "panel-show";
        break;
      case 5:
        // Hide panel on start of step #5:
        $scope.view.wdg['panel-1']['class'] = "panel-hide";
        break;
      default:
        /*some code for common steps*/
    }
}

Tomas

 

PS: This code is only example I didn't try it 😅

HarshSalvi97
5-Regular Member
(To:TomasCharvat)

Did you make 2 similar panel widgets for sliding it and giving them different classes? How did you trigger the sliding of panels by js?

Top Tags