I'm working on a portfolio website that is a full browser sized container which swaps images when moving the cursor from left to right.
the header and captions are involved in the jquery script in order to change their color according to the image that is shown.
this seems to work great but the only downside is that the header & caption are not visible until the cursor is moved across the browser when you just loaded the site.
Is there a way to make the text appear upon site load? like triggering a mouseover event when it loads so the text is already there? or maybe some less complicated fix...
In any case thanks so much for the help!
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$(".caption").text($(img).attr("alt"));
$(".caption")
.text($(img).attr("alt"))
.css('color', $(img).data('color'));
$('header').css('color', $(img).data('color'))
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
header {
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -2px;
text-align: center;
z-index: 100;
-webkit-transition: all .2s;
transition: all .2s; }
header.header-about {
color: white !important;
background-color: white; }
header h1, header h2, header .about {
font-size: 1em;
font-weight: 400;
display: block;
line-height: 1.2em;
margin-bottom: 0;
padding-bottom: 0; }
header h1 {
text-align: left; }
header a {
text-decoration: none;
color: white;
line-height: 1; }
header .about {
text-align: left;
padding-bottom: 2px; }
.caption {
z-index: 100;
position: fixed;
left: 0;
right: 0;
bottom: 20px;
max-width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>website title</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<div class="left-holder">
<h1>my name</h1>
<h2>what I do</h2>
</div>
<div class="caption">
</div>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 1"/>
<img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2"/>
<img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="white" alt="Caption 3"/>
<img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4"/>
<img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 5"/>
<img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6"/>
<img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="black" alt="Caption 7"/>
<img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" data-color="black" alt="Caption 8"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
Is this okay for you?
I have just used the first image as a default one. Then the mouse events will do the rest.
Added this in init:
let defaultImage = $("#default-image");
$(".caption").text(defaultImage.attr("alt")).css('color', $(defaultImage).data('color'));
$('header').css('color', $(defaultImage).data('color'));
$.fn.swinger = function() {
return this.each(function() {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$(".caption").text($(img).attr("alt"));
$(".caption")
.text($(img).attr("alt"))
.css('color', $(img).data('color'));
$('header').css('color', $(img).data('color'))
});
})
});
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px;
}
div.swinger-container {
text-align: center;
/* ensures the image is always in the h-middle */
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
header {
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -2px;
text-align: center;
z-index: 100;
-webkit-transition: all .2s;
transition: all .2s;
}
header.header-about {
color: white !important;
background-color: white;
}
header h1,
header h2,
header .about {
font-size: 1em;
font-weight: 400;
display: block;
line-height: 1.2em;
margin-bottom: 0;
padding-bottom: 0;
}
header h1 {
text-align: left;
}
header a {
text-decoration: none;
color: white;
line-height: 1;
}
header .about {
text-align: left;
padding-bottom: 2px;
}
.caption {
z-index: 100;
position: fixed;
left: 0;
right: 0;
bottom: 20px;
max-width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>website title</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<div class="left-holder">
<h1>my name</h1>
<h2>what I do</h2>
</div>
<div class="caption">
</div>
</header>
<div class="slides">
<div class="swinger-container">
<img id="default-image" src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 1" />
<img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2" />
<img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="white" alt="Caption 3" />
<img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4" />
<img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 5" />
<img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6" />
<img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="black" alt="Caption 7" />
<img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" data-color="black" alt="Caption 8" />
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init() {
$(".swinger-container").swinger();
// Just prepare the first setup here
// Note that I have added the ID default-image to the first image
let defaultImage = $("#default-image");
$(".caption").text(defaultImage.attr("alt")).css('color', $(defaultImage).data('color'));
$('header').css('color', $(defaultImage).data('color'));
}
</script>
<script src="swinger.js"></script>
</body>
</html>
Related
All,
I want to have a JS script in which when you scroll down the header ("Banner") of the website gets another colour. (Change from transaparant to a colour). (In the future i want it to change from an image to another image.. ).
i added a JS script from this website but it does not work yet. I think i need to know which div i need to use for the scrollbar.
Can anybode help with this?
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
(".banner" , 'background-color', 'blue');
} else {
(".banner" , 'background-color', 'red');
}
});
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
color: #333955;
top: 20px;
position: fixed;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
You should change the background-color in css and also name the class in jquery proper:
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
$(".banner").css("backgroundColor", "red");
} else {
$(".banner").css("backgroundColor", "rgba(100,100,100,0.5)");
}
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
background-color: rgba(100,100,100,0.5);
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
top: 20px;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
You just need to measure the height of your banner in order to know where you need to switch the color:
$(document).scroll(function() {
var scroll_pos = $(this).scrollTop();
if (scroll_pos > $(".banner").height()) {
$(".banner").css("background-color", "blue");
} else {
$(".banner").css("background-color", "red");
}
});
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
background-color: red;
}
body {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
Use a native javascript in your html code :
<div class="banner" onscroll="myScript" ></div>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onscroll="myScript"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
and in your javascript
window.onscroll = function() {myScript()};
function myScript() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("banner").css('background-color', 'blue');
} else {
document.getElementById("banner").css('background-color', 'red');
}
}
I hope this answer will help you.
I am trying to create a collapse navbar. I was wondering if you guys can check the code because whenever I refresh the website nothing happens and the console does not say any errors are in the code. The HTML, CSS, and JavaScript code are below. I would appreciate if you can look over it and give me feedback so that I can correct my mistake. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Welcome to my Portfolio</title>
</head>
<body>
<header class="index-header">
<a href="index.html" class="pic-link"
><img src="logo/logo.png" alt="" class="pic"
/></a>
<section class="container">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</section>
<nav class="index-nav">
<ul class="ul-index">
<li class="li-index">Home</li>
<li class="li-index">About</li>
<li class="li-index">Contact</li>
<li class="li-index">Portfolio</li>
</ul>
</nav>
<main class="index-main">
<img src="img/banner.png" alt="" class="main-img" />
</main>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="contact"></section>
<section id="portfolio"></section>
<section id="case"></section>
</body>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"
></script>
<script src="js/main.js"></script>
</html>
#media screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #569188;
}
.index-header .pic-ink {
display: block;
}
.index-header .pic {
width: 100px;
height: 100px;
}
.index-header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.index-header .index-nav {
position: absolute;
top: 100px;
right: 0;
background-color: #569188;
width: 40vw;
height: 40vh;
z-index: 3;
opacity: 0;
}
.index-nav .ul-index {
display: flex;
flex-direction: column;
}
.ul-index .li-index {
display: flex;
justify-content: center;
padding: 15px;
font-size: 18px;
}
.ul-index .li-index .a-index {
text-decoration: none;
color: #111;
font-weight: 900;
}
.index-main {
}
.index-main .main-img {
width: 100vw;
height: 200px;
margin-bottom: 20px;
}
}
function showNav() {
let openBtn = document.querySelector(".container");
openBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "40vw";
document.querySelector(".index-nav").style.height = "40vh";
document.querySelector("index-nav").style.opacity = "1";
showNav();
});
}
function hideNav() {
let closeBtn = document.querySelector(".container");
closeBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "0";
document.querySelector(".index-nav").style.height = "0";
document.querySelector(".index-nav").style.opacity = "0";
hideNav();
});
}
There are a couple of things that need attention here. You should enclose the styling and javascript codes inside <style> and <script> tags if you want to keep them all in one file.
Also, see the modifications to the showNav and hideNav functions.
document.querySelector("index-nav") -> document.querySelector(".index-nav")
The class should be preceded by a .
showNav should call hideNav after execution to achieve the toggle event
function showNav() {
let openBtn = document.querySelector(".container");
openBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "40vw";
document.querySelector(".index-nav").style.height = "40vh";
document.querySelector(".index-nav").style.opacity = "1";
hideNav();
});
}
function hideNav() {
let closeBtn = document.querySelector(".container");
closeBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "0";
document.querySelector(".index-nav").style.height = "0";
document.querySelector(".index-nav").style.opacity = "0";
showNav();
});
}
#media screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #569188;
}
.index-header .pic-ink {
display: block;
}
.index-header .pic {
width: 100px;
height: 100px;
}
.index-header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.index-header .index-nav {
position: absolute;
top: 100px;
right: 0;
background-color: #569188;
width: 40vw;
height: 40vh;
z-index: 3;
opacity: 0;
}
.index-nav .ul-index {
display: flex;
flex-direction: column;
}
.ul-index .li-index {
display: flex;
justify-content: center;
padding: 15px;
font-size: 18px;
}
.ul-index .li-index .a-index {
text-decoration: none;
color: #111;
font-weight: 900;
}
.index-main {
}
.index-main .main-img {
width: 100vw;
height: 200px;
margin-bottom: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Welcome to my Portfolio</title>
</head>
<body onload="showNav()">
<header class="index-header">
<a href="index.html" class="pic-link"
><img src="logo/logo.png" alt="" class="pic"
/></a>
<section class="container">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</section>
<nav class="index-nav" >
<ul class="ul-index">
<li class="li-index">Home</li>
<li class="li-index">About</li>
<li class="li-index">Contact</li>
<li class="li-index">Portfolio</li>
</ul>
</nav>
<main class="index-main">
<img src="img/banner.png" alt="" class="main-img" />
</main>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="contact"></section>
<section id="portfolio"></section>
<section id="case"></section>
</body>
</html>
I tried to make an infinite image carousel in vanilla Javascript without buttons . The carousel is looping over images but i have trouble with transition effect . It sloud make a smooth ease-in-out transition to the next picture. I tried to debug this code for few hours but I have no idea how to solve this problem.
const slider = document.querySelector('.slider_slider');
const img = document.querySelectorAll('.photo');
var num = 1;
var size = slider.clientWidth;
var int= setInterval(
function intervals(){
update();
transition();
append();
},5000);
function update(){
slider.style.transform= "translateX("+(-size*num)+"px )";
}
function transition() {
slider.style.transition = "transform 0.9s ease-in-out";
if(num ===6 ){num = img.length - this.num;
slider.style.transition = "none";
slider.style.transform= "translateX("+(-size*num)+"px )";}
}
function append(){
const child = document.querySelector('.photo');
const cln = child.cloneNode(true);
slider.appendChild(cln);
const remove = document.querySelector('.photo');
remove.parentNode.removeChild(remove)}
html{
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.header_box{
display:flex;
margin:0 auto;
top:0;
background-color: aqua;
width: 100%;
height: 10vh;
}
.logo_box {
position: absolute;
height: 50px;
width: 50px;
background-color: lightcoral;
margin: 10px 0 0 40px;
}
#img_logo{
position: absolute;
height: 50px;
width: 50px;
z-index: 20;
}
.nav_box{
position: absolute;
right: 10px;
top:5px;
background-color: mediumblue;
padding:7px;
}
.nav_box> *{
display:flex;
flex-direction: row;
background-color: lime;
list-style: none;
padding: 10px 0 10px 0;
}
.nav_elements>li a {
padding: 10px 10px 10px 10px;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
color:rgb(53, 53, 53);
}
/* Slider 1 */
.slider_container{
position: absolute;
width: 100%;
height: 90vh;
background: black;
border: 3px solid purple;
z-index: 10;
top: 0;
left:0;
overflow: hidden;
}
.slider_slider{
display: flex;
width: 100%;
height: 100%;
}
.slider_slider> img{
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="PL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="slider_container">
<div class="slider_slider">
<img src="https://image.freepik.com/free-photo/dog-standing-hind-legs-with-copy-space_23-2148366813.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/beagle-dog-sitting-with-white-background_53876-30186.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/cute-spitz-dog_144627-12267.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/adorable-jack-russell-retriever-puppy-portrait_53876-64825.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/beagles-puppies-looking-something_1150-18193.jpg" alt="" class="photo">
<img src="https://image.freepik.com/free-photo/lovely-pets-composition-with-bulldog_23-2147997312.jpg" alt="" class="photo">
</div>
</div>
</section>
<section></section>
</body>
<script src='script.js'></script>
</html>
So I'm trying to make my website as responsive as possible but for some weird reason, I cannot apply an alternative stylesheet to my homepage via media queries for a different screen resolution.
let me explain, my homepage consists of a slideshow done in javascript however when a smaller resolution is used, the images are too big so I want to put some alternative content there using a different css sheet. I tried doing it on my other pages and it worked like a charm (note that there is no javascript within the other pages). I assume that maybe the javascript code is preventing the alternative stylesheet from loading. More specifically, I want the slideshow to show up only on 1920x1080 resolutions, on other resolutions I want other content. Sorry for the long question, I hope I'm making sense. Here is the html from my homepage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design,
professional web design">
<meta name="author" content="#">
<title>Light Designs | Welcome</title>
<link rel="stylesheet" href="index/index.css">
<link rel="stylesheet" media="screen and (max-width: 1366px)"
href="index/res.css"/>
<script src="jquery-3.2.1.js"></script>
<!--<script type="text/javascript">
$('body,html').css("overflow","hidden");-->
</script>
</head>
<body>
<header>
<div class="container">
<h1 id="logo"><a href="index.html"><img src="index/logo.png" alt="logo"/>
</a></h1>
<nav>
<ul>
<li class="current">home |</li>
<li>services |</li>
<li>about</li>
</ul>
</nav>
</div>
</header>
<div class="slider">
<ul class="slides">
<li class="slide"><img src="index/showcase.png" alt="#"/></li>
<li class="slide"><img src="index/pic4.png" alt="#"/></li>
<li class="slide"><img src="index/pic3.png" alt="#"/></li>
<li class="slide"><img src="index/pic5.png" alt="#"/></li>
<li class="slide"><img src="index/pic4.png" alt="#"/></li>
</ul>
</div>
<script type="text/javascript">
var myInterval = setInterval(function() {
console.log(new Date());
}, 1000);
</script>
<script type="text/javascript">
$(function() {
//configuration
var width = 1920
var animationSpeed = 1000;
var pause = 4000;
var currentSlide = 1;
//cache DOM
var $slider = $('.slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,
function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
});
</script>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form>
<input class="emailBox_1" type="email" placeholder="Enter Email...">
<button class="button_1" type="submit" class="button_1">
<span>Subscribe</span></button>
</form>
</div>
</section>
<footer>
<p>Light designs, Copyright © 2017</p>
</footer>
</body>
</html>
And here's the css
body {
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding: 0;
margin: 0;
background-color: #0099ff;
width: 100%;
}
/* Global */
div.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #35424a;
color: #ffffff;
padding-top: 0px;
max-height: 70px;
height: 50%;
border-bottom: #0099ff 4.5px solid;
color: white;
}
#logo {
float: left;
position: relative;
bottom: 30px;
}
nav {
float: right;
position: relative;
top: 10px;
right: 60px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
nav li {
display: inline;
}
a {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #0099ff;
}
header .current a{
color: #0099ff;
font-weight:bold;
}
.slider {
width: 1920px;
height: 780px;
overflow: hidden;
}
.slider .slides {
display: block;
width: 9600px;
height: 780px;
margin: 0;
padding: 0;
}
.slider .slide {
float: left;
list-style-type: none;
width: 1920px;
height: 780px;
}
#newsletter{
position: relative;
bottom: 10px;
color: #ffffff;
background: #35424a;
}
#newsletter form {
float:right;
margin-top: 7px;
position: relative;
bottom: 8px;
}
#newsletter h1{
margin-bottom: 0px;
float:left;
position: relative;
bottom: 5px;
}
#newsletter input[type="email"]{
padding:4px;
height:25px;
width:250px;
}
.button_1 {
display: inline-block;
border-radius: 4px;
background-color: #0099ff;
border: none;
color: #FFFFFF;
line-height: 4px;
font-size: 20px;
padding: 20px;
padding-top: 18px;
padding-bottom: -2;
width: 150px;
height: 30px;
transition: all 1s;
cursor: pointer;
margin: 5px;
position: relative;
top: 4px;
}
.button_1 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button_1 span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button_1:hover span {
padding-right: 25px;
}
.button_1:hover span:after {
opacity: 1;
right: 0;
}
footer{
background-color:#0099ff;
color: #ffffff;
text-align: center;
padding: 10px;
margin-top: 0;
position: relative;
bottom: 10px;
height: 20px;
}
footer p {
position: relative;
bottom: 6px;
}
You could use a media query (placing it after .slider) to hide the slider container:
#media (max-width: 1919px) {
.slider {
display:none;
}
}
i'm trying to insert this tab box in my section tag.. from this website http://www.9bitstudios.com/2012/11/create-a-responsive-tab-box-using-jquery-and-css/
source code download link: http://www.9bitstudios.com/demos/blog/tab-box/tab-box.zip
here is my html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Librarian's corner</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/nav-menu.css">
<link rel="stylesheet" type="text/css" href="css/body.css">
</head>
<body >
<div class="big-wrapper">
<div class="form-nav-menu">
<nav>
<ul>
<li><a id="active" href="adduser.html">ADD USER</a></li>
<li><a class="in-active" href="#">EDIT USER</a></li>
<li><a class="in-active" href="#">DELETE USER</a></li>
<li><a class="in-active" href="#"> VIEW USER</a></li>
</ul>
</nav>
</div>
<header>
<h1>The Librarian's corner</h1>
</header>
<section>
> insert tab box here <
</section>
<footer>
<h1>this is footer</h1>
</footer>
</body>
</html>
and my css code filename: nav-menu.css
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
background: orange;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
body {
display: block;
width: 100%;
}
header {
width: 100%;
background: rgba(0, 0, 12, 1); /* Fallback */
background-color: rgba(12, 12, 12, 0.5);
margin: 0;
}
header h1 {
text-align: center;
line-height: 400px;
z-index: 99;
color: #fff;
font-size: 50px;
font-family: Comic Sans, Comic Sans MS, cursive;
text-shadow: rgb(3, 3, 3) 4px 4px 4px;
height: auto;
}
section {
height: auto;
background: white;
width: 100%;
margin-top: 0px;
}
footer {
height: 150px;
background: black;
width: 100%;
margin-top: 0px;
}
.form-nav-menu {
z-index: 99;
position: fixed;
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
.form-nav-menu nav {
width: 100%;
height: 70px;
}
.form-nav-menu nav ul{
width: 100%;
height: 70px;
list-style-type: none;
}
.form-nav-menu nav ul li{
height: 70px;
width: 120px;
display: inline-block;
float: right;
}
the problem is when i trying to insert the css tab box code for the tab box located in section tag, the footer background dis align...
im wondering why, why the footer background dis aligned.. my body background is orange and the footer is black... as we can see, the black color is in the top..
I think you may need to add a min-height to your "section" tag since you've added that container:
section {
height: auto;
**min-height:300px;**
background: white;
width: 100%;
margin-top: 0px;
}