Develop Reference

Javascript Text following the cursor on mouseover

The task is:
when I hover the pin with the cursor the text should follow the mouse.
Unfortunately the position of the text is not correct. Is quite offset.
It should be next to the pin.
How can I calculate the position in a better way?
var tooltipSpans = document.getElementsByClassName('nav-head');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY,
i, l = tooltipSpans.length;
for(i = 0; i < l; i++){
tooltipSpans[i].style.top = (y - 220) + 'px';
tooltipSpans[i].style.left = (x - 420) + 'px';
}
};
var tooltipSpans = document.getElementsByClassName('nav-head');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY,
i, l = tooltipSpans.length;
for(i = 0; i < l; i++){
tooltipSpans[i].style.top = (y - 220) + 'px';
tooltipSpans[i].style.left = (x - 420) + 'px';
}
};
* {
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
color: white;
font-family: "Roboto", sans-serif;
background: black;
}
nav.anchor-nav {
position: fixed;
top: 0%;
left: 0rem;
z-index: 90;
width: 490px;
height: 490px;
background: none;
opacity: 0;
visibility: hidden;
z-index: 1;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
nav.anchor-nav ul {
position: relative;
display: inline-block;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
top: auto;
-webkit-transform: none;
transform: none;
}
nav.anchor-nav li {
position: absolute;
display: block;
cursor: pointer;
margin-bottom: 0.37rem;
border-radius: 50%;
transition: all .2s;
}
nav.anchor-nav li:before {
opacity: 0;
visibility: hidden;
color: white;
font-size: 2.0rem;
height: 2.2rem;
margin: 0;
position: absolute;
z-index: 1;
}
nav.anchor-nav li.active a {
width: 100%;
height: 100%;
}
nav.anchor-nav li.active a:after {
border: 1px solid orange;
background-color: orange;
}
nav.anchor-nav li.active a span {
opacity: 1;
visibility: visible;
}
nav.anchor-nav li.active:before {
opacity: 1;
visibility: visible;
}
nav.anchor-nav li.section01 {
width: 40px;
height: 40px;
top: 380px;
left: 55px;
}
nav.anchor-nav li.section01 .nav-head {
left: -150px;
top: 50px;
}
nav.anchor-nav li.section02 {
width: 40px;
height: 40px;
top: 380px;
left: 367px;
}
nav.anchor-nav li.section02 .nav-head {
left: 0px;
top: 50px;
}
nav.anchor-nav li.section03 {
width: 40px;
height: 40px;
top: 210px;
left: 40px;
}
nav.anchor-nav li.section03 .nav-head {
left: 0px;
top: 50px;
}
nav.anchor-nav li.section04 {
width: 40px;
height: 40px;
top: 210px;
left: 407px;
}
nav.anchor-nav li.section04 .nav-head {
left: 0px;
top: 50px;
}
nav.anchor-nav li.section05 {
width: 40px;
height: 40px;
top: 210px;
left: -50px;
}
nav.anchor-nav li.section05 .nav-head {
left: 0px;
top: 50px;
}
nav.anchor-nav li.section06 {
width: 40px;
height: 40px;
top: 210px;
left: 470px;
}
nav.anchor-nav li.section06 .nav-head {
left: 0px;
top: 50px;
}
nav.anchor-nav li.section07 {
width: 40px;
height: 40px;
top: 30px;
left: 410px;
}
nav.anchor-nav li.section07 .nav-head {
left: 0px;
top: 50px;
}
nav.anchor-nav li.section08 {
width: 40px;
height: 40px;
top: 1px;
left: 50px;
}
nav.anchor-nav li.section08 .nav-head {
left: -150px;
top: 50px;
}
nav.anchor-nav li:hover a:after {
border: 1px solid orange;
background-color: orange;
}
nav.anchor-nav li:hover a span {
display: block;
position: fixed;
overflow: hidden;
opacity: 1;
visibility: visible;
}
nav.anchor-nav li:hover:before {
opacity: 1;
visibility: visible;
}
nav.anchor-nav a {
position: relative;
display: block;
margin: auto;
width: 100%;
height: 100%;
cursor: pointer;
}
nav.anchor-nav a:after {
content: "";
width: 40px;
height: 40px;
position: absolute;
border: 1px solid #fff;
transition: all .4s;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
background: transparent;
}
nav.anchor-nav a span {
display: none;
transition: all .4s;
opacity: 0;
visibility: hidden;
width: 400px;
}
<div class="container">
<nav class="anchor-nav" role="navigation" id="navigation" style="visibility: inherit; opacity: 1;">
<ul class="dotstyle">
<li class="section01 webfont-plus" id="anchor1">
<a href="#">
<span class="nav-head titleone" >
<h1>The industry today</h1><h3 class="bl">Digital innovation at pace</h3></span></a></li>
<li class="section02 webfont-plus" id="anchor2">
<a href="#">
<span class="nav-head titletwo" >
<h1>Becoming an
intelligent enterprise</h1><h3 class="bl">Preparing the business for future possibilities</h3></span></a></li>
<li class="section03 webfont-plus" id="anchor3">
<a href="#">
<span class="nav-head titlethree">
<h1>Augmenting upstream</h1><h3 class="bl">Incredible business benefits at your fingertips</h3></span></a></li>
<li class="section04 webfont-plus" id="anchor4">
<a href="#" class="">
<span class="nav-head titlefour" >
<h1>Next-generation
business processes</h1><h3 class="bl">The opportunity to explore technology</h3></span></a></li>
<li class="section05 webfont-plus" id="anchor5">
<a href="#">
<span class="nav-head titlefive" >
<h1>The changing
work force</h1><h3 class="bl">Navigating a complex ecosystem</h3></span></a></li>
<li class="section06 webfont-plus" id="anchor6">
<a href="#" class="">
<span class="nav-head titlesix" >
<h1>Transform finance</h1><h3 class="bl">Modernize the backbone of the enterprise</h3></span></a></li>
<li class="section07 webfont-plus" id="anchor7">
<a href="#">
<span class="nav-head titleseven" >
<h1>Retail expansion, not
increased complexity</h1><h3 class="bl">Maintain efficiency as you grow</h3></span></a></li>
<li class="section08 webfont-plus" id="anchor8">
<a href="#">
<span class="nav-head titleeight" >
<h1>SAP solutions
for Oil and Gas</h1><h3 class="bl">Paving the way for an infinite loop
of innovation</h3></span></a></li>
</ul>
</nav>
</div>

There is no reason to use javascript for that. It can be accomplished simply using HTML and CSS.
Just make a tooltip as one component, eg:
<div class="tooltip">
<span class="dot"></span>
<div class="content">
<h1>Tooltip heading</h1>
<p>Some random text blah blah...</p>
</div>
</div>
So you have tooltip which contains everything it needs: dot and it's contents just right next to it.
Example jfiddle
Edit:
To follow the mouse, get offset of the parent element, subtract it from mouse location and that should do it.
var offset = $target.parentElement.getBoundingClientRect();
$target.style.top = (e.clientY - offset.top) + 'px';
$target.style.left = (e.clientX - offset.left) + 'px';
Here's an example jfiddle

Divs absolute into responsive img

I have a responsive/height image, I want to put absolute elements into img, one by corner but I don't know how to do it, because image size will be dynamic.
Code:
#contenedorimagen {
width: 100%;
background: #000;
}
#imagen {
position: relative;
width: 100vw;
height: 90vh;
vertical-align: middle;
text-align: center;
}
#i {
max-width: 100%;
height: auto;
max-height: 100%;
}
#imagen #c {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
#imagen #h {
position: absolute;
top: 0;
right: 0;
color: #fff;
}
#imagen #pm {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
}
<div id="contenedorimagen">
<div id="imagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>
</div>
Thanks
Example image
firefox

