So I'm currently working on a single screen which has multiple content views which will be accessed from a button to the side of the dynamic area. I found this repo (https://github.com/ian-de-vries/Multi-Screen.js) which achieves something very similar to what I want, only it expects a full screen, as opposed to just a certain area. So far, I've got it very close to performing as I would hope, but the last couple of hours have had me stumped. Currently there are two issues:
1) The relative divs use the % width value of their containing div, while the animation of the divs uses a % width of the entire screen, making the animated divs larger. I think the way around this is to calculate the fixed width during the animation then remove it post animation. If you set a fixed width in the css (which isn't appropriate for the site) the animation is smooth and has the correct width whilst animating, but then leads to the next issue.
2) Because of the original functionality of the js, the animations come straight down the centre, which again adds to a worse animation because of the offset content.
While I've tried to solve both of these issues, JS is beyond me despite the experience I have in other programming languages. I thought I was onto something when editing the pre/post/animation_css variables, but I couldn't get what I wanted to achieve. Anyway, below is a quick dummy site which replicates the code on the actual site well, and creates the same issues. To get this working, put these two files in a folder with the multi-screen.js file from the repo.
<!DOCTYPE html>
<html>
<head>
<!-- Scrolling Pages -->
<!-- latest jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<!-- link the css and js scripts -->
<link href="style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="multi-screen.js"></script>
<!-- run the plugin -->
<script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>
</head>
<body>
<div class="wrapper">
<div class="header">My Header</div>
<div class="contentarea">
<div style="float:left; width: 20%; background-color: red; height: 500pt;"></div>
<div style="width:80%; float: right; height: 600pt; background-color: grey;">
<div id="entry_screen" class="ms-container ms-default" style="">
go down<br>
go down 2
</div>
<div id="screen2" class="ms-container" style="">
go up<br>
go down
</div>
<div id="screen3" class="ms-container" style="">
go up<br>
go up 2
</div>
</div>
</div><!---------- Close "content-area" --------->
</div><!---------- Close "wrapper" --------->
</body>
</html>
CSS:
.ms-container {
position: fixed;
z-index: 1;
display: none;
}
.ms-default {
position: absolute;
z-index: 2;
display: block;
}
#entry_screen {
height: 500pt;
width: 80%;
background-color: green;
left: 0;
margin-left: 20%;
}
#screen2 {
height: 500pt;
width: 80%;
//float: right;
background-color: blue;
//margin-right: 10%;
margin-left: 20%;
}
#screen3 {
height: 500pt;
width: 80%;
background-color: magenta;
margin-left: 20%;
}
.wrapper {
min-height: 100%;
padding: 0 10% 0 10%;
height: auto !important;
height: 100%;
margin: 0 auto 0pt;
}
.contentarea {
position: relative;
}
.header {
text-align: center;
width: 100%;
height: 50pt;
}
a {
color: white;
}
Ended up using another alternative. The one I chose was fullPage.js. It can be used for the desired functionally despite being for full screen sites. Hope this helps anyone who wanted to achieve something similar.
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>
So, I'm learning HTML and CSS, and here's what I'm trying to do.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatdiv {
position: absolute;
display: inline-block;
transform: translateX(50%);
text-align: center;
}
.basediv {
position: relative;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="basediv" id="particle">
<!-- particles lives here -->
<div class="floatdiv"><!-- some content --></div>
</div>
</body>
</html>
I'm using this https://vincentgarreau.com/particles.js/ and this is a minimal example of my actual code. I have some text content in the floatdiv that stays in the middle of the page and over the basediv. Now the basediv has the particles animation. Now what I want to do is to blur the particles animation just below the flaotdiv. I cant blur the floatdiv, that will make the content blurry, also I can't make the basediv blur, that would make the particles blur everywhere. So how do I blur only the background of the floatdiv
Edit: Well, Its maybe confusing, but I actually want, the particles to get blurred when it goes under the floatdiv. Is it possible to do?
it is not possible to ignore child element.
you need to change html markup like this
<div class="basediv" style="position:relative;height:100px;width:100px;">
<div id="particle" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red; filter: blur(4px);z-index:-1;"> active particle js</div>
<div class="floatdiv">some text</div>
</div>
This is actually possible if you apply backdrop-filter: blur(4px) and -webkit-backdrop-filter: blur(4px) css property to floatdiv. It will blur everything underneath floatdiv's content while floatdiv's content will remain clear. However, this is not natively supported property on all browsers, in fact it's support is very limited (check the support tables here https://caniuse.com/#feat=css-backdrop-filter).
If I understand the question correctly, there is a way to solve this styling issue.
Instead of blur(), try using box-shadow method, as it would not blur the contents of floatdiv. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Here is the example that might be helpful:
.floatDivBlurred{
transform: translateX(50%);
text-align: center;
background-color: green;
height: 100px;
width: 200px;
box-shadow: 0 0 8px 5px green;
}
.floatDivBot{
transform: translateX(50%);
text-align: center;
background-color: green;
height: 100px;
width: 200px;
box-shadow: 0 50px 20px #99ff99;
}
.basediv{
position: relative;
width: 100%;
height: 100%;
}
<body>
<div class="basediv" id="particle"> <!-- particles lives here -->
<div class="floatDivBlurred">
<p><font color="white"> floatDiv blurred </font></p>
</div>
<div class="floatDivBot">
<p><font color="white"> floatDiv bottom blurred/extended </font></p>
</div>
</div>
</body>
I am from a not developer background and I am making a WordPress webpage in divi theme for my photography thing.
I want a fade out element in the slider module. So what it does is when we scroll down the page the element moved up and fade out. Example like this: http://codepen.io/nickcil/pen/sfutl/
So I put this code (below) and got the desired effect:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 150);
});
</script>
</head>
<body>
<div class="top">
<div class="title">
Fade Away
</div>
</div>
</body>
</html>
What I did, put the above codes in xyz Html(wordpress plugin) and get the Snippet Short Code and put this Snippet Short Code in the module.
But the issue is after the page loaded. The header transition/effect on scrolling to the logo is gone and I am not able see my logo on scrolling (center inline logo header style).
Can someone please help me to resolve this issue. A flow/steps/procedure to do the fade-out effect will help me a lot.
I am in a corner with this one. I have a layout with 2 containers. One of the containers represents a map (#main) and needs to stay in user view at all times, the other one (#sub) serves as a scroll-able content. Everything looks fine if content fits horizontally. However as soon as the horizontal bar appears (resize the window to replicate), the scroll-able content overlaps the fixed content and I am out of ideas how to fix it. I know of one way to fix it by positioning the fixed content absolutely instead and useing javascript to adjust its position from the top. Is there any way to fix it?
Sample code is below:
Html:
<div id="content">
<div id="main">main</div>
<div id="sub">
<strong>Sub</strong><br />
sub<br />
sub<br />
sub
</div>
</div>
Css:
#content {
width: 1200px;
margin: 0 auto;
}
#main {
position: fixed;
width: 849px;
height: 500px;
background: red;
}
#sub {
position: relative;
float: right;
width: 350px;
height: 3500px;
background: green;
}
JSFiddle link
Based on your comments it sounds like not allowing the user to scroll will solve the issue:
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
If you want them both to scroll you have to remove the fixed positioning:
#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
float:left;
}
Is there any way to allign a button to the center of the DIV.I was able to make it work with different strategies using a padding-top:2px and padding-bottom:2px or with using a margin-top and margin-bottom.But here comes the problem,basically it is a moving DIV i.e it might differ if the user have more inforamtion in it.For example user enters only work number in the input text field it will be showing up only the only work phone number.But if the user enters work,home and additional number,it need to show all the information entered,which will vary the size of the DIV.What happens is the div will increase in size and button still stays at the top of the div.Is there any way to make the button fixed at the center even after the DIV varies in size.Can it be achieved in CSS or we need to used javascript to make it work.
Vertical align is always tricky.
However where is a demo of moving centered button with CSS and moved with jQuery.
As it moves, the button remains at center as the position has not been defined.
#outer {
text-align: center;
width: 200px;
background: #ddd;
height: 200px;
position: static;
display: table;
}
#inner {
line-height: 200px;
display: table-cell;
vetical-align: middle;
}
I think it can be done with pure css, is this what you are looking for?
<html>
<head>
<style type="text/css">
.wrapper {
position: relative;
width: 300px;
height: 200px;
background: #eeeeee;
}
.button {
position: absolute;
top: 41%;
left: 33%;
}
</style>
</head>
<body>
<div class="wrapper">
<input class="button" type="button" value="Button" />
</div>
</body>
</html>