Develop Reference

two circles should follow the cursor – one small and one big (with delay)

I have seen this tendency on some websites now, where the default cursor is replaced with a new cursor – in many cases circles
These cursors are interactive – with interactive i mean when hovering an a-tag it changes size and color.
On this website: https://en.leviev-group.com/ you can see the effect on the cursor that I want.
I have tried to make a Pen, but it isn't working properly: https://codepen.io/anon/pen/VQwdBv?q=cursor&limit=all&type=type-pens
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
I would like the circle in the middle to be the cursor and the big circle around to follow the cursor with delay.
When hovering a-tags it should wrap around the a-tag, similar to the example on the website. If possible made with javascript and css
How is this possible?

You are almost good, simply make both element behave the same and by adding the transition on the small one you will make it slower and create the follow effect.
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
transition: all 1s linear;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
Or change the transition if you want the bigger one to follow the small one:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
UPDATE
You may consider event on links tag if you want to change the cursor when hovering links.
Here is a simple example:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
$('a').mouseover(function() {
$('#cursor').addClass('on-link');
})
$('a').mouseout(function() {
$('#cursor').removeClass('on-link');
})
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
z-index: -1;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
#cursor.on-link #circle-big {
border: 2px solid blue;
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>

DOM Transitions not working on different resolution screen?

I was creating a scrolling effect such that when i scroll to the second page, only then will the download button will fade in, and on scrolling to third page, contribute button fades in. I have a laptop with screen resolution of 1366 x 768, but when my friend opened the website, he could not see the transition unless he zoomed in. His screen resolution was 1920 x 1080.
Now how do i ensure that as soon as the user scrolls down to the location where the download/contribute buttons are hidden, then only the buttons fade into visibility.(so as to say, a method to know when did the element appear into view of window.)
PS. no jQuery please. pure JS solution wanted. Also it will be great if one can explain why this problem is happening in screens of different resolution.
var download = document.getElementById("download");
var contribute = document.getElementById("contribute");
document.addEventListener("scroll", checkVisible);
function checkVisible() {
var scr = window.pageYOffset;
if (scr >= 400) {
download.style.opacity = "1";
download.style.left = "80%";
}
if (scr >= 900) {
contribute.style.opacity = "1";
contribute.style.left = "5%";
}
}
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
#page1 {
width: 100%;
height: 700px;
position: relative;
z-index: -2;
border-bottom: 2px solid black;
}
#title {
position: relative;
top: 200px;
width: 500px;
height: 90px;
font-size: 40px;
margin: 0 auto;
text-align: center;
color: white;
text-shadow: 1px 0 2px black, 0 1px 2px black, -1px 0 2px black, 0 -1px 2px black;
}
#fadetitle {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 10px;
}
#title h1 {
position: relative;
z-index: 0;
top: -5px;
}
#aboutsite {
position: absolute;
width: 90%;
z-index: 0;
color: white;
top: 450px;
text-align: center;
margin-left: 5%;
font-size: 25px;
}
#page2 {
width: 100%;
height: 500px;
background-size: cover;
position: relative;
border-bottom: 2px solid black;
}
#downloadtext {
font-size: 25px;
width: 500px;
text-align: center;
color: white;
position: relative;
top: 160px;
left: 35%;
font-weight: bold;
text-shadow: 0 0 5px black;
}
.choice {
display: block;
width: 180px;
height: 50px;
background-color: #4d94ff;
text-align: center;
border: 1px solid black;
border-radius: 15px;
box-sizing: border-box;
text-decoration: none;
position: relative;
}
.choice p {
margin-top: 15px;
font-weight: bold;
color: black;
}
.choice:hover {
cursor: pointer;
background-color: #0052cc;
}
#download {
top: 225px;
left: 85%;
opacity: 0;
transition: background-color 0.2s, left 0.5s ease-out, opacity 0.2s;
}
#page3 {
width: 100%;
height: 500px;
background-attachment: fixed;
background-size: cover;
position: relative;
}
#contribute {
top: 225px;
left: 1%;
opacity: 0;
transition: background-color 0.2s, left 0.5s ease-out, opacity 0.2s;
}
#contributetext {
font-size: 25px;
width: 500px;
text-align: center;
color: white;
position: relative;
top: 160px;
left: 25%;
font-weight: bold;
text-shadow: 0 0 5px black;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page1">
<div id="fade"></div>
<div id="title">
<div id="fadetitle"></div>
<h1</h1>
</div>
<p id="aboutsite"></p>
</div>
<div id="page2">
<a id="download" class="choice" href="#">
<p>DOWNLOAD</p>
</a>
<p id="downloadtext"></p>
</div>
<div id="page3">
<a id="contribute" class="choice" href="contribute.html" target="_blank">
<p>CONTRIBUTE</p>
</a>
<p id="contributetext"></p>
</div>
<script src="script.js"></script>
</body>
</html>

