Develop Reference

Custom cursor in html [duplicate]

This question already has answers here:
Custom Cursor using CSS styling - html/css - javascript
(2 answers)
Closed 3 years ago.
I want to add a image as my cursor inside a div, But i want it to hide and have a normal pointer cursor, when the mouse hovers over any of the link inside that div.
I wrote :
var $box = $(".box");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on("mouseleave",function(){
$myCursor.hide();
})
$box.mousemove(function(e){
$myCursor.css('top',e.pageY);
$myCursor.css('left',e.pageX);
if (!button1.is(":hover") && (!button2.is(":hover"))){
$myCursor.show();
}
else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
if(e.clientX<$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','rotate(-270deg)');
}
else if(e.clientX>$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','none');
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
How do i implement this properly?
Thanks

Much easier to achieve using CSS only. You will have to resize the cursor image beforehand, in this example I resized one to 50x50 pixels (the other in the white box is 64x64).
The , auto is mandatory and defines a fallback.
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor: url(//codestylers.de/rifle.png), auto;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor: pointer;
}
.another-cursor {
background-color: white;
width: 300px;
height: 200px;
cursor: url(//codestylers.de/cursor.png), auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<div class="another-cursor"></div>
</div>

The simple solution is just to adjust the scoping of your selectors:
var $box = $(".box:not(button)"); so the image switch is called whenever the cursor is not over a button. However in your case you should consider reducing the image size so it's closer to the mouse size - as there's a large overlap of image and button before the mouse pointer itself covers the button.
a more complex solution would involve using arrays to register the button coordinates and dimensions, then using mousemove and each to constantly check the image coordinate widths against the stored buttons dimensions but depending on what else you've got going on there could be a performance hit.
If you add pointer-events: none to the #myCursor css you prevent the occasional momentary obscuration of the cursor from the button by the image itself - hence better performance.
var $box = $(".box:not(button)");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on({
mouseleave:function(){
$myCursor.hide();
},
mousemove: function(e){
$myCursor.css({ 'left':e.pageX, 'top':e.pageY });
if (!button1.is(":hover") && !button2.is(":hover")){
$myCursor.show();
} else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>

You can solve this using CSS, there is no need for javascript.
Have a look here:
http://www.w3schools.com/cssref/pr_class_cursor.asp
You might set CSS classes with help of javascript to enable some sort of dependency to other elements.

Firefox creates extra gap on slideToggle

Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.

After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull

How do you apply a style to only one div in the HTML?

I had working code until I tried to make the style.css page apply only to a certain div on the index.html file. This is the current code I have: http://codepen.io/anon/pen/LEXxeM
All that I did (which made it stop working) was completely wrap the style.css page in "adder { }", and put all the code in the body in a div tag.
Any ideas as to why this was an incorrect step?
In case codepen can't be accessed, below is the code.
HTML:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styleok.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<div class="adder">
<div id="container">
<header>
<h1>Task ListO</h1>
Clear all
</header>
<section id="taskIOSection">
<div id="formContainer">
<form id="taskEntryForm">
<input id="taskInput" placeholder="Add your interests here..." />
</form>
</div>
<ul id="taskList"></ul>
</section>
</div>
</div>
</body>
</html>
CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
adder {
* {
padding:0;
margin:0;
}
body {
background:url('');
background-color:#2a2a2a;
font-family:'Open Sans', sans-serif;
}
#container {
background-color: #111216;
color:#999999;
width:350px;
margin: 50px auto auto auto;
padding-bottom:12px;
}
#formContainer {
padding-top:12px
}
#taskIOSection {
}
#taskInput {
font-size:14px;
font-family:'Open Sans', sans-serif;
height:36px;
width:311px;
border-radius:100px;
background-color:#202023;
border:0;
color:#fff;
display:block;
padding-left:15px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
#taskInput:focus{
box-shadow: 0px 0px 1pt 1pt #999999;
background-color:#111216;
outline:none;
}
::-webkit-input-placeholder {
color: #333333;
font-style:italic;
/* padding-left:10px; */
}
:-moz-placeholder {
/* Firefox 18- */
color: #333333;
font-style:italic;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #333333;
font-style:italic;
}
:-ms-input-placeholder {
color: #333333;
font-style:italic;
}
header {
margin-top:0;
background-color:#F94D50;
width:338px;
height:48px;
padding-left:12px;
}
header h1 {
font-size:25px;
font-weight:300;
color:#fff;
line-height:48px;
width:50%;
display:inline;
}
header a{
width:40%;
display:inline;
line-height:48px;
}
#taskEntryForm {
background-color:#111216;
width:326px;
height: 48px;
border-width:0px;
padding: 0px 12px 0px 12px;
font-size:0px;
}
#taskList {
width: 350px;
margin:auto;
font-size:16px;
font-weight:600;
}
ul li {
background-color:#17181D;
height:48px;
width:314px;
padding-left:12px;
margin:0 auto 10px auto;
line-height:48px;
list-style:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
}
JS:
$(document).ready(function () {
var i = 0;
for (i = 0; i < localStorage.length; i++) {
var taskID = "task-" + i;
$('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
}
$('#clear').click(function () {
localStorage.clear();
});
$('#taskEntryForm').submit(function () {
if ($('#taskInput').val() !== "") {
var taskID = "task-" + i;
var taskMessage = $('#taskInput').val();
localStorage.setItem(taskID, taskMessage);
$('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
var task = $('#' + taskID);
task.css('display', 'none');
task.slideDown();
$('#taskInput').val("");
i++;
}
return false;
});
$('#taskList').on("click", "li", function (event) {
self = $(this);
taskID = self.attr('id');
localStorage.removeItem(taskID);
self.slideUp('slow', function () {
self.remove();
});
});
});
Thank you.

Normally for these one off or different pages I would consider adding a style class directly to the body tag, rather than wrapping all the content in an additional div, since it serves no semantic purposes and it is really for styling only purposes.
<body class="adder">
<div id="container">
<!-- other code -->
</code>
</body>
Then add some specific styles for your custom styles pages in the same stylesheet. These need to be declared after the original definition.
/* adder overrides */
.adder #container {
background-color: #0094FF;
}
.adder header {
background-color:#00FF7F;
}
.adder #taskEntryForm {
background-color:#0043FF;
}
Since the style .adder #container is more specific in this instance this is what will get applied. It's a compound set of styles, so first the stlye #container will be applied and then the styles from .adder #container will override anything that is specific in this class.
If you are using Google Chrome then press F12 and you can see the style chain in the Elements tab (as well as change them in that window for learning/demo purposes)
Demo on CodePen

your CSS syntax is incorrect. Unless you were working with SASS in which case it would be ok. Remove adder.
I also see no point to wrapping your CSS in this adder class? It add's nothing HTML/CSS wise. If you explain what you're actually trying to achieve then maybe we can assist a bit more.

Below is a simple example of using css.
#outer{
background-color:grey;
height:100px;
width:100px;
}
#inner{
border:1px solid green;
width:100px;
height:100px;
margin:10px;
}
#outer > #inner{
color:red;
line-height:100px;
text-align:center;
margin:0;
}
<div id="outer">
<div id="inner">
Hello
</div>
</div>
<div id="inner">
Hi
</div>
I have a div with an id outer and two divs with an id inner out of which one is inside the outer div and the other is outside the outer div.
The css for inner div which is inside the outer div is written inside #outer > #inner{}
and the css for both div with an id - inner is written inside #inner{}
I have given a margin of 10 px for inner div but that isn't applied for the one which is inside the outer div.
this happened because the code which is inside #outer > #inner{} is overriding the code which is inside #inner{}
You can target a css based on id using '#' or class using '.' or html elements or Pseudo-class.
you can get a complete reference for css in this link

