how to create overlay shape in jquery - javascript

I'm going to create a menu which have a shape that overlay the menu item when hover. I don't know why when I do hover it do menu overlay several times.
this is my jQuery code:
$(document).ready(function() {
$("aside ul li div.overlay").mouseenter(function() {
$(this).animate({
left: "+=250px"
}, 500, function() {
left: "+=250px"
});
});
$("aside ul li div.overlay").mouseleave(function() {
$(this).animate({
left: "-=250px"
}, 500, function() {
left: "-=250px"
});
});
});
.overlay {
position: absolute;
background: url(../img/search_bg.png) repeat;
width: 250px;
top: 0px;
height: 50px;
left: -250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<ul>
<li>
<a href="#">
<span class="sb_icon"> </span>
<span class="sb_text">همکار</span>
<div class="overlay"> </div>
</a>
</li>
<li>
<a href="#">
<span class="sb_icon"> </span>
<span class="sb_text">همکار</span>
<div class="overlay"> </div>
</a>
</li>
</ul>
</aside>


Why?
If you want to know why it is simple: these event are fired multiple times.
Here is SO answer.
Solution
Don't jQuery for simple animations and hover. CSS is perfect for this.
.overlay {
position: absolute;
background: url(../img/search_bg.png) repeat;
width: 250px;
top: 0px;
height: 50px;
left: -250px;
}
.overlay:hover {
left: 0;
}
<aside class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<ul>
<li>
<a href="#">
<span class="sb_icon"> </span>
<span class="sb_text">همکار</span>
<div class="overlay"> </div>
</a>
</li>
<li>
<a href="#">
<span class="sb_icon"> </span>
<span class="sb_text">همکار</span>
<div class="overlay"> </div>
</a>
</li>
</ul>
</aside>

Related

How to add dropdown menu to another dropdown?

I want to create a class for adding dropdown to menu even in the other dropdowns. I almost did it, but there is a problem and when I try to close the inner drop-down, the outer drop-down also closes.
When you click on secondary dropdown the first one will also close. What should I do to fix this?
$(".dropdown").each(function() {
$(this).on("click", function() {
if ($(this).attr("data-dropdown") == "closed") {
$(this).attr("data-dropdown", "opened");
$(this).css({
"height": "auto"
});
} else {
$(this).attr("data-dropdown", "closed");
$(this).css({
"height": "35px"
});
}
})
})
#font-face {
font-family: iransans;
src: url(font/IRANSansWeb.ttf);
}
* {
padding: 0;
margin: 0;
font-family: iransans;
}
html,
body {
height: 100%;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: burlywood;
width: 200px;
}
.dropdown,
.dropdown-child {
height: 35px;
overflow: hidden;
}
.dropdown-item {
display: block;
padding: 6px;
}
.menu .dropdown-item:hover {
background-color: blueviolet;
cursor: pointer;
color: white;
}
<script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="menu">
<div class="menu-item">
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<span>Category</span>
</div>
</div>

The main issue is because the event is propagating up the DOM, so although you click to toggle the child dropdown, the event is caught by the parent which then toggles and hides. To fix this problem, amend your click handler function to receive the event as an argument, then call stopPropagation() on it.
Also, note that you don't need to use each() here as jQuery will loop over all elements in the collection and assign the event to them. In addition you can simplify the code massively, just by using toggleClass().
Finally, it would be much better practice to hide/show the child div of the toggled dropdown instead of changing its height. This method allows you to perform more varied animations to transition the content from hidden to visible, and also prevents issues with text being clipped due to changes in font sizes or zoom levels.
Here's a working version:
$(".dropdown").on("click", e => {
e.stopPropagation();
$(e.currentTarget).toggleClass('open');
})
#font-face {
font-family: iransans;
src: url(font/IRANSansWeb.ttf);
}
* {
padding: 0;
margin: 0;
font-family: iransans;
}
html,
body {
height: 100%;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: burlywood;
width: 200px;
}
.dropdown,
.dropdown-child {
overflow: hidden;
}
.dropdown>div {
display: none;
}
.dropdown.open>div {
display: block;
}
.dropdown-item {
display: block;
padding: 6px;
}
.menu .dropdown-item:hover {
background-color: blueviolet;
cursor: pointer;
color: white;
}
<script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="menu">
<div class="menu-item">
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<span>Category</span>
</div>
</div>

