I'm developing an application where the user logs in to their dashboard. When they log in there is a side bar to the left and main content to the right. There is a burger icon to toggle the side bar which works fine but I also want the width of the main content to change depending on whether the side bar is open or closed. I want the side bar to make up 20% of the page and the main content to make up 80%. When the side bar is closed I want the main content to change to 100% width.
When I toggle the side bar menu the first time the menu closes and the main content changes to 100% width, but when I reopen it doesn't change back to 80%. I'm a bit stuck can't figure why - looks fine to me.
<template>
<div class="main-content" v-bind:style="{ 'width': width + '%' }">
<div id="burger" :class="{ 'active' : isBurgerActive }" #click.prevent="toggle(); changeWidth();">
<slot>
<button type="button" class="burger-button">
<span class="burger-bar burger-bar-1"></span>
<span class="burger-bar burger-bar-2"></span>
<span class="burger-bar burger-bar-3"></span>
</button>
</slot>
</div>
</div>
</template>
<script>
import {store} from '../store.js';
import {mutations} from '../store.js';
export default {
data() {
return {
width: 80
}
},
computed: {
isBurgerActive() {
return store.isNavOpen
}
},
methods: {
toggle() {
mutations.toggleNav()
},
changeWidth() {
if (this.width = 80) {
this.width = 100;
} else if (this.width = 100) {
this.width = 80;
}
console.log(store.isNavOpen);
console.log(this.width);
}
}
}
</script>
It's:
if (this.width == 80)
and not
if (this.width = 80)
The same for this.width == 100
Related
I made a scroll to top and scroll to bottom button. My intention is to hide both of the buttons in pages that do not contain vertical scrollbar only. However, only scroll to top button disappear in pages that do not have vertical scrollbar. If the user clicks the scroll to top button, it will direct the user to the top of the page which in result, the scroll to top icon changes to scroll to bottom icon which allow user to go bottom of the page. So the issue arise around here, when it changes to scroll to bottom icon, the button will stay in every page including pages that do not have vertical scrollbar. For scroll-to-top button , it does not happen like that as it will disappear in pages that do not have vertical scrollbar but not for scroll to bottom button. This issue happens when scroll to bottom button shows up. Could you please help me ? Any idea on fixing this?
ScrollToTop.vue
<template>
<div v-scroll="onScroll" >
<v-btn v-if = "!isVisible"
fab fixed bottom right color="primary" #click="toBottom">
<v-icon>mdi-arrow-down-bold-box-outline</v-icon>
</v-btn>
<v-btn v-else
fab fixed bottom right color="primary" #click="toTop">
<v-icon>mdi-arrow-up-bold-box-outline</v-icon>
</v-btn>
</div>
</template>
<script>
export default{
,
data () {
return {
isVisible: false,
position: 0,
}
},
methods: {
onScroll () {
this.isVisible = window.scrollY > 50
},
toTop () {
this.position = window.scrollY
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
})
},
toBottom(){
let pos = this.position > 0 ? this.position : document.body.scrollHeight
window.scrollTo({
top: pos,
behavior: 'smooth'
})
},
}
}
</script>
Default.vue
<script>
export default {
name: "DefaultLayout",
data() {
return {
hasScroll: false
};
},
methods: {
hasVerticalScroll() {
this.hasScroll = document.body.offsetHeight > window.innerHeight;
}
}
}
</script>
<template>
<v-app dark v-scroll="hasVerticalScroll">
<ScrollToTop v-if="hasScroll"></ScrollToTop>
</v-app>
</template>
I have a project where I try to hover an element from right to left in the window while scrolling. So when the user is scrolling down the element goes from right to left and when the user is scrolling up it goes from left to right.
I have tried to do this by adding a scroll event listener to the window and then check when this component is visible on the browser(This component is one of multiple components which are shown underneath each other in the application)
If some one knows a better way to achieve this please feel free to comment. I just thought of using the absolute positioning to move the object across the screen.
This is the code I am using at this moment but it doens't want to work. The object doesn't move and stays put.
data () {
return {
position: 0
}
},
created () {
window.addEventListener('scroll', (event) => {
this.runOnScroll()
})
},
mounted () {
const navbar = this.$refs.neonComponent
this.navbarOffset = navbar.offsetTop
},
methods: {
runOnScroll () {
if ((this.navbarOffset - 600) < window.pageYOffset) {
this.position = Math.round((window.pageYOffset - (this.navbarOffset - 600)) / 10)
this.$refs.neonText.style.right = this.position
} else {
if (this.position > 0) this.position = 0
}
// console.log(this.position)
}
}
<div ref="neonComponent" class="relative w-full min-h-screen bg-black flex justify-center items-center">
<div ref="neonText" class="absolute max-w-3xl text-center position-text">
<h2 class="text-7xl">This is an example text</h2>
</div>
</div>
Try adding a unit (px, %, vh, vw) to style.right, like so:
this.$refs.neonText.style.right = this.position + 'px';
I am using HostListener for changing the height depending on the screen size this is working but during the load of the page the "event.target.innerHeight" give undefined later i will get the value as i change the browser height, so i have initialize the value. Initially if the user browse on a big screen the value will not change
Here is the code
myInnerHeight = 524; //Laptop screen
mypaletteHeight = 471; //Laptop screen
#HostListener('window:resize', ['$event'])
onResize(event) {
if (event.target.innerHeight > 680) {
this.myInnerHeight = 727; //bigger screen
this.mypaletteHeight = 674; //bigger screen
} else {
this.myInnerHeight = 524; //Laptop screen
this.mypaletteHeight = 471; //Laptop screen
}
}
HTML
<div class="card h-100" [style.min-height.px]="myInnerHeight" >
....
<div class="sub2" id="sub2" [style.height.px] = "mypaletteHeight">
.
.
</div>
</div>
I am using Angular 6 and bootstrap 4.
how to get the value of the screen size on the load of the page.Please help me with this issue
Did you try window.screen.height & window.screen.width
To get the document client width & Height, document.documentElement.clientWidth & document.documentElement.clientHeight
I've been trying to add event listeners as a part of a plugin. The idea is really simple, the goal is to do a slider plugin that handles 2 dimensions (horizontally and vertically)
So I have something like this
<div class="tab-container bg-dark-blue" start-tab="Home">
<div class="tab-page" x-index="1" y-index="1" id="Home">
<h1>x=1, y=1</h1>
</div>
<div class="tab-page" x-index="1" y-index="2">
<h1>x=1, y=2</h1>
</div>
<div class="tab-page" x-index="2" y-index="1">
<h1>x=2, y=1</h1>
</div>
<div class="tab-page" x-index="2" y-index="2">
<h1>x=2, y=2</h1>
</div>
</div>
Where tab-page divs are absolutely positioned with 100% width and height, and tab-container is relatively positioned with 100% width and height of the browser.
var __MyMethods = {
width : 0
height : 0,
container : null,
// other stuff
setup : function(tab_container) {
// setup __MyPlugin.container = tab_container
// setup width, height of the container
},
/*
* Movement functions
*
*/
move : function(direction)
{
if( direction == 'left' )
{
__MyMethods.x--;
__MyMethods.translate( 'left', __MyMethods.width );
//
}
if( direction == 'right' )
{
__MyMethods.x++;
__MyMethods.translate( 'left', (-1)*__MyMethods.width );
//
}
if( direction == 'up' )
{
__MyMethods.y--;
__MyMethods.translate( 'top', __MyMethods.height );
}
if( direction == 'down' )
{
//
__MyMethods.y++;
__MyMethods.translate( 'top', (-1)*__MyMethods.height );
//
}
},
translate : function(property, offset)
{
// For each .tab-page in we animate the CSS property
$(__MyMethods.container).children(".tab-page").each( function() {
var animation = {};
var x = parseInt( $(this).css(property).replace('px','') ) + offset;
animation[property] = x.toString() + 'px';
$(this).animate(
animation,
{
'duration' : 0,
'queue' : false,
}
);
});
},
};
$.fn.MyPlugin = function()
{
__MyMethods.setup(this);
$(".btn").click( function(event)
{
__MyMethods.move( $(this).attr("move") );
console.log(this);
});
return this;
};
So I put
<button class="btn" move="up"></button>
<button class="btn" move="down"></button>
<button class="btn" move="left"></button>
<button class="btn" move="right"></button>
Somewhere in the HTML and it works fine for up, left, right... but if you click the move="down" button it works only the first time.
I don't know why is that hapening, the event never fires again if you click that button, I tried doing console.log(this) inside the click event function, but it doesn't show anything after the down button is clicked...
Any idea of what can be happening?
Thank you very much for any help you can give me
Edit: Here is a demo
Regards
In you jsfiddle the down button seems to stay behind the tab-page s. Giving z-index to menu and tab-page elements solves the problem.
In your css file:
Add
z-index: 10;
to .menu
Add
z-index: 1;
to .tab-page
css
I have an element that I need to dynamically change his size depending on the screen resolution, so far I have a fixed size which is .scroll-sidebars { max-height: 650px; } but this only works in big screens, as you see in the img below, there is a little margin on the bottom, that's what I want
if I use that same height on smaller screens, this is what I get
so I want to avoid that, it doesn't matter that once the height of that panel changes appears a scroll bar on the panel, that is good, all I need is to keep that margin always there at the bottom.
I have a directive, this is an sticky sidebar, I do not know if its helps because maybe we can calculate that height from the directive
.directive('sticky', function($document, $timeout) {
return {
restrict: 'A',
link: function(scope, element) {
var width = $document.width();
if (width > 991) {
$timeout(function() {
angular.element($document).ready(function() {
var stickySidebar = element,
stickyHeight,
sidebarTop,
scrollTop,
stickyStop,
sidebarBottom,
stopPosition;
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
sidebarTop = stickySidebar.offset().top;
}
$document.scroll(function() {
if (stickySidebar.length > 0) {
scrollTop = $document.scrollTop() + 52; //stkicy responds to the navbar
if (sidebarTop < scrollTop) {
stickySidebar.css('top', scrollTop - sidebarTop);
sidebarBottom = stickySidebar.offset().top + stickyHeight;
stickyStop = $('.main-content').offset().top + $('.main-content').height();
if (stickyStop < sidebarBottom) {
stopPosition = $('.main-content').height() - stickyHeight;
stickySidebar.css('top', stopPosition);
}
}
else {
stickySidebar.css('top', '0');
}
}
});
$document.resize(function() {
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
}
});
});
}, 1000);
}else {
console.log('do not apply function because the size is not the proper one');
}
}
};
});
and the html part
<div class="col-md-3">
<div sticky>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Sports</h3><br>
</div>
<div class="panel-group">
<div class="scroll-sidebars">
<accordion close-others="false">
<accordion-group ng-repeat="sport in sports">
<accordion-heading>
<div>
{{::sport.name}}
</div>
</accordion-heading>
<div>
{{::league.name}}
</div>
</accordion-group>
</accordion>
</div>
</div>
</div>
You can use vh on your css, no need to use JS, however, if you need support for old browsers you'll need JS :(
.scroll-sidebars {
height: 100vh;
}
.scroll-sidebars { max-height: 90%; }
Defining a px number will always cause the section to take up that many pixels. No matter the screen size. so if I have a large screen with a low resolution, the same issue occurs.
When using percentages, the CSS uses the browser's height and width to determine how large to make the containing section.
Instead of $document.resize() use $window.onresize which is pure javascript onresize event. Before doing this add $window dependency
CODE
$window.onresize = function() {
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
}
};
Hope this could help you, Thanks.
You could use the function calc assuming you do not care about old browsers not supporting it :
.scroll-sidebars {
max-height: calc(100% - 50px);
}
The above rule will set the height to 100% of the container's height, minus 50px (adjust this value to your needs).
You could define a height according to the viewport height. The viewport is the visible portion of the document. Note that you can use it with these browsers. The following makes use of the vh unit, which stands for viewport height.
.scroll-sidebars {
max-height: calc(100vh - 100px);
}