How do I get this code from Codepen to work?

Here is the codepen: http://codepen.io/BrandonJF/pen/KGwyC
In case the page can't be accessed, a copy of the code is below.
Now, what I have been doing is using Brackets, and opening a folder in Brackets that contains a completely blank style.css page, completely blank init.js page, and an almost blank index.html page (this page at least has the following code:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
</head>
<body>
</body>
</html>
I paste the CodePen HTML in the body tag of index.html. I paste the CodePen CSS into style.css . I paste the CodePen Javascript into init.jss
I have also tried pasting the CodePen Javascript into the body tag of index.html, using the tag "script" around the JS code.
Any ideas what I am doing wrong?
So Clueless!
CodePen HTML:
<div id="container">
<header>
<h1>Task List</h1>
Clear all
</header>
<section id="taskIOSection">
<div id="formContainer">
<form id="taskEntryForm">
<input id="taskInput" placeholder="What would you like to do today?" />
</form>
</div>
<ul id="taskList"></ul>
</section>
</div>
CodePen CSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
body {
background:url('http://dribbble.com/images/attachments/attachments-bg.png?1');
background-color:#2a2a2a;
font-family:'Open Sans', sans-serif;
}
#container {
background-color: #111216;
color:#999999;
width:350px;
margin: 50px auto auto auto;
padding-bottom:12px;
}
#formContainer {
padding-top:12px
}
#taskIOSection {
}
#taskInput {
font-size:14px;
font-family:'Open Sans', sans-serif;
height:36px;
width:311px;
border-radius:100px;
background-color:#202023;
border:0;
color:#fff;
display:block;
padding-left:15px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
#taskInput:focus{
box-shadow: 0px 0px 1pt 1pt #999999;
background-color:#111216;
outline:none;
}
::-webkit-input-placeholder {
color: #333333;
font-style:italic;
/* padding-left:10px; */
}
:-moz-placeholder {
/* Firefox 18- */
color: #333333;
font-style:italic;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #333333;
font-style:italic;
}
:-ms-input-placeholder {
color: #333333;
font-style:italic;
}
header {
margin-top:0;
background-color:#F94D50;
width:338px;
height:48px;
padding-left:12px;
}
header h1 {
font-size:25px;
font-weight:300;
color:#fff;
line-height:48px;
width:50%;
display:inline;
}
header a{
width:40%;
display:inline;
line-height:48px;
}
#taskEntryForm {
background-color:#111216;
width:326px;
height: 48px;
border-width:0px;
padding: 0px 12px 0px 12px;
font-size:0px;
}
#taskList {
width: 350px;
margin:auto;
font-size:19px;
font-weight:600;
}
ul li {
background-color:#17181D;
height:48px;
width:314px;
padding-left:12px;
margin:0 auto 10px auto;
line-height:48px;
list-style:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
CodePen Javascript:
$(document).ready(function () {
var i = 0;
for (i = 0; i < localStorage.length; i++) {
var taskID = "task-" + i;
$('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
}
$('#clear').click(function () {
localStorage.clear();
});
$('#taskEntryForm').submit(function () {
if ($('#taskInput').val() !== "") {
var taskID = "task-" + i;
var taskMessage = $('#taskInput').val();
localStorage.setItem(taskID, taskMessage);
$('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
var task = $('#' + taskID);
task.css('display', 'none');
task.slideDown();
$('#taskInput').val("");
i++;
}
return false;
});
$('#taskList').on("click", "li", function (event) {
self = $(this);
taskID = self.attr('id');
localStorage.removeItem(taskID);
self.slideUp('slow', function () {
self.remove();
});
});
});
EDIT: To anyone who stumbles upon this post, here are the things that made my code work. As per jswebb's suggestion, I referenced what I needed in the head of the index.html.
So the head tag looks like this now:
<head>
<link type="text/css" rel="stylesheet" href="css/styleok.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
Make sure that when you are writing the link tag, the href="YOURCSSFILENAME.css" includes all the correct folders!!!
Best wishes to all.

The CodePen you linked to utilizes jQuery; however, when using a text editor and writing to a blank HTML file, you need to link to the jQuery library - have you done this?
If not, place an external source link to the Google-hosted jQuery script file in between <head> and </head>, using the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Let me know if that solves the issue for you!
EDIT: To solve the CSS issue you are having, you need to follow the same procedure for the external sheet; in general, sandboxes allow functionality without linking different files, but when working in text editors, you must supply the connection between stylesheets, JS files and the HTML page.
To link to your external CSS sheet, put the following in between <head> and </head>:
<link type="text/css" rel="stylesheet" href="style.css" />
This is the standard procedure for adding links to external CSS. If the sheet is open in the Brackets editor, it should provide you with 'style.css' when you start typing it in.
Once you do the above, place the CSS from the CodePen into that CSS file, and then save all of the sheets you're working in. Everything should work - let me know if that solved your issues!

I have the same answer here:
How do I take code from Codepen, and use it locally?
Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.

Ensure you are not missing jQuery which is a dependancy for the javascript
While copying javascript from codepen, it was adding some addition checks whilst compiling the coffeescript. So just use http://js2.coffee/ in order to convert the coffeescript into javascript preview, which you can then use in your code.

Changing link style onclick

I am currently experimenting with JavaScript and I'm having trouble changing the style of the links on my landing page. What I have is four boxes in the top right of the page that when clicked change the theme of the landing page. I was able to get the background and text to change when the boxes are clicked, but hyperlinks remain unchanged. I have read several other posts asking similar questions but I was unable to adapt the code to my situation.
I have tried using getElementById, and getElementByclassName but neither produced the result I was looking for. The getElementById was able to change one of the links but the rest remained unchanged. I'm guessing it only works on one link because the id can only be used once per page?
The current JavaScript code is written as four separate functions, but I was thinking perhaps it would be better to use one case statement?
I have left a link to jsfiddle, but for some reason the onclick function does not work at jsfiddle. Any help would be greatly appreciated.
Thank you!
http://jsfiddle.net/F4vte/
HTML
<body>
<div id="container">
<form>
<input type="button" id="color-box1"
onclick="colorText1();">
<input type="button" id="color-box2"
onclick="colorText2();">
<input type="button" id="color-box3"
onclick="colorText3();">
<input type="button" id="color-box4"
onclick="colorText4();">
</form>
<div id="centerText">
<h1 id="name">Donald Price</h1>
<div id="underline"></div>
<div id="nav">
Blog
Projects
Contact
Resume</p>
</div>
</div>
</div>
</body>
JavaScript
function colorText1(){
document.getElementById("name").style.color="#A32DCA";
document.getElementById("underline").style.color="#A32DCA";
document.getElementById("nav").style.color="#A32DCA";
document.bgColor = '#96CA2D';
}
function colorText2(){
document.getElementById("name").style.color="#8FB299";
document.getElementById("underline").style.color="#8FB299";
document.bgColor = '#FFFFFF';
}
function colorText3(){
document.getElementById("name").style.color="#484F5B";
document.getElementById("underline").style.color="#484F5B";
document.bgColor = '#4BB5C1';
}
function colorText4(){
document.getElementById("name").style.color="#FFFFFF";
document.getElementById("underline").style.color="#FFFFFF";
document.bgColor = '#00191C';
}
CSS
body {
font-family:Helvetica,Arial,Verdana,sans-serif;
font-size:62.5%;
width:960px;
padding-left:3px;
margin:auto;
}
#underline {
border-bottom:3px solid;
}
#container {
width:50em;
margin-left:auto;
margin-right:auto;
margin-top:30%;
z-index:2;
}
/*color box settings*/
#color-box1,#color-box2,#color-box3,#color-box4 {
position:absolute;
top:0;
width:50px;
height:50px;
float:left;
-webkit-transition:margin .5s ease-out;
-moz-transition:margin .5s ease-out;
-o-transition:margin .5s ease-out;
border-color:#B5E655;
border-style:solid;
margin:15px;
}
#color-box1:hover, #color-box2:hover, #color-box3:hover, #color-box4:hover {
margin-top: 4px;
}
#color-box1 {
background-color:#96CA2D;
right:0;
}
#color-box2 {
right:50px;
background-color:#FFFFFF;
}
#color-box3 {
right:100px;
background-color:#4BB5C1;
}
#color-box4 {
right:150px;
background-color:#00191C;
}
#centerText {
width:50em;
text-align:center;
}
#nav {
padding:20px;
}
#nav a {
padding-left:2px;
font-size:20px;
text-align:center;
}
a:link {
color:#000;
text-decoration:none;
}
a:visited {
text-decoration:none;
color:#999;
}
a:hover {
text-decoration:none;
color:red;
}
a:active {
text-decoration:none;
}

Aside from what #j08691 said about needing to run your existing script in the header,
just add color:inherit; to your #nav a selector in your css.
#nav a {
padding-left:2px;
font-size:20px;
text-align:center;
color:inherit;
}
This way when you change the color of #nav that color will be inherited by your links (a).
Live Demo

You can't just set the color of the div to change the color of the links. You need to get the a elements and change their style. There are probably better ways to do this, but just to illustrate, you can iterate through the child nodes of the div:
function colorText1() {
document.getElementById("name").style.color = "#A32DCA";
document.getElementById("underline").style.color = "#A32DCA";
var children = document.getElementById("nav").childNodes;
for (var i=0; i < children.length; i++) {
if (children[i].tagName == 'A') {
children[i].style.color = "#A32DCA";
}
}
document.bgColor = '#96CA2D';
}
See it working on the updated jsFiddle.