You need to give max-width to image container
#contenedorimagen {
width: 100%;
background: #000;
}
#imagen {
position: relative;
width: 100vw;
height: 90vh;
max-width: 100%;
vertical-align: middle;
text-align: center;
}
#i {
max-width: 100%;
height: auto;
max-height: 100%;
}
#imagen #c {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
#imagen #h {
position: absolute;
top: 0;
right: 0;
color: #fff;
}
#imagen #pm {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
}
<div id="contenedorimagen">
<div id="imagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>
</div>

Maybe you can adapt this example for your exact needs:
#contenedorimagen {
position: relative;
width: 100%;
height: 100%;
}
#contenedorimagen #i {
width: 100%;
height: auto;
display: block;
}
#contenedorimagen div {
background: #000;
padding: 15px;
color: #fff;
}
#c {
position: absolute;
top: 0;
left: 0;
}
#h {
position: absolute;
top: 0;
right: 0;
}
#pm {
position: absolute;
bottom: 0;
left: 0;
}
<div id="contenedorimagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>

Safari- show() and css('display','block') doesn't work

I have to display a spinner.
The spinner has a class with the following style:
.spinner-ctn{
display: none;
position: fixed;
top: 0;
left: 0;
text-align: center;
line-height: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(255,255,255,.7);
}
For display the spinner I try to use:
a
function showSpinnerSignUp(){
$('.spinner-ctn').css('display','block')
}
b
function showSpinnerSignUp(){
$('.spinner-ctn').show()
}
for some reason both of them doesn't work in safari

