I followed the steps in this tutorial to make a slideout footer. http://tutorialzine.com/2013/08/slideout-footer-css/
I am trying to make this footer reveal itself with a button click instead of scroll. Something similar to what was discussed here on this question Toggle a footer by clicking a button situation except
I don't want footer to slideout into view, but the whole page to slide up to reveal the footer behind. Effect similar to the Gnome-Shell-3 Message Bar.
I tried used a scroll to method to trigger page scrolling up but i am unable to disable the actual scroll. Any Idea how to achieve this?
Related
I have two problems with my page.
First:
I have 3 hover-able buttons on right side of my page. They should work like these buttons, but on my page you can scroll to see their position "outside" of the page. I guess there is problem with display, but I don't know how to make it right. Does someone know how to fix this?
Second:
When you zoom enough (bellow max-width: 992px) my navbar will move to sideNav and there should be collapse button "Přihlásit se", which should activate collapse from bootstrap and show the form, but that doesn't work too... I don't know why. :/
There is a page!
about buttons there is many ways how you can achieve such behaviour, but based on your current markup with quick fixes, you should look into adding overflow: hidden to the container, for example body in your case and move buttons block(.SideIconNav) to absolute position, .main to relative and don't forget about z-indexe's
about form - you add event.stopPropagation(); on #mySidenav which canceled click event before it fired on the button
I am trying to prevent my page from moving when i open a modal which is caused from the scrollbar. Originally the page would keep moving several pixels to the left and not move back each time i opened a new modal. I had to apply this css to solve that problem:
padding-right:0px !important;
margin-right:0px !important;
But now even though the page shifts back, when either the login modal or register modal is open and you press 'Sign up here', or 'Sign in here' from the loginmodal or registermodal, the scrollbar hides and then reappears which shifts the page before moving back to its original position. I experimented briefly and added overflow:scroll to the element, i didn't like the idea of the two scroll bars when the page is below a certain resolution.
So my question is:
How do i stop the scrollbar from hiding and reappearing when opening a modal when another model is already open which causes the page to shift left then back to its original position.
Here is my JSFiddle:
https://jsfiddle.net/w07dx8jk/
EDIT:
Would it be possible to have a blank scrollbar visible when a modal is open to stop it from disappearing which causes the shifting or is there a better method?
Usually, you simply leave the scrollbar visible, so it won't flicker:
html {overflow-y: scroll;}
You need to apply overflow-y: scroll !important to body to prevent the page move, !important is required because Bootstrap applies some of its own CSS to body and you need to override them.
And then apply overflow: hidden to .modal to prevent the double scrollbars.
Demo: https://jsfiddle.net/alan0xd7/w07dx8jk/1/
I am doing a website using a free slider from here. I want to use the slider with a nav bar at the top of the page. My problem is, whenever I add the navbar in to the page the slider begins to scroll up and down. If I remove my nav bar everything works fine. When the slider scrolls, only the arrow buttons and the page tabs at the bottom scroll but not the image. My website is MQMGaming.com. Is there anyway to keep the slider from scrolling so it is the same as without the nav bar?
Thanks in advance.
It's not the navigation itself causing the issue, it's the two br tags you have after the nav ends. If you remove them it works fine.
I am using wordpress' revolution slider that spans the home page. I want to put a scroll down button, so users are aware they can scroll. I want something like this one: https://exposure.so/
I tried putting a div on top of everything and a link that links to anchor link further down the page. It works, but I don't know how to make the div disappear when the user goes down, and reappear if they go back up. Anyone know how to fix this?
You need to calculate the scrollbar's handle position using javascript or jQuery.
If its towards the bottom of the page, hide the button, else show it.
To find scrollbar position : LINK
I got my tabs working how I want - please view the site here:
http://beelinetest.site50.net/uw_virtual_tour.html#
Does anyone know how I can hide the content at the bottom of the screen (scroll down), this is the info that slides up when the tab is clicked. But make sure it appears as it slides from behind the footer?
In CSS, add overflow: hidden to your #maincontentcontainer element.