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.

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

Tumblr posts cycling between two different colors

I would like to make it so that the container around a particular post is a different color than the one adjacent to it. Basically, the the containers just need to cycle between two different colors.
Left side is how it currently looks, right is how I want it to look. Thanks!
CSS
#content {
float:left;
width:800px;
padding:25px;
top:-50px; left:45px;
background:transparent;
{block:PermalinkPage}
width:300px;
{/block:PermalinkPage}
}
.entry {
width:150px;
margin:50px;
overflow:hidden;
background:#336136;
margin-left:-12px;
margin-bottom: -10px;
padding:12px;
{block:PermalinkPage}
width:250px;
margin-left:40px;
{/block:PermalinkPage}
}
.entry:nth-child(odd) {
background: #000;
}
HTML
<div id="content">
{block:Posts}
<div class="entry">
{miscellaneous_blocks_here}
</div>
{/block:Posts}
</div>

Why not use CSS3 selectors and forgo the javascript dance?
.entry:nth-child(odd) {
background: #000;
}
.entry:nth-child(even) {
background: #ff003d
}
Browser support: http://caniuse.com/css-sel3

A good idea would be to use classes and ids. For each class that you want this feature you can increment your id by one:
$('.your_class_for_each_item').each(function(){
i++;
var newID='your_id'+i;
$(this).attr('id',newID);
$(this).val(i);
});
This will result in newID1, newID2 etc. Then for odd ids use a color and for even ids another color. You use a function like this:
function(){
if(i%2==0){ //check if the number is odd
var z = document.getElementById('newID');
z.setAttribute('style','background:color_for_even_numbers');
}
else{
z.setAttribute('style','background:color_for_odd_numbers');
}
}

simple onclick applied on <a> not working IE and FF

I have a simple list as follows:
<div class="settingButton">
<div class="subManu">
<ul>
<li><a onclick="alert('clicked!!')" href="#">Default Categories</a></li>
<li><a onclick="alert('clicked!!')" href="#">Wizard</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</div>
I do not see the alerts on clicking the links! It works fine in Chrome, but not in IE and FF. I used this same structure without assigning class and it works as expected. Maybe the problem is with the CSS, but I am not sure what. Here is the CSS for the dropdown,
.settingButton {
background:url(/mobiledoc/jsp/dashboard/images/settings.png) 0 0 no-repeat;
width:25px;
height:37px;
float:left;
position:absolute;
right:13px;
top:-30px;
}
.settingButton a {
display:block;
width:25px;
height:37px;
}
.settingButton:hover {
background:url(/mobiledoc/jsp/dashboard/images/settingsHover.png) 0 0 no-repeat;
}
.settingButton:active {
background:url(/mobiledoc/jsp/dashboard/images/settingsActive.png) 0 0 no-repeat;
}
.settingButton div.subManu {
display:none;
height:100px;
}
.settingButton:hover div.subManu {
background:url(/mobiledoc/jsp/dashboard/images/subNavArrow.png) no-repeat right 3px;
position:absolute;
top:20px;
z-index:99;
right:0;
width:250px;
height:50px;
display:block;
padding:13px 0 0 0;
}
div.subManu ul {
display:block;
background:url(/mobiledoc/jsp/dashboard/images/dropDownMidBg.png) repeat-x;
border-left:#547b9a 1px solid;
border-right:#547b9a 1px solid;
height:29px;
padding:0 0 0 7px;
}
div.subManu ul li {
width:110px;
float:left;
margin:0 5px;
display:block;
height:29px;
}
div.subManu ul li a {
display:inline;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
line-height:28px;
}
div.subManu ul li a:hover {
color:#b7f630;
}
div.subManu ul li.active-manu a {
color:#b7f630;
}
I have gone through different question but didn't find any relevant answers. Let me know if you need any more info.
Thanks!

If you don't want a link, don't use an A element, use a button or styled span instead, e.g.
<style type="text/css">
.clickable:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
...
<span class="clickable">thing to click</span>
Anyhow, the preferred method for links is:
<a href="http://link for script-disabled browsers"
onclick="myFunction(); return false;">...</a>

Reference: jsFiddle
You will notice I only made two changes to your code.
The first change is to include background color for the hover div.
The second change is to make the font words viewable on the white background since the font's are white themselves.
To see both click events working, hover over the black rectangle in the top right corner and you will see the two links that will pop up and allow the alert to invoke when clicked.
The bottom line is there is nothing wrong with your code, it's just you need to hover to access the clickable links.
Disclaimer: It's for the Question only and doesn't cover other things like the preferred method for anchor links. ;-)

You might want to try something like this instead:
Default Categories

jquery fadeIn acting funny?

