I am working on making a search bar that will filter my site for reports(urls) based on what is typed in. It currently works sort of. It will filter the items but you have the have the menus expanded for it to filter them.
I am looking for a way to either only have the results that match the search show(get rid of the headers for the dropdowns and only show links). OR to auto expand the dropdowns when a character is typed into the search bar
(closest I could get for a repeatable example.)
function searchSite() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('searchbar');
filter = input.value.toUpperCase();
ul = document.getElementById("Sidebar");
li = ul.getElementsByTagName('li');
closestClass = ul.closest('.parent');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
.evolve .barTop {
-webkit-transform: rotate(-45deg) translate(-8px, 8px);
transform: rotate(-45deg) translate(-8px, 8px);
}
.evolve .barMid {
opacity: 0;
transition: 0.1s ease-in;
}
.evolve .barBot {
-webkit-transform: rotate(-45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#main {
transition: margin-left 0.5s;
position: relative
}
.content {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height 1s ease-out;
box-shadow: inset 0px 0px 7px 7px rgba(0, 0, 0, 0.15);
}
.content .content-stuff {
background-color: #20396120;
border-left: outset #203961 13px;
padding: .5rem 1rem;
}
.content .content-stuff .subcontent {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height .75s ease-out;
}
.content .content-stuff .subcontent .subcontent-stuff {
border-bottom: solid grey 3px;
padding: .5rem;
}
.button:checked+.header+.content {
max-height: inherit;
}
.subbutton:checked+.subheader+.subcontent {
max-height: inherit;
}
.content .content-stuff .clickLink {
cursor: pointer;
}
hr {
border-style: solid;
color: #20396150;
border-height: .5px;
}
ul.Links {
list-style-type: none;
margin: 0;
padding: 0px;
}
li:not(:last-child) {
margin-bottom: 10px;
}
.fade-in-image {
position: absolute;
top: 13px;
left: 60px;
transition: FadeIn 1.0s ease-in;
}
.fade-in-image h2 {
margin-top: 1px;
margin-left: 45px;
color: #fca445;
white-space: nowrap;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-shadow: 3px 6px 6px rgba(0, 0, 0, 0.19), 0px -7.5px 15px rgba(255, 255, 255, 0.10);
;
}
#keyframes slide-right {
0% {
margin-left: -10%
}
;
100 {
margin-left: 80%
}
;
}
.fade-in-image img {
position: absolute;
animation: move 3s ease infinite;
}
#keyframes move {
0% {
margin-left: -10px;
}
5% {
margin-left: -9.25px;
}
10% {
margin-left: -10px;
}
15% {
margin-left: -10px;
}
75% {
margin-left: 3px;
}
80% {
margin-left: -11.5px;
}
85% {
margin-left: -5.5px;
}
87.25% {
margin-left: -11px;
}
90% {
margin-left: -7px;
}
95% {
margin-left: -10.5px;
}
97.5% {
margin-left: -9.25px;
}
100% {
margin-left: -10px;
}
}
}
/* popup code credit: codeconvey.com */
.sidebar .pop {
position: absolute;
width: 50%;
margin: auto;
padding: 20px;
height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#media (max-width: 640px) {
.pop {
position: relative;
width: 100%;
}
}
.sidebar .pop .modal {
z-index: 2;
opacity: 0;
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
}
.sidebar .pop .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(0.75);
transform: translate(-50%, -50%) scale(0.75);
top: 50%;
left: 50%;
width: 50%;
background: white;
padding: 30px;
position: absolute;
color: black;
}
#media (max-width: 640px) {
.pop .modal__inner {
width: 100%;
}
}
.sidebar .btn-close {
color: #fff;
text-align: center;
}
.sidebar .pop label {
position: absolute;
top: 8px;
right: 55px;
padding: 1px 19px 1px 19px;
font-size: 45px;
cursor: pointer;
transition: 0.2s;
color: #fca445;
}
.sidebar .pop label.open:hover {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
background-color: #33d62b60;
font-size: 45px;
}
.sidebar .pop input {
display: none;
}
.sidebar .pop input:checked+.modal {
opacity: 1;
visibility: visible;
}
.sidebar .pop input:checked+.modal .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal .modal__inner p {
font-size: 1.25rem;
line-height: 125%;
}
.sidebar .pop input:checked+.modal label {
position: absolute;
top: 0;
right: 0;
padding: 4px 8px 4px 8px;
font-size: 20px;
cursor: pointer;
transition: 0.2s;
color: #000;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal label:hover {
background-color: #ff141860;
}
<div id="Sidebar" class="sidebar">
<p style="text-align:center;"><input id="searchbar" onkeyup="searchSite()" type="text" name="search" placeholder="Search" title="Report or Category Name" style="width: 300px;" /></p>
<input id="OpsButton" class="button" type="checkbox">
<label for="OpsButton" class="header">Operations</label>
<div class="content">
<div class="content-stuff">
<input id="Button1" class="subbutton" type="checkbox">
<label for="Button1" class="subheader">Header1</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region" href="X" target="bodyinfo">Region</a></li>
<li><a title="range" href="X" target="bodyinfo">range</a></li>
</ul>
</div>
</div>
<input id="FinancialButton" class="subbutton" type="checkbox">
<label for="FinancialButton" class="subheader">Financials</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region2" href="X" target="bodyinfo">Region2</a></li>
<li><a title="range2" href="X" target="bodyinfo">range2</a></li>
</ul>
</div>
</div>
<p>
</p>
<ul class="Links">
<li>Turnover Report</li>
</ul>
<p></p>
</div>
</div>
</div>
Okay figured it out by creating a function that will click all of the header buttons to expand the menus. and adding this function call to my main function. So if the menu is already expanded, it won't close it- otherwise it'll open it. Rinse and repeat for all buttons in your webpage.
var something = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
var OpsButton = document.getElementById("OpsButton");
var next = document.getElementById("w/e");
if (!OpsButton.checked) {
OpsButton.click(); }
if (!next.checked) {
next.click(); }
}
};
})();
I am trying to write keyframe, animation in my code but I can't figure it out even after reading the documentation. Please help
```const ButtonStyle = styled.div`
.btn_rainbow {
text-decoration: none;
background-color: #c53ab4;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 16px;
&:hover {
background-image: linear-gradient(90deg,
#00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
}
}
`;
export default function Button() {
return (
<ButtonStyle>
<a class="btn_rainbow" href="#">Click Me!</a>
</ButtonStyle>
);
}```
The CSS Keyframe I wanted to add:
```#keyframes slidebg {
to {
background-position:20vw;
}
}
.btn_rainbow:hover{
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF
100%);
animation:slidebg 5s linear infinite;
}```
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<ButtonStyle>
<button class="glow-on-hover" href="#">Click Me!</button>
</ButtonStyle>
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>
**i found this code online which timer is controled in css.how do i control it with javascript.i have tried new ways but failed.anyone able to help me out.What im actually trying is to control the javascript function with button click,once the button is clicked then it should call the function to run the lights based on timer which i tried early using settimeout and by setinterval but i could make it.for example red 5 seconds,orange 3 seconds and green 10 seconds,onlick this function should run.
html {
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}
.protector {
background: transparent;
width: 180px;
height: 0;
position: absolute;
top: 20px;
left: -35px;
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 90px #111;
border-radius: 10px;
z-index: -1;
}
.protector:nth-child(2) {
top: 140px;
}
.protector:nth-child(3) {
top: 260px;
}
.trafficlight {
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 10px;
position: relative;
border: solid 5px #333;
}
.trafficlight:before {
background: #222;
background-image: radial-gradient(#444, #000);
content: "";
width: 170px;
height: 150px;
margin: 0 auto;
position: absolute;
top: -30px;
margin-left: 0px;
border-radius: 50%;
z-index: -1;
}
.trafficlight:after {
background: #222;
background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
content: "";
width: 75px;
height: 800px;
margin-left: 50px;
position: absolute;
top: 150px;
z-index: -1;
}
.red {
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 35px;
animation: 15s red infinite;
box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}
.yellow {
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 145px;
left: 35px;
animation: 13s yellow infinite;
box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}
.green {
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 270px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
animation: 13s green infinite;
}
#keyframes red {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes yellow {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: 1;
}
50% {
opacity: .1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes green {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: .1;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: .1;
}
90% {
opacity: 1;
}
95% {
opacity: .1;
}
100% {
opacity: 1;
}
}
<div class="trafficlight">
<div class="protector"></div>
<div class="protector"></div>
<div class="protector"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
**
$(".trafficlight").click(function(){
$(this).toggleClass("start")
})
html {
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}
.protector {
background: transparent;
width: 180px;
height: 0;
position: absolute;
top: 20px;
left: -35px;
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 90px #111;
border-radius: 10px;
z-index: -1;
}
.protector:nth-child(2) {
top: 140px;
}
.protector:nth-child(3) {
top: 260px;
}
.trafficlight {
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 10px;
position: relative;
border: solid 5px #333;
}
.trafficlight:before {
background: #222;
background-image: radial-gradient(#444, #000);
content: "";
width: 170px;
height: 150px;
margin: 0 auto;
position: absolute;
top: -30px;
margin-left: 0px;
border-radius: 50%;
z-index: -1;
}
.trafficlight:after {
background: #222;
background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
content: "";
width: 75px;
height: 800px;
margin-left: 50px;
position: absolute;
top: 150px;
z-index: -1;
}
.red {
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
opacity:0;
position: absolute;
top: 20px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}
.start .red{
animation: 15s red infinite;
}
.start .yellow {
animation: 13s yellow infinite;
}
.start .green{
animation: 13s green infinite;
}
.yellow {
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
opacity:0;
top: 145px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}
.green {
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 270px;
opacity:0;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
}
#keyframes red {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes yellow {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: 1;
}
50% {
opacity: .1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes green {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: .1;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: .1;
}
90% {
opacity: 1;
}
95% {
opacity: .1;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trafficlight">
<div class="protector"></div>
<div class="protector"></div>
<div class="protector"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
i managed to make it work on click with jquery!
i have created an two animation with css https://codepen.io/anon/pen/yOqxdq html an css
<img onclick="show(this);" src="http://tigersincrisis.com/wp-content/uploads/2014/01/image_21.jpg">
#keyframes shadow {
0% { opacity: 0;height: 0; transform : scale(0.1);}
100% { opacity: 1; height: 100%;transform : scale(1);}
}
#keyframes show {
0% { opacity: 0;margin: 20% auto;width: 20%;height: 20%;}
100% { opacity: 1;margin: 0; width: 100%;height: 100%;}
}
#show {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.76);
animation-name: show;
animation-duration: 2s;
animation-fill-mode: forwards;
z-index: 5;
}
#show-item{
position: relative;
margin: 0 auto;
animation-name: shadow;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
padding-top: 40px;
}
#show-item img{
border: 4px solid black;
}
a#closeShow{
position: relative;
float: right;
text-decoration: none;
color: #C8C8C8;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.9);
border-radius: 26px;
height: 18px;
position: relative;
top: 25px;
left: 10px;
border: 2px solid #e0e0e0;
box-shadow: 0 0 2px black;
}
the problem is when user scroll the view is changed and div with position absolute stays up and box of showdow doesn't show on portion of the page down
Try position: fixed; for #show.
DEMO: FIDDLE