How to Show PNG layers on Hover

I want to implement something like
http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\Images\Bedroom/products/-1
and another sample
http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\Images\Family_Room/products/-1,-1,-1,-1,-1
but what I've already done is:
please Run snippet
when you hover on menu bar the item shown in on the image.
I put a base image on the floor and stack several PNG. for hover based on the menu, it's fine. But if we want in another way, I mean if the user hovers the image element (or clicked) I wanted the related menu Item set as 'active'.
how we can implement it that when user hover some part of images the menu item set active without map area tags?
$('.selector').hover(function() {
var classItem = $(this).children('a').attr('class');
$('.visualizer > .'+ classItem).show();
},function() {
var classItem = $(this).children('a').attr('class');
$('.visualizer > .'+ classItem).hide();
});
.visualizer > img{
position: absolute;
}
.visualizer > .hover-layer{
z-index: 1000;
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Categories</a>
</div>
<ul class="nav navbar-nav">
<li class="selector" ><a href="#" class="all" >All</a></li>
<li class="selector"><a href="#" class="intercom" >interom</a></li>
<li class="selector">powerpoint</li>
</ul>
</div>
</nav>
<h2 class="h2" >Sample Visualizer By Yusef</h2>
<div class="visualizer">
<img src="https://i.stack.imgur.com/rPXyU.png" class="base" />
<img src="https://i.stack.imgur.com/64bLa.png" class="hover-layer intercom all" />
<img src="https://i.stack.imgur.com/QLoXM.png" class="hover-layer powerpoint all" />
</div>
</div>

You can achieve the required functionality by adding custom position CSS. I just update your code snippet, I hope it'll help you out. Thanks
jQuery
$('.image-overlay').hover(function() {
var overlayClass = '.' + $(this).children().attr('class');
$(overlayClass + '.hover-layer').show();
},function() {
var overlayClass = '.' + $(this).children().attr('class');
$(overlayClass + '.hover-layer').hide();
});
CSS
#powerpoint-hover-container {
position: absolute;
left: 430px;
top: 271px;
width: 38px;
height: 29px;
z-index: 1001;
}
#intercom-hover-container {
position: absolute;
right: 366px;
top: 270px;
width: 20px;
height: 13px;
z-index: 1001;
}
HTML
<div id="intercom-hover-container" class="image-overlay">
<span class="intercom"></span>
</div>
<div id="powerpoint-hover-container" class="image-overlay">
<span class="powerpoint"></span>
</div>
$('.selector').hover(function() {
var classItem = $(this).children('a').attr('class');
$('.visualizer > .'+ classItem).show();
},function() {
var classItem = $(this).children('a').attr('class');
$('.visualizer > .'+ classItem).hide();
});
$('.image-overlay').hover(function() {
var overlayClass = '.' + $(this).children().attr('class');
$(overlayClass + '.hover-layer').show();
},function() {
var overlayClass = '.' + $(this).children().attr('class');
$(overlayClass + '.hover-layer').hide();
});
.visualizer {
position: relative;
}
.visualizer > img{
position: absolute;
}
.visualizer > .hover-layer{
z-index: 1000;
display:none;
}
#powerpoint-hover-container {
position: absolute;
left: 430px;
top: 271px;
width: 38px;
height: 29px;
z-index: 1001;
}
#intercom-hover-container {
position: absolute;
right: 366px;
top: 270px;
width: 20px;
height: 13px;
z-index: 1001;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Categories</a>
</div>
<ul class="nav navbar-nav">
<li class="selector"><a href="#" class="all" >All</a></li>
<li class="selector">interom</li>
<li class="selector">powerpoint</li>
</ul>
</div>
</nav>
<h2 class="h2" >Sample Visualizer By Yusef</h2>
<div class="visualizer">
<div id="intercom-hover-container" class="image-overlay">
<span class="intercom"></span>
</div>
<div id="powerpoint-hover-container" class="image-overlay">
<span class="powerpoint"></span>
</div>
<img src="https://i.stack.imgur.com/rPXyU.png" class="base" />
<img src="https://i.stack.imgur.com/64bLa.png" class="hover-layer intercom all" />
<img src="https://i.stack.imgur.com/QLoXM.png" class="hover-layer powerpoint all" />
</div>
</div>

