Html: scrollable div with fixed background - javascript

I'm trying to get a full-screen image background with a scrollable div on its center, so I wrote this code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bio</title>
<link href="../css/layout-base.css" rel="stylesheet">
<script type="text/javascript" src="../jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(window).ready(function(){
var background = $('#background');
var scrollable = $('#scrollable-container');
var halfWhite = $('#halfWhite');
var halfBlack = $('#halfBlack');
/* calcolo dimensione finestra */
var maxWidth = $(window).width();
var maxHeight = $(window).height();
/* settaggio dimensioni immagine sfondo */
background.css("height",maxHeight);
background.css("width",maxWidth);
scrollable.css("height",maxHeight);
/* settaggio dimensioni riempimento sfondo */
halfWhite.css("height",maxHeight);
halfWhite.css("width",maxWidth/2);
halfBlack.css("height",maxHeight);
halfBlack.css("width",maxWidth/2);
});
$(window).resize(function(){
var background = $('#background');
var scrollable = $('#scrollable-container');
var halfWhite = $('#halfWhite');
var halfBlack = $('#halfBlack');
/* calcolo dimensione finestra */
var maxWidth = $(window).width();
var maxHeight = $(window).height();
/* settaggio dimensioni immagine sfondo */
background.css("height",maxHeight);
background.css("width",maxWidth);
scrollable.css("height",maxHeight);
/* settaggio dimensioni riempimento sfondo */
halfWhite.css("height",maxHeight);
halfWhite.css("width",maxWidth/2);
halfBlack.css("height",maxHeight);
halfBlack.css("width",maxWidth/2);
});
</script>
</head>
<body>
<div id="background">
<div id="halfWhite"></div>
<div id="halfBlack"></div>
<div id="scrollable-container">
<div class="content">
<div id="text"></div>
<img src="../media/index/tasto1.png"/>
<img src="../media/index/tasto2.png"/>
<img src="../media/index/tasto3.png"/>
<img src="../media/index/tasto4.png"/>
</div><!--div content -->
</div>
</div><!-- div background -->
</body>
</html>
With the relative css:
body{
overflow:hidden;
margin:0!important;
}
#background{
background-image:url(../media/index/back.png);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
}
#halfWhite{
position:relative;
background-color: white;
z-index: -10;
float: left;
}
#halfBlack{
position:relative;
background-color: black;
z-index: -10;
float: right;
}
#scrollable-container{margin-left: 15%;margin-right: 15%;background- color:rgba(0,0,0,0.00);}
.content{
height:98%;
position: relative;
top:1%;
padding-left: 15%;
padding-right: 15%;
box-shadow: -10px 2px 15px #dedede,10px -2px 15px #dedede;
-moz-box-shadow:-10px 2px 15px #dedede,10px -2px 15px #dedede;
-webkit-box-shadow:-10px 2px 15px #dedede,10px -2px 15px #dedede;
background-color:rgba(255,255,255,0.8);
}
#text{position:absolute;top:10%;width:100%;height:100000px;width:70%}
.menu{
width:15%;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.menu:hover{
-webkit-transform: scale(0.85,0.85);
-moz-transform: scale(0.85,0.85);
-o-transform: scale(0.85,0.85);
-ms-transform: scale(0.85,0.85);
transform: scale(0.85,0.85);
}
.menu img{width:100%}
#home{position:absolute;top:0px;left:0px;}
#events{position:absolute;top:0px;right:0px;}
#gallery{position:absolute;bottom:0px;left:0px;}
#disco{position:absolute;bottom:0px;right:0px;}
I want the #text div to scroll while the rest of the page has to stay fixed (so that the background is always on the same position), but when I add overflow property to the parent divs there are strange side effects (for example, the .content div goes to the very bottom of the page).
How can I achieve this behaviour? Is this the correct way to make this kind of layout?

make this #text div style="position:fixed" and the rest parts with position:absolute.

You need to place your background first in your html and give it a property of position: fixed. Then the rest of your html needs to go on top without the fixed property.

Related

How do i make the image appear at the same time as the next and to be on the rightt

The loading screen is loading to high up it needs to be under the menu section of the page to make it look more realistic, and how do I make the image appear at the same time as the text cause the image after the loading always comes up first
HTML
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/CSS" href="dropdownmenu.css">
<link rel="stylesheet" type="text/CSS" href="rainbowheading.css">
<link rel="stylesheet" type="text/CSS" href="loadingcss.css">
<script src="loading.js"></script>
<title> North Macedonia </title>
<div class="container">
<h1 class="rainbow"> The pearl of the Balkans: Macedonia </h1>
<div class="navbar">
Home
Macedonian Dispora
Cities
<div class="dropdown">
<button class="dropbtn">History
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Ancient History
Ottoman Period
Yugoslav Period
Modern History
</div>
</div>
</div>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Welcome to my website about Macedonia</h2>
<p>x</p>
</div>
<div style="display:none;" id="MyDi" class="animate-bottom">
<img src="./images/ohridindex.jpg" class="center">
</body>
CSS (For loading) This is the main CSS document
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
#myDi {
display: Float;
text-align: center;
}
Javascript:
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
document.getElementById("myDi").style.display = "block";
}
There are a number of approaches you can take. The current code says explicitly: "put #loader 200px below the top of the document" because of the top and position css properties. You could increase the top number to move it further down.
If you wanted to guarantee the loader is below the menu bar, even if the menu bar changes size, you could put it inside a relatively positioned div and remove the top property, which will make it display above the other content, but positioned relatively to the wrapper element (read more about positioning).
<!-- the navbar goes here -->
<div id="loader-wrapper">
<div id="loader" />
<div>
#loader-wrapper {
position: relative;
}
Another note about your code - make sure all your visible content is wrapped in your <body>. Right now your navbar is inside the <head>, which isn't valid.
#loader {
position: absolute;
left: 50%;
top: 200px;
transform: translate(-50%, 0);
}
Loader icon is loading in center of screen.
I see the HTML code. But The div in header should be placed in body tag.

