I have tried Lottie widget and html widget, but they only allow you to scroll to a single section (up or down). What I am trying to make is one sticky button that can jump from one section to another with each click (through all sections one by one on a single-page website). Here's the website I got the inspiration from : Brightwoodlp.com. I am still a beginner so any simpler tricks would be of great help.
The button in the website you've linked in your question is not sticky (as in position: sticky), but fixed (as in position: fixed). That means the element will be situated outside the normal element flow and stay were you move it via properties like top, right, bottom, left, margin, etc.
You can set a fixed position on an element, such as a button and center it horizontally by using CSS like this:
.your-button {
position: fixed;
z-index: 1;
left: -50%;
bottom: 2rem; /* or whatever distance from the bottom you prefer */
width: 3.2rem; /* or whatever width you prefer */
}
Related
I have a page consisting of a component Main.
Main further contains two components - NavBar and Body. Body also contains two components - ViewTable and AddPerson. Inside the ViewTable component, I want a modal to load when a field in the table is clicked. I've got the functionality right but I'm stuck at the CSS part.
Right now, the modal looks like this -
How should I go about doing so? I'm new to React and the component structure
There's a good react library called react-modal i can recommend. It's a bit hard to get into but once you get it to work it's great.
If you want to do it the vanilla way, use position: absolute for the modal. To get the transition to work, use react-transition-group to toggle the opacity and animate the transition. It'll probably take some time to get into react-transition-group since it's a bit confusing at first glance.
As suggested by #gian.gyger, react-modal with react-transition-group is the right way to go.
But, if you have already implemented the modal with plain react and want help with CSS alone, this could help. To make the modal position fixed so that it doesn't occupy space in the lower layer, we could give the following
.modal-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width:100%;
background-color: rgba(0,0,0,0.4); /* for darker background when modal is open*/
/*z-index sets the modal on the higher stack above all of the others */
z-index:10
}
.modal {
width: 50%; /* or above or lesser */
background: red; /* modal background color */
margin: 20% auto;
}
Here, I am assuming that element with modal-container class is activated only upon the desired action (like, a button click) and modal-container is an empty div that just contains within it the modal element
Reference: W3Schools
I want my navigation bar to be fixed at the top, but when I put the css coding in, all the other buttons on my page stop working.
This is my CSS
#header {
position: fixed;
left: 0;
top: 0;
bottom:200px;
padding:inherit !important;
width: 100%;
z-index:9999;
}
I have tested it and the website works fine when I take this out.
I would assume that the since your layout is fixed and you are using the position properties and z-index that your #header is above everything else and putting an "invisible barrier" between where you click and the buttons underneath all buttons below 200px from the bottom of your screen should be clickable to see for yourself try adding a background color to see what is going on. Removing the top and left positions will help and if possible you might not even need to use the z index property depending on what you are trying to achieve.
I used this blog post (see comments - I can't post more than two links because I am new to SO) to put a sticky (but not fixed) footer on my website.
It had been working everywhere on the website, until I used this blog post (see comments) to display my images on hover. Now the footer floats quite aways above the bottom of the page, but only on the pages with the image hover styles. Here is a broken page, and here is one where it is working.
I am guessing it has to do with the styles for the ul.enlarge span because when I remove those in the Chrome dev tools, the footer pops back into place, although it causes the enlarged hover images to all appear on the page (obviously not what I want).
Is there a way to both get my footer to stay on the bottom of the page (even when the content doesn't reach all the way to the bottom) and still enlarge my images when I hover???? What is causing that giant blank gap at the bottom of the page??
It's because full-sized gallery images on the broken page (hidden far left from the view window) are taking some space, you can fix the footer by changing position of the element containing those images from
ul.enlarge span {
left: -9999px;
position: absolute;
}
to
ul.enlarge span {
left: -9999px;
position: fixed;
}
So those images wont interfere with the rest of the page while 'hidden' as position: fixed; is positioning elements relative to the browser window
You can also check how and why it's broken via changing left value to 0 so u'll know what is happening in the background
edit: As suggested in the comments, you could also fix the page by fixing gallery styling
like that
ul.enlarge span {
display: none;
}
ul.enlarge li:hover span {
display: block;
position: absolute;
left: -20px;
top: -300px;
}
so it wont break your footer in the future
I'm displaying some alerts using angular-UI which is basically powered by bootstrap. However the issue is that the alerts can't be seen by the client if they are navigating to the bottom of the page. I would like to know how can I display the alerts always on top ( I think the right term is "on fixed position" )
How exactly do you want it to work? It might be easiest to use a library like PNotify or AngularJS-Toaster (plnkr).
If you want to do it yourself, you could put them in a special area. For something like this you can put the alerts in a div that is position:fixed (plnkr):
<div style="position: fixed; top: 0; right: 0">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
{{alert.msg}}
</alert>
</div>
There are various css position properties that will help you.
.class_of_your_alerts {
position: absolute; /* position: absolute rather than position: fixed
because you will be declaring left, right, top, etc. */
left: 0;
right: 0;
top: 0;
bottom: 0; /* now it covers the whole browser window because all absolute
positioning properties are set to 0. Tweak to your liking
using px or percentage */
z-index: 105; /* optional - if your application has a lot of layers that are
already absolutely positioned, you may wish to up the z-index
which is essentially the element stacking order for the current
dom node */
}
well, you should add or override alert styles with position:fixed if you want to "pin" it to the screen..
with additional properties left and top for positioning relative to viewport.
I have a website scrolling horizontally using this script:
http://tympanus.net/Tutorials/WebsiteScrolling/index.html
Sometimes with this build I end up with a vertical scrollbar because, depending on the user's resolution, the copy may run further down the visible portion of the page.
I have a bit of footer information that I want to scroll along with the page horizontally, but I want it to always be at the VERY bottom of the page if there is a scrollbar, not just the window. Using this CSS:
.footer { position: fixed; bottom: 10px; left: 100px; }
Doesn't do what I want because the footer will overlay the site's copy.
So I also tried something like this:
html, body { min-height: 900px; }
.footer { position: fixed; top: 880px; left: 100px; }
Which also didn't work because the information was still always pushed off the visible portion of the page.
So I'm looking for a solution to essentially let the footer information lay wherever it naturally falls on the page, but always fixed 100px from the left as the page scrolls horizontally.
Thanks for any help!
I'm not sure you can do this entirely with CSS. I would make a javascript (or jquery) function that detects the size of the content div (or body) and positions your footer div after it (with offset if you're using jquery, or by manipulating the top margin if not). Then you can use the .scroll method on the window to move the div's horizontal position when a user scrolls to the right.