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
Related
When clicking on the menu icon the menu opens in a good way with tranisiton.
but when I close the menu it is not closing with transition.
How can I fix this?
https://jsfiddle.net/mfxwsk7g/
I tryed to add this code but it doesn't work:
.navigation__checkbox:not(checked)~.navigation__nav .navigation__list { opacity: 1; }
You can use this code
.navigation__checkbox {
display: none;
}
/*menu icon*/
.navigation__button {
position: fixed;
z-index: 300;
cursor: pointer;
top: 2em;
right: 2em;
height: 4.2em;
width: 3em;
}
.navigation__nav {
position: static;
height: 100vh;
z-index: 200;
background-color: #ffffff;
opacity: 0;
width: 0;
transition: opacity 1000ms;
}
.navigation__list {
position: absolute;
top: 20em;
left: 45em;
transform: translate(-50%, -50%);
width: 100%;
list-style: none;
text-align: right;
opacity: 0;
transition: opacity 1000ms;
}
.navigation__checkbox:checked~.navigation__nav .navigation__list {
opacity: 1;
}
.navigation__checkbox:not(checked)~.navigation__nav .navigation__list {
opacity: 1;
}
.navigation__checkbox:checked~.navigation__nav {
width: 100%;
visibility: visible;
opacity: 1;
}
.navigation__item {
margin: 0em;
}
.navigation__link:link,
.navigation__link:visited {
display: inline-block;
color: #333;
font-family: avenir_next_lt_probold;
font-size: 4.5em;
}
.navigation__link span {
margin-right: 1.5rem;
display: inline-block;
}
.navigation__link:hover {
color: #C1D0D0;
}
.navigation__icon {
position: relative;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
display: inline-block;
width: 2.2rem;
height: 6px;
background-color: #333;
width: 3em;
}
.navigation__icon::before,
.navigation__icon::after {
content: '';
position: absolute;
left: 0;
transition: all 400ms;
}
.navigation__icon::before {
top: -.8em;
}
.navigation__icon::after {
top: .8em;
}
.navigation__button:hover .navigation__icon::before {
top: -1em;
}
.navigation__button:hover .navigation__icon::after {
top: 1rem;
}
/*checkbox*/
.navigation__button {
width: 3em;
height: 2em;
padding-top: 0.5em;
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
top: 0;
transform: rotate(135deg);
}
.navigation__checkbox:checked+.navigation__button .navigation__icon {
background-color: transparent;
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
top: 0;
transform: rotate(-135deg);
}
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="nav-toggle">
<label for="nav-toggle" class="navigation__button"><span
class="navigation__icon" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="600" aria-label="toggle navigation menu">
</span>
</label>
<!--<div class="navigation__background"></div>-->
<nav class="navigation__nav" role="navigation">
<div class="navigation__list">
<li ><a href="#" class="navigation__link" >Over ons</a></li>
<li>Service</li>
<li>Contact</li>
</div>
</nav>
my english is not very good, i hope i can explain what i want to say
I want to fit my toggle icon inside div. I couldn't do it, can you show me how to do it?
I want it to be shaped according to the size of the div. when the div shrinks, the toggle menu should also shrink
I want to make the image in the top image like the bottom image
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 50px;
background-color: white;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
</div>
Thank you in advance for your help :)
This snippet will get you closer to your second image. I changed up the structure a bit and just used a couple spans and positioned them absolute. You can tinker with the animation to your hearts content.
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
display:flex;
align-items: center;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.icon {
width:150px;
height:150px;
position: relative;
}
.btn5 .bar {
transition-duration: 0.5s;
position: relative;
height: 8px;
width: 100%;
height: 20px;
display: block;
background-color: white;
}
.bar:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
}
.bar:nth-of-type(2) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.bar:nth-of-type(3) {
position: absolute;
bottom: 0;
left: 0;
}
.menu.open .bar:nth-of-type(1) {
transform: rotate(-45deg);
top: 10px;
left: -16px;
}
.menu.open .bar:nth-of-type(3) {
transform: rotate(45deg);
bottom: 10px;
left: -16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
I'm trying to make a modal using pure CSS and HTML. So far I have this
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 80%;
max-width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
padding: 58px 32px 32px 32px;
background: #fff;
}
.popup__close {
position: absolute;
top: 16px;
right: 26px;
}
Open modal 1
<div class="popup" id="modal1">
<a class="popup__overlay" href="#"></a>
<div class="popup__wrapper">
<a class="popup__close" href="#">Close icon here</a>
<p>POPUP 1 : CONTENT HERE</p>
</div>
</div>
The problem now is when I'm closing this modal, it's scrolling up. I think this is due to href="#". Is there any other way to close this modal using CSS that would not make it scroll up?
If it's not possible, how can I do it with as little javascript as possibe?
Instead of href = "#" use href = "#!". Your example is below:
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 80%;
max-width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
padding: 58px 32px 32px 32px;
background: #fff;
}
.popup__close {
position: absolute;
top: 16px;
right: 26px;
}
Open modal 1
<div class="popup" id="modal1">
<a class="popup__overlay" href="#!"></a>
<div class="popup__wrapper">
<a class="popup__close" href="#!">Close icon here</a>
<p>POPUP 1 : CONTENT HERE</p>
</div>
</div>
i tried making an easy working clock but i have no idea how to get the clock hands to rotate. i tried to use "#keyframes" to try to get it working but i dont know what to put in "before". is there a way to make it rotate using only css or will using javascript be easier. the link below shows my work but you can also look below and see my code.
https://codepen.io/dior44/pen/GRZMZdy
h1 {
margin: -40px 0 0 0;
font-size: 50px;
position: relative;
top: 100px;
}
div {
margin: 0 auto;
}
.clock {
height: 400px;
width: 400px;
border-radius: 400px;
background: #cccc;
}
.dot {
height: 60px;
width: 60px;
border-radius: 60px;
background: #aaa;
position: relative;
top: 120px;
left: -27px;
z-index: -1;
}
.hours {
width: 7px;
height: 90px;
background: blue;
position: relative;
top: 100px;
}
.minutes {
width: 5px;
height: 170px;
background: black;
position: relative;
top: -50px;
}
.seconds {
width: 3px;
height: 220px;
background: red;
position: relative;
top: -10px;
animation-name: second;
animation-duration: 1s;
}
#keyframes second {
from {
}
}
h2 {
position: relative;
top: 45px;
left: 738px;
font-size: 35px;
margin: -20px 0 0 0;
}
h3 {
margin: -140px 0 0 0;
font-size: 35px;
position:relative;
top: 310px;
left: 920px;
}
h4 {
margin: 3px 0 0 0;
position: relative;
top: 268px;
left: 570px;
font-size: 35px;
}
h5 {
margin: 20px 0 0 0;
position: relative;
top: 400px;
left: 738px;
font-size: 35px;
}
<h1>Clock</h1>
<h2>12</h2>
<h3>3</h3>
<h4>9</h4>
<h5>6</h5>
<body>
<div class="clock">
<div class="hours">
<div class="minutes">
<div class="seconds">
<div class="dot">
<div class="12">
<div class="3">
<div class="6">
<div class="9">
</body>
Pure HTML/CSS second hand:
#clock_container {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid black;
}
#seconds {
height: 50%;
width: 0px;
box-sizing: border-box;
border: 1px solid black;
top: 0%;
left: 50%;
position: absolute;
transform-origin: bottom;
/* of-course, would be 60s */
animation: secondsMotion 10s infinite linear;
}
#keyframes secondsMotion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="clock_container">
<div id="seconds"></div>
</div>
If you wanted to start with the correct time - with a little JS early on:
var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);
and then, in the keyframes:
#keyframes secondsMotion {
0% {
transform: rotate(var(--sec-rot-start));
}
100% {
transform: rotate(var(--sec-rot-end));
}
}
I make a side pull-down menu. Does not work. Please tell me what the problem is
The menu does not open and does not display any errors. I have already tried everything that I could and zero result.
function left_menu(selector){
let menu = $(selector);
let button = menu.find('.left_menu_button');
let links = menu.find('.left_menu_link');
let overlay = menu.find('.left_menu_close_container');
button.on('click', (e) => {
e.preventDefault();
loggleMenu();
});
links.on('click', () => loggleMenu());
overlay.on('click', () => loggleMenu());
function loggleMenu(){
menu.toggleClass('left_menu_main_div_active');
if(menu.hasClass('left_menu_main_div_active')){
$('body').css('overflow', 'hidden');
}else{
$('body').css('overflow', 'visible');
}
}
}
left_menu('.left_menu_main_div');
.left_menu_button{
position: absolute;
left: 10px;
z-index: 30;
width: 50px;
height: 50px;
border-radius: 50%;
}
.left_menu_button:hover .left_menu_span{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
}
.left_menu_button:hover .left_menu_span::after{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: 2px;
}
.left_menu_button:hover .left_menu_span::before{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: -2px;
}
.left_menu_span,
.left_menu_span::after,
.left_menu_span::before{
position: absolute;
width: 30px;
height: 4px;
background-color: #1f1a1e;
}
.left_menu_span{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left_menu_span::before{
content: '';
top: -10px;
}
.left_menu_span::after{
content: '';
top: 10px;
}
.left_menu_main_div_active .left_menu_span{
background-color: transparent;
}
.left_menu_main_div_active .left_menu_span::before{
top: 0;
transform: rotate(45deg);
}
.left_menu_main_div_active .left_menu_span::after{
top: 0;
transform: rotate(-45deg);
}
.left_menu_nav{
padding-top: 55px;
position: fixed;
z-index: 20;
display: flex;
flex-flow: column;
height: 100%;
width: 20%;
background-color: #2a2a2a;
overflow-y: auto;
left: -100%;
}
.left_menu_main_div_active .left_menu_nav{
left: 0;
}
.left_menu_link{
text-align: center;
padding: 10px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
color: white;
margin-top: 10px;
}
.left_menu_link:hover{
filter: brightness(0.7);
border: 1px solid black;
border-radius: 3px;
transition: 0.7s;
}
.left_menu_close_container{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.left_menu_main_div_active .left_menu_close_container{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu_container">
<div class="left_menu_main_div">
<a href="#" class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
</div>
</div>
Shouldn't function loggleMenu( be function ToggleMenu(?
Also where are you loading the script in the html?
Pop a few console.Log() calls into the script and see where it gets up to or fails.