Mannually calling jquery mouseover function - javascript

the jquery has a set of functions in which i want to call the onmouseover function manually.
my index.php consist of a div in which it has a ease-in-out transition like this DEMO on mouseover event. i want to control the ease-in-out transition on a button click.
when i searched on this topic,i found it can be done by if($("#my_btn_id").trigger('mouseover')) . but i tried and i could not find a solution for this.


demo - http://jsfiddle.net/victor_007/dghfwz5e/1/
modify css which was on :hover change it to class .hover and toggle it using jQuery
$('.ch-item').on('click', function() {
$(this).toggleClass('hover');
});
.ch-item {
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.ch-img-3 {
background-image: url(http://tympanus.net/Tutorials/CircleHoverEffects/images/5.jpg);
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
/*for a smooth font */
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
display: block;
color: #fff;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff222;
color: rgba(255, 242, 34, 0.8);
}
.ch-item.hover {
box-shadow: inset 0 0 0 110px rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item.hover .ch-info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
body {
font-family: Cambria, Georgia, serif;
background: #f9f9f9 url(../images/bg.jpg);
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.clr {
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.main {
width: 90%;
margin: 0 auto;
position: relative;
}
.container > header {
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-align: center;
}
.container > header h1 {
font-size: 32px;
line-height: 32px;
margin: 0;
position: relative;
font-weight: 300;
color: #777;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}
.container > header h2 {
font-size: 14px;
font-weight: 300;
font-style: italic;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.1);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255, 255, 255, 0.3);
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos {
text-align: center;
display: block;
line-height: 30px;
padding: 5px 0px;
}
.codrops-demos a {
display: inline-block;
font-style: italic;
margin: 0px 4px;
padding: 0px 6px;
color: #aaa;
line-height: 20px;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* IE10+ */
background: linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
/* IE6-9 */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.codrops-demos a:hover {
color: #333;
background: #fff;
}
.codrops-demos a:active {
background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
background: #f0f0f0;
border-color: #d9d9d9;
color: #aaa;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#f6f6f6', GradientType=0);
/* IE6-9 */
}
.support-note span {
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions {
display: block;
}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="main">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Cylon</h3>
<p>by Daniel Nyari View on Dribbble
</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Cylon</h3>
<p>by Daniel Nyari View on Dribbble
</p>
</div>
</div>
</li>
</ul>
</section>

Related

Is there a way for when I hover over the avatar image text slides in?

So pretty much I have a avatar that is floating up and down, but I also want to add a way for when you hover over it, text will slide in that says my name. I don't care if it is JavaScript or CSS, I also want to keep the hover animation that happen when you hover over the image.
Here is my code so far.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Floating Avatar</title>
<link rel="stylesheet" href="./styles/main.css">
<script src="./js/main.js" defer></script>
</head>
<body>
<div class="container">
<div class="avatar">
<img src="assets/images/avatar.png" alt="avatar" class="avatarimage"/>
</a>
</div>
</div>
</body>
</html>
CSS:
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
}
h1 {
font-size: 24px;
margin: 10px 0 0 0;
font-weight: lighter;
text-transform: uppercase;
color: #eeeeee;
}
p {
font-size: 12px;
font-weight: light;
color: #333333;
}
span a {
font-size: 18px;
color: #cccccc;
text-decoration: none;
margin: 0 10px;
transition: all 0.4s ease-in-out;
&:hover {
color: #ffffff;
}
}
#keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
img { width: 1000%; height: auto; }
}
.avatarimage:hover {
transform: scale(1.05);
}
.avatarimage {
width: 100%;
transition: all .5s ease-in-out;
}

This is totally possible with CSS and isn't that hard to accomplish since you already have overflow hidden set on your .avatar class.
Basically you'll just add your name inside .avatar:
<div class="avatar">
<img src="assets/images/avatar.png" alt="avatar" class="avatarimage" />
<p class="avatarname">Your Name</p>
</div>
Then, you'll add the CSS to transition that in on the hover of .avatar:
.avatarname {
color: white;
font-size: 2rem;
left: 0;
position: absolute;
top: 0;
transform: translateX(-100%);
transition: all 0.5s ease-in-out;
}
.avatar:hover .avatarname {
transform: translateX(0%);
}
You'll also need to add position: relative; to your .avatar CSS.
Here's an example on codepen
This works, but there are some other things that we can clean up. You have a few things defined in a few places. Your img styles for example, that could be in one place, especially since you're using SCSS. Here is a cleaned up example for you:
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
background: linear-gradient(90deg, #fdbb2d 0%, #3a1c71 100%);
}
#keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
animation: float 6s ease-in-out infinite;
border: 5px white solid;
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
box-sizing: border-box;
height: 150px;
overflow: hidden;
position: relative;
transform: translatey(0px);
width: 150px;
}
.avatar img {
object-fit: cover;
height: 100%;
transition: all 0.5s ease-in-out;
width: 100%;
}
.avatar .avatarname {
color: white;
font-size: 2rem;
left: 0;
position: absolute;
top: 0;
transform: translateX(-100%);
transition: all 0.5s ease-in-out;
}
.avatar:hover img {
transform: scale(1.05);
}
.avatar:hover .avatarname {
transform: translateX(0%);
}
<div class="container">
<div class="avatar">
<img src="https://images.unsplash.com/photo-1520423465871-0866049020b7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0NjUwNjI&ixlib=rb-4.0.3&q=80" alt="avatar" class="avatarimage" />
<p class="avatarname">Your Name</p>
</div>
</div>

I'm trying to figure out how to read the state/value of a slider switch that will react when moved

I've created a sliding switch that will hide or display parts of a large form. The HTML has the following code:
<fieldset class="group">
<legend>
<h1>Form Type</h1>
</legend>
<label class="switch switch-left-right">
<input class="switch-input" type="checkbox" id="formSwitch">
<span class="switch-label" data-on="Progress" data-off="Diagnostic"></span>
<span class="switch-handle"></span>
</label>
</fieldset>
The CSS behind it is the following:
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-left-right .switch-label {
overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
width: 20px;
height: 20px;
top: 4px;
left: 0;
right: 0;
bottom: 0;
padding: 11px 0 0 0;
text-indent: -45px;
border-radius: 20px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-left-right .switch-label:before {
background: #FF7F50;
text-align: left;
padding-left: 80px;
}
.switch-left-right .switch-label:after {
text-align: left;
text-indent: 9px;
background: #FF7F50;
left: -100px;
opacity: 1;
width: 100%;
}
.switch-left-right .switch-input:checked ~ .switch-label:before {
opacity: 1;
left: 90px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
background: inherit;
}
I'm trying to set it up so that when the switch is on Diagnostic, it will unhide a group of form fields and if it's on progress it will hide the same form fields. I've tried event listeners and onclick listeners and couldn't seem to get anything working. I just need to get it as far as "if it's in one position, do this" and "if it's in the other position, do that"
This doesn't seem like it would be a challenge, but its proving to be one!

You just need to listen to "change" on the checkbox. Then you can use the element.checked property to set classes or inline-styling as I am doing in my example below
document.querySelector("#formSwitch").addEventListener("change", e => {
const hidden = document.querySelector("#hidden")
hidden.style.display = e.target.checked ? "none" : "block";
})
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-left-right .switch-label {
overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
width: 20px;
height: 20px;
top: 4px;
left: 0;
right: 0;
bottom: 0;
padding: 11px 0 0 0;
text-indent: -45px;
border-radius: 20px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-left-right .switch-label:before {
background: #FF7F50;
text-align: left;
padding-left: 80px;
}
.switch-left-right .switch-label:after {
text-align: left;
text-indent: 9px;
background: #FF7F50;
left: -100px;
opacity: 1;
width: 100%;
}
.switch-left-right .switch-input:checked ~ .switch-label:before {
opacity: 1;
left: 90px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
background: inherit;
}
<fieldset class="group">
<legend>
<h1>Form Type</h1>
</legend>
<label class="switch switch-left-right">
<input class="switch-input" type="checkbox" id="formSwitch">
<span class="switch-label" data-on="Progress" data-off="Diagnostic"></span>
<span class="switch-handle"></span>
</label>
</fieldset>
<div id="hidden">
stuff that needs to be shown / hidden
</div>

Produce elements with different data

I'm trying to write a code which will allow me to show 8 pins on the map with different data (location, images, alt text, etc.), but when I run the code I get 8 pins with the exact same data. What am I doing wrong? As far as I am concerned, the getRandomInt function should produce various data, and since it's then used in the for loop, the data should be different each time. But I suppose I don't understand something correctly so if you can, please help me.
Thanks in advance!
'use strict';
var TYPES = ['palace', 'flat', 'house', 'bungalo'];
var map = document.querySelector('.map');
var mapOverlay = document.querySelector('.map__overlay');
var pins = document.querySelector('.map__pins');
var ADS_COUNT = 8;
var getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
var similarAds = {
'author': {
'avatar': 'img/avatars/user0' + getRandomInt(1, ADS_COUNT) + '.png',
},
'offer': {
'type': TYPES[getRandomInt(0, TYPES.length - 1)],
},
'location': {
'x': getRandomInt(0, mapOverlay.offsetWidth),
'y': getRandomInt(130, 630),
}
};
var renderPin = function (pinData) {
var element = document.createElement('button');
var newImage = document.createElement('img');
element.className = 'map__pin';
element.style.top = pinData.location.y + 'px';
element.style.left = pinData.location.x + 'px';
newImage.src = pinData.author.avatar;
newImage.alt = pinData.offer.type;
element.appendChild(newImage);
return element;
};
var renderPins = function () {
var fragment = document.createDocumentFragment();
for (var i = 0; i < ADS_COUNT; i++) {
fragment.appendChild(renderPin(similarAds));
}
pins.appendChild(fragment);
};
map.classList.remove('map--faded');
renderPins();
/* Общие стили. Каркас
========================================================================== */
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Bold.woff2") format("woff2"),
url("../fonts/Roboto-Bold.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
url("../fonts/Roboto-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
url("../fonts/Roboto-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content-box-component {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.hidden {
display: none;
}
body {
max-width: 1200px;
margin: 0 auto;
color: #353535;
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
background-color: #f0f0ea;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
/* Карта с объявлениями
========================================================================== */
.promo {
position: absolute;
z-index: 1;
top: 40px;
left: 50%;
width: 211px;
height: 45px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.map {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
height: 750px;
background-color: #82bcc0;
background-image: url("../img/map.jpg");
background-repeat: no-repeat;
background-position: center bottom;
border-radius: 0 0 10px 10px;
}
.map__pins {
position: relative;
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.map__overlay {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.map__title {
width: 100%;
margin: 0;
padding: 0;
margin-top: 170px;
font-size: 85px;
font-weight: 700;
text-align: center;
color: #ffffff;
}
.map--faded .map__overlay {
opacity: 1;
}
/**
* Метка объявления
*/
.map__pin {
position: absolute;
z-index: 1;
width: 50px;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.map__pin:focus {
outline: none;
-webkit-filter: drop-shadow(0 0 5px red);
filter: drop-shadow(0 0 5px red);
}
.map__pin img {
position: absolute;
z-index: 1;
top: 5px;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
}
.map__pin:not(.map__pin--main)::after {
content: "";
position: absolute;
width: 50px;
height: 70px;
top: 0;
left: 0;
background-image: url("../img/pins.svg");
background-repeat: no-repeat;
background-position: 0 -9px;
}
.map__pin:not(.map__pin--main):hover::after,
.map__pin:not(.map__pin--main):active::after,
.map__pin--active:not(.map__pin--main)::after {
background-position: 0 -88px;
}
.map__pin:active img,
.map__pin--active img {
-webkit-box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
}
.map__pin--main {
width: 65px;
height: 65px;
cursor: move;
}
.map__pin--main img {
position: relative;
z-index: 1;
padding: 2px 6px 6px;
-webkit-transform: translateY(-7px);
-ms-transform: translateY(-7px);
transform: translateY(-7px);
border: solid 5px #ff5635;
border-radius: 50%;
background-color: #ffffff;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.map__pin--main:active img,
.map__pin--main--active img {
background-color: #ffffff;
}
.map__pin--main svg {
position: absolute;
z-index: 0;
top: -50px;
left: -47px;
width: 156px;
height: 156px;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: rotate(120deg) scale(0);
-ms-transform: rotate(120deg) scale(0);
transform: rotate(120deg) scale(0);
-webkit-transform-origin: 78px 78px;
-ms-transform-origin: 78px 78px;
transform-origin: 78px 78px;
}
.map__pin--main:hover ellipse {
fill: rgba(255, 86, 53, 0.9);
}
.map__pin--main::after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
content: "";
border: solid 5px transparent;
border-top: solid 18px #fff;
border-bottom: 0;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: translate(-50%, -6px);
-ms-transform: translate(-50%, -6px);
transform: translate(-50%, -6px);
border-top-width: 22px;
border-top-color: #ff5635;
}
.map--faded .map__pin--main svg {
-webkit-transform: rotate(-20deg) scale(1);
-ms-transform: rotate(-20deg) scale(1);
transform: rotate(-20deg) scale(1);
}
.map--faded .map__pin--main::after {
-webkit-transform: translate(-50%, -30px);
-ms-transform: translate(-50%, -30px);
transform: translate(-50%, -30px);
}
.map__pin--main text {
font-size: 7px;
font-weight: 700;
fill: #ffffff;
}
/**
* Фильтры объявления
*/
.map__filters-container {
width: 100%;
background-color: rgba(3, 28, 45, 0.5);
}
.map__filters {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 960px;
height: 46px;
margin: 0 auto;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 1;
}
.map--faded .map__filters {
opacity: 0;
}
.map__filter {
height: 30px;
margin-right: 10px;
font-size: 14px;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
.map__filter:hover {
border: 1px solid #ffaa99;
}
.map__filter:focus {
outline: none;
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
vertical-align: middle;
cursor: pointer;
background-color: #f8f8f8;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
border-radius: 3px;
}
.map__feature--wifi {
background-position: 2px 5px;
}
.map__checkbox:checked + .map__feature--wifi {
background-position: 2px -172px;
}
.map__feature--dishwasher {
background-position: 2px -25px;
}
.map__checkbox:checked + .map__feature--dishwasher {
background-position: 2px -202px;
}
.map__feature--parking {
background-position: 3px -55px;
}
.map__checkbox:checked + .map__feature--parking {
background-position: 2px -232px;
}
.map__feature--washer {
background-position: 2px -85px;
}
.map__checkbox:checked + .map__feature--washer {
background-position: 2px -262px;
}
.map__feature--elevator {
background-position: 2px -143px;
}
.map__checkbox:checked + .map__feature--elevator {
background-position: 2px -321px;
}
.map__feature--conditioner {
background-position: 3px -114px;
}
.map__checkbox:checked + .map__feature--conditioner {
background-position: 2px -291px;
}
.map__feature:hover {
-webkit-box-shadow: inset 0 0 0 1px #ffaa99;
box-shadow: inset 0 0 0 1px #ffaa99;
}
.map__feature:focus,
.map__checkbox:focus + .map__feature {
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature:active {
-webkit-box-shadow: none;
box-shadow: none;
background-color: #ff6547;
}
.map__checkbox:checked + .map__feature {
background-color: #ff6547;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}
/**
* Карточка объявления
*/
.map__card {
position: absolute;
z-index: 2;
top: 150px;
left: 20px;
padding: 10px 10px 20px;
width: 230px;
font-size: 12px;
border-radius: 5px;
background-color: #ffffff;
}
.popup__avatar {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 10px;
}
.popup__close {
position: absolute;
bottom: 100%;
right: 0;
padding: 0;
font-size: 0;
border: 0;
background: none;
}
.popup__close:active {
-webkit-transform: translate(1px, 1px);
-ms-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
.popup__close:focus {
outline: none;
-webkit-box-shadow: 0 0 10px 3px #ff6547;
box-shadow: 0 0 10px 3px #ff6547;
}
.popup__close::after {
font-size: 50px;
line-height: 40px;
display: block;
content: "×";
color: #000000;
}
.popup__title {
margin: 0;
margin-bottom: 10px;
font-size: 16px;
line-height: 18px;
}
.popup__text {
margin: 0;
margin-bottom: 10px;
}
.popup__text--price {
font-size: 22px;
font-weight: 700;
}
.popup__price span {
font-size: 16px;
}
.popup__type {
margin: 0;
margin-bottom: 5px;
}
.popup__text--capacity {
margin-bottom: 0;
}
.popup__features {
margin: 0;
padding: 0;
list-style: none;
}
.popup__features {
margin-bottom: 10px;
}
.popup__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
}
.popup__feature--wifi {
background-position: 2px 5px;
}
.popup__feature--dishwasher {
background-position: 2px -25px;
}
.popup__feature--parking {
background-position: 3px -55px;
}
.popup__feature--washer {
background-position: 2px -85px;
}
.popup__feature--elevator {
background-position: 2px -143px;
}
.popup__feature--conditioner {
background-position: 3px -114px;
}
.popup__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.popup__photo {
margin-right: 5px;
margin-bottom: 5px;
}
.popup__photo:hover {
border: 2px solid #ff5635;
}
/**
* Сообщения об успешном и неуспешном создании объявления
*/
.success,
.error {
position: fixed;
top: 0;
left: 0;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 300px;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.8);
}
.success__message,
.error__message {
position: relative;
color: #ffffff;
font-size: 50px;
font-weight: 700;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Кексобукинг</title>
</head>
<body>
<main>
<div class="promo">
<h1 class="promo__title visually-hidden">Keksobooking. Кексы по соседству</h1>
<img src="img/keksobooking.svg" alt="Keksobooking. Кексы по соседству" width="215" height="45">
</div>
<!-- Карта объявлений -->
<section class="map map--faded">
<!-- Метки объявлений -->
<div class="map__pins">
<div class="map__overlay">
<h2 class="map__title">И снова Токио!</h2>
</div>
<button class="map__pin map__pin--main" style="left: 570px; top: 375px;">
<img src="img/muffin-red.svg" width="40" height="44" draggable="false" alt="Метка объявления">
<svg viewBox="0 0 70 70" width="156" height="156" aria-label="Метка для поиска жилья">
<defs>
<path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" id="tophalf" />
</defs>
<ellipse cx="35" cy="35" rx="35" ry="35" fill="rgba(255, 86, 53, 0.7)" />
<text><textPath xlink:href="#tophalf" startOffset="0">Поставь меня куда-нибудь</textPath></text>
</svg>
</button>
</div>

The problem is in your variable similarAds. You have already defined it once and use the same value in your loop. So the simple way is to put your variable into the loop to redefined it with every new step.
'use strict';
var TYPES = ['palace', 'flat', 'house', 'bungalo'];
var map = document.querySelector('.map');
var mapOverlay = document.querySelector('.map__overlay');
var pins = document.querySelector('.map__pins');
var ADS_COUNT = 8;
var getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
var renderPin = function (pinData) {
var element = document.createElement('button');
var newImage = document.createElement('img');
element.className = 'map__pin';
element.style.top = pinData.location.y + 'px';
element.style.left = pinData.location.x + 'px';
newImage.src = pinData.author.avatar;
newImage.alt = pinData.offer.type;
element.appendChild(newImage);
return element;
};
var renderPins = function () {
var fragment = document.createDocumentFragment();
for (var i = 0; i < ADS_COUNT; i++) {
let similarAds = {
'author': {
'avatar': 'img/avatars/user0' + getRandomInt(1, ADS_COUNT) + '.png',
},
'offer': {
'type': TYPES[getRandomInt(0, TYPES.length - 1)],
},
'location': {
'x': getRandomInt(0, mapOverlay.offsetWidth),
'y': getRandomInt(130, 630),
}
};
fragment.appendChild(renderPin(similarAds));
}
pins.appendChild(fragment);
};
map.classList.remove('map--faded');
renderPins();
/* Общие стили. Каркас
========================================================================== */
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Bold.woff2") format("woff2"),
url("../fonts/Roboto-Bold.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
url("../fonts/Roboto-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
url("../fonts/Roboto-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content-box-component {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.hidden {
display: none;
}
body {
max-width: 1200px;
margin: 0 auto;
color: #353535;
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
background-color: #f0f0ea;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
/* Карта с объявлениями
========================================================================== */
.promo {
position: absolute;
z-index: 1;
top: 40px;
left: 50%;
width: 211px;
height: 45px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.map {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
height: 750px;
background-color: #82bcc0;
background-image: url("../img/map.jpg");
background-repeat: no-repeat;
background-position: center bottom;
border-radius: 0 0 10px 10px;
}
.map__pins {
position: relative;
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.map__overlay {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.map__title {
width: 100%;
margin: 0;
padding: 0;
margin-top: 170px;
font-size: 85px;
font-weight: 700;
text-align: center;
color: #ffffff;
}
.map--faded .map__overlay {
opacity: 1;
}
/**
* Метка объявления
*/
.map__pin {
position: absolute;
z-index: 1;
width: 50px;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.map__pin:focus {
outline: none;
-webkit-filter: drop-shadow(0 0 5px red);
filter: drop-shadow(0 0 5px red);
}
.map__pin img {
position: absolute;
z-index: 1;
top: 5px;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
}
.map__pin:not(.map__pin--main)::after {
content: "";
position: absolute;
width: 50px;
height: 70px;
top: 0;
left: 0;
background-image: url("../img/pins.svg");
background-repeat: no-repeat;
background-position: 0 -9px;
}
.map__pin:not(.map__pin--main):hover::after,
.map__pin:not(.map__pin--main):active::after,
.map__pin--active:not(.map__pin--main)::after {
background-position: 0 -88px;
}
.map__pin:active img,
.map__pin--active img {
-webkit-box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
}
.map__pin--main {
width: 65px;
height: 65px;
cursor: move;
}
.map__pin--main img {
position: relative;
z-index: 1;
padding: 2px 6px 6px;
-webkit-transform: translateY(-7px);
-ms-transform: translateY(-7px);
transform: translateY(-7px);
border: solid 5px #ff5635;
border-radius: 50%;
background-color: #ffffff;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.map__pin--main:active img,
.map__pin--main--active img {
background-color: #ffffff;
}
.map__pin--main svg {
position: absolute;
z-index: 0;
top: -50px;
left: -47px;
width: 156px;
height: 156px;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: rotate(120deg) scale(0);
-ms-transform: rotate(120deg) scale(0);
transform: rotate(120deg) scale(0);
-webkit-transform-origin: 78px 78px;
-ms-transform-origin: 78px 78px;
transform-origin: 78px 78px;
}
.map__pin--main:hover ellipse {
fill: rgba(255, 86, 53, 0.9);
}
.map__pin--main::after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
content: "";
border: solid 5px transparent;
border-top: solid 18px #fff;
border-bottom: 0;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: translate(-50%, -6px);
-ms-transform: translate(-50%, -6px);
transform: translate(-50%, -6px);
border-top-width: 22px;
border-top-color: #ff5635;
}
.map--faded .map__pin--main svg {
-webkit-transform: rotate(-20deg) scale(1);
-ms-transform: rotate(-20deg) scale(1);
transform: rotate(-20deg) scale(1);
}
.map--faded .map__pin--main::after {
-webkit-transform: translate(-50%, -30px);
-ms-transform: translate(-50%, -30px);
transform: translate(-50%, -30px);
}
.map__pin--main text {
font-size: 7px;
font-weight: 700;
fill: #ffffff;
}
/**
* Фильтры объявления
*/
.map__filters-container {
width: 100%;
background-color: rgba(3, 28, 45, 0.5);
}
.map__filters {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 960px;
height: 46px;
margin: 0 auto;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 1;
}
.map--faded .map__filters {
opacity: 0;
}
.map__filter {
height: 30px;
margin-right: 10px;
font-size: 14px;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
.map__filter:hover {
border: 1px solid #ffaa99;
}
.map__filter:focus {
outline: none;
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
vertical-align: middle;
cursor: pointer;
background-color: #f8f8f8;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
border-radius: 3px;
}
.map__feature--wifi {
background-position: 2px 5px;
}
.map__checkbox:checked + .map__feature--wifi {
background-position: 2px -172px;
}
.map__feature--dishwasher {
background-position: 2px -25px;
}
.map__checkbox:checked + .map__feature--dishwasher {
background-position: 2px -202px;
}
.map__feature--parking {
background-position: 3px -55px;
}
.map__checkbox:checked + .map__feature--parking {
background-position: 2px -232px;
}
.map__feature--washer {
background-position: 2px -85px;
}
.map__checkbox:checked + .map__feature--washer {
background-position: 2px -262px;
}
.map__feature--elevator {
background-position: 2px -143px;
}
.map__checkbox:checked + .map__feature--elevator {
background-position: 2px -321px;
}
.map__feature--conditioner {
background-position: 3px -114px;
}
.map__checkbox:checked + .map__feature--conditioner {
background-position: 2px -291px;
}
.map__feature:hover {
-webkit-box-shadow: inset 0 0 0 1px #ffaa99;
box-shadow: inset 0 0 0 1px #ffaa99;
}
.map__feature:focus,
.map__checkbox:focus + .map__feature {
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature:active {
-webkit-box-shadow: none;
box-shadow: none;
background-color: #ff6547;
}
.map__checkbox:checked + .map__feature {
background-color: #ff6547;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}
/**
* Карточка объявления
*/
.map__card {
position: absolute;
z-index: 2;
top: 150px;
left: 20px;
padding: 10px 10px 20px;
width: 230px;
font-size: 12px;
border-radius: 5px;
background-color: #ffffff;
}
.popup__avatar {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 10px;
}
.popup__close {
position: absolute;
bottom: 100%;
right: 0;
padding: 0;
font-size: 0;
border: 0;
background: none;
}
.popup__close:active {
-webkit-transform: translate(1px, 1px);
-ms-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
.popup__close:focus {
outline: none;
-webkit-box-shadow: 0 0 10px 3px #ff6547;
box-shadow: 0 0 10px 3px #ff6547;
}
.popup__close::after {
font-size: 50px;
line-height: 40px;
display: block;
content: "×";
color: #000000;
}
.popup__title {
margin: 0;
margin-bottom: 10px;
font-size: 16px;
line-height: 18px;
}
.popup__text {
margin: 0;
margin-bottom: 10px;
}
.popup__text--price {
font-size: 22px;
font-weight: 700;
}
.popup__price span {
font-size: 16px;
}
.popup__type {
margin: 0;
margin-bottom: 5px;
}
.popup__text--capacity {
margin-bottom: 0;
}
.popup__features {
margin: 0;
padding: 0;
list-style: none;
}
.popup__features {
margin-bottom: 10px;
}
.popup__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
}
.popup__feature--wifi {
background-position: 2px 5px;
}
.popup__feature--dishwasher {
background-position: 2px -25px;
}
.popup__feature--parking {
background-position: 3px -55px;
}
.popup__feature--washer {
background-position: 2px -85px;
}
.popup__feature--elevator {
background-position: 2px -143px;
}
.popup__feature--conditioner {
background-position: 3px -114px;
}
.popup__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.popup__photo {
margin-right: 5px;
margin-bottom: 5px;
}
.popup__photo:hover {
border: 2px solid #ff5635;
}
/**
* Сообщения об успешном и неуспешном создании объявления
*/
.success,
.error {
position: fixed;
top: 0;
left: 0;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 300px;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.8);
}
.success__message,
.error__message {
position: relative;
color: #ffffff;
font-size: 50px;
font-weight: 700;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Кексобукинг</title>
</head>
<body>
<main>
<div class="promo">
<h1 class="promo__title visually-hidden">Keksobooking. Кексы по соседству</h1>
<img src="img/keksobooking.svg" alt="Keksobooking. Кексы по соседству" width="215" height="45">
</div>
<!-- Карта объявлений -->
<section class="map map--faded">
<!-- Метки объявлений -->
<div class="map__pins">
<div class="map__overlay">
<h2 class="map__title">И снова Токио!</h2>
</div>
<button class="map__pin map__pin--main" style="left: 570px; top: 375px;">
<img src="img/muffin-red.svg" width="40" height="44" draggable="false" alt="Метка объявления">
<svg viewBox="0 0 70 70" width="156" height="156" aria-label="Метка для поиска жилья">
<defs>
<path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" id="tophalf" />
</defs>
<ellipse cx="35" cy="35" rx="35" ry="35" fill="rgba(255, 86, 53, 0.7)" />
<text><textPath xlink:href="#tophalf" startOffset="0">Поставь меня куда-нибудь</textPath></text>
</svg>
</button>
</div>

Button that switches DIV content

I'm creating something for a pricing table that needs to be able to convert between Pounds and Dollars, I have the base of this down, with a sliding mechanic, unfortunately you're able to click "Sterling" more than once to produce the function of it converting between both prices, i'm wondering how I can make it so that it can only perform the function once, to get rid of this issue
var shown = 'sterling';
function swap() {
if (shown === 'sterling') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
shown = 'dollars';
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
shown = 'sterling';
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off" id="swap" onclick="swap()">Sterling</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on" id="swap" onclick="swap()">Dollars</label>
<span class="switch-selection"></span>
</div>
Any help would be appreciated!

Rather than keeping what is shown in a variable that you manually swap every time either option is clicked, pass the price type in to the swap function and then display what you want to based off of that. This way, they can click either button as many times as they like, but it will only change when the other option is clicked. I made the changes to your example.
function swap(priceType) {
if (priceType === 'dollars') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off" id="swap" onclick="swap('sterling')">Sterling</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on" id="swap" onclick="swap('dollars')">Dollars</label>
<span class="switch-selection"></span>
</div>

Set the swap function as a callback for the change event of the radio buttons instead, so it will only be called once the state of the switch changes.
On a side note, it would be agood idea to give your radio buttons more meaningful names. "week" and "month" doesn't seem to make much sense here. ;-) And also, you are using the id="swap" twice, but IDs must be unique.
document.getElementById('currency_sterling').addEventListener('change', swap);
document.getElementById('currency_dollars').addEventListener('change', swap);
function swap(ev) {
if (ev.target.value === 'dollars') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="currency" value="sterling" id="currency_sterling" checked>
<label for="currency_sterling" class="switch-label switch-label-off">Sterling</label>
<input type="radio" class="switch-input" name="currency" value="dollars" id="currency_dollars">
<label for="currency_dollars" class="switch-label switch-label-on">Dollars</label>
<span class="switch-selection"></span>
</div>

Rails : carrusel dies after come back to home

I have a problem with the carrousel of my page. If i go to 127.0.0.1:3000/ it works perfectly. But if go to products page, and then come back to home from the nav-bar, the home page loads without the carrousel. There is no errors in the log file and no error in the javascipt console. So I'm kind of blind with this...
this is the carrousel:
<!-- Banner -->
<section class="tm-banner" name="home">
<!-- Flexslider -->
<div class="flexslider flexslider-banner">
<ul class="slides">
<li>
<div class="tm-banner-inner">
<h1 class="tm-banner-title"><span class="tm-yellow-text"> SAN MARTIN </span> <br>HERRAMIENTAS </h1>
</div>
<img src="/assets/carrusel/carrusel-01.jpg" />
</li>
<li>
<div class="tm-banner-inner">
<h1 class="tm-banner-title">AlQUILER <span class="tm-yellow-text">Y VENTA </span></h1>
<p class="tm-banner-subtitle">El mejor servicio</p>
Ver Más
</div>
<img src="/assets/carrusel/carrusel-02.jpg" />
</li>
<li>
<div class="tm-banner-inner">
<h1 class="tm-banner-title">REPUESTOS <span class="tm-yellow-text">Y ACCESORIOS</span></h1>
<p class="tm-banner-subtitle">De Herramientas eléctricas</p>
Ver Más
</div>
<img src="/assets/carrusel/carrusel-03.jpg" />
</li>
</ul>
</div>
</section>
And it uses this script at the end of the page:
<script>
$(function() {
// https://css-tricks.com/snippets/jquery/smooth-scrolling/
$('a[href*=\\#]:not([href=\\#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
$(window).load(function(){
// Flexsliders
$('.flexslider.flexslider-banner').flexslider({
controlNav: false
});
$('.flexslider').flexslider({
animation: "slide",
directionNav: false,
slideshow: false
});
});
</script>
And also there is call to this .css
/*
* jQuery FlexSlider v2.5.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 and later license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (#mbmufffin)
*
*/
/* ====================================================================================================================
* FONT-FACE
* ====================================================================================================================*/
#font-face {
font-family: 'flexslider-icon';
src: url('fonts/flexslider-icon.eot');
src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}
/* ====================================================================================================================
* RESETS
* ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover,
.flex-container a:focus,
.flex-slider a:focus {
outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* ====================================================================================================================
* BASE STYLES
* ====================================================================================================================*/
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
}
.flexslider .slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .flexslider .slides {
display: block;
}
* html .flexslider .slides {
height: 1%;
}
.no-js .flexslider .slides > li:first-child {
display: block;
}
/* ====================================================================================================================
* DEFAULT THEME
* ====================================================================================================================*/
.flexslider {
margin: 0 0 60px;
background: #ffffff;
border: 4px solid #ffffff;
position: relative;
zoom: 1;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
-o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}
.flexslider .slides {
zoom: 1;
}
.flexslider .slides img {
height: auto;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.carousel li {
margin-right: 5px;
}
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 40px;
display: inline-block;
content: '\f001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '\f002';
}
.flex-direction-nav .flex-prev {
left: -50px;
}
.flex-direction-nav .flex-next {
right: -50px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 0.7;
left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 0.7;
right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a.flex-play:before {
content: '\f003';
}
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: .7;
cursor: pointer;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
/* ====================================================================================================================
* RESPONSIVE
* ====================================================================================================================*/
#media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: 10px;
}
.flex-direction-nav .flex-next {
opacity: 1;
right: 10px;
}
}

This is a problem of turbolinks. You need to add an event listener to one of the turbo links events
$(document).on ('turbolinks:load', function (){
$('.flexslider.flexslider-banner').flexslider({
controlNav: false
});
$('.flexslider').flexslider({
animation: "slide",
directionNav: false,
slideshow: false
});
})

Categories