In my application I'm using vuejs with some extensions like: vuex, vue-router and more. The problem I'm having is that on every reload my application moves a bit to the left because of a scrollbar and then gets back to it's original position.
Any help?
If you dont want anyone to sroll on the page, you can just add
.className {
overflow: hidden;
}
Related
I have a background image as can be seen here https://www.nova969.com.au/win/novas-sending-you-ed-sheeran
The image is background image to the body.
When the off-canvas menu is opened, the background image shifts.
I will like to keep the background image to stay in the exact location where it was before opening the background image.
You will notice the following css is there for the body
body.has-background {
background-image: url(https://d2nzqyyfd6k6c7.cloudfront.net/nova-skins/972409-novafm-edsheeran-platwinpage-bg.jpg);
}
When the off-canvas opens, it causes background position shift. I need to ensure that the background does not shift. Can someone help me in getting this resolved?
Combining the two images into one is not an option for our case at this moment.
Also, to replicate,
Go to the link using any browser in Desktop
scroll a bit down the page.
Open the off-canvas menu (the one on the left-hand top side)
You will notice the shift of the background
If i've understood your problem correctly then the following should fix it.
Edit: it seems to only be an issue on devices over 1200px wide? If so, then apply these changes using #media (min-width: 1200px).
Make the following declaration additions to the following selectors:
.disabledInteraction {
position: relative;
}
(or delete the position: fixed; from .disabledInteraction)
and then:
.header-fixed .site-wrapper {
margin-top: 0 !important;
}
The problem lies with fixing the position of body. If you remove this declaration or change it to position: relative, you can see this stops the image moving around problem.
The problem then is that the text moves up the screen, which is caused by some JS changing the margin to -268px. Adding margin: 0 !important overrides this, but if you can you should stop the JS from adding this negative margin.
Hope this helps!
As you might of figured out, this is a standard behavior of a website. Content shifts as your available area shifts (scroll is part of visible area) causing your whole content of the page to shift 17 pixels? (Whatever the scroll is).
What you need to do is append a scroll once the sidebar is open.
I had a play with your website and it works, however there must be some javascript which removes the scroll bar.
I was going to fine the file for you, but you're returning too many files and I don't have time to go through all of them.
Selector:
body > div.site-wrapper.off-canvas-menu-overlay
Add overflow-y: scroll to that div using javascript, on sidebar open event, or when you add it in CSS make sure whatever is manipulating that Element once the sidebar is open that it stops as currently it seems to append styles on open event.
I guess you mean the "hidden" menu on the left side of the page.
The background shifts because the scrollbar is removed when you open the menu.
You could change your code so the scrollbar stays visible, or shift the background image to accomodate for this change. I'm not sure if you can do that so it will work without a flicker in every browser, so your best bet is to keep that scrollbar visible.
When I try to scroll down this page, it jumps to top? Already tried by changing the overflow: hidden; to Scroll or auto but problem is still there.
This problem persist in every browser. Please, provide an effective solution to this.
This is not a browser problem.
I am facing issues where when a user clicks on a link it redirects them to a specific div with a specific id.
I'm using jQuery for the smooth scroll feature.
The issue is when I'm at the Homepage then I click on the About page it normally scrolls there, when I click back on the About link again the page moves a bit click again and it returns to normal.
You can try it out here (https://saa-d.github.io) And all of the code is here (https://github.com/saa-d/saa-d.github.io)
Thanks in advance :)
EDIT: I've tried troubleshooting using Chrome's inspection tool, and I think the problem is with the .stick CSS class that's responsible for sticking the navbar using JS. But I am not exactly sure what's the issue and how to fix it.
It's happening because you attach and detach the nav which causes the section to shift up and down by the height of the nav.
To avoid it use position:absolute on the nav:
nav {
background-color: #595241;
height: 60px;
position: absolute;
width: 100%;
}
I'm currently trying to implement a feed of posts, where clicking on a post would open a modal. I'm using angular as a frontend framework and decided to use the bootstrap modal, since it works well with angular. Problem is, that the modal forces the body to scroll to top when showing. This is ofcourse not ideal when scrolling through a feed.
The css line below is the culprit. Why this causes the problem to occur, i do not know, but i kind of need the scrollbar to be always showing. Loaading of dynamic content would otherwise make my layout jump around.
html {
overflow-y: scroll;
}
Removing this line is fine right now, but i need to find a fix soon, as the layout would jump horizontally when loading new content, if the scrollbar is not always visible and then suddenly appearing. Does anyone have any clue as to why this causes the problem, and how i can possibly fix it?
Sounds like the modal is the problem. Make sure your modal or its outer-most container has position: fixed, as it sounds like it is disrupting the flow of the <body> element.
I'm creating a web based mobile application and looking for a way to slide between pages.
Currently I have all the pages (which are divs) set to absolute and have them placed exactly on top of each other. Only one page is visible at a time, when the user clicks a button it hides the current page and sets the button targeted page's visibility to true.
I need the page to slide though, like iOS and other mobile platforms do. Using jQuery Mobile is not an option for me (I'm creating a framework myself).
If anyone can advise me on how I can have the pages slide in rather than cut and show immediately I'd appreciate that.
Thanks
You can use css transitions to animate the div's position, e.g.
.page {
position: absolute;
transition: left 1s;
left: 100%;
}
.page.in {
left: 0
}
See also: http://jsfiddle.net/jkDUm/
It probably doesn't show the exact effect you are looking for but it demonstrates the idea...