I stack two circles over an image, using the position and overflow properties.
It works fine but I have the circle running over the image on left and right (not top and left.
Here is the image : Circle overflowing
Here is the CSS.
.mainContainer {
background-color: #A6A4AA
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
border-radius: 0 0 8px 8px;
background-color: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
}
.ajustement {
opacity: 0.5;
}
The code source (ejs+bootstrap) : the row is a child of mainContainer
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage"></img>
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
How can I draw my circles into the images only, without running out the border ?
Here is what I would like :
Do you looking something like this:
body{
margin: 0;
background-color: #A6A4AA
}
.mainContainer {
background-color: #A6A4AA;
margin: 15px auto;
width: 98%;
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border-radius: 0 0 8px 8px;
background: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
border: 3px solid #2C3756;
line-height: 0;
border-radius: 12px;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: 3px solid #2C3756;
left: -45%;
top: -78px;
height: calc(100% + 78px);
}
.impact{
width: 20px;
height: 20px;
border-color: #000;
left: 10%;
top: 10%;
}
.ajustement {
opacity: 0.5;
}
<div class="mainContainer">
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Papageitaucher_Fratercula_arctica.jpg/800px-Papageitaucher_Fratercula_arctica.jpg">
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
</div>
Related
My message display out of my DIV HTML
How do I resolve this?
I need to display this message within the div. If I repeat this code, it appears in the same place every time, I just want to display it in its own div and not invade others. My big problem it's the display message. Does anyone know how to resolve this?
<html>
<head>
</head>
<body>
jhadfjadfjasf
ajdfhkhasdjfas
ajdfhjadfa
ajdfhkajsdfh
<div class="sidney">
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="220px" height="220px">
<div id="baselayer">
<input type="button" class="testx" value="SubLevel" onclick="showFrontLayer();" />
<input type="button" value="Job Description" onclick="showFrontLayers();"/>
<div id="bg_mask">
<div id="frontlayer">
<div class="containers">
<input type="button" value="X" onclick="hideFrontLayer();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner é a pessoa que define os itens que compõem o Product Backlog e os prioriza nas Sprint Planning Meetings.
</div>
</div>
</div>
<div id="bg_masks">
<div id="frontlayers">
<input type="button" value="X" onclick="hideFrontLayers();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner.
</div>
</div>
</div>
</div>
<style>
.sidney{
width: 250px;
height: 250px;
background-color: black;
border:20px;
}
</style>
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="170px" height="150px">
<style>
#testx{
position: absolute;
top: 0px;
left: 0px%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;}
#bg_mask{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
#bg_masks {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayers {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style>
<script>
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}
</script>
<script>
function showFrontLayers() {
document.getElementById('bg_masks').style.visibility='visible';
document.getElementById('frontlayers').style.visibility='visible';
}
function hideFrontLayers() {
document.getElementById('bg_masks').style.visibility='hidden';
document.getElementById('frontlayers').style.visibility='hidden';
}
</script>
</body>
</html>
How do I resolve this?
add position: relative; to this class .sidney (you can find it on line 31)
I have a page that I need to convert to rtl.
The active tab & tab arrow position doesn't match.
I need to change the tab arrow position from TAB 1 to TAB 2 and vice versa.
I already changed some js value but in vain
HTML :
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS :
body {
direction:rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0,-12px,0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] { display: none; }
.search-type label {
background-color: #fff;
color: #333;
cursor: pointer;
display:inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
float: right;
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
right: 0;
transform: translate3d(-3px,0,0);
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
.main-search-box.no-shadow {
box-shadow: none;
padding: 0;
margin: 0;
}
.search-container .main-search-input input {
font-weight: 500;
font-size: 17px;
height: 57px !important;
float: right;
box-sizing: border-box;
border: none;
float: right;
height: auto;
}
.search-container .main-search-input button.button {
width: initial;
min-width: 100px;
max-width: 100px;
margin: 0;
font-size: 18px;
position: relative;
margin-right: 20px;
flex: 0 auto;
height: 57px;
}
.search-container .main-search-input button.button i {
position: relative;
right: 2px;
}
JS :
(function($){
"use strict";
$(document).ready(function(){
function searchTypeButtons() {
// Radio attr reset
$('.search-type label.active input[type="radio"]').prop('checked',true);
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css('right', arrowDist + (buttonWidth/2) );
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
'right': arrowDist + (buttonWidth/2),
'transition':'right 0.4s cubic-bezier(.87,-.41,.19,1.44)'
});
});
}
// Init
if ($(".main-search-form").length){
searchTypeButtons();
$(window).on('load resize', function() { searchTypeButtons(); });
}
// ------------------ End Document ------------------ //
});
})(this.jQuery);
I'm using bootstrap, bootstrap rtl flipped & jquery 2.2.0 as external ressources.
Here's the snippet:
https://jsfiddle.net/s3hy37nd/5/
Can someone help with that?
So many errors... I can only say I tried to comment them all inside the code so... yeah it's all there:
"use strict";
jQuery(function($) { // DOM ready and $ alias secured
// Radio attr reset (on DOM ready... makes sense?)
$('.search-type label.active input[type="radio"]').prop('checked', true);
function repositionArrow() { // Use a meaningful fn name
// Positioning indicator arrow
// Width? No. You need .outerWidth! you have paddings!!
var buttonWidth = $('.search-type label.active').outerWidth();
// Again use meaningful names
// If you do console.log( $('.search-type label.active').position() );
// you'll see no `.right` property. So yeah, use .left
var posLeft = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
left: posLeft + (buttonWidth / 2)
// No need for transition here - move it to Stylesheet instead
});
}
// Init
if ($(".main-search-form").length) {
// You might want this too inside the "if"
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
repositionArrow(); // Now you have such function
});
repositionArrow();
$(window).on('load resize', repositionArrow);
}
});
body {
direction: rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0, -12px, 0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] {
display: none;
}
.search-type label {
position: relative;
/* YOU NEED SOME POSITION! */
background-color: #fff;
color: #333;
cursor: pointer;
display: inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
/*float: right; WHY? you use rtl already */
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
/*right: 0; ...Nope. See JS, we need left */
left: calc(100% - 30px);
/* calc to the rescue */
/*transform: translate3d(-3px,0,0); but why */
transition: left 0.4s cubic-bezier(.87, -.41, .19, 1.44);
/* Moved from JS */
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
<div class="parallax-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TAB 1</label>
<label><input name="tab" type="radio">TAB 2</label>
<label><input name="tab" type="radio">TAB 3</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Updated jsFiddle
I'm developing a little application using Angular 2 for somebody whose doing an experiment, and so I'm trying to fit 4 divs, each containing an image, into each 2 divs.
For some reason, all the divs (containing the images) are aligned one above the other, instead of one next to each other and only going down one row in case of wrapping. I'm expecting the guesser and describer divs to fit in the designated area: guesser left of the vertical divider and describer right to the vertical divider, and both above the horizontal divider, but they don't seem to fill the width of the area, and overflow vertically past the horizontal divider.
How the website currently looks
What I'm expecting the website to look (I edited this using Paint, it's just for illustration)
And this is my component's HTML and CSS:
div.describer {
text-align: center;
float: right;
width: 50%;
height: 80%;
}
div.describer div.container {
margin: 1em;
}
div.describer div.container img.blocked {
padding: 5px;
border: 5px solid blue;
}
div.describer div.container img.target {
padding: 5px;
border: 5px solid red;
}
div.guesser {
text-align: center;
float: left;
width: 50%;
height: 80%;
}
div.guesser div.container {
margin: 1em;
}
div.guesser div.container.blocked {
background-color: black;
display: inline-block;
}
div.guesser div.container.blocked img.blocked {
opacity: 0;
}
div.guesser div.container img.selected {
padding: 5px;
border: 5px solid red;
border-radius: 3;
}
div.vertical-divider {
position: absolute;
left: 50%;
top: 10%;
bottom: 20%;
border-left: 1px solid gray;
}
hr.horizontal-divider {
position: absolute;
left: 5%;
right: 5%;
bottom: 19%;
}
div.commands-container {
position: fixed;
left: 50%;
bottom: 10%;
transform: translate(-50%, 0%);
}
<div class="describer">
<h3>Describer</h3>
<div class="container" *ngFor="let icon of icons">
<img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, target: icon == targetIcon}">
<p *ngIf="icon == blockedIcon">Blocked</p>
<p *ngIf="icon == targetIcon">Target</p>
</div>
</div>
<div class="vertical-divider"></div>
<div class="guesser">
<h3>Guesser</h3>
<div class="container" *ngFor="let icon of icons" [ngClass]="{blocked: icon == blockedIcon}">
<img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, selected: icon == selectedIcon}">
</div>
</div>
<hr class="horizontal-divider">
<div class="commands-container">
<button (click)="startExperiment()" [disabled]="started">Start experiment</button>
<button (click)="getNextSet()" [disabled]="!started">Next set</button>
</div>
I searched for solutions on Stack Overflow and tried implementing what I found but for some reason it didn't help.
If you want the elements side by side, you should use style "display: inline-block".
And you can try wrap the content with a div and put a border layout at bottom like this:
UPDATE
Wrap the containers in a div with style display: grid; grid-template-columns: 50% 50%;
div.describer {
text-align: center;
float: right;
width: 50%;
height: 80%;
}
div.describer div.container {
margin: 1em;
}
div.describer div.container img.blocked {
padding: 5px;
border: 5px solid blue;
}
div.describer div.container img.target {
padding: 5px;
border: 5px solid red;
}
div.guesser {
text-align: center;
float: left;
width: 50%;
height: 80%;
}
div.guesser div.container {
margin: 1em;
}
div.guesser div.container.blocked {
background-color: black;
display: inline-block;
}
div.guesser div.container.blocked img.blocked {
opacity: 0;
}
div.guesser div.container img.selected {
padding: 5px;
border: 5px solid red;
border-radius: 3;
}
div.vertical-divider {
position: absolute;
left: 50%;
top: 10%;
bottom: 20%;
border-left: 1px solid gray;
}
hr.horizontal-divider {
position: absolute;
left: 5%;
right: 5%;
bottom: 19%;
}
div.commands-container {
position: fixed;
left: 50%;
bottom: 10%;
transform: translate(-50%, 0%);
}
div.div-main {
border-bottom-style: solid;
overflow: auto;
}
div.grid-containers {
display: grid;
grid-template-columns: 50% 50%;
}
<div class="describer">
<h3>Describer</h3>
<div class="grid-containers">
<div class="container" *ngFor="let icon of icons">
<img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, target: icon == targetIcon}">
<p *ngIf="icon == blockedIcon">Blocked</p>
<p *ngIf="icon == targetIcon">Target</p>
</div>
</div>
</div>
<div class="vertical-divider"></div>
<div class="guesser">
<h3>Guesser</h3>
<div class="grid-containers">
<div class="container" [ngClass]="{blocked: icon == blockedIcon}">
<img src="assets/icons/{{trialNum+1}}/{{icon}}" [ngClass]="{blocked: icon == blockedIcon, selected: icon == selectedIcon}">
</div>
</div>
</div>
</div>
<div class="commands-container">
<button (click)="startExperiment()" [disabled]="started">Start experiment</button>
<button (click)="getNextSet()" [disabled]="!started">Next set</button>
</div>
I have a map where I am toggling a class when you click on a dot/location that pops up a tooltip. The issue I'm running into is that when I click on another dot the other siblings tooltips are not going away. I tried to solve this by removing the class of the siblings on click, but when I do this the toggle stops working and I cannot click the dot again to get rid of the active tooltip.
I need the toggle on the currently active tooltip to still work but I also need the sibling tooltips to disappear as well.
I hope I explained that right. Here is a codepen: http://codepen.io/anon/pen/BzQrLV
$('.dot').click(function() {
$('div.toggle-active').removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>
Add .not($(this).next()) to your removeClass statement so you don't remove the active class from all the dots, just the dots not being clicked on.
$('.dot').click(function() {
$('div.toggle-active').not($(this).next()).removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
HTML
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>
Updated to check whether the tooltip was already being displayed before displaying it.
$('.dot').click(function() {
var displayed = $(this).next().attr('class').match('toggle-active');
$('div.toggle-active').removeClass('toggle-active');
if(!displayed){
$(this).next().toggleClass('toggle-active');
}
});
I'm trying to make the left arrow in my page change the background color of the container on click, but whenever I click it I get this error: (index):147 Uncaught ReferenceError: slide is not defined I've tried every solution available here and still no luck. Here's the jsfiddle: https://jsfiddle.net/mLr6oax0/
I would do the following:
use element.style.backgroundColor instead of your intended element.setAttribute('style', 'background-color: 'orange')
use of addEventListener with id or class hooks over HTML's onclick
Test the solution below:
var container = document.getElementById("container");
var clickable = document.getElementById('clickable');
clickable.addEventListener('click', function () {
container.style.backgroundColor = 'orange';
});
html, body {
overflow: hidden;
margin: 0;
}
.wrapper {
margin: 0;
overflow: hidden;
}
#container {
background-color: blue;
}
.container {
position: absolute;
overflow: hidden;
margin: 0;
width: 300%;
height: 520px;
display: flex;
background-color: #ccc;
}
.flex-item {
margin-top: 10px;;
margin-right: auto;
width: 500px;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
list-style: none;
}
.flex-item:first-child {
position: absolute;
left: 0px;
margin-left: 15px;
}
.flex-item:nth-child(2) {
position: absolute;
left: 500px;
margin-left: 20px;
}
.flex-item:nth-child(3) {
position: absolute;
left: 1000px;
margin-left: 20px;
}
.flex-item:nth-child(4) {
position: absolute;
left: 1500px;
margin-left: 20px;
}
li {
display: flex;
}
.left-arrow {
position: absolute;
top: 250px;
font-size: 50px !important;
}
.right-arrow {
position: absolute;
top: 250px;
right: 0px;
font-size: 50px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<title>Flex</title>
<body>
<div class="wrapper">
<ul class="container" id="container">
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
<i id='clickable' class="left-arrow fa fa-chevron-left" aria-hidden="true"></i>
<i class="right-arrow fa fa-chevron-right" aria-hidden="true"></i>
</div>
</body>