Add a # to <a href='#' and put a space between event. I try with safari work fine.
$(document).on('click','.skip-step',function(e){
$('.spinner-ctn').css('display','block')
})
.spinner-ctn{
display: none;
position: fixed;
top: 0;
left: 0;
text-align: center;
line-height: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(255,255,255,.7);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
link
<div class="spinner-ctn"><a class="spinner">test</a></div>
UPDATE
ok try, add class with display: block !important and toggle this.
$(document).on('click','.skip-step',function(e){
$('.spinner-ctn').toggleClass("spinner_block")
})
.spinner-ctn{
display: none;
position: fixed;
top: 0;
left: 0;
text-align: center;
line-height: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(255,255,255,.7);
}
.spinner_block{
display:block !important;
position: fixed;
top: 0;
left: 0;
text-align: center;
line-height: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(255,255,255,.7);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
link
<div class="spinner-ctn"><a class="spinner">test</a></div>

Fade In/out div elements when a # anchor is clicked

I am trying to get different divs to fade in and out when I click a image with a <a href> in it and # to make it fade in and out. I can not get it to fade in and out no matter what I try. This is my code:
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#triggerButton').click(function (e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$('#casualshirt').fadeIn('fast');
});
});
});
body {
margin: 0;
padding: 0;
}
#background {
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 800px;
overflow: hidden;
z-index:0;
}
#Background {
left: 0px;
top: 0px;
position: absolute;
width: 600px;
height: 800px;
z-index:1;
}
#Layer1 {
left: 24px;
top: 16px;
position: absolute;
width: 285px;
height: 762px;
z-index:2;
}
#Rectangle1 {
left: 34px;
top: 59px;
position: absolute;
width: 260px;
height: 512px;
z-index:3;
}
#Layer6 {
left: 339px;
top: 541px;
position: absolute;
width: 98px;
height: 116px;
z-index:4;
}
#Shirts {
left: 391px;
top: 8px;
position: absolute;
width: 133px;
height: 42px;
z-index:5;
}
#Layer2 {
left: 258px;
top: 138px;
position: absolute;
width: 260px;
height: 139px;
z-index:6;
}
#Layer4 {
left: 252px;
top: 315px;
position: absolute;
width: 197px;
height: 188px;
z-index:7;
}
#Layer5 {
left: 498px;
top: 366px;
position: absolute;
width: 62px;
height: 86px;
z-index:8;
}
#Layer7 {
left: 407px;
top: 492px;
position: absolute;
width: 174px;
height: 165px;
z-index:9;
}
#Layer8 {
left: 366px;
top: 685px;
position: absolute;
width: 55px;
height: 108px;
z-index:10;
}
#Layer9 {
left: 490px;
top: 670px;
position: absolute;
width: 98px;
height: 101px;
z-index:11;
}
#Layer10 {
left: 221px;
top: 642px;
position: absolute;
width: 130px;
height: 117px;
z-index:13;
}
#Layer3 {
left: 368px;
top: 95px;
position: absolute;
width: 260px;
height: 182px;
z-index:14;
}
.overlay {
display: none;
}
#map {
/*right: -780px; removed for demo purposes */
width: 285px;
height: 762px;
padding: 29px;
background: url(http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer1.png) no-repeat;
}
#station_A {
top: 0%;
/* whatever you like */
left: 0%;
/* whatever you like */
position: absolute;
}
#station_B {
top: 0%;
/* whatever you like */
left: 0%;
/* whatever you like */
position: absolute;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background-image: url('/images/shirt_sprites.png');
display: block;
height: 72px;
padding: 0;
width: 72px;
}
#paradisetanktop + #paradisetanktop_s {
background-position: 72 0;
}
#paradisetanktop:checked + #paradisetanktop_s {
background-position: 0 0;
}
#bandanatop + #bandanatop_s {
background-position: 0 0;
}
#bandanatop:checked + #bandanatop_s {
background-position: 0 0;
}
button {
background-image: url(images/Next.png);
background-repeat: no-repeat;
background-position: 50% 50%;
/* put the height and width of your image here */
height: 27px;
width: 55px;
border: none;
}
button span {
display: none;
}
#casualshirt {
width: 384px;
height: 609px;
left: 350px;
background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
position: absolute;
display: none;
z-index: 15;
}
#firstscreen {
width: 384px;
height: 609px;
left: -30px;
position: absolute;
background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/firstscreen.png') no-repeat;
z-index: 12;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="firstscreen"></div>
<div id="background">
<div id="Background"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Background.png"></div>
<div id="Layer1"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer1.png"></div>
<div id="map"></div>
<div id="Rectangle1"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Rectangle1.png"></div>
<div id="shirts">
<div id="Shirts"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Shirts.png"></div>
<div id="Layer2"><a href="#" id="triggerbutton"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer2.png"></div>
<div id="Layer4"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer4.png"></div>
<div id="Layer5"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer5.png"></div>
<div id="Layer6"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer6.png"></div>
<div id="Layer7"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer7.png"></div>
<div id="Layer9"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Next.png"></div>
<div id="Layer10"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer10.png"></div>
<div id="Layer3"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer3.png"></div>
<div id="casualshirt"></div>
</div>
<div id="colors"></div>
</div>
I've researched this thoroughly and can not get it to work.
UPDATE: I did Include Fiddle but it got removed here is the fiddle
UPDATE: Updated Fiddle with fixed for the id.

