Changing pin colour for active item on static map - javascript

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.

Related

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>

Share 100vh between div and position:sticky navbar

I want to share the initial visible area of my page between a slideshow and my navbar like the below diagram which will then stick at the top when you scroll down the document. This is where I've run into issues.
I've tried doing something like height: 90vh for my slideshow and height: 10vh for my navbar but I want the website to be dynamic and able to fit to most resolutions until you hit cellphone level or at least like 200% zoom on Microsoft edge wherein another stylesheet will be used.
I've also tried placing them within the same div, setting height: 90% for the slideshow and height: auto for the navbar. This worked best in terms of how dynamic it is but the position: sticky obviously didn't work because it only traverses the height of the parent div.
The one that works best is setting the slideshow height to height: 90vh and allowing the navbar to go accordingly. It kinda sorta works but not nearly good enough for me.
The navbar has to initially be at the bottom then stick to the top. If possible I'd rather have a purely CSS solution, but I am open to javascript. Though I'd rather have pure javascript as opposed to jQuery but if it's well explained I'm okay with it.
The actual question is: How do I make my navbar and my slideshow share the initial visible height dynamically?
Here is all the relevant code:
#container {
display: flex;
flex-direction: column;
height: 100vh;
}
.slideshow-base {
flex-grow: 1;
width: 100%;
margin: 0px;
}
.slideshow-container {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.Slides {
position: absolute;
transform: translateX(-100%);
transition: transform 2s;
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
}
.Slides-Images {
width: 100%;
height: 100%;
object-fit: cover;
}
.navbar-base {
font-weight: bold;
z-index: 2;
font-variant: small-caps;
height: 100%;
width: auto;
top: 0px;
background-color: rgba(50, 64, 147, 0.9);
display: block;
border-bottom: 1px solid rgb(226, 208, 0);
}
<div id="container">
<!--Slideshow-->
<div class="slideshow-base" style="background-color: rgb(50, 64, 147); height: 90vh">
<div class="slideshow-container">
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dot-base">
<span class="dot" onclick="currentSlide(1)">᛫</span>
<span class="dot" onclick="currentSlide(2)">᛫</span>
<span class="dot" onclick="currentSlide(3)">᛫</span>
</div>
</div>
</div>
<hr />
<!--Sticky Navbar-->
<div class="navbar-base" style="width: 100%; height: auto; position: sticky;">
<ul>
<li class="navbar-button" style="display: inline-block;"> #Html.ActionLink("main page", "MainPage", "Home") </li>
<li class="navbar-button" style="display: inline-block;">
#Html.ActionLink("about", "About", "About")
<ul class="navbar-ddmenu">
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("academy", "Academy", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("the club", "DKClub", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("taebo", "TaeBo", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("founders and staff", "Staff", "About")</li>
</ul>
</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("contacts", "Contacts")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("gallery", "Gallery")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("shop dk", "Index", "Shop")</li>
</ul>
</div>
</div>

Use CSS Grids
body {
margin: 0;
}
#container {
width: 100vw;
background: #ccc;
padding: 10px;
height: 100vh;
display: grid;
grid-template-rows: 90vh 10vh;
grid-gap: 10px;
}
#container>div {
background: #999;
}
<section id="container">
<div>Sticky</div>
<div>NavBar</div>
</section>

Ok, I would use a flexbox approach for your initial view, then a bit of js to add a class on scroll:
window.onscroll = function() {
var nav = document.getElementById('nav');
var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 100) { // not sure how much you want it to scroll before it is made sticky
nav.classList.add("fixed");
} else {
nav.classList.remove("fixed");
}
}
body {
margin:0;
height:200vh; /* just so there is some scrolling */
}
.container {
height:100vh;
display:flex;
flex-direction:column;
}
.slideshow-base {
flex-grow:1; /* this will make shadow base take the rest of the available height to start with */
}
.fixed {
position:fixed;
top:0;
left:0;
right:0;
}
<div class="container">
<div class="slideshow-base" style="background-color: rgb(50, 64, 147); height: 90vh">
<div class="slideshow-container">
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dot-base">
<span class="dot" onclick="currentSlide(1)">᛫</span>
<span class="dot" onclick="currentSlide(2)">᛫</span>
<span class="dot" onclick="currentSlide(3)">᛫</span>
</div>
</div>
</div>
<hr />
<!--Sticky Navbar-->
<div id="nav" class="navbar-base">
<ul>
<li class="navbar-button" style="display: inline-block;"> #Html.ActionLink("main page", "MainPage", "Home") </li>
<li class="navbar-button" style="display: inline-block;">
#Html.ActionLink("about", "About", "About")
<ul class="navbar-ddmenu">
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("academy", "Academy", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("the club", "DKClub", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("taebo", "TaeBo", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("founders and staff", "Staff", "About")</li>
</ul>
</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("contacts", "Contacts")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("gallery", "Gallery")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("shop dk", "Index", "Shop")</li>
</ul>
</div>
</div>

You can probably wrap those 2 elements in a wrapper (and optionally give it a height) and use flexbox to make them share space.
In the example below, the slideshow will always cover 90% of the wrapper's height and nav will cover 10% of it.
.slideshow,
.nav {
border: 2px solid #000
}
.wrapper {
display: flex;
flex-direction: column;
height: 90vh
}
.nav {
/* An arbitrary value to start with */
flex-grow: 1;
}
.slideshow {
/* Grow this element 9 times more than the other element. */
flex-grow: 9;
}
<div class="wrapper">
<div class="slideshow">
Slideshow content
</div>
<nav class="nav">
Navigation content
</nav>
</div>

view more button is not working

In my posts I am trying to add a gallery of images. I want to have a load more button show up after 4 images. Then you would press the load more button and 4 more appear, and so on. I have created the html, css, and js, but for some reason it is not working. Can anyone help me find a solution? Thanks in advance. Here is the fiddle https://jsfiddle.net/8zfz6hap/
html
<div class="shop-gallery">
<div class="product">
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class='product'>
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class='product'>
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div>
</div>
<button id="load-more-comments">Load More</button>
js
var $parent = $("#shop-gallery"),
$items = $parent.find("#product"),
$loadMoreBtn = $("#load-more-comments"),
maxItems = 4,
hiddenClass = "visually-hidden";
// add visually hidden class to items beyond maxItems
$.each($items, function(idx,item){
if(idx > maxItems - 1){
$(this).addClass(hiddenClass);
}
});
// onclick of show more button show more = maxItems
// if there are none left to show kill show more button
$loadMoreBtn.on("click", function(e){
$("."+hiddenClass).each(function(idx,item){
if(idx < maxItems - 1){
$(this).removeClass(hiddenClass);
}
// kill button if no more to show
if($("."+hiddenClass).size() === 0){
$loadMoreBtn.hide();
}
});
});
css
.product img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
margin: auto;
max-width: calc(100% - 48px);
max-height: calc(100% - 48px);
}
.product {
width: 21%;
height: 0;
padding-top: 30%;
display: inline-block;
position: relative;
margin-bottom: 3.5%;
cursor: pointer;
}
.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}

shop-gallery and product both are classes.
Need to use :
var $parent = $(".shop-gallery"),
$items = $parent.find(".product")
To select and actions on them. . instead of #
Example Fiddle
Update:
In order to hide load more button use condition - $("." + hiddenClass).length === 0 and to show 4 images, your code is correct just update the condition to idx < maxItems so that it true for idx - 0,1,2,3 which will be four images.
Example Fiddle

How to scroll up a div when hovering over another element

I have an absolute div that is behind my footer. When I hover over another element (#snapchat) I want that absolute div to scroll up from behind the footer and stop above it where it can be seen. How would I do this?
.snapcode-footer {
position: absolute;
padding-top: 20px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
<div class="snapcode-footer">
<img src="https://wumbo.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #wumbo"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #wumbo"/></li>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #wumbo"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #wumbo"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.wumbo.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
<div/>
</div>
</div>

I'm re-positioned your div.snapcode footer and applied a css property to
#snapchat:hover ~ .snapcode-footer . hopes this will help you :)
.snapcode-footer {
position: absolute;
padding-top: 90px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
#snapchat:hover ~ .snapcode-footer{
z-index:999;
color:green;
position:relative;
margin-bottom:100px;
margin-left:50px;
}
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #hullandspar"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
<div class="snapcode-footer">
<img src="https://hullandspar.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #hullandspar"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #hullandspar"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.hullandspar.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
</div>
</div>
</div>

I'd suggest giving snapcode-footer an id to make it easier to control.
<div class="snapcode-footer" id="snapcode">
<script>
var hover = 0;
</script>
Then you make a script on #snapchat
<li id="snapchat"onmouseenter="hover = 1" onmouseout="hover = 0"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
Lastly, you make a script for if the mouse is hovering over the #snapchat element to increase height or to stay in one place
<script>
setInterval("if(hover == 1){snapcode.top--}");
setInterval("if(hover == 0){snapcode.top = 0}");
</script>

how to create overlay shape in jquery

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>

Categories