css animation - zooming element from its position to center

This is an example of the effect I want:
http://photoswipe.com/
The same effect is used for image zooming on WhatsApp web.
I want to zoom elements (not just images) to the center, with an animation scaling element from its position to the center of the page.
The animation should be css based, JS should not be used for animation purposes.
I've tried the following code, which doesn't do the job:
<div></div>
With the css:
div {
width: 100px; height: 100px; background: blue;
transition: transform 1s
}
div:hover {
transform: scale(2);
}
And, what's the difference between animating transform: scale or width/height?
Thanks
EDIT:
Another attempt:
http://jsfiddle.net/4w06Lvms/
I have made something similar to what you want (view in full screen). You can modify it as per needs. Move pointer out of the screen to get back to original state.
Also, animating using scale is better as you might not know the exact height and width in pixels if there are multiple images and using the same scale value gives your code uniformity.
Hope it helps.
html,body{
margin:0;
}
.container{
background:yellow;
display:flex;
width:100vw;
height:100vh;
justify-content:center;
transition: 0.5s ease;
vertical-align:center;
}
.imageHover{
display:flex;
height:300px;
width:200px;
transition: 0.5s ease;
}
img{
position:absolute;
height:300px;
width:200px;
transition: 0.5s ease;
}
.container:hover > .imageHover{
height:100vh;
background-color:black;
width:100vw;
transition: 0.5s ease;
}
.container:hover > .imageHover > img{
transform:translate(240%,50%) scale(1.6);
transition: 0.5s ease;
}
<div class="container">
<div class="imageHover">
<img id="yo" src="https://picsum.photos/200/300
" alt="">
</div>
</div>
You can set the position of the image to fixed, but you will need to know the offset of x and y position of the image, after that start the animation.
In this case the offset x and y are 30px, because I've set parent div padding to 30px.
When the window is scrolled down or right. You have to recalculate the top and left values of the image. For that you'll need JS.
I've set the top and left to the offset values before I've set the position to fixed. Then the image starts moving at the right position.
On photoswipe, they are using a translate3d() function and they are using JS, too. I have no idea what they are doing.
#image {
/* top and left offset */
top: 30px;
left: 30px;
width: 200px;
height: 200px;
transition: top 2s, left 2s, transform 2s;
}
#image:hover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#offset {
background-color: beige;
height: 1000px;
/* given offset */
padding: 30px;
}
<div id="offset">
<img id="image" src="https://picsum.photos/200/300
" alt="">
</div>

