Hide on hover jQuery - javascript

I am using javascript to show/hide text inside a div on hover.
There are 4 div blocks with the same class - .main_content
Each block has a link and text. The text is hidden by default.
When the cursor is on .main_content, only the text of this block should appear. Why does the hover function not toggle the text?
$(document).ready(function() {
function hover() {
var IndexItem = getElementsByClassName("main_content");
if (IndexItem.hover()) {
index = IndexItem.index();
IndexItem: eq(index).toggle();
};
};;
})
#font-face {
font-family: "SevillaDecor";
/* Гарнитура шрифта */
src: url(/SevillaDecor.ttf);
/* Путь к файлу со шрифтом */
}
* {
margin: 0;
padding: 0;
}
body {
font-family: "SevillaDecor", Regular;
font-variant: small-caps;
font-weight: 600;
/* font-style: oblique; */
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
text-decoration: none;
color: #0af5ec;
}
.wrapper {
position: absolute;
/* top: 0px; */
/* left: 0px; */
/* clear: both; */
width: 100%;
height: 100%;
/* overflow: hidden; */
}
.text {
/* display: block; */
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.main_content {
font-size: 30pt;
/* position: relative; */
float: left;
width: 50%;
height: 50%;
/* margin: 0; */
/* padding: 0; */
overflow: hidden;
/* background-size: cover; */
/* text-align: center !important; */
}
.main_content img {
/* position:absolute; */
/* min-width: 50%; */
/* max-width: 100%; */
/* background-size: cover; */
width: 100%;
height: 100%;
}
.block_center {
/* display:none; */
position: absolute;
width: 185pt;
height: 185pt;
/* font-size: 15pt; */
top: 50%;
left: 50%;
margin: -95pt;
overflow: hidden;
/* background-size: contain; */
/* text-align: center !important; */
}
.block_center img {
width: 100%;
height: 100%;
}
.block_center p {
display: block;
position: relative;
text-align: center;
font-size: 20px;
margin-top: 5%;
margin-bottom: 4%;
}
/*
.main_content::after {
content: ".";
display: block;
height: 0;
clear: both;
}
.main::after{
content: ".";
display: block;
height: 0;
clear: both;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="main_content">
<a href "#" class="back_image">
<img src="Images/1.jpeg" />
<div class="text">
<p> О нас </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/2.jpeg" />
<div class="text">
<p> Top </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/3.jpeg" />
<div class="text">
<p> New </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/4.jpeg" />
<div class="text">
<p> Исполнители </p>
</div>
</a>
</div>
<div class="block_center">
<a href="# " class="center_image ">
<img src="Images/vinyl.gif " />
<div class="text ">
<p> Личный кабинет </p>
<p> Гарантии </p>
<p> Оплата\Доставка </p>
<p> Контакты </p>
</div>
<!-- </a> -->
</div>
</div>

This is actually super simple.
There are two quick ways to do this. The easiest way is with the CSS :hover pseudo selector like this:
.text {
display:none;
}
.main_content:hover .text {
display: block;
}
Or with JavaScript by using the find() statement on your $(this) selector like this:
$('.main-content').mouseenter(function(){
$(this).find('.text').fadeIn();
});
$('.main-content').mouseleave(function(){
$(this).find('.text').fadeOut();
})

Pure CSS surely:
.main_content > a > .text {
display: none;
}
.main_content:hover > a > .text {
display: block;
}

Here you go with the solution https://jsfiddle.net/5ove7e46/
$(document).ready(function () {
$('.main_content').hover(function(){
$(this).find('div.text').toggle();
});
});
#font-face {
font-family: "SevillaDecor"; /* Гарнитура шрифта */
src: url(/SevillaDecor.ttf); /* Путь к файлу со шрифтом */
}
* {
margin:0;
padding:0;
}
body {
font-family: "SevillaDecor", Regular;
font-variant: small-caps;
font-weight: 600;
/* font-style: oblique; */
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
text-decoration: none;
color: #0af5ec;
}
.wrapper {
position: absolute;
/* top: 0px; */
/* left: 0px; */
/* clear: both; */
width: 100%;
height: 100%;
/* overflow: hidden; */
}
.text {
/* display: block; */
position: absolute;
display: none;
top:0;
height: 100%;
width: 100%;
}
.main_content {
font-size: 30pt;
/* position: relative; */
float: left;
width: 50%;
height: 50%;
/* margin: 0; */
/* padding: 0; */
overflow: hidden;
/* background-size: cover; */
/* text-align: center !important; */
}
.main_content img{
/* position:absolute; */
/* min-width: 50%; */
/* max-width: 100%; */
/* background-size: cover; */
width: 100%;
height: 100%;
}
.block_center {
/* display:none; */
position: absolute;
width: 185pt;
height: 185pt;
/* font-size: 15pt; */
top: 50%;
left: 50%;
margin: -95pt;
overflow: hidden;
/* background-size: contain; */
/* text-align: center !important; */
}
.block_center img {
width: 100%;
height: 100%;
}
.block_center p {
display: block;
position: relative;
text-align: center;
font-size: 20px;
margin-top: 5%;
margin-bottom: 4%;
}
/*
.main_content::after {
content: ".";
display: block;
height: 0;
clear: both;
}
.main::after{
content: ".";
display: block;
height: 0;
clear: both;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "wrapper">
<div class = "main_content" >
<a href="#" class = "back_image" >
<img src = "Images/1.jpeg"/>
<div class="text">
<p> О нас </p>
</div>
</a>
</div>
<div class = "main_content" >
<a href = "#" class = "back_image">
<img src = "Images/2.jpeg"/>
<div class = "text">
<p> Top </p>
</div>
</a>
</div>
Code changes
CSS
.text{display: none;}
JS
$('.main_content').hover(function(){
$(this).find('div.text').toggle();
});

$( ".main_content" ).hover(
function() {
$(this).show();
}, function() {
$(this).hide();
}
);

This effect can be achieved in CSS:
.main_content img {
opacity:1;
}
.main_content .text {
opacity:0;
}
.main_content .text,
.main_content img {
transition:opacity 0.6s linear;
}
.main_content:hover img {
opacity: 0;
}
.main_content:hover .text {
opacity: 1;
}
When you hover on the container, the img fades out and the text fades in, so that
only the text of this block should appear
#font-face {
font-family: "SevillaDecor";
/* Гарнитура шрифта */
src: url(/SevillaDecor.ttf);
/* Путь к файлу со шрифтом */
}
* {
margin: 0;
padding: 0;
}
body {
font-family: "SevillaDecor", Regular;
font-variant: small-caps;
font-weight: 600;
/* font-style: oblique; */
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
text-decoration: none;
color: #0af5ec;
}
.wrapper {
position: absolute;
/* top: 0px; */
/* left: 0px; */
/* clear: both; */
width: 100%;
height: 100%;
/* overflow: hidden; */
}
.text {
/* display: block; */
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.main_content {
font-size: 30pt;
/* position: relative; */
float: left;
width: 50%;
height: 50%;
/* margin: 0; */
/* padding: 0; */
overflow: hidden;
/* background-size: cover; */
/* text-align: center !important; */
}
.main_content img {
/* position:absolute; */
/* min-width: 50%; */
/* max-width: 100%; */
/* background-size: cover; */
width: 100%;
height: 100%;
}
.block_center {
/* display:none; */
position: absolute;
width: 185pt;
height: 185pt;
/* font-size: 15pt; */
top: 50%;
left: 50%;
margin: -95pt;
overflow: hidden;
/* background-size: contain; */
/* text-align: center !important; */
}
.block_center img {
width: 100%;
height: 100%;
}
.block_center p {
display: block;
position: relative;
text-align: center;
font-size: 20px;
margin-top: 5%;
margin-bottom: 4%;
}
.main_content img {
opacity:1;
}
.main_content .text {
opacity:0;
}
.main_content .text,
.main_content img {
transition:opacity 0.6s linear;
}
.main_content:hover img {
opacity: 0;
}
.main_content:hover .text {
opacity: 1;
}
/*
.main_content::after {
content: ".";
display: block;
height: 0;
clear: both;
}
.main::after{
content: ".";
display: block;
height: 0;
clear: both;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="main_content">
<a href "#" class="back_image">
<img src="Images/1.jpeg" />
<div class="text">
<p> О нас </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/2.jpeg" />
<div class="text">
<p> Top </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/3.jpeg" />
<div class="text">
<p> New </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/4.jpeg" />
<div class="text">
<p> Исполнители </p>
</div>
</a>
</div>
<div class="block_center">
<a href="#" class="center_image">
<img src="Images/vinyl.gif " />
<div class="text ">
<p> Личный кабинет </p>
<p> Гарантии </p>
<p> Оплата\Доставка </p>
<p> Контакты </p>
</div>
<!-- </a> -->
</div>
</div>

$(document).ready(function () {
$('.main_content').mouseenter(function() {
$(this).find('.text').css('display','block');
});
$('.main_content').mouseleave(function() {
$(this).find('.text').css('display','none');
});
});

Related

FadeInLeft effect when changing content

window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>

jquery Image gallery with an overlay, can't get the correct url on click because of the overlay

im trying to make a flexbox image gallery popup onclick. Almost everything works, but I have trouble getting the url of the correct image. My code get the url only of the first image, no matter which image I click. Can someone help me and point out with what Im doing wrong?
Here is the code:
$(document).ready(function() {
$(".image-overlay").click(function() {
var url = $('.content img').attr('src');
$(".modal").css("display", "block");
$(".close").css("display", "block");
$('#img01').attr('src', url);
});
});
$(document).ready(function() {
$(".image-overlay").mouseover(function() {
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function() {
$(this).css("opacity", "0");
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
.gallery {
box-sizing: border-box;
margin-top: 5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%;
/* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%;
/* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%;
/* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
#media screen and (max-width: 700px) {
.gallery-column1,
.gallery-column2,
.gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding: 1%;
/* Location of the box */
top: 20%;
width: 320px;
/* Full width */
height: auto;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
display: block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114, 208, 223, 0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>
or my codepen url: https://codepen.io/christmastrex/pen/mdVzXMd
Welcome Elka, your issue is in this line:
var url= $('.content img').attr('src');
Inside the event the keyword this refers to the current image-overlay. Said that, in order to find the image you need to select the next img object.
Hence your code will be:
var url= $(this).next('img').attr('src');
The snippet:
$(".image-overlay").click(function(){
var url= $(this).next('img').attr('src');
$(".modal").css("display","block");
$(".close").css("display","block");
$('#img01').attr('src', url);
});
$(".image-overlay").mouseover(function(){
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function(){
$(this).css("opacity", "0");
});
$(".close").click(function(){
$(".modal").css("display", "none");
});
.gallery{
box-sizing: border-box;
margin-top:5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%; /* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%; /* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%; /* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
#media screen and (max-width: 700px) {
.gallery-column1, .gallery-column2, .gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 1%; /* Location of the box */
top: 20%;
width: 320px; /* Full width */
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
display:block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114,208,223,0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>
I've changed the following line in your js
var url= $('.content img').attr('src');
to
var url = $(this).siblings('img').attr('src');
So you get the image that is the sibling of the clicked .image-overlay
/*var myVar = document.querySelectorAll('.content img');
var mySrc="";
for (var i = 0; i < myVar.length; i++) {
mySrc = myVar[i].getAttribute('src');
//alert(mySrc);
}*/
$(document).ready(function() {
$(".image-overlay").click(function() {
var url = $(this).siblings('img').attr('src');
$(".modal").css("display", "block");
$(".close").css("display", "block");
$('#img01').attr('src', url);
});
});
$(document).ready(function() {
$(".image-overlay").mouseover(function() {
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function() {
$(this).css("opacity", "0");
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
.gallery {
box-sizing: border-box;
margin-top: 5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%;
/* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%;
/* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%;
/* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
#media screen and (max-width: 700px) {
.gallery-column1,
.gallery-column2,
.gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding: 1%;
/* Location of the box */
top: 20%;
width: 320px;
/* Full width */
height: auto;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
display: block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114, 208, 223, 0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>

Display username on frontpage after login javascript

I'm having a problem displaying the username after a succesful login. Would appreciate some guidance. I've just created a small 'UserDB' in javascript from where the name displayed should be collected. I can link my login page too if needed. Thanks guys - appreciate your help.
Mathias.
HTML:
<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Registrer Pant</title>
<link rel="stylesheet" type="text/css" href="forside.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<script src="LogUd.js"></script>
</head>
<body>
<div class="header">
<!-- Log ud knap -->
<button id="logUd" onclick="logOut()">Log ud</button>
<script>
function logOut() {
document.location.href = "1logInd.html";
}
</script>
<h1>Velkommen, username</h1>
</div>
<div class ="container">
<div class ="box"><a href="Velgørenhed.html">
<div class="icon"><i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Nexus fordele</h3>
<p>Her kan du se dine optjente fordele i Cafe Nexus</p>
</div> </a>
</div>
<div class ="box"><a href="RegistreringAfPant.html">
<div class="icon"><i class="fa fa-recycle" aria-hidden="true"></i></div>
<div class="content">
<h3> Registrer pant </h3>
<p>Her kan du registere dine pant A, B eller C flasker</p>
</div> </a>
</div>
<div class ="box"><a href="Panthistorik.html">
<div class="icon"><i class="fa fa-bar-chart" aria-hidden="true"></i></div>
<div class="content">
<h3>Samlet donation</h3>
<p>Her kan du se hvor meget, du har doneret i alt</p>
</div> </a>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container
{
position: relative;
width: 1200px;
height: 300px;
margin: 50px auto;
}
/* Definerer formen for alle bokse */
.container .box
{
position: relative;
width: calc(400px - 30px);
height: calc(300px - 30px);
background: #000;
float: left;
margin: 15px;
box-sizing: border-box;
overflow: hidden;
border-radius: 10px;
}
/* Definerer den enkelte boks */
.container .box .icon
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: 0,5s;
z-index: 1;
}
/* hover settings - Mouseover funktion */
.container .box:hover .icon
{
top: 20px;
left: calc(50% - 40px);
width: 80px;
height: 80px;
border-radius: 50%;
}
.container .box .icon .fa
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 80px;
transition: 0,5s;
color: #fff;
}
.container .box:hover .icon .fa
{
font-size: 40px;
}
.container .box .content
{
position: absolute;
top: 100%;
height: calc(100%-100px);
text-align: center;
padding: 25px;
box-sizing: border-box;
transition: 0,5s;
opacity: 0;
}
.container .box:hover .content
{
top: 100px;
opacity: 1;
}
.container .box .content h3
{
margin: 0 0 10px;
padding: 0;
color: #fff;
font-size: 24px;
}
.container .box .content p
{
margin: 0 0 10px;
padding: 0;
color: #fff;
}
.container .box:nth-child(1) .icon
{
background: #B18904;
}
.container .box:nth-child(1)
{
background: #B18904;
}
.container .box:nth-child(2) .icon
{
background: #4967AA;
}
.container .box:nth-child(2)
{
background: #4967AA;
}
.container .box:nth-child(3) .icon
{
background: #BCBCBA;
}
.container .box:nth-child(3)
{
background: #BCBCBA;
}
.header {
padding: 40px;
text-align: center;
background: #4967AA;
color: white;
}
.header h1 {
font-size: 40px;
}
#logUd{
position:fixed;
right:1%;
top:1%;
float: right;
}
My userDB:
class User {
constructor(brugernavn, kodeord){
this.brugernavn = brugernavn;
this.kodeord = kodeord;
}
}
if(localStorage.getItem('User') == null) {
var userList = [];
userList.push(new User('Alexandra', 'alexandra123'));
userList.push(new User('Magnus', 'magnus123'));
userList.push(new User('Mathias','mathias123'));
userList.push(new User('Kasper','kasper123'));
userList.push(new User('123','123'));
var userListString = JSON.stringify(userList)
localStorage.setItem('User', userListString)
}

HTML Page with GridLayout and Buttons

I have the following problem:
CSS-FILE:
I have a website which I split in two parts. Top Part (the .grid.full) uses 86 % of the screen, the Bottom Part (grid.bott) uses 14% screen. (grid.full and grid.bott are in the css-file)
HTML File
I want to insert a Button in the bottom part (in CSS: grid.bott). So the grid.bott is defined in the css file as 14% height. My Button is inserted in a table and defined in the CSS (.buttbott). How can I adjust the height of the button compliant with the bottom part. I want the button height 80 percent of the size from the bottom part. The Bottom part has a height of 14% from the screen.
.wrapper {
height: 100%;
}
/* grid */
.grid {
bottom: 0;
position: absolute;
top: 0;
width: 100%;
}
/* Use 43% of the screen */
.grid .span {
background: white;
box-sizing: border-box;
float: left;
height: 43%;
position: relative;
width: 100%;
/* 3 columns */
}
/* Use 86% of the screen */
.grid .full {
background: white;
box-sizing: border-box;
float: left;
height: 86%;
position: relative;
width: 100%;
/* 3 columns */
}
/* Use 14% of the screen*/
.grid .bott {
background: #fdc400;
float: left;
height: 14%;
position: relative;
width: 100%;
/* 3 columns */
}
/* Buttons für BOTTOM */
.buttbott {
border: 1px outset blue;
background-color: darkgrey;
height: 110px;
width: 110px;
cursor: pointer;
border-radius: 10px;
font-size: 110%;
font-weight: bold;
}
<div class="grid">
<div class="wrapper">
<div class="full">
<br/>
<h3>TEST PAGE</h3>
<hr>
</div>
<div class="bott">
<div class="container">
<table id="buttons">
<tr>
<th>
<input id="index" class="buttbott" type="button" value="HOME" />
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
To make the button have a height of 80% of the height of the .bott element, we'll first need to define the height of the other elements in the .bott element. Namely:
.container,
#buttons,
#buttons tr {
height: 100%;
}
Then we can set the height of the button to 80%.
/* Buttons für BOTTOM */
.buttbott {
height: 80%;
}
Here's the full demo:
.wrapper {
height: 100%;
}
/* grid */
.grid {
bottom: 0;
position: absolute;
top: 0;
width: 100%;
}
/* Use 43% of the screen */
.grid .span {
background: white;
box-sizing: border-box;
float: left;
height: 43%;
position: relative;
width: 100%;
/* 3 columns */
}
/* Use 86% of the screen */
.grid .full {
background: white;
box-sizing: border-box;
float: left;
height: 86%;
position: relative;
width: 100%;
/* 3 columns */
}
/* Use 14% of the screen*/
.grid .bott {
background: #fdc400;
float: left;
height: 14%;
position: relative;
width: 100%;
/* 3 columns */
}
.container,
#buttons,
#buttons tr {
height: 100%;
}
/* Buttons für BOTTOM */
.buttbott {
border: 1px outset blue;
background-color: darkgrey;
height: 80%;
width: 110px;
cursor: pointer;
border-radius: 10px;
font-size: 110%;
font-weight: bold;
}
<div class="grid">
<div class="wrapper">
<div class="full">
<br/>
<h3>TEST PAGE</h3>
<hr>
</div>
<div class="bott">
<div class="container">
<table id="buttons">
<tr>
<th>
<input id="index" class="buttbott" type="button" value="HOME" />
</th>
</tr>
</table>
</div>
</div>
</div>
</div>

place a relative div under an absolute divs generated height by window

Hey there :) I'm trying to make a video fit the browser window size plus adding an image at the bottom of the browser window height. So you get the video and the image to be the only thing that is showed when you load the page. When you scroll dowm the content of the website should appear.
I've made something to illustrate the idea: http://instagib.dk/JS-test/
The problem is when I start adding the content of the site, it appears under video and image. The problem seems to be I've made it absolute and out of the documents context.
Is there any JS, Jquery solution that reads the height of the absolute content and places content after the video?
Cheers:)
<body>
<!-- Header -->
<header class="header">
<div class="header-bg">
<div class="logo-top"></div>
</div>
<nav>
<div class="menu">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<ul class="nav-list">
<li>Projects</li>
<li>Services</li>
<li>Advantages</li>
<li>Who are we</li>
<li>Work with us</li>
</ul>
</div>
</nav>
</header>
<video class="intro" autoplay loop>
<source src="video/black_clouds.mp4" type="video/mp4">
<source src="video/black_clouds.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="intro-seperator"></div>
<!-- Main content -->
<main class="content">
</main>
<!-- Footer -->
<footer>
<small>© Crafthouse 2014</small>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
divFade = $(".header-bg");
var toggleHeader = function(noAnimate) {
var threshold = 400,
fadeLength = 300,
opacity,
scrollTop = $(document).scrollTop();
if (scrollTop < threshold) {
opacity = 0;
} else if (scrollTop > threshold + fadeLength) {
opacity = 1;
} else {
if (noAnimate) {
opacity = 1;
} else {
opacity = (scrollTop - threshold) / fadeLength;
}
}
divFade.css("opacity", opacity);
};
toggleHeader(true);
$(window).scroll(function() {
toggleHeader();
});
});
</script>
The CSS:
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/*
========================================
Layout: Header
========================================
*/
.header {
width: 100%;
height: 60px;
position: fixed;
top: 0px;
color: #fff;
z-index: 9999;
}
.header-bg {
width: 100%;
height: 60px;
line-height: 60px;
vertical-align: middle;
background: #212121;
position: absolute;
opacity: 0;
font-size: 25px;
}
.logo-top {
background: url(../images/crafthouse-top-logo.png) no-repeat;
width: 171px;
height: 60px;
margin: 0 auto;
}
.menu {
width: 70px;
height: 60px;
padding-top: 20px;
position: absolute;
left: 8%;
}
.menu:hover {
background: #000;
}
.hamburger {
width: 30px;
height: 3px;
background: #fff;
margin: 0 auto;
margin-bottom: 5px;
}
.menu:hover .hamburger {
background: #00ff91;
}
.nav-list {
width: 150px;
margin-top:20px;
background: #000;
display: none;
padding: 20px 0 10px 18px;
text-transform: uppercase;
}
.nav-list li {
margin-bottom: 10px;
}
.nav-list li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.nav-list li a:hover {
color: #00ff91;
}
.menu:hover .nav-list {
display: block;
}
.intro {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
}
.intro-seperator {
background: url(../images/seperator-brush-top.png);
height: 164px;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
}
.test {
width: 100%;
height: 100%;
background: #fff;
}
/*
========================================
Layout: Content
========================================
*/
.content {
height: 2000px;
}
Use the following for your content:
main{
position:absolute;
top:100%;
}
That moves the actual content below the video (assuming main is your content-element)

Categories