how to show the div that is linked using anchor tag?

I want to show the div that is clicked based on the menu heading and other divs are hidden when the clicked div is shown . I have shown the home div only and rest default in the code .
I tried using
let el = $(this).attr('href');
$(el).toggle();
but its not working perfectly . I want to show the div that is clicked only , home div should be visible by default when no menu is clicked.
.content {
height: 20px;
}
.inactive {
display: none;
}
#home-content {
background-color: red
}
#portfolio-content {
background-color: blue;
}
#about-content {
background-color: yellow;
}
#resume-content {
background-color: green;
}
#contact-content {
background-color: white;
}
<ul class="sidebar-menu-container">
<li>
<a class="sidebar-menu-item" href="#home-content">Home</a>
</li>
<li>
<a class="sidebar-menu-item" href="#about-content">About Me</a>
</li>
<li>
<a class="sidebar-menu-item" href="#resume-content">Resume</a>
</li>
<li>
<a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
</li>
<li>
<a class="sidebar-menu-item" href="#contact-content">Contact</a>
</li>
</ul>
<div class="container">
<div class="content" id="home-content">
</div>
<div class="content inactive" id="about-content">
</div>
<div class="content inactive" id="portfolio-content">
</div>
<div class="content inactive" id="resume-content">
</div>
<div class="content inactive" id="contact-content">
</div>
</div>

Try this
$( ".sidebar-menu-item" ).click(function() {
$(".content").hide();
let el = $(this).attr('href');
$(el).toggle();
});
#home-content {
height: 200px;
background-color: red
}
#portfolio-content {
height: 200px;
background-color: blue;
display: none;
}
#about-content {
height: 200px;
background-color: yellow;
display: none;
}
#resume-content {
height: 200px;
background-color: green;
display: none;
}
#contact-content {
height: 200px;
background-color: white;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="sidebar-menu-container">
<li>
<a class="sidebar-menu-item" href="#home-content">Home</a>
</li>
<li>
<a class="sidebar-menu-item" href="#about-content">About Me</a>
</li>
<li>
<a class="sidebar-menu-item" href="#resume-content">Resume</a>
</li>
<li>
<a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
</li>
<li>
<a class="sidebar-menu-item" href="#contact-content">Contact</a>
</li>
</ul>
<div class="content" id="home-content">
home-content
</div>
<div class="content" id="about-content">
about-content
</div>
<div class="content" id="portfolio-content">
portoflio-content
</div>
<div class="content" id="resume-content">
resume-content
</div>
<div class="content" id="contact-content">
contact-content
</div>

Nevermind, this worked for me:
$('.sidebar-menu-item').click(function () {
let href = $(this).attr('href');
$(".content").addClass("inactive");
$(href).removeClass("inactive");
});

Close dropdown in header when i open dropdown in footer (dropdowns have same class)