JS not moving side-bar to the left when persona bar is active

Have a DNN/Evoq skin based off of this: https://startbootstrap.com/template-overviews/simple-sidebar/
Prior to DNN/Evoq 9, the control bar was at the top; no problems. Now the persona bar is on the left and it causes issues when logged in. The sidebar doesn't move since it's position is set to fixed.
So I tried adding some JS code to add a class to this sidebar to move the item left an additional 80px; this isn't working.
Any ideas? Thanks..
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 300px;
width: 0;
height: 100%;
margin-left: -300px;
overflow-y: auto;
background: #000;
background: #415A8A;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-right: 2px solid #c88d0c;
}
#sidebar-wrapper.sideadmin {
left: 380px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// When persona bar is active, move page right 80px
$(function () {
if ($('form').hasClass('personalBarContainer')) $('#sidebar-wrapper').addClass('sideadmin');
});
});
</script>
<html>
<body id="Body" style="margin-left: 80px;">
<form method="post" action="/" onsubmit="javascript:return WebForm_OnSubmit();" id="Form" enctype="multipart/form-data">
<div id="ctl15_PersonaBarPanel" class="personalBarContainer">
.....
</div>
<div id="sidebar-wrapper" class="mm-wrapper">
.....
</div>
</form>
</body>
</html>
I think your problem lies in the fact that the PersonaBar is loaded in an Iframe. With the code below you can manipulate that Iframe. It adds an extra class to that Iframe and moves it 80px to the right. It also sets the rest of the page back to the left side of the browser. Maybe this will help you get started.
<style>
.sidebar-wrapper {
border: 2px solid red;
position: absolute;
left: 80px !important;
}
.extraBodyClass {
left: 0px !important;
margin-left: 0px !important;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#personaBar-iframe").addClass('sidebar-wrapper');
$("body").addClass('extraBodyClass');
});
</script>

custom.js:6 Uncaught TypeError: Cannot read property 'width' of null

when i am trying to move image to the center that time the browser can showing the error can not read property width of null . I am trying to divide the width of the screen by 2 i can t understan why that error is showing .
var mobile = document.getElementById("mobile");
var monitor = document.getElementById("monitor");
var tab = document.getElementById("tab");
var header = document.getElementById("header");
var position = (screen.width - monitor.width)/2;
monitor.style.left = position+"px;";
function initScroll(){
if(window.pageYOffset >500){
mobile.style.left = "300px";
tab.style.right = "250px";
header.style.height = "60px";
header.style.fontSize = "25px";
}else{
header.style.height = "60px";
header.style.fontSize = "25px";
mobile.style.left = "0px";
tab.style.right = "0px";
}
}
window.addEventListener("scroll",initScroll);
*{padding: 0;margin: 0;font-family:arial;}
#header{height:100px;background-color: #354458;font-size: 40px;color:#fff; text-align:center;line-height:2.5;
position:fixed; width:100%;z-index:20;
-moz-transition: 2s height, 2s font-size;
-o-transition: 2s height, 2s font-size;
-webkit-transition: 2s height, 2s font-size;
transition: 2s height, 2s font-size;
}
#banner{background: #3a9ad9;height:400px;position:fixed;width:100%;
top:100px;font-size:50px; text-align: center; color
:#fff;z-index:10;
}
#banner > * {
margin-top:30px;
}
#content{
top:500px;
position:relative;
height:1000px;
padding-top:200px;
background-color: #fff;
z-index:15;
}
#mobile{
position: absolute;
left: 0;
z-index: 15;
top: 470px;
-moz-transition: 2s left;
-o-transition: 2s left;
-webkit-transition: 2s left;
transition: 2s left;
}
#monitar{position: relative;}
#tab{
position: absolute;
right: 0;
z-index: 15;
top: 385px;
-moz-transition: 2s right;
-o-transition: 2s right;
-webkit-transition: 2s right;
transition: 2s right;
}
<html>
<head>
<title>Java script Scroller</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script src="./js/custom.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="banner">
<h1>My Animation</h1>
<h2>First collapsable header</h2>
<h3>Apurva Kinkar</h3>
</div>
<div id="content">
<img id="mobile" src="./img/1.jpg" />
<img id="monitar" src="./img/2.png" />
<img id="tab" src="./img/3.jpg" />
</div>
</div>
</body>
</html>
You have a typo error with your <img> declaration, It has to be monitor not monitar
<img id="monitar" src="./img/2.png" />
Change this as,
<img id="monitor" src="./img/2.png" />
Hope this helps!
Firstly, your image id is wrongly spelled.
Change this :-
<img id="monitar" src="./img/2.png" />
to
<img id="monitor" src="./img/2.png" />
After changing this, you will still get the same error. This is because, when your js code runs, the img element is still not added to the DOM.
For that, make the javascript code run on document.ready function ( when the img with id "monitor" is present in the DOM ).
Here is the working example which uses jQuery's document.ready() function.
You can also use this example if your dont want to use jQuery.

