I want to make an image slider that will cover fifty percent of the homepage. but somehow I can't make these photos sensitive. I want my carousel to shrink as it resizes. I just found some solutions with Jquery on the internet, but I want vanilla javascript or pure css & scss solution. How can I make my slider and photos responsive?
For demo: https://codepen.io/BerkayAkgurgen/pen/qBqMxeo
<main>
<div class="slider-container">
<div class="slider">
<div class="slider-img">
<img src="./img/batman-banner.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img class="deneme2" src="./img/lord-of-the-ring.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img src="./img/avengers.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img src="./img/batman.jpg" alt="">
</div>
</div>
</div>
</main>
img {
display: block;
width: 100vw;
height: 100%;
object-fit: cover;
}
main {
position: relative;
width: 100vw;
height: 500px;
}
.slider {
width: 100vw;
max-height: 500px;
}
.slider-img {
width: 100vw;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
This is more of a problem solving question. I'm trying to leverage the native in-page scrolling that browsers give to allow mobile users to skip to the content which they need more easily.
The issue is that I have a sticky header on the page, so using the native <a id="section1"></a>, visiting #section1 means that the scroll position is behind the sticky header.
Is there a way, using plain-old JS (or even CSS if possible!), to offset the scroll position by an amount of pixels? Or is there a more elegant JS solution for this which would work in IE11, Edge, Chrome & FF?
<header> ... </header> <!-- site-wide sticky header using position: sticky -->
<main>
<nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
Top
Bottom
</nav>
<div class="content">
<section>
<a id="top"></a>
...
...
...
</section>
...
<section>
<a id="bottom"></a>
...
...
...
</section>
</div>
</main>
If you know the heights of the headers then you can change the top of the anchor like the below:
header {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
background: yellow;
width: 100%;
height: 40px;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 40px; /* required */
background: red;
width: 100%;
height: 20px;
}
section > a {
position: relative;
top: -60px;
}
section > div {
height: 500px;
width: 100%;
}
#topDiv {
background: blue;
}
#bottomDiv {
background: green;
}
<header> ... </header> <!-- site-wide sticky header using position: sticky -->
<main>
<nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
Top
Bottom
</nav>
<div class="content">
<section>
<a id="top"></a>
<div id="topDiv" style="height: 500px; width: 100%" >
Content
</div>
</section>
<section>
<a id="bottom"></a>
<div id="bottomDiv" style="height: 500px; width: 100%" >
Content
</div>
</section>
</div>
</main>
I want the header of the Modal to be fixed as the modal is scrolled, but position:fixed; is not working. I am using Materialize CSS for the modal construction. But position:sticky is working.
$(document).ready(()=>{
$('#missionModal').modal();
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="">
<div style="position:fixed;width: 100%;top:0px;left:0px;height:100px;background-color:#0a2701">
</div>
<div style="margin-top:100px;height:550px">
<p>This ois naven don</p>
</div>
</div>
<div style="position: absolute;width: 100%;bottom:0px;left:0px;" class="modal-footer">
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>
Maybe try this one. I reconstructed your HTML and CSS code:
Just identify which is your header and give a fixed height on your modal body to be scrollable. And, materialize css has a default overflow-y: auto I just give it initial so that the whole modal will be not scrollable.
Please take a look at my code:
$(document).ready(()=>{
$('#missionModal').modal();
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.modal {
overflow: initial !important;
}
.modal-header {
height: 100px;
background: #0a2701;
font-size: 40px;
padding: 20px;
color: #ffffff;
}
.modal-body {
overflow-y: auto;
height: 120px;
background: #fff;
}
.modal-body div {
height:550px
}
.modal-close {
float: right;
display: inline-block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="modal-header">This is a header.</div>
<div class="modal-body">
<div>
<p>This ois naven don</p>
</div>
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>
I got this problem that I've been trying to solve for quite a while. Ideally, I would love particles.js to have its "spawn box" stretch down to the bottom the page (7 x viewport as calculated by fullpage.js) so that when scrolling down with fullpage.js, the whole page's content just moves up one slide (hence having particles.js covering the entire height of the website from top to bottom)
This is what I got so far:
CODE
body, html {
margin: 0;
padding: 0;
}
#container {
max-width: inherit;
background: rgb(111, 210, 255);
}
#particles-js {
width: 100%;
height: 100%;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
width: 256px;
height: 256px;
margin-top: -128px;
margin-left: -128px;
z-index: 2;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="PachiSquid">
<title>PachiSquid</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" type="text/css">
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script src="https://raw.githubusercontent.com/VincentGarreau/particles.js/master/particles.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'release', 'about', 'music', 'live', 'shop', 'contact'],
scrollingSpeed: 1000,
})
})
</script>
</head>
<body id="container">
<ul id="menu">
<li data-menuanchor="home">HOME</li>
<li data-menuanchor="release">RELEASE</li>
<li data-menuanchor="about">ABOUT</li>
<li data-menuanchor="music">MUSIC</li>
<li data-menuanchor="live">LIVE</li>
<li data-menuanchor="shop">SHOP</li>
<li data-menuanchor="contact">CONTACT</li>
</ul>
<div id="fullpage">
<div id="particles-js">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<div class="section active" id="section1">
<div class="intro">
<img class="logo" src="https://gdurl.com/7GCM">
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<p>
Release
</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<p>
About
</p>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<p>
Music
</p>
</div>
</div>
<div class="section" id="section5">
<div class="intro">
<p>
Live
</p>
</div>
</div>
<div class="section" id="section6">
<div class="intro">
<p>
Shop
</p>
</div>
</div>
<div class="section" id="section7">
<div class="intro">
<p>
Contact
</p>
</div>
</div>
</div>
<script>
particlesJS("particles-js",{"particles":{"number":{"value":13,"density":{"enable":true,"value_area":1000}},"color":{"value":"#ffffff"},"shape":{"type":"image","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"https://gdurl.com/0VzA","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":41.6,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":0.6,"direction":"top","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"window","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
</script>
</body>
</html>
Basically my idea is: height: 100% is not working due to FullPage.js, so let's set a fixed height.
Here's your JSFiddle: https://jsfiddle.net/MrMavin/0gop9xp9/
Thanks to #Nic from How to get height of entire document with JavaScript?
I would like to add 6-7 transparent popups on a html page, I added 4 until now 1 and 2 are working fine, 3 and 4 do popup when I press the link but after that if I wanna close them the transparent background disappear but the middle window remain... I will attach the html code and the css (its a very simple code and even so I cant figure out whats wrong)
I appreciate all the HELP thank you all!
Thank you very much for the answer how to add the code :)
#CHARSET "ISO-8859-1";
/* This is a style of dim effect onClick on Register or Log in button - it's the transparent background*/
.black_overlay1, .black_overlay2, .black_overlay3, .black_overlay4{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
/* This is a style for log in and registration form */
.white_box {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid #ffffff;
background-color: #cee9ad;
z-index:1002;
overflow: auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Simple lightBox effect with css and javascript
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- BUTTONS for LogIn and Register -->
Energy Efficient
Cost efficient
Sustainability & Safety
Time Saving
<!-- LOG IN FORM - WRITE DOWN HERE -->
<div id="light1" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">
<p>Energy Efficient</p>
</div>
<div id="light2" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">
<p>Cost efficient</p>
</div>
<div id="light3" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">
<p>Sustainability & Safety</p>
</div>
<div id="light4" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">
<p>Time Saving</p>
</div>
<!-- Javascript for hidding div with LogIn form and the fade effect with it -->
<a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">
<div id="fade" class="black_overlay1" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'">
</div>
</a>
<a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">
<div id="fade" class="black_overlay2" onclick = "document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'">
</div>
</a>
<a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">
<div id="fade" class="black_overlay3" onclick = "document.getElementById('light3').style.display='none';document.getElementById('fade').style.display='none'">
</div>
</a>
<a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">
<div id="fade" class="black_overlay4" onclick = "document.getElementById('light4').style.display='none';document.getElementById('fade').style.display='none'">
</div>
</a>
<!-- Other content on the page -->
</body>
</html>
The error are caused by duplicate ID attribute values including the ones passed to getElementById functions.
Here's the fixed HTML code. I've converted the scripts in ONCLICK attributes to two functions in a SCRIPT block to make them more manageable and easier to read.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Simple lightBox effect with css and javascript
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function doshow(num) {
document.getElementById('light'+num).style.display='block';
document.getElementById('fade'+num).style.display='block';
}
function dohide(num) {
document.getElementById('light'+num).style.display='none';
document.getElementById('fade'+num).style.display='none';
}
</script>
</head>
<body>
<!-- BUTTONS for LogIn and Register -->
Energy Efficient
Cost efficient
Sustainability & Safety
Time Saving
<!-- LOG IN FORM - WRITE DOWN HERE -->
<div id="light1" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">
<p>Energy Efficient</p>
</div>
<div id="light2" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">
<p>Cost efficient</p>
</div>
<div id="light3" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">
<p>Sustainability & Safety</p>
</div>
<div id="light4" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">
<p>Time Saving</p>
</div>
<!-- Javascript for hidding div with LogIn form and the fade effect with it -->
<a onclick="dohide(1)" href="javascript:void(0)">
<div id="fade1" class="black_overlay1">
</div>
</a>
<a onclick="dohide(2)" href="javascript:void(0)">
<div id="fade2" class="black_overlay2">
</div>
</a>
<a onclick="dohide(3)" href="javascript:void(0)">
<div id="fade3" class="black_overlay3">
</div>
</a>
<a onclick="dohide(4)" href="javascript:void(0)">
<div id="fade4" class="black_overlay4">
</div>
</a>
<!-- Other content on the page -->
</body>
</html>