I want to have a single type of dropdown in the whole website that behaves in a certain way:
it must open on click
it must stay open when i click inside the block that shows
it must close if i click outside of the opened block
it must close if i click again on the title * which opened the dropdown
if i click on a new dropdown, any existing opened dropdown must close
As you can see in my demo, i have all the features working except last one which works ok only partial.
If you click on dropdown 1 and than on dropdown 2, all is perfect. New one that opens will close the old one which was already opened.
Now, open again dropdown 1 (from header) and after this, click to open dropdown 3 or 4 (which are in footer area) and you will see that the dropdown from header will remain opened.
Any solution to fix this? So same type of dropdown, when opened, must close previous opened drodown regardless of it's position in the webpage. Thanks
$(".dropdown").click(function(event) {
event.stopPropagation();
$(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>

Slightly modified your code, you need just play with the selectors.
$(".dropdown").click(function(event) {
event.stopPropagation();
$(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>

It seems to me the problem line is this:
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
You're only removing the activated class in the parent.
Just look for $('.dropdown') directly.

Changing pin colour for active item on static map

Here's the fiddle:
https://jsfiddle.net/0a0yo575/1/
There's no errors with the JS. As far as I can tell, it should remove the "red-point" class from whatever is clicked and replace it with the "green-point" class?
if (previousTarget) {
previousTarget.className = "";
}
event.target.className = "green-point";

I'm not very familiar with Javascript, but using jQuery I can easily fix your problem (I'm assuming this is OK since you have the jQuery tag on your question ;-) ). I've also made some minor changes to the CSS so the pins on the map are actually the correct size. Furthermore, I added a cursor: pointer to the pins so it's actually clear that you can click them. See fully working example below, or on Fiddle: https://jsfiddle.net/0a0yo575/3/
$(document).ready(function() {
$('.abs').click(function() {
$('.abs').removeClass('green-point').addClass('red-point');
$(this).removeClass('red-point').addClass('green-point');
$('.link').css('font-weight', '');
$('.link[data-marker="' + $(this).attr("id") + '"]').css('font-weight', 800);
});
$('.link').click(function() {
$('.abs').removeClass('green-point').addClass('red-point');
$('#' + $(this).data('marker')).removeClass('red-point').addClass('green-point');
$('.link').css('font-weight', '');
$(this).css('font-weight', 800);
});
});
a {
cursor: pointer;
}
.abs {
position: absolute;
width: 20px;
height: 32px;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
}
#termini {
top: 37.5%;
left: 61.8%;
}
#french {
top: 45.5%;
left: 55.1%;
}
#mark {
top: 58%;
left: 39.3%;
}
#hakkasan {
top: 65%;
left: 12.6%;
}
#american {
top: 62%;
left: 42.8%;
}
#experiment {
top: 54%;
left: 57.2%;
}
#milk {
top: 37.3%;
left: 39.5%;
}
#pig {
top: 37.1%;
left: 38.5%;
}
#opium {
top: 55%;
left: 55.7%;
}
div {
position: relative;
}
div.img-responsive {
width: 100%;
height: 65.5%;
}
.red-point {
background-image: url("http://s23.postimg.org/842300vmv/point.png");
background-position: center center;
background-repeat: no-repeat;
}
.green-point {
background-image: url("http://s21.postimg.org/9u6n8t38z/green.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img class="img-responsive" src="http://s11.postimg.org/cbggzlpib/map.png">
<div class="abs red-point" id="termini">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="french">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="mark">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="hakkasan">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="american">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="experiment">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="milk">
<a onClick="turnGreen(event)"></a>
</div>
<div class="ab red-point" id="pig">
<a onClick="turnGreen(event)"></a>
</div>
<div class="abs red-point" id="opium">
<a onClick="turnGreen(event)"></a>
</div>
</div>
<ol>
<li class="link" data-marker="termini">
<a>Bar Termini</a>
</li>
<li class="link" data-marker="french">
<a>French House</a>
</li>
<li class="link" data-marker="mark">
<a>Mark's Bar</a>
</li>
<li class="link" data-marker="hakkasan">
<a>Hakkasan (bar)</a>
</li>
<li class="link" data-marker="american">
<a>Bar Americain at Brasserie Zedel</a>
</li>
<li class="link" data-marker="experiment">
<a>Experimental Cocktail Club</a>
</li>
<li class="link" data-marker="milk">
<a>Milk & Honey</a>
</li>
<li class="link" data-marker="pig">
<a>Blind Pig</a>
</li>
<li class="link" data-marker="opium">
<a>Opium</a>
</li>
</ol>

Your problem is that the a tag inside the red-point has no width and no height, so you cannot click it. Give them
width: 100%;
height: 100%;
display: block;
And you can.

Categories