Background color not fading

I put together a short script for a fellow classmate and thought I would show a nice backgound fade to make it look nicer. I can achieve the color change but it will not transition smoothly from one state to the next. I thought this would work but perhaps I am wrong or missed something.
Everything else in the script works so go ahead and use if you wish. All it does is cause a screen halt so a error or message can be displayed before doing anything else.
the template:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Message Expansion Demonstration</title>
<style>
body {
margin:0 auto;
padding:0 0;
height:100%;
width:100%;
text-align:center; }
#haltPage {
display:none;
position:absolute;
height:100%;
width:100%;
top:0px;
background-color:rgba(0, 0, 0, 0.0);
transition: background-color 1s linear .1;
-webkit-transition: background-color 1s linear .1;
-o-transition: background-color 1s linear .1;
z-index=9999;
}
.wrong {
position:relative;
padding:auto auto;
margin:auto auto;
height:250px;
width:400px;
background-color:#666;
border-bottom-left-radius:0.5em 0.5em;
border-bottom-right-radius:0.5em 0.5em;
border-top-left-radius:0.5em 0.5em;
border-top-right-radius:0.5em 0.5em;
box-shadow:5px 10px 25px #000; }
.wrong p {
padding:10px; }
</style>
<script>
function wrong ( classID )
{
var on = 'block';
var visable = 'rgba(0, 0, 0, 0.4)';
clearClass ( );
document.getElementById('haltPage').style.display = on;
document.getElementById('haltPage').style.backgroundColor = visable;
document.getElementById(classID).style.display = on;
}
function clearClass ( )
{
var off = 'none';
document.getElementById('haltPage').style.display = off;
document.getElementById('wrong1').style.display = off;
document.getElementById('wrong2').style.display = off;
document.getElementById('wrong3').style.display = off;
}
</script>
</head>
<body>
Wrong Answer One<br><br>
Wrong Answer Two<br><br>
Wrong Answer Three<br><br>
<!-- This is not seen untill called -->
<div id="haltPage">
<br><br><br>
<div id="wrong1" class="wrong">
<h1>Wrong!</h1>
<p>You are wrong!<br>Close</p>
</div>
<div id="wrong2" class="wrong">
<h1>Wrong!</h1>
<p>You are wronger! < Not a word<br>Close</p>
</div>
<div id="wrong3" class="wrong">
<h1>Wrong!</h1>
<p>You are wrongest! < duh<br>Close</p>
</div>
</div>
</body>
</html>
Try by adding an "s" behind the values for time in your CSS definition for "#haltPage":
transition: background-color 1s linear .1s;
-webkit-transition: background-color 1s linear .1s;
-o-transition: background-color 1s linear .1s;

Categories