I'm trying to add a disclaimer section to the website I'm working on. I want a tab-like button at the bottom of every page which would open up a text area.
I searched codepen.io a bit and found a very simple way to do it. After removing non-relevant syntax, I tried to move the tab from the top of the page to the bottom.
Here's where I came across a problem. When the tab was at the top of the page, the text area would push down the tab when clicking on it.
Now that it's at the bottom, the textarea shows up above the tab, as the tab itselfs stays at the bottom of the page.
How do I make sure the text area pops up beneath the tab, pushing the tab up?
$(document).on('click', '#menu-tab', function() {
$('#menu-nav').slideToggle('slow');
});
body {
background-color: #333333;
text-align: center;
}
#menu-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#menu-tab {
background-color: #FC4349;
cursor: pointer;
margin: 0% 45% 0% 45%;
padding: 5px 10px;
}
#menu-nav {
display: none;
background-color: #FC4349;
margin: 0% 30% 0% 30%;
}
<body>
<div id="menu-wrapper">
<div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
<br>disclaimertextdisclaimertextdisclaimertext</div>
<div id="menu-tab" class="closed">Disclaimer</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
In case my description didn't give a clear image of the situation:
Tab at the top the of screen
Tab at the bottom of the screen
Move the html containing the disclaimer to below the tab
(Demo)
<div id="menu-wrapper">
<div id="menu-tab" class="closed">Disclaimer</div>
<div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
<br>disclaimertextdisclaimertextdisclaimertext</div>
</div>
Related
When I use Facebook's dashboard, and I just scroll down the browser, I can see only the main part(newsfeed at home) scrolled to down with infinite scrolling and another parts are fixed on side and top of the screen. How do I implement like this? I mean, scrollbar is on the right side of browser on the Facebook while the scrolling part is just the main contents part, not the inner side(I mean, not at the right side of the inner part - newsfeed). I tried to copy and clone-coding the Facebook and the left side of main(name, Friends, Watch, Group, Events, etcs) scrolled down together.
Real Question is -
How can I just scroll down the part I want, not the whole part?
Please check the image below to make sure what this question is clearly about.
https://i.stack.imgur.com/00uB6.png
Here is an example of structure
.header {
position: fixed;
top: 0px;
background: blue;
width: 100%;
}
.wrap {
display: flex;
position: relative;
top: 15px;
}
.menu {
width: 100px;
position: fixed;
}
.main {
height: 1500px;
border: 1px solid black;
margin-left:100px;
}
<div class="wrap">
<div class="header">Header</div>
<div class="menu">side menu</div>
<div class="main">main</div>
</div>
Check this sample design below. This might help.
Basically, I have used the flex layout as the one to create the page and then I've hidden the scrollbar for the news feed container.
for (var i = 1; i <= 200; i++) {
document.getElementsByClassName("container2")[0].innerHTML += 'scrollable area ' + i + '<br />';
}
* {
margin: 0;
}
.main-container {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
}
.container1 {
background-color: #a00;
flex: 0.2;
position: sticky;
top: 0;
align-self: flex-start;
}
.container2 {
background-color: #0a0;
flex: 0.8;
overflow: auto;
}
.container2::-webkit-scrollbar {
width: 10px;
}
<div class="main-container">
<!-- keeps both containers -->
<div class="container1">
<!-- container1 has page links, group links (left side of facebook) -->
Unscrollable area. This will contain the page links, group links and others. This is the left side on facebook.
</div>
<div class="container2">
<!-- container2 has the scrollable news feed -->
This is the news feed. You can use javascript to load more content when user reaches the scroll end of this element. <br />
</div>
</div>
I'm working on a gallery and managed to make it open and close by clicking two separate buttons. However, when opened I want it to be positioned above all content, the full width and height of the page and to not be able to scroll the original html (for example like when you open a picture on facebook). Currently when I try to position it absolute or fixed, it just jumps to the top of the page and I can still scroll through the rest of the html.
The html of the gallery that opens
<div class="container" id="container-one">
<div class="gallery">
<img src="1.jpg" style="max-width:100%">
</div>
<div class="gallery">
<img src="2.jpeg" style="max-width:100%">
</div>
<a class="close" onclick="Closed()">✖</a>
</div>
And the css
.container {
display: none;
position: absolute;
}
.gallery {
display: none;
height: fit-content;
width: 99vw;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.6);
background-size: 100%;
z-index: 1300;
text-align: center;
}
To open and close it I used style.display change from none to block.
I looked online but could only find codes for entire galleries with hundred lines and I couldn't figure out which part did that.
The key may be the overflow value in CSS. When overflow is hidden on body, scroll is disable. See this questions about disabling scroll.
This CSS will place your element above all, and on the whole page
.container {
position: absolute;
top: 0px;
left: 0px;
z-index: 10; /*This must be the highest z-index value of your page to be above all*/
width: 100%;
height: 100%;
}
And to disable/enable scroll dynamically, you can use:
function disableScroll() {
let body = document.querySelector("body")
body.style.height = "100%" // Make sure the height is fixed
body.style.overflow = "hidden" // Hide the overflow = disable scrolling
}
function enableScroll() {
let body = document.querySelector("body")
body.style.overflow = ""
}
So I know there are plenty of feeds about these issues and I've been through most of them yet I can't make it work. I get really lost with .js.
So I'm using very simple pop up windows that provide more contents on a topic by cicking on the title of the topic. I'm using a simple css code:
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
left: 20%;
top:25%;
width: 70%;
height: auto;
padding: 10px;
border: 6px solid #ed7d86;
background-color: white;
text-align: center;
z-index: 1002;
overflow: auto;
}
And html:
<div class="flex-item">
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='block';
document.getElementById('fade').style.display='block'">TITLE</a>
<div id="TITLE" class="white_content">Something else about TITLE.
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='none';
document.getElementById('fade').style.display='none'">Close</a></div>
</div>
This code works great until I try it on elements that are lower on the page in which case the box obviously continue showing at the set top and left position, which means that I have to scroll back up to see it. If I get rid of top and left conditions, I just end up with the box showing up randomly at some corner of the page.
I also want people to be able to leave the box just by clicking on the black_overlay area. Can anyone recommend a fix that would work with my code?
Ah well, not much success with my question. Wanted to let you know that I changed the position of the .white_content to fixed and it solved my problem for positioning. I'm still working on closing the window by clicking outside the box without changing all my code.
I have my logo (an image inside a div) with these properties in jade-
style="opacity:1;filter:alpha(opacity=100);display:block;border-bottom: thick solid #000000;background:rgba(255, 255, 255, .8)"
This div is on the page top and a report displayed as the main content. I am using stickyjs to keep the logo fixed on scrolling down the page.
But, when i scroll down, the page content behind the logo is not hidden and is visible as text behind the image as,
How can i set options for background-color, to hide the text contents lying underneath?
Ok, without knowing your site architecture, here's a sample of what you could do...
Working CodePen Demo
HTML
<div id="main">
<div id="header">
<img src="http://www.myiconfinder.com/uploads/iconsets/256-256-1c93adf1d2e3c02dcb629a40fb065e81.png" />
</div>
<div id="content">
<p>This is the body content.</p>
...
<p>
<p>This is the body content.</p>
</div>
</div>
CSS
#header {
height: 60px;
width: 100%;
position: fixed; /* Keeps the header fixed at the top of the page */
top:0;
z-index: 10;
background-color: #fff; /* opaque background to hide text */
margin: 0;
padding: 0;
}
#header img {
height: 100%;
}
#content {
position: absolute; /* begin content beneath header */
top: 55px;
z-index: -1; /* hide the body text */
}
You don't need JS to fix a header at the top of the page. I'd suggest simplifying and using CSS positioning to make sure the header bar stays at the top of the page.
In my webpage I have have a block with an background and below I have a button that should continue the background.
Here is an example. The left image is what my webpage is now, and the right image is what the webpage should be. You can see that the background continues on the button.
My code structure is something like:
<div id="section-1">
<div class="shown-content">
<div class="background"></div>
<div class="content">
... here are shown contents ...
</div>
</div>
<div class="hidden-content">
... here are hidden contents ...
</div>
<div class="button-content">
<span class="button">FOLD OUT</span>
</div>
</div>
The functionality is that when you click on the button, it triggers the JQuery slideToggle and it shows/hides the hidden-content div.
My idea is to set the button background the same width and height than the content background and then position it where appropriate. But I'm a bit lost because I don't find any way of doing this, and maybe you know a better way.
Let's say your placeholder for the image is 100px in height and the button is 30px.
Let's say your button always are in the center of the main image div.
Then you need an image that is 130px high, where the background position is set to center top and the buttons background position is set to center bottom.
Sample
.imgdiv {
background-position: center top
}
.buttdiv {
background-position: center bottom
}
If your button isn't in the center you need to adjust the "center" part of background position to make it match the main image
Your initial idea is probably the best solution.
Use background position to correctly position you div.
.button-content{
background: url('') no-repeat 200 100%;
}
Numbers afer no-repeat are X position Y position of background image.
I've found this solution, hope it will help you.
Place the fold out button absolute in the relative positioned #section-1.
While placing it absolute, it will only take the width it needs. Then we use the pseudo-classes :before and :after to fill the space on the left and the right with the background color of the body (in my example white).
The HTML looks like this (expandable with your rest code):
<div id="section-1">
<div class="hidden-content">
hidden content
</div>
<div class="button">
Fold out
</div>
</div>
And the CSS:
#section-1 {
min-height: 100px; /*use min-height so it will expand */
background: url('pic.jpg');
position: relative;
padding-bottom: 30px; /* height of .button */
overflow: hidden; /* to hide the :before and :after */
}
.button {
position: absolute;
bottom: 0;
right: 20px;
height: 30px;
width: 75px;
text-align: center;
}
.button:before, .button:after {
content: ' ';
background: white;
position: absolute;
width: 1000px;
left: -1000px;
height: 30px;
}
.button:after {
left: 100%;
}
.hidden-content {
display: none;
}
And a demo.