Content doesn't show up on toggle button with jQuery

i'm creating a toggle button with jquery. I've watched a tutorial from youtube (lynda.com) on how to create toggle button with jquery. I tried copying the code but the content under "p tag" doesn't show up. it's working perfectly on the tutorial. i'm not good in javascript. maybe you could see what i missed or maybe libraries idk. here's my code. thank you in advance.
HTML:
<div id="toggle">
<div id="poptext"> toggle </div>
<div id="box">
<p> hello</p>
</div>
</div>
CSS:
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
JAVASCRIPT:
<script>
window.jQuery || document.write('script src=\'jquery.min.js\'></script>');
$(document).ready(function () {
$('#poptext').click(function () {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
});
</script>

There are 2 issues here, 1 appending script tag as given won't work, you need to split it, second you need to wait for the script to load to execute your code. You can use the window load event to do that
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>');
window.addEventListener('load', function() {
$('#poptext').click(function() {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
})
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
<div id="toggle">
<div id="poptext">toggle</div>
<div id="box">
<p>hello</p>
</div>
</div>

Meteor Interaction with JQuery or Animation in General

So basically, I'm building an app in Meteor, and I have the left navbar in a position: fixed; and left : -300px and want to slide it over to left : 300px, but have no idea about how to animate a transition in Meteor (somewhat the slide transition in jquery). I understand the basic JQuery aspect of thing, but for some reason, it doesnt seem to work when I put it under the if Meteor.isClient aspect of the script. Keep in mind, Im am fairly new to Meteor, inclusive javascript code would be much appreciated.
My current code is as follows.
HTML
<body>
<div class='topmenu'>
<div class='menubutton'>
<span class="icon-bar1"></span>
<span class="icon-bar2"></span>
<span class="icon-bar3"></span>
<!--Needs to be fixed so that we only need to use one icon-bar class!!!-->
</div>
<div class='BanditDiv'>
<h1 class='BanditName'>Bandit</h1>
</div>
</div>
<div class='leftnav'>
<div class='sitenav'>
<a class='internalnav' href="#">Home</a>
<a class='internalnav' href="#">Musicians</a>
<a class='internalnav' href="#">Recording Space</a>
</div>
</div>
<div class='main'>
</div>
</body>
CSS
body{
margin: 0px 0px 0px 0px;
}
.navitem:hover{
background-color: #000066;
}
.main{
background-color: rgb(128,128,128);
height: 200vh;
width: 100vw;
margin: 0px 0px 0px 0px;
overflow-x:hidden;
}
.topmenu{
position: fixed;
z-index: 10;
top: 0px;
width: 100vw;
height: 50px;
background: white;
border-bottom: 2px lightgray solid;
}
.BanditDiv{
position: fixed;
top: 0px;
height: 50px;
width: 30vw;
margin-left: 35vw;
float: center;
}
.BanditName{
text-align: center;
font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif;
color: #000066;
}
.menubutton{
position: fixed;
top: 5px;
left: 5px;
height: 40px;
width: 40px;
border: 1px #cccccc solid;
background-color: white;
border-radius: 5px;
}
.menubutton:focus{
outline: 0;
}
.icon-bar1 {
position: fixed;
top: 15px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar2 {
position: fixed;
top: 25px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar3 {
position: fixed;
top: 35px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.leftnav{
position: fixed;
top: 0px;
left: -300px;
width: 300px;
height: 100vh;
z-index: 9001;
background-color: yellow;
}

So this is what I came up with for the solution that seemed to work.
I created an angular module inside the Meteor.isClient and that seemed to work well.
if (Meteor.isClient) {
angular.module('sidebar',['angular-meteor']);
angular.module('sidebar').controller('SidebarCtrl', ['$scope',
function ($scope) {
function Menu (callback){
$('.menubutton').on('click', function (){
$('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"});
$('.leftnav').animate({left : "0px"}, 500, function(){
$('.main').click(function() {
$('.leftnav').animate({left: "-302px"}, 500);
$('.leftnav').css({"box-shadow" : "none"});
});
$('.leftnav').click(function(event){
event.stopPropagation();
});
});
});
}
Menu();
}]);
}

Simplifying jquery

I´m trying to simplify my jquery so I don´t have to make it so long. I got 3 boxes and I want to be able to change the color of each box independently. But without the need to put in jquery for each box separately. (At the moment only .profile1 (box) changes color from the dropdown menu).
html
<div class="profile1"></div>
<div class="profile2"></div>
<div class="profile3"></div>
<div class="overlay"></div>
<div class="popup">
<select class="dropdown" id="cp">
<option id="red"> red </option>
<option id="yellow"> yellow </option>
<option id="blue"> blue </option>
</select>
<a class="close" onclick="hidePopup()" href="">CLOSE</a>
<input onclick="hidePopup()" type="submit" value="SUBMIT" id="submit" class="submit">
</div>
css
.profile1 {
margin-left: 1.7%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}
.profile2 {
margin-left: 21.4%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}
.profile3 {
margin-left: 41.1%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}
.student-name {
color: #FDFDFD;
font-size: 1.2vw;
text-align: center;
margin-top: 10%;
}
.overlay {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
position: absolute;
background-color: #555454;
opacity: 0.80;
z-index: 2;
}
.popup {
top: 20%;
left: 27.5%;
height: 17%;
width: 45%;
background-color: #FDFDFD;
position: absolute;
border-radius: 5px;
z-index: 3;
-webkit-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
}
#submit {
background: #0D7BFF;
border: none;
cursor: pointer;
color: #FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width: 50%;
right: 0%;
bottom: 0%;
top: 76.5%;
position: absolute;
border-radius: 0px 0px 5px 0px;
text-align: center;
}
#submit:hover {
background-color: #004598;
transition: all 0.3s ease-out;
}
.close {
background: #0D7BFF;
border: none;
cursor: pointer;
color: #FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width: 50%;
left: 0%;
bottom: 0%;
top: 76.5%;
position: absolute;
border-radius: 0px 0px 0px 5px;
text-decoration: none;
text-align: center;
}
.close:hover {
background-color: #004598;
transition: all 0.3s ease-out;
}
jquery
$(document).ready(function() {
$('.popup,.overlay').hide();
$(".profile1").click(function() {
$(".popup, .overlay").show(300);
});
});
$(document).mouseup(function(e) {
var popup = $(".popup");
if (!$('.popup').is(e.target) && !popup.is(e.target) && popup.has(e.target).length === 0) {
hidePopup();
}
});
function hidePopup() {
$(".popup, .overlay").hide(300).fadeOut();
}
$(document).ready(function() {
$(".submit").click(function() {
var element = document.getElementById("cp");
$(".profile1").css({
"background-color": element.options[element.selectedIndex].id
});
});
});
I appreciate all help

This is what I would do:
Add a variable var active;
Change this:
$(".profile1").click(function() {
$(".popup, .overlay").show(300);
});
to this:
$("[class*='profile']").click(function() {
$(".popup, .overlay").show(300);
active = $(this);
});
and change this:
$(".profile1").css({
to this:
active.css({
Here is the JSFiddle demo

Just call this method and give it the element and then it gets the value of the id which is as example red and saves it in a variable. Then you set the color of the element you gave the function at the call the value (which has to be a color):
function changeColor(this){
var val = this.attr('id');
this.css('background-color', val);
}
This method you can call in a foreach-loop.
$('.dropdown').children('option').each(function () {
changeColor(this);
});