Develop Reference

Custom div as cursor creates problems with the hover on links

I've a problem with a custom cursor created with an absolute div, with my test I realized that the custom div is directly positioned under the default cursor, then if I go hover a link I can't process my JS "mouseenter" because the default cursor is always hover only to the custom cursor... there is a way to fix it?
<div class="custom-cursor"></div>
Scss:
.custom-cursor {
width: 20px;
height: 20px;
border: 2px solid orange;
position: absolute;
z-index: 1080;
border-radius: 50%;
transition-duration: 100ms;
transition-timing-function: ease-out;
box-shadow: 0 0 0 2px black;
&.hover {
width: 40px;
height: 40px;
background: rgba(#FFCC00,.5);
}
}
Vanilla JS:
const cursor = document.querySelector('.custom-cursor');
// Custom cursor follow the default cursor
document.addEventListener('mousemove', e => {
cursor.setAttribute('style', 'top: '+(e.pageY - 10)+'px; left: ' +(e.pageX - 10)+'px;')
});
const links = document.querySelectorAll('a');
// Custom cursor change style on hover links
for(let x of links) {
x.addEventListener('mousenter', () => {
cursor.classList.add('hover');
});
x.addEventListener('mouseleave', () => {
cursor.classList.remove('hover');
});
});

You can enable clicking through elements by adding pointer-events: none; to your CSS
.custom-cursor {
pointer-events: none; /*don't interact with this div*/
width: 20px;
height: 20px;
border: 2px solid orange;
position: absolute;
z-index: 1080;
border-radius: 50%;
transition-duration: 100ms;
transition-timing-function: ease-out;
box-shadow: 0 0 0 2px black;
&.hover {
width: 40px;
height: 40px;
background: rgba(#FFCC00,.5);
}
}

You can use pointer-events: none; for the cursor-div - so that the hover event goes through. (you also forgot an e in "mouseenter"
Working example:
const cursor = document.querySelector('.custom-cursor');
// Custom cursor follow the default cursor
document.addEventListener('mousemove', e => {
cursor.setAttribute('style', 'top: '+(e.pageY - 10)+'px; left: ' +(e.pageX - 10)+'px;')
});
const links = document.querySelectorAll('a');
// Custom cursor change style on hover links
for(let x of links) {
x.addEventListener('mouseenter', () => {
cursor.classList.add('hover');
});
x.addEventListener('mouseleave', () => {
cursor.classList.remove('hover');
});
}
.custom-cursor {
width: 20px;
height: 20px;
border: 2px solid orange;
position: absolute;
border-radius: 50%;
transition-duration: 100ms;
transition-timing-function: ease-out;
box-shadow: 0 0 0 2px black;
pointer-events: none;
}
.custom-cursor.hover {
width: 40px;
height: 40px;
background: rgba(#FFCC00,.5);
}
<div class="custom-cursor"></div>
troet
quak
miau

Make contents of a div into a movable resizable button

I have made a button that basically will go on top of a leaflet map. It uses animate.css and wow.js to animate certain things and it works ok. It is made up of a div, an image, text and a span. What I need to do is make the whole thing into a div or something that I can resize and move without changing all the CSS etc. If I want to add an extra 2 or 3 buttons it will be a lot of hassle. I need to be able to move and resize depending on the screen resolution. I want to be able to use media queries to change just one thing like the size and position of the div but maintain the functionality.
I have tried putting everything into a new div but no joy!
I have included a fiddle http://jsfiddle.net/eLron3d2/1/
The HTML is :
<div id="start_box" class ="animated bounceIn">
<img id="target" class="targetimg" src="https://www.faces2places.co.uk/img/target.png" onclick="golive()"></img><button id="startbutton" type="button" class="btn-target animated bounceInLeft"></button>
<span id="status" class="btn-target-name animated fadeIn delaydn">START</span>
</div>
The CSS is :
#start_box {
position: fixed;
top: 10px;
/* right: 20px; */
left: 10px;
z-index: 2;
border: 2px solid;
border: radius:20px;
border-radius: 5px;
padding: 0px;
box-shadow: 0px 0px 0px 0px;
width: 80px;
height: 80px;
background-color: white;
border-color: #969696;
}
.targetimg {
position:relative;
top: 4px;
left: 8px;
border-radius: 2.5px;
display:flex;
width:60px;
height:60px;
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.btn-target {
background-color: white !important;
position: fixed;
width: 72px;
height: 16px;
top: 67.5px;
left: 2.2px;
color: #000000;
border: 2px solid #969696;
border-radius: 5px 5px 5px 5px
}
.btn-target-name {
color:green;
font-family: 'Passion One', cursive;
display: block;
width: 76px;
top: 70.5px;
font-size: 12px;
font-weight:0;
text-align: center;
position: fixed;
}
.delaydn {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1s;
}
.goliveactive {
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: spin;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
And the JS is
window.live = false;
window.directions = true;
function golive() {
if (window.live === false) {
$("#target").addClass("goliveactive");
$('#status').css('color', '#ff3258');
$('#status').text('FINISH');
window.live = true;
} else if (window.live = true) {
$("#target").removeClass("goliveactive ");
$('#status').css('color', 'green');
$('#status').text('START');
window.live = false;
}
}

Ok, I have done it like so
http://jsfiddle.net/eLron3d2/2/
I wrapped everything into a button and changed pretty much everything to % not fixed sizes. I can change the size and position of it in the .target css
It works pretty good apart from I would like to change the font size to automatically change to fit but that one thing is easy to do with media queries, at least I don't have to change everything. The only thing is, the font does'nt load and show properly in jsfiddle but works on all browsers I have checked it with.
The HTML for 2 buttons is
<button class="btn target animated fadeIn"><span id="btn1" class="btnimage animated rubberBand" onclick="golive()"></span><span class="btn1textbox animated bounceInLeft"></span><span id="status" class="btn1text animated delaydn fadeIn">START</span></button>
<button class="btn target animated fadeIn delaybox"><img class="driverimg animated fadeIn" src="http://www.faces2places.co.uk/img/jules.jpg" onclick="alert('FUCKME')"></img><span class="btn1textbox animated bounceInLeft delaybox"></span><span id="status" class="btn1text animated delaydn2 fadeIn">JUSTIN.C</span></button>
The CSS is
.btn {
position: relative;
display: block;
margin-bottom:12px;
color: white;
font-size: 16px;
cursor: pointer;
border: 2px solid;
padding: 0px;
box-shadow: 0px 0px 0px 0px;
width:80px;
height:80px;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
.target {
left:100px;
width:80px;
height:80px;
top:100px;
}
.btn1textbox {
position: absolute;
left: 5%;
top: 92%;
display: inline-block;
color: white;
border: 2px solid;
width: 86.5%;
height: 16%;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
/* Darker background on mouse-over */
.btn:hover {
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.btnimage {
position: relative;
background:url(https://www.faces2places.co.uk/img/target.png) no-repeat center;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
top:-4px;
}
.btndriver {
position: relative;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
}
.btn1text {
font-family: 'Passion One', cursive;
color:green;
position: relative;
display: inline-block;
width:100%;
height:100%;
top: -12px;
font-size: 13px;
}
.goliveactive {
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: spin;
}
.delaydn {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .8s;
}
.delaybox {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .5s;
}
.delaydn2 {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1.3s;
}
button:focus {outline:0;}
.driverimg {
position:relative;
top:-1;
border-radius: 2.5px;
display:inline-block;
width:100%;
height:100%;
}
and the JS is
new WOW().init();
window.live = false;
window.directions = true;
function golive() {
if (window.live === false) {
$("#btn1").addClass("goliveactive");
$('#status').css('color', '#ff3258');
$('#status').text('FINISH');
window.live = true;
} else if (window.live = true) {
$("#btn1").removeClass("goliveactive ");
$('#status').css('color', 'green');
$('#status').text('START');
window.live = false;
}
}

scroll link change to top link when user scrolls

I would like to put a link on my webpage that when it first loads is used to scroll the page down by 500px. If the page is scrolled 10px from the top i would like that link to become a back to top link. I have coded what I thought would be correct but the link appears to only link to the top. It changes from a down chevron to an up chevron when the user scrolls but it does not then reset when the page is back to the top. hope this makes sense.
HTML
<a class="w-toplink active" href="#"><i class="fa fa-chevron-down"></i></a>
CSS
.w-toplink {
display: block;
position: fixed;
bottom: -50px;
right: 30px;
text-align: center;
font-size: 14px;
padding:12px;
line-height: 48px;
height: 28px;
width: 35px;
border-radius: 5px;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
opacity:0;
transition: opacity 200ms ease-in;
}
.w-toplink.active {
bottom: 30px;
opacity: 0.7;
}
.w-toplink:hover {
opacity: 1;
}
.down-link {
width:100%;
height:50px;
position:fixed;
}
#w-downlink i {
line-height: 42px;
font-size: 24px;
color: #fff;
display: block;
width: 24px;
margin: 0 auto;
margin-top:10px;
}
#w-downlink {
height: 60px;
width: 60px;
background-color: #191919;
background-color: rgba(20, 20, 20, 0.4);
position:absolute;
bottom:0;
margin-bottom:30px;
right:0;
margin-right:20px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
.w-downlink:hover {
height: 60px;
width: 60px;
background-color: #191919;
background-color: rgba(20, 20, 20, 0.4);
position:absolute;
bottom:0;
margin-bottom:30px;
right:0;
margin-right:20px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
opacity: 0.5;
}
.w-toplink
{opacity:0; transition: opacity 200ms ease-in;}
.w-toplink.active{opacity:0.7;}
.w-toplink:hover{opacity:1;}
JQUERY
$(window).scroll(function() {
var scrollDownLink = $('.w-toplink');
if ($(window).scrollTop() < 5) {
scrollDownLink.attr('href', '#about');
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
} else {
scrollDownLink.attr('href', '#top-anchor');
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
}
});

I decided to test this out and it's quite a simple fix.
This is your code as it is before I made some small change
$(window).scroll(function() {
var scrollDownLink = $('.w-toplink');
if ($(window).scrollTop() < 5) {
scrollDownLink.attr('href', '#about');
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
} else {
scrollDownLink.attr('href', '#top-anchor');
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
}
});
I changed the if block to
if ($(window).scrollTop() < 5) {
scrollDownLink.attr('href', '#about');
scrollDownLink.find('i').removeClass('fa fa-chevron-up').addClass('fa fa-chevron-down');
}
It's all working fine now. Here's a codepen of the working code
Note that for it to be triggered on 10px from the top you'll need to also change the 5 to a 10

Use this jQuery code to have the functionality without the scrolling messing up with the classes.
The first part manipulates the chevron and the second the scrolling upon click.
var scrollDownLink = $('.w-toplink');
$(window).scroll(function() {
if ($(window).scrollTop() < 10) {
scrollDownLink.find('i').removeClass('fa fa-chevron-up').addClass('fa fa-chevron-down');
} else {
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
}
});
scrollDownLink.click(function() {
if($(window).scrollTop()>10){
$('html,body').animate({
scrollTop:$('#top-anchor').offset().top
},500);
}else{
$('html,body').animate({
scrollTop:$('#about').offset().top
},500);
}
});

Make arrow in button point down after menu slides out

I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using jQuery.slideToggle().
Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.
I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/
What would be the best way to make the arrow point down after the button is clicked?

Create a new class for how you want the carat to appear :
#makeGroupButton span.rotate:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(135deg);
}
Note the class addition in the selector.
Then change the javascript/jQuery to just toggle that class:
$('#makeGroupButton').bind('click', function(){
$('#slideout').slideToggle(500);
$(this).children('span').toggleClass('rotate');
});
You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.
Updated fiddle

Have started it for you to build on. Check this out and let me know your feedback. Thanks!
Added the following style:
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
and some js too:
$('#makeGroupButton').bind('click', function(event) {
event.preventDefault();
$('#slideout').slideToggle(500);
$(this).find('span').toggleClass('open');
});
#wrapper{
height: 500px;
width: 300px;
position:relative;
border: 2px solid blue;
}
#slideout {
height: 95%;
width: 95%;
border: 2px solid red;
position: absolute;
bottom: 0;
left: 2.5%;
}
#makeGroupButton
{
clear: both;
text-align: center;
color: white;
width: 220px;
background:black;
overflow: hidden;
transition: all 0.5s;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -20px;
opacity: 0;
width: 15px;
height: 15px;
margin-top: -5px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-bottom: none;
border-left: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
<span>New Group</span>
</a>

I would add a class rotate on click then apply the following css :
#makeGroupButton.rotate span:after {
top: 0px;
-webkit-transform: rotate(-228deg) !important;
}
I have update your js fiddle https://jsfiddle.net/414mwv17/2/.
A much cleaner way to do it would be use an arrow icon then just rotate that icon by 180 degrees.
Hope this helps

Javascript Mouseover, Opacity Change

Before I get into this, I'm sure that there is an answer to my question. I am new to coding, so I don't understand how to plug in the information to make it work on my site. I am trying to get a portfolio like this site: http://gomedia.com/our-work/. Here is my site so you can see the code: http://www.mattsusla.graphics. I have tried for an hour with no success. Please Help!

It's best to do this with native css. Simply call the element's hover state with :hover
button { background: blue; }
button:hover { opacity: 0.5; }
<button>Change Opactiy on Hover</button>
Let's look at the code you'd need in JavaScript
var button = document.getElementById("my-button");
button.addEventListener("mouseover", function() {
button.style.opacity = 0.5;
});
button.addEventListener("mouesout", function() {
button.style.opacity = 1.0;
});

You dont need javascript for this.
Its simple done with css:
img:hover {
opacity: 0.5;
}
if you want it to be more smooth, you can add a transition. this is done with css, too. only use javascript if you really need it!
img {
opacity: 1;
}
img:hover {
opacity: 0.5;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}

I am guessing that you are looking for the same functionality that is in the first site? If that is correct this will do it for you. See fiddle: https://jsfiddle.net/8sphkqkn/1/
html
<div id="box">
<div id="overlay">
<span id="text">Boss Dog Brewing Co.</span>
</div>
</div>
css
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://s3.gomedia.us/wp-content/uploads/2015/03/GO_BossDogBrewery-1-e1430266175600-300x300.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
width: 300px;
height: 200px;
}
#box:hover #overlay {
opacity: 1;
}
#text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 16px;
}