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.
Related
I'm looking for a solution in Javascript maybe to create a real-time preview of products based on multiple options that a consumer could choose from multiple radiobutton.
Exemple : I have a face.png and a hat.png with transparents parts, and a cap, and when I click on cap, I would like to display the image of the cap + the face and if I click on the buttonradio on hat, I would like to update my preview in real time and keep the face and only change the image of the hat (a png with transparency)
Do you have any idea how I could do this?
Thanks in advance !
you can use a container div and place face and hat inside of that div then position each other with position absolute
i added a function for changing hats
by clicking the thumbnail of hat user will change the src attribute of the actual hat image which we were showing
let hats = [
"https://m.media-amazon.com/images/I/81B6-uzku8L._UX679_.jpg",
"https://rukminim1.flixcart.com/image/714/857/jiulk7k0/cap/g/r/v/free-hat-peter-india-original-imaf6gzbhh7pydzy.jpeg?q=50",
"https://contents.mediadecathlon.com/p982435/31cf29c7f44e13d3f77af7bd205a303c/p982435.jpg"
];
let currentIndex = 0;
document.addEventListener("DOMContentLoaded",()=>{
let thumpnails = document.querySelector('.thumpnails');
hats.forEach((hat)=> {
let img = document.createElement('img');
img.src = hat;
img.classList.add('thumpnail');
thumpnails.append(img);
img.onclick= ()=>{showMe(hat)};
});
})
function showMe(src){
document.querySelector('.hatImg').src = src;
}
//document.querySelector('#next').addEventListener('click',next)
.pic{
position:relative;
width:200px;
height:300px;
border:1px solid black;
}
.face{
position: absolute;
height: 150px;
width:100px;
background:red;
bottom:25px;
left:50px;
}
.hatImg{
width:180px;
position:absolute;
left:10px;
bottom:100px;
opacity:0.8;
}
.thumpnail{
width:50px;
margin: 0.25rem;
}
<div class="pic">
<div class="face"></div>
<img class="hatImg" src="https://m.media-amazon.com/images/I/81B6-uzku8L._UX679_.jpg">
</div>
<div class="thumpnails"></div>
So im currently learning jquery and a little bit of tweenlite for animations (I wanna keep it basic). So im currently building a portfolio grid but I wanna add on a click of an element that the other element is fading in (sliding from right it doesn't matter).
But I can't find a way to make it work that 1 element have 1 box to show and the other element have a different box to show without coping the code over and over and change a simple number everytime, there must be a way to make it work without going to repeat the code over and over.
I created a codepen to show where my struggles are.
I hope I'm pretty clear with describing this problem :)
HTML
<div class="box">
<div class="show">Show 1</div>
</div>
<div class="bigbox">
<div class="removeit">
<div class="bigshow">Bigshow 1</div>
</div>
</div>
<div class="box">
<div class="show">Show 2</div>
</div>
<div class="bigbox">
<div class="removeit">
<div class="bigshow">Bigshow 2</div>
</div>
</div>
</div>
CSS
.container {
overflow: auto;
margin: 0 auto;
width:500px;
}
.box {
height:200px;
width:200px;
background:yellow;
text-align:center;
cursor:pointer;
margin:0 auto;
float:left;
margin-right:50px;
}
.bigbox {
height:100%;
width:100%;
background-color: grey;
z-index:100;
left:0;
opacity: 0;
position: fixed;
display:none;
top:0;
.removeit {
height:100px;
width: 100px;
top: 0;
right:0;
background-color: blue;
margin:0 auto;
cursor:pointer;
}
}
.show {
display:block;
}
.noscroll {
overflow:hidden;
}
Javascript
$(".box").click(function(){
$(".bigbox").addClass("show");
TweenLite.to($('.bigbox'), 0.5, {
opacity:1,
autoAlpha:1
});
});
$(".removeit").click(function(){
TweenLite.to($('.bigbox'), 0.5, {
autoAlpha:0,
opacity:0
});
});
The codepen
http://codepen.io/denniswegereef/pen/MwjOXP
As I mentioned in comments, I think it is possible by finding the common ground between box and bigbox and if we are to not modify HTML. That common ground should be the index value from their respective classes.
So store a clickedIndex variable first, inside the click handler
like so: var clickedIndex=$('.box').index($(this));.
And then feed this clickedIndex to get a selective bigbox like so: var
bigbox=$(".bigbox").eq(clickedIndex);.
And finally, use this bigbox variable further to fade in or out.
Here is your modified JavaScript:
var bigbox = null;
var clickedIndex = -1;
var boxElements=$(".box");
var bigboxElements=$(".bigbox");
var removeItElements=$(".removeit");
boxElements.click(function() {
clickedIndex = boxElements.index($(this));
bigbox = bigboxElements.eq(clickedIndex);
bigbox.addClass("show");
TweenLite.to(bigbox, 0.5, {opacity: 1,autoAlpha: 1});
});
removeItElements.click(function() {
clickedIndex = removeItElements.index($(this));
bigbox = bigboxElements.eq(clickedIndex);
TweenLite.to(bigbox, 0.5, {autoAlpha: 0,opacity: 0});
});
The only problem with this approach is that it is very dependant on the order with which the HTML has been laid out.
I have a modal in which I am showing a form, on submitting the form i want to hide the content of form and instead want to show some ajax indicator of fixed size 100px x 100px. The issue is how to reduce the width/height of the modal to 100x100 with some animation and remaining that modal within center of screen?
<div class="modal">
<form>
....
</form>
<div class="ajax-indicator hidden"></div>
</div>
after click of submit button
<div class="modal">
<form class="hidden">
....
</form>
<div class="ajax-indicator"></div>
</div>
Create multiple stages (CSS classes) & activate them with js events.
You can achieve your animation with just some eventhandlers such as:
click,transitionend,submit...
and then just change the correspondent class.
Css
#box{
position:fixed;
width:0px;
height:0px;
top:0%;
left:0%;
background-color:black;
margin-left:0px;
margin-top:0px;
-webkit-transition:all 700ms ease;
overflow:hidden;
border-radius:0px;
}
#box.active{
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
border-radius:0px;
}
#box.loading{
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
border-radius:100px;
}
js
in this example i'm using a fake loading time with setTimeout that lasts 2sec after clicking the submit btn
function clk(e){
box.classList.add('active');
}
function frm(e){
e.preventDefault();
box.classList.remove('active');
box.classList.add('loading');
setTimeout(function(){box.classList.remove('loading')},2000);
}
var btn=document.getElementById('btn'),
box=document.getElementById('box');
btn.addEventListener('click',clk,false);
box.firstChild.addEventListener('submit',frm,false);
//box.addEventListener('webkittransitionend',dosomethingelse,false);
Demo
http://jsfiddle.net/hHD87/
this example uses modern technologies .. that work on all up to date browsers... chrom,firefox ie10 opera ios android...
maybe you need to add custom prefixexs like -webkit -moz -o ...
here is another example that uses also the delay witch is very important to completely hide the window at the end.
http://jsfiddle.net/RAu8Q/
After click submit button change the css of the model box.
var myElement = document.getElementByClass("model");
myElement.style.width = "100px";
myElement.style.height = "100px";
and set the ajax-indicator div position to center to get the model at center.
var modeElement = document.getElementByClass("ajax-indicator");
modelElement.style.align="center";
Create a css class that you can add to your modal which sets its size to 100x100. If you're centering your modal with margin: 0 auto it should automatically adjust itself. Then remove the class when the loading is done.
Regarding animation you can add transition: all .5s to your .modal-class
Example: http://jsfiddle.net/eSsM5/1/
css:
.modal {
margin: 0 auto;
width: 200px;
height: 200px;
transition: all .3s;
background-color: red;
text-align: center;
padding-top: 30px;
}
.loading {
width: 100px;
height: 100px;
}
.loading > form {
display: none;
}
.loading > .spinner {
display: block;
}
.spinner {
display: none;
}
html
<div class="modal">
<form>
your form
</form>
<div class="spinner">
Now loading!
</div>
</div>
<button type="button">toggle loading</button>
js
document.querySelector("button").addEventListener("click", function() {
var modal = document.querySelector(".modal")
modal.classList.toggle("loading")
})
I want to show the text text masking effect with animation
Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/2/
I am not able to position the Red text in "center" above theblack text so the efffect should be something like this: http://jsfiddle.net/qTWTH/1/ *BUT aligned Center*
Also how to repeat the animation, this as per the JS, it just animate only once, I want to repeat the JS once the effect is done.
Code: HTML
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<span id="red">Waiting for the task!</span>
</div>
CSS
#mainbox {
width:600px;
text-align:center;
}
#black {
color:black;
font-weight:bold;
font-size:2em;
}
#red {
position:absolute;
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
}
JS
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
console.log(red.style.width);
if (red.style.width == "290px") clearInterval(animation);
red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);
Let me know if you need any other information.
Please suggest.
Check this fiddle
By centering the div itself, and positioning the red according to that, you'll ensure they line up.
#mainbox {
display: inline-block;
position: relative;
}
html {
text-align: center;
}
#red {
left: 0;
}
To run it again and again change like this:
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function(){
console.log(red.style.width);
if(red.style.width == "290px")
{
red.style.width = "0px"; // here i have changed
}
red.style.width = parseInt(red.style.width,10)+1 +"px";},50);
Correct fiddle: http://jsfiddle.net/arjun_chaudhary/qTWTH/22/
I altered your code slightly, you almost had it
http://codepen.io/nighrage/pen/EAmeF/
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<div id="red">Waiting for the task!</div>
</div>
#red {
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
margin: 0 auto;
margin-top: -37px;
}
change the second span for a div
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.