I have this sprite sheet http://codepen.io/benasl/pen/yabpxo that I want to be changed to another one after it ends, and after the second one ends the first one needs to start again, and so on... I managed to do this with just changing css properties, but now how do I make them loop?
setTimeout(function() {
$(".kambarys2").css('display', 'block');
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
.kambarys2 {
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
width: 380px;
height: 372px;
top: 108px;
left: 40%;
animation: convejor 3s steps(76) infinite;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
<div class="kambarys2"></div>
change the background image using an array:
var cnt=0,images=["http://i.imgur.com/TFvZvWz.jpg","http://i.imgur.com/pra08AS.jpg"]
setInterval(function() {
$(".kambarys").css({"background-image":"url("+images[cnt]+")"});
cnt++;
if (cnt>=images.length) cnt=0;
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
Toggle two divs
var cnt=0;
setInterval(function() {
$(".kambarys0").toggle(cnt);
$(".kambarys1").toggle(!cnt); cnt=!cnt
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys0 {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
.kambarys1 {
display:none;
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
position: relative;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys0"></div>
<div class="kambarys1"></div>
Loop more than two divs
var cnt = 0;
setInterval(function() {
cnt++;
if (cnt >= $(".kambarys").length) cnt = 0;
$(".kambarys").hide();
$("#kambarys" + cnt).show();
},
3100);
body {
background-color: #69e4c3;
}
.kambarys {
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#kambarys0 {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
}
#kambarys1 {
display: none;
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
}
#kambarys2 {
display: none;
background: url('http://i.imgur.com/F6bNA00.jpg');
background-repeat: no-repeat;
}
#keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys" id="kambarys0"></div>
<div class="kambarys" id="kambarys1"></div>
<div class="kambarys" id="kambarys2"></div>
One answer would be that you have a function for this and this function would restart itself every X seconds.
Example:
function startcounter() {
$( "#foo" ).append( "<p>Test</p>" ); // do what you want
setTimeout(startcounter, 3*1000); // 3*1000 = 3 Seconds.
}
setTimeout(startcounter, 3*1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"><p>This is the div where the JS add every 3 Seconds a "Test".</p></div>
Related
I know this question can be answered in many ways but I need someone to do this for me. I want my animation to do its thing and then a random number pops up? Right now I have 2 functions in one click (I need that). I'm new to this and a simple formula would be great! Can anyone help, if you can it would be appreciated! Thank you!
THIS IS ALL THE CODE!
startbtn = function() {
$('.wheel').addClass('animated-wheel');
setTimeout(setRandom('random') {}, 6000);
}
function getRandom() {
var values = [1, 15, 30, 45];
return values[Math.floor(Math.random() * values.length)];
}
function setRandom(id) {
document.getElementById(id).innerHTML = getRandom();
}
function refresh() {
location.reload();
};
.number {
text-align: center;
color: white;
font-size: 78px;
}
.wheel {
width: 200px;
height: 100px;
left: 600px;
top: 300px;
background: green;
position: relative;
}
.animated-wheel {
-webkit-animation: myfirst4s 2;
-webkit-animation-direction: alternate;
animation: myfirst 4s 2;
animation-direction: alternate;
}
#-webkit-keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: black;
left: 600px;
top: 0px;
}
66% {
background: red;
left: 600px;
top: 650px;
}
100% {
background: black;
left: 600px;
top: 0px;
}
}
#keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: green;
left: 600px;
top: 300px;
}
66% {
background: black;
left: 600px;
top: 0px;
}
100% {
background: red;
left: 600px;
top: 650px;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head></head>
<title>The Wheel!</title>
<body bgcolor="orange">
<head>
</head>
<div class="wheel">
<h1 class="number" id="random"></h1>
</div>
<button onclick="startbtn();setRandom('random');">Start</button>
<button onclick="refresh()">Reset</button>
</body>
</html>
You had a syntax error in your setTimeout():
startbtn = function() {
$('.wheel').addClass('animated-wheel');
setTimeout(function() {
// Remove animation class
setRandom('random');
$('.wheel').removeClass('animated-wheel');
}, 6750);
}
function getRandom() {
var values = [1, 15, 30, 45];
return values[Math.floor(Math.random() * values.length)];
}
function setRandom(id) {
document.getElementById(id).innerText = getRandom();
}
function refresh() {
location.reload();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head></head>
<title>The Wheel!</title>
<body bgcolor="orange">
<head>
<style>
.number {
text-align: center;
color: white;
font-size: 78px;
}
.wheel {
width: 200px;
height: 100px;
left: 600px;
top: 300px;
background: green;
position: relative;
}
.animated-wheel {
-webkit-animation: myfirst4s 2;
-webkit-animation-direction: alternate;
animation: myfirst 4s 2;
animation-direction: alternate;
}
#-webkit-keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: black;
left: 600px;
top: 0px;
}
66% {
background: red;
left: 600px;
top: 650px;
}
100% {
background: black;
left: 600px;
top: 0px;
}
}
#keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: green;
left: 600px;
top: 300px;
}
66% {
background: black;
left: 600px;
top: 0px;
}
100% {
background: red;
left: 600px;
top: 650px;
}
}
</style>
</head>
<div class="wheel">
<h1 class="number" id="random"></h1>
</div>
<button onclick="startbtn();">Start</button>
<button onclick="refresh()">Reset</button>
</body>
</html>
Hope this helps,
There are tons of more elegant way but here is correction of your error:
setTimeout(function(){
setRandom('random')
}, 6000);
So I have a slider that has 3 modals. The modals are set to an interval where they come in with a gradient and cover the slide. Once the user clicks on the slide, the autoplay feature stops and they can select any image they want.
The problem is, the modals keep on with the same interval and pop in and out according to the timer. How can I make each modal display without fading in and out anymore once the user clicks on either previous or next arrow?
So in this example, the "HI", "HOW", "ARE YOU?" would be fully displayed in each of their sliders and would no longer fade in and out once the user clicked on either one of the arrows.
$(document).ready(function() {
$(".myModal").delay(3000).fadeIn().hide();
$(".myModal2").delay(6000).fadeIn().hide();
$(".myModal3").delay(9000).fadeIn().hide();
});
$(document).ready(setInterval(function() {
$(".myModal").delay(3000).fadeIn().hide();
$(".myModal2").delay(6000).fadeIn().hide();
$(".myModal3").delay(9000).fadeIn().hide();
},12000));
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
//cycleItems function
function cycleItems(){
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display', 'inline-block');
}; //end cycleItems function
//begin autoSlide function
var autoSlide = setInterval(function() {
currentIndex ++;
if( currentIndex > itemAmt -1){
currentIndex = 0;
}
cycleItems();
},3000)
//end autoSlide function
//Next slider code
$('.next').click(function () {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1){
currentIndex = 0;
}
cycleItems();
});
//Previous slider code
$('.prev').click(function(){
clearInterval(autoSlide);
currentIndex -= 1;
if(currentIndex < 0){
currentIndex = itemAmt - 1;
}
cycleItems();
});
.container {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
overflow: hidden;
}
.container div {
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
}
button {
position: absolute;
}
.next {
right: 5px;
cursor: pointer;
position: absolute;
background-image: url('https://image.freepik.com/free-icon/arrow-bold-right-ios-7-symbol_318-35504.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100px;
height: 100px;
z-index: 500;
top: 50%;
}
.prev {
left: 5px;
cursor: pointer;
position: absolute;
background-image: url('https://image.flaticon.com/icons/svg/17/17264.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100px;
height: 100px;
z-index: 500;
top: 50%;
}
.image2 {
background-image: url('https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png');
background-position:center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.image3 {
background-image: url('https://static.comicvine.com/uploads/square_small/11/114183/5147875-lisa_simpson.png');
background-position:center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.image4 {
background-image: url('https://vignette2.wikia.nocookie.net/simpsons/images/a/ab/BartSimpson.jpg/revision/latest?cb=20141101133153');
background-position:center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.image1 {
background-image: url('http://media.oregonlive.com/ent_impact_music/photo/9905096-large.jpg');
background-size: contain;
background-position:center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
z-index: 200;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container image1">
<div class="image1"></div>
<div class="image2">
<section class="myModal">HI</section>
</div>
<div class= "image3">
<section class="myModal2">HOW</section>
</div>
<div class="image4">
<section class="myModal3">ARE YOU?</section>
</div>
</div>
<div class="next"></div>
<div class="prev"></div>
You are double defining the auto slide functionality. Here is an example with the auto and manual slider merged together to work correctly.
$(document).ready(function() {
var currentIndex = 0;
var items = $('.container div');
var itemAmt = items.length;
//cycleItems function
function cycleItems(direction, fade) {
currentIndex += direction;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
} else if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
var item = items.eq(currentIndex);
items.hide();
if (fade) {
item.fadeIn();
} else {
item.show();
}
};
//end cycleItems function
// start autoSlide
cycleItems(1, true);
var autoSlideInterval = setInterval(cycleItems, 3000, 1, true);
//Next slider code
$('.next').click(function() {
clearInterval(autoSlideInterval);
cycleItems(1, false);
});
//Previous slider code
$('.prev').click(function() {
clearInterval(autoSlideInterval);
cycleItems(-1, false);
});
});
.container {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
overflow: hidden;
}
.container div {
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
}
button {
position: absolute;
}
.next {
right: 5px;
cursor: pointer;
position: absolute;
background-image: url('https://image.freepik.com/free-icon/arrow-bold-right-ios-7-symbol_318-35504.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100px;
height: 100px;
z-index: 500;
top: 50%;
}
.prev {
left: 5px;
cursor: pointer;
position: absolute;
background-image: url('https://image.flaticon.com/icons/svg/17/17264.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100px;
height: 100px;
z-index: 500;
top: 50%;
}
.image2 {
background-image: url('https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png');
background-position: center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.image3 {
background-image: url('https://static.comicvine.com/uploads/square_small/11/114183/5147875-lisa_simpson.png');
background-position: center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.image4 {
background-image: url('https://vignette2.wikia.nocookie.net/simpsons/images/a/ab/BartSimpson.jpg/revision/latest?cb=20141101133153');
background-position: center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.image1 {
background-image: url('http://media.oregonlive.com/ent_impact_music/photo/9905096-large.jpg');
background-size: contain;
background-position: center;
display: block;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container image">
<div class="image1">
<br>
</div>
<div class="image2">
<section class="myModal2">HI</section>
</div>
<div class="image3">
<section class="myModal3">HOW</section>
</div>
<div class="image4">
<section class="myModal4">ARE YOU?</section>
</div>
</div>
<div class="next"></div>
<div class="prev"></div>
I want to know how can I change my background on Id load. Right now the background is set to a colour for the preloader. I have figured out how I can hide the loader on body load but someone help me on how to change my background to a picture. Also eve when the loader is present the elements of the body popup so any solution to hide that? The background link is in the background 1 id.
https://www.w3schools.com/code/tryit.asp?filename=FEMJ1DP31QMZ
function hidespinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('heading').style.display = 'none';
document.getElementById('background1').style.display.backgroundImage = 'url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg)';
}
html {
background-color: #ace5f4;
background-size: cover;
}
#spinner {
height: 50px;
width: 50px;
left: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
}
#spinner .inner {
height: 50px;
width: 50px;
position: absolute;
border: 5px solid transparent;
opacity: 0.7;
border-radius: 100%;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#spinner .inner:nth-child(1) {
border-top-color: white;
border-bottom-color: white;
animation-duration: 2s;
}
#spinner .inner:nth-child(2) {
border-left-color: #3bb3ee;
border-right-color: #3bb3ee;
animation-duration: 3s;
}
#spinner .inner:nth-child(3) {
border-top-color: #34abdb;
border-bottom-color: #34abdb;
animation-duration: 4s;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#heading {
color: white;
font-family: Helvetica;
text-align: center;
font-size: 72px;
}
#background1 {
background: url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg) no-repeat center fixed;
background-size: cover;
}
<link rel="shortcut icon" type="image/png" href="https://image.flaticon.com/icons/png/128/222/222506.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Fonts Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<body onload="hidespinner()">
<h1 id="heading"><i class="fa fa-plane"></i> v<strong>Crew</strong></h1>
<div id="spinner">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Hello Is the spinner on?
</body>
Please see that even the current code is copyrighted. I would also like to add this loader which I made to the page so can anyone suggest something on how to add it or add it to the webpage and give me the code.
https://www.w3schools.com/code/tryit.asp?filename=FEAZZM840UQS
function hideloader() {
document.getElementById("loading").style.display = "none";
}
#import url('https://fonts.googleapis.com/css?family=Spirax');
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Spirax');
body {
background-color: #58e8f8;
}
.silly {
color: white;
text-align: center;
font-family: "Indie Flower"
}
.spinner {
width: 80px;
height: 80px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -2.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
<title>Page Title</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/88CE1C4C-84C0-9E49-A763-9D3DCEC43907/main.js" charset="UTF-8"></script>
<body onload="hideloader">
<h1 class="silly"> vCrew </h1>
<div id="loading" class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>
Would this work w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW ?
You can try adding a loading div on top of your content and hide/show the loading sequence until your data is present.
onReady(function() {
toggleClass(document.getElementById('page'), 'hidden');
toggleClass(document.getElementById('loading'), 'hidden');
});
function onReady(callback) {
var intervalID = window.setInterval(function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}, 1000);
}
// http://youmightnotneedjquery.com/
function toggleClass(el, className) {
if (el.classList) el.classList.toggle(className);
else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
body {
background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: "Brush Script MT", cursive;
}
h1 {
font-size: 2em;
margin-bottom: 0.2em;
padding-bottom: 0;
}
p {
font-size: 1.5em;
margin-top: 0;
padding-top: 0;
}
#loading {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.9);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
.hidden {
display: none !important;
}
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div id="page" class="hidden">
<h1>The standard Lorem Ipsum passage</h1>
<div class="content" data-lorem="7s"></div>
</div>
<div id="loading"></div>
I'm currently trying to make a website that displays markers with its own specific text.
When a user clicks on the marker, it displays the text.
I've copied some code online and trying to mess around with it. Unfortunately, I'm not too experience with javascript. I was wondering if anyone would be able to help.
This is what I have so far:
HTML (I don't think there's any problems here):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MarkerWeb</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="image-wrapper" data-captions='{"coords": [{"top":250,"left":200,"text":"iMac 1"},{"top":250,"left":540,"text":"iMac 2"}]}'>
<!-- layout.jpg is just a picture of a layout/floorplan -->
<img src="layout.jpg" alt=""/>
</div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
Javascript (The part I'm having a hard time with):
var Markers = {
fn: {
addMarkers: function() {
var target = $('#image-wrapper');
var data = target.attr('data-captions');
var captions = $.parseJSON(data);
var coords = captions.coords;
for (var i = 0; i < coords.length; i++) {
var obj = coords[i];
var top = obj.top;
var left = obj.left;
var text = obj.text;
$('<div class="marker"><div class="pin"><span class="popuptext" id="myPopup">' + text + '</span></div><div class="pin-effect"></div></div>').css({
top: top,
left: left
}).appendTo(target);
}
},
//This is the part I'm having trouble with.
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this),
$caption = $('popuptext', $marker);
if ($caption.is(':hidden')) {
$caption.show();
} else {
$caption.toggle("show");
}
});
}
},
init: function() {
this.fn.addMarkers();
this.fn.showBeaconInfo();
}
};
function clickBeacon() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
$(function() {
Markers.init();
});
CSS (I don't think there's any problems here):
body {
background: #e6e6e6;
}
#image-wrapper {
width: 800px;
height: 760px;
position: relative;
margin: 2em auto;
background: #f6f6f6;
border: 2px solid #ddd;
}
#image-wrapper img {
display: block;
margin: 25px auto;
}
.map-bg {
background: url(images/map-bg.jpg) no-repeat;
background-position: 0px 0px;
background-size: auto;
width: 100%;
height: 440px; /*adjust to the height of your image*/
position: relative;
}
.marker {
width: 100px;
height: 100px;
position: absolute;
/*top: 130px; /*positions our marker*/
/*left: 200px; /*positions our marker*/
display: block;
}
.pin {
width: 20px;
height: 20px;
position: relative;
top: 38px;
left: 38px;
background: rgba(5, 124, 255, 1);
border: 2px solid #FFF;
border-radius: 50%;
z-index: 1000;
cursor: pointer;
display: inline-block;
}
.pin-effect {
width: 100px;
height: 100px;
position: absolute;
top: 0;
display: block;
background: rgba(5, 124, 255, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 2400ms ease-out infinite;
}
#keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/* The actual popup (appears on top) */
.pin .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.pin .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.pin .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
You need to update your showBeaconInfo function in 2 ways:
1) Fix the selector for $caption to grab the class popuptext by adding a period
2) Using the jquery function toggleClass to add or remove the class "show" on the popuptext, the css is setup to either use visibility: hidden or visibility: visible
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this);
var $caption = $('.popuptext', $marker); //needs period to indicate class
$caption.toggleClass('show'); //adding the class "show" will display the text
});
}
For Example:
var Markers = {
fn: {
addMarkers: function() {
var target = $('#image-wrapper');
var data = target.attr('data-captions');
var captions = $.parseJSON(data);
var coords = captions.coords;
for (var i = 0; i < coords.length; i++) {
var obj = coords[i];
var top = obj.top;
var left = obj.left;
var text = obj.text;
$('<div class="marker"><div class="pin"><span class="popuptext" id="myPopup">' + text + '</span></div><div class="pin-effect"></div></div>').css({
top: top,
left: left
}).appendTo(target);
}
},
//This is the part I'm having trouble with.
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this);
var $caption = $('.popuptext', $marker); //needs period to indicate class
$caption.toggleClass('show'); //adding the class "show" will display the text
});
}
},
init: function() {
this.fn.addMarkers();
this.fn.showBeaconInfo();
}
};
function clickBeacon() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
$(function() {
Markers.init();
});
body {
background: #e6e6e6;
}
#image-wrapper {
width: 800px;
height: 760px;
position: relative;
margin: 2em auto;
background: #f6f6f6;
border: 2px solid #ddd;
}
#image-wrapper img {
display: block;
margin: 25px auto;
}
.map-bg {
background: url(images/map-bg.jpg) no-repeat;
background-position: 0px 0px;
background-size: auto;
width: 100%;
height: 440px;
/*adjust to the height of your image*/
position: relative;
}
.marker {
width: 100px;
height: 100px;
position: absolute;
/*top: 130px; /*positions our marker*/
/*left: 200px; /*positions our marker*/
display: block;
}
.pin {
width: 20px;
height: 20px;
position: relative;
top: 38px;
left: 38px;
background: rgba(5, 124, 255, 1);
border: 2px solid #FFF;
border-radius: 50%;
z-index: 1000;
cursor: pointer;
display: inline-block;
}
.pin-effect {
width: 100px;
height: 100px;
position: absolute;
top: 0;
display: block;
background: rgba(5, 124, 255, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 2400ms ease-out infinite;
}
#keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/* The actual popup (appears on top) */
.pin .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.pin .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.pin .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="image-wrapper" data-captions='{"coords": [{"top":250,"left":200,"text":"iMac 1"},{"top":250,"left":540,"text":"iMac 2"}]}'>
<!-- layout.jpg is just a picture of a layout/floorplan -->
<img src="layout.jpg" alt="" />
</div>
</div>
I'm trying to add red overlay on my image-box class, but I can't get the result because:
new overlay class replaces the old one, and I only get red background.
I need the new class in addition to, not instead of the old one.
This is what I have tried so far:
$(function($) {
$(document).on('click', '.wrapper', function(event) {
var target = $(event.target).closest('.wrapper');
target.find('.image-box').addClass("overlay");
});
});
.image-box {
height: 300px;
width: 100%;
padding-right: 0px;
padding-left: 0px;
background-position: center;
background-color: #4D4E56;
}
.overlay{
background-color:rgba(86, 61, 124, 0.55);
transition: 0.5s;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
height:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
</div>
You may use :after to add overlay. Check the updated Code.
$(function($) {
$(document).on('click', '.wrapper', function(event) {
var target = $(event.target).closest('.wrapper');
target.find('.image-box').addClass("overlay");
});
});
.image-box {
height: 300px;
width: 100%;
padding-right: 0px;
padding-left: 0px;
background-position: center;
background-color: #4D4E56;
position: relative
}
.image-box:after {
opacity: 0;
background-color: rgba(86, 61, 124, 0.55);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
transition: opacity 5s;
}
.overlay:after {
opacity: 1;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
</div>
If I understand you better below is the code snippet.
$(function($) {
$(document).on('click', '.wrapper', function(event) {
$(this).find('.image-box').addClass("overlay");
});
});
.image-box {
height: 300px;
width: 100%;
padding-right: 0px;
padding-left: 0px;
background-position: center;
background-color: #4D4E56;
}
.overlay{
/*background-color:rgba(86, 61, 124, 0.55);*/
background-color:rgba(255, 0, 0, 1);
transition: 0.5s;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
</div>
Have you tried to change the .overlay & image-box property
.image-box{
/* add position:relative */
}
.overlay{
position:absolute; background-color:red; filter:alpha(opacity=50); opacity: 0.8; height: 100%; width: 100%; opacity: 1; z-index: 9; position: absolute; top: 0; opacity: 0.5;transition: 0.5s;
}
While clicking on image-box, it will give you the overlay over the image-box