Make html element only visible in one section of page - javascript

im looking for this problem the last 2 days but didnt find any solution.
I prepared this jsFiddle for you to show you my exact problem.
How do I make the image only visible for section 2? Like it should scroll behind the layer of section 1.
It works from section 2 into section 3 but i cant find a solution to place it behind section 1.
JsFiddle Demo
h2 {
margin: 0;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 1;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>

I added this CSS:
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
No background on section1 allowed the element to be seen through div.section1
h2 {
margin: 0;
}
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 100;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>
fiddle

Related

Close Multiple Popup Message Boxes using Vanilla Javascript

I'd like to know how to close multiple popup boxes by clicking close buttons with Pure Javascript.
I tried the code below, but it didn't work.
JavaScript
const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
button.addEventListener('click', () => {
this.parentElement.querySelector('.popup').style.display = 'none';
});
});
HTML
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
CSS
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
const buttons = Array.prototype.slice.call(document.querySelectorAll('.button'));
buttons.forEach((button) => {
button.addEventListener('click', () => {
button.parentElement.style.display ='none';
});
});
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.popup {
border: 3px solid gray;
}
.closePopup{
display:none;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
</style>
</head>
<body>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
<script>
const buttons = document.querySelectorAll('.button');
const popups = document.querySelectorAll('.popup');
buttons.forEach(function(button,index){console.log('index:',index);
let newIndex =index; button.addEventListener('click', () => {
console.log('newIndex: ',popups[newIndex]);
popups[newIndex].classList.add("closePopup");
});
});
</script>
</body>
</html>

Using data-attribute and click function to push data value to div

I am using data-attributes to hold values for product names. When a user clicks on .compProdBlock I want the data-fastName to populate within the fastTitle field.
In my attempt I am using the push and each function. I am not getting any errors, but the data is not populating.
Does anyone see what I am doing wrong? Only the top two choices have data associated with them.
var fastShowName = [];
$('.compProdBlock').click(function() {
$('.compProdBlock').each(function() {
fastShowName.push($($(this).data('fastName')));
});
$('#fastTitle').html(fastShowName);
});
#compSec2Block1,
#compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0, 0, 0, .6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div>
<div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div>
<div class="compProdBlock" data-fastName="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>
The name of the data-* attribute should be data-fast-name instead of data-fastName.
No need for loop you could set the data of the current clicked element using :
$('#fastTitle').text( $(this).data('fast-name') );
$(function() {
$('.compProdBlock').click(function() {
$('#fastTitle').text($(this).data('fast-name'));
});
$('.compProdBlock:first').click();
});
#compSec2Block1,
#compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0, 0, 0, .6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div>
<div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fast-name="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div>
<div class="compProdBlock" data-fast-name="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>
Use $('#id').attr('data-fastName') instead of $('#id').data('fastName')
If you only want to display the clicked item as title, you don't need to push all the fastName into an array.
var fastShowName = [];
$('.compProdBlock').click(function () {
$('#fastTitle').html($(this).attr('data-fastName'));
});
#compSec2Block1, #compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0,0,0,.6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div><div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div><div class="compProdBlock" data-fastName="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>
There were 2 issues in your code. First you created array and that array would not be printed inside <h3> tag. because it's still an object. you can't print that. and another is after creation on DOM. Data part will be insensitive from case. so if you taking $(this).data('fastName') then it will return undefined. you will need to use $(this).data('fastname')
var fastShowName = '';
$('.compProdBlock').click(function () {
fastShowName = '';
$('.compProdBlock').each(function () {
fastShowName = fastShowName + $(this).data('fastname');
});
console.log(fastShowName);
$('#fastTitle').html(fastShowName);
});
#compSec2Block1, #compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0,0,0,.6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div><div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div><div class="compProdBlock" data-fastName="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock" data-fastName="Standard 32b Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>
You need to modify the javascript to get the attribute 'data-fastName' of the div:
var fastShowName = [];
$('.compProdBlock').click(function () {
$('.compProdBlock').each(function () {
fastShowName.push($(this).attr('data-fastName'));
});
$('#fastTitle').html(fastShowName);
});

Adjust a Div's Style Depending on Another Div's Presence?

In the snippet provided, I have 3 sections: The first contains a single image, the second has two images, and the last one has no images.
I would like for the .image class within the first section to be 100% in width only if there is no other .image div present.
However, once there is another .image div present, (as shown in the second section), I would like it to default back to 50% width.
How should I execute this?
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
overflow: auto;
}
.image {
float: left;
display: block;
width: 50%;
line-height: 0;
}
.image img {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>
You could display the section as a table and the div.image as a table-cell. Then the image would resize according to the number of "cell's" (div.image's) present.
div.container{
display: 100%;
}
div.section{
width: 100%;
display: table;
}
div.section div.image{
display: table-cell;
}
div.section div.image img{
width: 100%;
height: auto;
}
Here's a JSFiddle:
https://jsfiddle.net/ColiniloC/Lnnkpx6L/
Figured out a simpler solution with flexbox:
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
.section {
display: flex;
flex-wrap: wrap;
overflow: hidden;
align-items: center;
margin: 0 -5px;
}
.image {
flex: 1 1 50%;
line-height: 0;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.container .image:nth-of-type(n+3) {
padding-top: 10px;
}
.image img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
</div>
</div>
<!-- 4 Images -->
<div class="container">
<h1>Section With 4 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/burger-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>

Owl Carousel Slider Arrows positioning issue

I have issue ( I think my code is not structured correctly ) with putting my owl carousel arrows exactly in the left and right side of my .container class. I am not sure how to structure it. Right Now it is working because I put them as position absolute but when I resize for small devices my left and right arrow looks so broken. I want to put them im my container which is 1200 px for desktop devices and I want to position them on the left and right side of the container. Here on the example my left and right controll arrows are missing and I do not have any clue why. I checked a lot of similar issues here and all of them are saying that I have to add my owl custom left and right controllers but when i do it via navText: [].... nothing shows on the screen here on the example.
Here is what I have until now. Any ideas ?
// Owl Carousel Slider
$("#slider").owlCarousel({
nav: true, // Show next and prev buttons
dots: true,
slideSpeed: 300,
paginationSpeed: 400,
items: 1,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: false,
itemsMobile: false,
navText: [
'<img src="https://imgur.com/zTRFaaX" alt="left">',
'<img src="https://imgur.com/zTRFaaX" alt="left">'
]
});
.container {
width: 1200px;
margin: 0 auto;
}
#slider {
position: relative;
}
#slider .item img {
display: block;
width: 100%;
height: auto;
}
.owl-nav {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
.owl-dots {
position: absolute;
bottom: 35px;
z-index: 11;
left: 50%;
transform: translateX(-50%);
}
.item div {
position: absolute;
z-index: 11;
top: 60%;
left: 0;
right: 0;
transform: translateY(-50%);
margin: 0 auto;
width: 50%;
}
.owl-title,
.owl-caption {
font-family: "Arial", sans-serif;
font-size: 70px;
color: #fff;
text-transform: uppercase;
}
.owl-text-slider-1 .owl-title {
margin-bottom: 10px;
}
.owl-text-slider-1 .owl-title:before {
content: "";
width: 52px;
display: block;
position: absolute;
top: -4px;
left: 4px;
}
.owl-caption {
font-size: 51px;
text-align: left;
}
.item .arrow-down {
top: 85%;
width: 38px;
height: 22px;
}
.prev_owl,
.next_owl {
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
position: absolute;
}
.prev_owl {
top: 50%;
right: 18%;
transform: rotate(180deg);
text-align: center;
}
.next_owl {
top: 50%;
left: 18%;
}
.carousel-caption {
position: absolute;
z-index: 1;
display: table;
width: 100%;
height: 100%;
}
.carousel-caption .slider-content-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.trickcenter {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.carousel-control:hover,
.carousel-control:focus {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<div class="container">
<div id="slider" class="owl-carousel owl-theme">
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080" title="Image" alt="Image">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
</div>
<!-- #slider -->
</div>
JSFiddle

Fader Differ from Div

so I found this cool JQuery fader which does exactly what I wanted. The background fades, but when the transistion from image to image occurs all my other divs hide and then show basically.
I want to make it so only the background image will fade and the divs won't essentially flicker. I can produce a short video if need be.
HTML and JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
<div id="wrapper">
<div id="header">
<div id="sv_title">Title</div>
<div id="sv_subtitle">Subtitle</div>
</div>
<div id="content_left">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="content_right">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
CSS:
html { overflow-x: hidden; overflow-y: hidden; }
img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}
body{
margin: 0;
padding: 0;
}
#wrap {
margin: 0;
padding: 0;
}
/* End Setup */
/* Detail */
#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7;
}
#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}
#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}
#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}
this should do the job:
function fader() {
$("#background img:first").appendTo('#background').fadeOut(3000);
$("#background img:first").fadeIn(3000);
setTimeout(fader, 4200);
}
and the fix in the html
<div id="wrap">
<span id="background">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
</span>
<div id="wrapper">
<!-- and the rest of the markup -->
it's not tested, I'm to lazy at the moment to create a fiddle and mock your images.

Categories

Resources