All geek questions in one place

Meteor interaction with jQuery or animation in general

Basically, I create an application in Meteor, and I have a left navbar in position: fixed; and left : -300px and you want to move it to left : 300px , but don’t know how to animate the transition in Meteor (multiple slide transition in jquery). I understand the main aspect of jQuery, but for some reason it doesn't seem to work when I put it under the Meteor.isClient aspect in a script. Keep in mind that I'm pretty new to Meteor, including javascript code that will be very appreciated.

My current code is as follows.

HTML

 <body> <div class='topmenu'> <div class='menubutton'> <span class="icon-bar1"></span> <span class="icon-bar2"></span> <span class="icon-bar3"></span> <!--Needs to be fixed so that we only need to use one icon-bar class!!!--> </div> <div class='BanditDiv'> <h1 class='BanditName'>Bandit</h1> </div> </div> <div class='leftnav'> <div class='sitenav'> <a class='internalnav' href="#">Home</a> <a class='internalnav' href="#">Musicians</a> <a class='internalnav' href="#">Recording Space</a> </div> </div> <div class='main'> </div> </body>

CSS

 body{ margin: 0px 0px 0px 0px; } .navitem:hover{ background-color: #000066; } .main{ background-color: rgb(128,128,128); height: 200vh; width: 100vw; margin: 0px 0px 0px 0px; overflow-x:hidden; } .topmenu{ position: fixed; z-index: 10; top: 0px; width: 100vw; height: 50px; background: white; border-bottom: 2px lightgray solid; } .BanditDiv{ position: fixed; top: 0px; height: 50px; width: 30vw; margin-left: 35vw; float: center; } .BanditName{ text-align: center; font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif; color: #000066; } .menubutton{ position: fixed; top: 5px; left: 5px; height: 40px; width: 40px; border: 1px #cccccc solid; background-color: white; border-radius: 5px; } .menubutton:focus{ outline: 0; } .icon-bar1 { position: fixed; top: 15px; left: 10px; margin: 0px 0px 0px 0px; display: block; width: 30px; height: 2px; background-color: #cccccc; border-radius: 1px; } .icon-bar2 { position: fixed; top: 25px; left: 10px; margin: 0px 0px 0px 0px; display: block; width: 30px; height: 2px; background-color: #cccccc; border-radius: 1px; } .icon-bar3 { position: fixed; top: 35px; left: 10px; margin: 0px 0px 0px 0px; display: block; width: 30px; height: 2px; background-color: #cccccc; border-radius: 1px; } .leftnav{ position: fixed; top: 0px; left: -300px; width: 300px; height: 100vh; z-index: 9001; background-color: yellow; }
+5
source share
1 answer

So this is what I came up with for a solution that seemed to work. I created the angular module inside Meteor.isClient and it seemed to work well.

 if (Meteor.isClient) { angular.module('sidebar',['angular-meteor']); angular.module('sidebar').controller('SidebarCtrl', ['$scope', function ($scope) { function Menu (callback){ $('.menubutton').on('click', function (){ $('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"}); $('.leftnav').animate({left : "0px"}, 500, function(){ $('.main').click(function() { $('.leftnav').animate({left: "-302px"}, 500); $('.leftnav').css({"box-shadow" : "none"}); }); $('.leftnav').click(function(event){ event.stopPropagation(); }); }); }); } Menu(); }]); }
+3
source

Source: https://habr.com/ru/post/1241675/

More articles:


All Articles