You must remove trigger click function outside of document load. Because you added jquery lib inside body element.
Also you can fade out and fade in target parent div element for flashing thing.
$(document).on('click', '#triggerButton', function(e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$(e.toElement.parentElement).fadeOut().delay(200).fadeIn();
});
});
Try this fiddle: http://jsfiddle.net/aLrf1cLz/4/
UPDATE 1:
CSS:
#casualshirt {
top: 100px;
width: 384px;
height: 609px;
background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
position: absolute;
display: none;
z-index: 123123;
}
JS:
$(document).on('click', '#triggerButton', function(e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$(e.toElement.parentElement).fadeOut();
$('#casualshirt').fadeIn()
});
});
Fiddle: http://jsfiddle.net/aLrf1cLz/8/

HTML zoom overlapping

I have a jsp page as shown below
When I zoom this page my tags and buttons are overlapping editor area, How can I prevent this?
I don't want buttons to come over editor even on zoom.
My CSS code
#editor {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
}
#widnow{
position: absolute;
top: 72.5%;
right: 0;
bottom: 0;
left: 3%;
}
#title_bar{
background: #FEFEFE;
height: 25px;
width: auto;
}
#button{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
#box{
height: 250px;
background: #DFDFDF;
}
#ul{
list-style-type: none;
}

All you need is to change all the position:absolute; to position:relative; in your css and div style..!!
DEMO