this is what I'm working on right now
http://www.dsi-usa.com/yazaki_port/hair-by-steph/
as you can see when you click the tabs the fade in and fade outs look extremely funny. I'm wondering if anyone can take a look at the code and tell me what I'm doing wrong. I'm extremely new to Jquery and Javascript (like yesterday new) so I apologize if the code is messy. I'm wondering if 1. there was an easier way to write this and 2. if there's a way to just have the sections fade into each other/any other cool ideas anyone has.
the html structure (pulled out all of the content for space purposes)
<div id="main">
<div id="display_canvas">
</div>
<div id="nav">
<ul>
<li><a class="btn" title="contact">CONTACT</a></li>
<li><a class="btn" title="resume">RESUME</a></li>
<li><a class="btn" title="portfolio">PORTFOLIO</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div id="resume">
//contents here
</div>
<div id="contact">
//contents here
</div>
</div>
the css
*
{
margin:0;
padding:0;
font-family:verdana, helvetica, sans-serif;
}
#main
{
width:1200px;
margin:0 auto;
}
#display_canvas
{
height:700px;
background-color:#fefea8;
box-shadow:5px 5px 5px #888888;
-moz-box-shadow:5px 5px 5px #888888;
-webkit-box-shadow:5px 5px 5px #888888;
display:none;
}
.clear
{
clear:both;
}
#resume
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/resume_back.png");
background-position:300px 0px;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#contact
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/contact_back.png");
background-position:left;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#nav
{
margin:1em 0 0 0;
text-align:right;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
}
.btn
{
margin-right:20px;
display:block;
text-align:center;
float:right;
color:#000000;
font-size:15px;
font-weight:bold;
line-height:30px;
text-decoration:none;
cursor:pointer;
width:150px;
height:30px;
}
.over
{
background-color:#888888;
color:#ffffff;
}
.active_contact
{
background-color:#000000;
color:#00a8ff;
}
.active_resume
{
background-color:#000000;
color:#9848c2;
}
.active_portfolio
{
background-color:#000000;
color:#ffffff;
}
and finally a whole mess of javascript
$(document).ready(function(){
//handles general navigation
$(".btn").hover(
function(){
$(this).addClass("over");
},
function(){
$(this).removeClass("over");
}
)
$(".btn").click(function(){
var btn = $(this);
var newClass = "active_" + btn.attr("title"); //set the new class
var section = $("#" + btn.attr("title"));
if ($("#curSection").length)
{
alert('there is a section');
var curClass = "active_" + $("#curSection").attr("title"); //get the current class active_section name
var curSection = "active"
$("#curSection").removeClass(curClass).removeAttr("id"); //remove the current class and current section attributes
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
$(".currentSection").fadeOut("slow", function(){ //fade out old section
$(".currentSection").removeClass("currentSection");
section.fadeIn("slow", function(){ //fade in new section
alert('faded in');
section.addClass("currentSection"); //designate new section
});
});
}
else
{
alert('first time');
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
section.fadeIn("slow", function(){
alert('faded in');
section.addClass("currentSection");
});
}
});
//handles resume navigation
$(".res-btn").hover(
function(){
$(this).addClass("res-over")
},
function(){
$(this).removeClass("res-over")
}
)
$(".res-btn[title=experience]").click(function(){
$("#scroller").stop().animate({top: "0px"}, 1000);
});
$(".res-btn[title=expertise]").click(function(){
$("#scroller").stop().animate({top: "-180px"}, 1000);
});
$(".res-btn[title=affiliates]").click(function(){
$("#scroller").stop().animate({top: "-360px"}, 1000);
});
});
if anyone has any ideas as to why this doesn't work let me know. I thought maybe it was having problems loading the content, but the content should be loaded already as they are on the screen already, just no display. I'm stumped, I saw a few posts similar to mine, so I followed some of their thinking. When I set the fadeIn() to like 5000 instead of "slow" The first 60% or so of the fadeIn is skipped and the section appears at say 60% opacity and then fades in the rest of the way. Not sure what I'm doing so thank you in advance.

Off the top of my head, I think the problem might be that you are initiating an alert dialogue box rather than a jquery Fancybox / Thickbox type of overlay lightbox which accommodates the speed at which the it animates to open or close. And in any case, I am unable to replicate the issue you are facing despite going directly to your link.
So rather than to try and resolve that chunk of codes you have picked out from different sources and since the content that you wish to display is an inline one, you might as well consider using Thickbox or Fancybox instead.
Alternatively, you could also kinda script your own lightbox without using the alert dialogue boxes if you like. It could look something like this:
HTML:
<!--wrapper-->
<div id="wrapper">
Box 1</li>
Box 2</li>
<!--hidden-content-->
<div class="box-1">
This is box 1. close
</div>
<div class="box-2">
This is box 2. close
</div>
</div>
<!--wrapper-->
CSS:
#wrapper{
background:#ffffff;
width:100%;
height:100%;
padding:0;
}
.box-1, .box-2{
display:none;
width:300px;
height:300px;
position:fixed;
z-index:3000;
top:30%;
left:30%;
background:#aaaaaa;
color:#ffffff;
opacity:0;
}
JQUERY:
$(document).ready(function(){
$(".toggle-1").click(function(){
$(".box-1").show(900);
$(".box-1").fadeTo(900,1);
});
$(".close-1").click(function(){
$(".box-1").hide(900);
$(".box-1").fadeTo(900,0);
});
$(".toggle-2").click(function(){
$(".box-2").show(900);
$(".box-2").fadeTo(900,1);
});
$(".close-2").click(function(){
$(".box-2").hide(900);
$(".box-2").fadeTo(900,0);
});
});
Well, of course there's still quite a bit of styling to be done in order for the content to appear nicely in the center of the screen, but I'm gonna be leaving that out as this is more of a question of how to control the speed of which the overlay appears.
In any case, if you wanna change the speed of which it appears or close, simply alter the "900" value to something else - a lower number means a faster animation speed and vice versa. If you have noticed, I'm applying the .hide() and .fadeTo() functions together. This is partly because I will try and enforce for the shown divs to be hidden after the Close button is clicked. This will prevent it from stacking on top of other content and thereby disabling any buttons, links or functions. You can try to play around with their "900" values as well. For e.g. when you press the close button, you can actually make .hide() execute slower in relation to the fadeTo() simply by assigning maybe 3000 to the former and 700 to the latter. This will give the illusion that it is fading only rather than fading and swinging, the latter of which is prominent when you utilize the .hide() or .show() function.
Hope this helps some how. =)