Velocity.js - triggering animations

Velocity.js - triggering animations - javascript

I'm currently trying to get rid of a bunch of CSS animations and replace with the Velocity.js (along the way building in new animations).
At present I have a grid Item:
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>
This is controlled through CSS to fade in the .overlay element. What I then want to do is for the h5 & h6 classes to slide up in.
I've written the following code:
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
But nothing seems to be happening. I'm quite new to Javascript so I'm presuming I've made a silly mistake somewhere along the line but can't work out what it is.
I've included a full snippet below and it can also be found here
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
#thumbnail-array {
width: 100%;
}
.gutter-sizer {
width: 0.03%;
}
.video-thumbnail {
position: relative;
background-color: #777;
overflow: hidden;
line-height: 0px;
margin: 0px;
}
.video {
position: absolute;
margin-top: none;
left: 0;
right: 0;
bottom: 0;
padding: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
.overlay {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 50;
}
.thumbnail-link {
display: table;
width: 100%;
height: 100%; /*important, forces to 100% height of parent*/
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
}
.title {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #FFFFFF;
font-family: helvetica;
width: 100%;
line-height: 0px;
}
.title-display {
display: block;
width: 100%;
}
.video-thumbnail:hover .thumbnail-link {
text-decoration: none;
opacity:1;
}
.imgspacer {
width: 100%;
max-width:100%;
}
.picturehelper {
display: inline-block;
}
.video-thumbnail:hover .video {
display: inline;
}
h5 {
display: inline-block;
width: 100%;
font-size: 2em;
margin: 0px;
padding: 0px;
line-height: normal;
}
h6 {
display: inline-block;
width: 100%;
font-size: 0.75em;
letter-spacing: 0.3em;
padding: 0px;
margin: 0px;
font-weight: 100;
line-height: normal;
}
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.ui.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>

As mentioned by #AldoRomo88 and #jmcgriz there was an issue with the load order of the scripts on the page.
I fixed the issue by simply loading query first up (and hosting the scripts on my own server!)

Related

Problems with the .click javascript when switching pages

I've got no solution to this, I've tried multiple things but it will not work! I'm new to javascript so please, someone help me out!
What I want: The animation on all pages. The #about will be later linked as about.html, so when clicked, the pages will redirect from index- to about.html. But when I click the animation will it not apply? I want to see the animation on all the pages!
$(document).ready(function(){
$(".m1").click(function(){
$(".m1").css({'color':'black'});
$(".m2, .m3, .m4").css({'color':'white'});
$(".active").css({'left':'0px','transform':'skewX(20deg)'});
});
$(".m2").click(function(){
$(".m2").css({'color':'black'});
$(".m1, .m3, .m4").css({'color':'white'});
$(".active").css({'left':'100px','transform':'skewX(20deg)'});
});
$(".m3").click(function(){
$(".m3").css({'color':'black'});
$(".m1, .m2, .m4").css({'color':'white'});
$(".active").css({'left':'359px','transform':'skewX(-20deg)'});
});
$(".m4").click(function(){
$(".m4").css({'color':'black'});
$(".m1, .m2, .m3").css({'color':'white'});
$(".active").css({'left':'461px','transform':'skewX(-20deg)'});
});
});
body {
margin: 0px;
padding: 0px;
background-color: #232323;
}
.main {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
.menu {
width: 100px;
height: 30px;
font-family: 'Stroud';
font-size: 20px;
color: white;
padding: 0px;
display: inline-block;
text-align: center;
line-height: 30px;
cursor: pointer;
transition: all 0.3s ease-in;
}
.active {
width: 100px;
height: 30px;
background-color: white;
position: absolute;
top: 33px;
left: 0px;
transform: skewX(20deg);
z-index: -1;
transition: all 0.3s ease-in;
}
.m1 {
color: black;
}
.logo {
position: relative;
top: initial;
margin: 0px 30px;
}
a {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<a href="#about"><span class="menu m1">ABOUT</span>
<a href="#contact"><span class="menu m2">CONTACT</span>
<a href="#home"><span class="menu logo">
<img src="TBGFXLOGO2019NBG.png" width="100px"/>
</span>
<a href="#portfolio"><span class="menu m3">PORTFOLIO</span>
<a href="#order"><span class="menu m4">ORDER</span>
<span class="active"/>
</div>

Clicking on an element is triggering all the same class instead of the one clicked on

I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

Change (and fade in/out) images when hovering over links using a data attribute

I'm trying to recreate a slideshow/carousel effect I've seen on this website (scroll down past the hero banner): https://www.ktm.com
I think the background of the carousel changing once an item is hovered over looks great. This is how far I've gotten:
https://codepen.io/moy/pen/QVvMxo
Looking at the KTM example it seems overly complicated to me, maybe part of some framework? So I've tried to simplify it where I can.
I don't think my example is a million miles away but it needs some refinement. The main issue I'm having is when the 3 items are hovered over, making sure the images fade in/out rather than instantly change. Is that going to be possible with the method I'm using, updating the img src="" using a data-* attribute?
I tried adding in .fadeIn and .delay but it didn't seem to do anything.
Another issue I'm having is when you remove the mouse from the carousel after hovering over the items the text seems to flicker. It looks like it's to do with the img opacity changing as when I remove that it doesn't happen - but I haven't gotten to the bottom of that yet, so any pointers will be greatly appreciated.
Thanks!
$(".carousel__item").hover(function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
var value = $(this).attr('data-src');
$(".carousel__bg img").attr("src", value);
});
.carousel {
background: #222;
border: 1px solid white;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel__bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg img {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: 100%;
}
.carousel__item {
border: 1px solid white;
box-sizing: border-box;
float: left;
position: relative;
width: 33.33333%;
}
.carousel__content {
box-sizing: border-box;
color: #fff;
height: 100%;
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel__title {
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__subtitle {
display: none;
-webkit-backface-visibility: hidden;
}
.carousel__btn {
background: #fff;
color: #222;
display: block;
opacity: 0;
position: absolute;
padding: 15px 30px;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
text-decoration: none;
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__image {
display: block;
opacity: 1;
transition: all .25s;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel:hover .carousel__title {
opacity: .25;
}
.carousel:hover .carousel__image {
opacity: 0;
}
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
.carousel:hover .carousel__item:hover .carousel__flag {
display: none;
}
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="https://fillmurray.com/800/300">
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/500">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #1</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/400">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #2</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/300">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #3</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
</div>

Create those images with style="display: none" instead of replacing the image source. Then you can use jquery $(".carousel__item").hover( showImage, hideImage ) to achieve your goal.
$(image).show() and $(image).hide() should be enough for what you want

Toggle Menu bar when hover on menuico

I have created Menu bar and menu icon
What i am trying to do is when hover on menu icon the menu bar should be toggled from left side but it is not working so please help me to do it...
follow the link to Codepen.io
Following is My code
body {
background-color: #F2D7EE;
margin: 0;
padding: 0;
}
.menuico {
background-color: black;
cursor: pointer;
width: 20px;
height: 4px;
margin: 2px;
position: relative;
left: 170px;
z-index: 1;
}
.navmenu {
position: fixed;
background-color: #0E103D;
height: 100%;
//width: 0px;
width: 150px;
color: #F2D7EE;
font-size: 25px;
}
.nav {
margin: 5px;
margin-top: 10px;
}
.mainMenu {
margin-top: 70px;
}
.mainMenu:hover {
cursor: pointer;
}
.menuico:hover .navmenu {
width: 150px;
display: block;
transition: 1s;
}
<div class="navmenu">
<div class="menuico"></div>
<div class="menuico"></div>
<div class="menuico"></div>
<div class="nav">
<div class="mainMenu">AboutMe</div>
<div class="mainMenu">contact-us</div>
<div class="mainMenu">Project</div>
<div class="mainMenu">Blog</div>
<div class="mainMenu">More</div>
</div>
</div>

You can not control ANY element on others hover, only those which are inside the element or after it.
.menu {
width:20%;
left:-20%;
height:100%;
position:fixed;
background-color:red;
transition: left 0.5s ease-in-out;
}
.icon:hover + .menu {
left:0%
}
<div class="icon">icon</div>
<div class="menu"></div>

Toggle Class while removing class from siblings

I have a map where I am toggling a class when you click on a dot/location that pops up a tooltip. The issue I'm running into is that when I click on another dot the other siblings tooltips are not going away. I tried to solve this by removing the class of the siblings on click, but when I do this the toggle stops working and I cannot click the dot again to get rid of the active tooltip.
I need the toggle on the currently active tooltip to still work but I also need the sibling tooltips to disappear as well.
I hope I explained that right. Here is a codepen: http://codepen.io/anon/pen/BzQrLV
$('.dot').click(function() {
$('div.toggle-active').removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

Add .not($(this).next()) to your removeClass statement so you don't remove the active class from all the dots, just the dots not being clicked on.
$('.dot').click(function() {
$('div.toggle-active').not($(this).next()).removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
HTML
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

Updated to check whether the tooltip was already being displayed before displaying it.
$('.dot').click(function() {
var displayed = $(this).next().attr('class').match('toggle-active');
$('div.toggle-active').removeClass('toggle-active');
if(!displayed){
$(this).next().toggleClass('toggle-active');
}
});

We Keep Coding

JavaScript is the programming language of the Web.

Velocity.js - triggering animations - javascript

As mentioned by #AldoRomo88 and #jmcgriz there was an issue with the load order of the scripts on the page. I fixed the issue by simply loading query first up (and hosting the scripts on my own server!)

Related

Problems with the .click javascript when switching pages

Clicking on an element is triggering all the same class instead of the one clicked on

Change (and fade in/out) images when hovering over links using a data attribute

Toggle Menu bar when hover on menuico

Toggle Class while removing class from siblings

Categories

Resources