javascript onclick custom cursor - javascript

I have been using:
<script>
function change()
{
document.body.style.cursor="url('xx/xx.cur'),auto";
}
</script>
<div onClick="change()"></div>
It works, but its important that the cursor resets while there is no click so i tried the onBlur, but it didnt work.
At last I found this:
<script type="text/javascript">
function change() {
document.body.style.cursor=(document.body.style.cursor=="help") ? "default" : "help";
}
</script>
</head>
<body>
<div onmousedown="change()" onmouseup="change()"> </div>
which works like a charm, but it failed to replace the cursor standard styles with custom .curs.
Here:
function change()
{
document.body.style.cursor=(document.body.style.cursor=="url ('xx/xx3.cur')") ? "url ('xx/xx1.cur')" : "url ('xx/xx3.cur')";
}
</script>
</head>
<body>
<div onmousedown="change()" onmouseup="change()" id="container">
Obviously the double parentheses are troublesome. I tried everything without success. Any help apreciated.
Thanks in advance.

I would probably tackle this problem with some simple css magic instead.
Instead of actually assigning body.style.cursor a value with javascript I would toggle a class on the html-tag which in turn shows the correct cursor.
CSS:
html
{
cursor: default;
}
html.help
{
cursor: url('help.cur');
}
Javascript:
function change()
{
$("html").toggleClass("help")
}
Working jsfiddle: http://jsfiddle.net/BV3kn/2/

Related

Why won't my toggle menu function work for a div (instead of a button) FIXED

So I originally wrote(/copied from w3) this javascript function that toggles a class called "show" to hide/reveal the menu. It was originally attached to a button, but I want to change it to a div. It works perfectly on the button, but when I call on the function from the div it doesn't work though. Any ideas? I used: onclick="myFunction()" for both in the html
function myFunction() {
document.getElementById("content").classList.toggle("show");
}
EDIT
nvm I'm just dumb guys. I'm using an extension on vs code to get live updates and I just forgot to reset the connection-server thing smh I'm embarrassed of myself
You may forgot to add the eventListener to the "button"
var myFunction = function () {
document.getElementById("content").classList.toggle("show");
}
// you need to get the button from DOM
var myButton = document.querySelector('.call-me-a-button');
// then add the eventListener to the button saying what to do when the event occurs
myButton.addEventListener('click', myFunction);
#content {
display: none;
}
#content.show {
display: block;
}
.call-me-a-button {
cursor: pointer;
}
<div id="content"><h1>hello world</h1></div>
<div class="call-me-a-button">click me I'm a div</div>
You didn't show the div itself or mention any error message so it's hard to judge what's wrong, but here's a general example of how it would work:
function myFunction() {
document.getElementById("content").classList.toggle("show");
}
.show
{
color:red;
}
<div onclick="myFunction()">Click me</div>
<div id="content">Content</div>
You can also use addEventListener to decouple the click handler from the markup - which is generally regarded as more maintainable and easier to follow:
document.getElementById("clickme").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("content").classList.toggle("show");
}
.show
{
color: red;
}
<div id="clickme">Click me</div>
<div id="content">Content</div>

Why are the two options of my toggle () executing?

I have made a button with a link, <a>, and I want to use it to display or not some elements. For this objective I thought .toggle() was a good option.
$('#filter_btn').click(function() {
$('.filters_container').toggle(function() {
$(".filters_container").css({
display: "flex"
});
}, function() {
$(".filters_container").css({
display: "none"
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Nodes
But with this code, when I press the button it shows filters_container but immediately they become invisible again. Why is executing both parts of the toggle function?
Thank very much.
$('#filter_btn').click(function() {
$(".filters_container").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Nodes
<span class="filters_container" style="display: none;">test</span>
simple toggle function use it.
$(function(){
$('#filter_btn').click(function() {
$("p").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Nodes
<p style="display:none">testing</p>
</div>
This is not how toggle works in jQuery
Try to change your code to simply this:
$('#filter_btn').click(function() {
$('.filters_container').toggle();
});

How can I fix this jQuery glitch so the div doesn't try to disappear when using .hover()?

What I'm trying to accomplish is make a div visible when hovering over another using the .hover() method, addClass and removeClass. But what happens is that when I hover over the added div, it reads that I'm no longer hovering over the div specified (or at least that's what I assume) in the .hover() method. This causes the div to flash on and off the screen repeatedly. How can I fix this so this problem doesn't happen? Here is the code:
JS
$(document).ready(function(){
$('.building').hover(
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).addClass('active');
},
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).removeClass('active');
}
);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function abc() {
document.getElementById("Div2").style.display="";
}
</script>
</head>
<body>
<div onmouseover="abc()">Div1</div>
<div id="Div2" style="display:none">Div2</div>
</body>
</html>
If the balloon overlaps the Div, it captures the event “onmouseover”.
If you don’t have to deal with it, you could use css rule to prevent any action
.balloon {
pointer-events: none;
}
This rule allows the event to pass through the balloon, as if it didn’t exist.

Change Element inside element with Onclick or Hover property

<html>
<head>
<style>
#container {position:relative;left:15%;}
#myImage {width:65%;height:280px;}
#text {padding-top: 50px;}
#textbox {width:65%;height:280px;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="container" onclick="changeImage()" >
<img id="myImage" src="C:\Documents and Settings\svarghe1\My Documents\Downloads\Jaguar_Xj_Saloon_4.jpgj_.jpg" alt="">
<div id="textbox">
<p style="color:white;text-align:center;margin-top:50px;"class="text">Jaguar_Xj_Saloon</p>
<script>
function changeImage() {
if (document.getElelmentById("container").innerHTML="myImage") {
container.appendChild(myImage)
} else {
container.appendChild(textbox)
}
}
</script>
</div>
</div>
</body>
</html>
Here, I am trying to create a script for Sharepoint site page to change an element in div from Image to textbox with Onclick or hover property. There might be a lot of mistakes as this is my first attempt on JS. I have also tried
<script>
function changeImage() {
var image= document.getElementById("myImage");
if (image=true) {
var element = document.getElementById("container");
var UImage = document.createElementById("myImage");
element.appendChild(UImage)
} else {
var element = document.getElementById("container");
var Utextbox = document.createElementById("textbox");
element.appendChild(UImage)
element.appendChild(Utextbox);
}
}
</script>
#container:hover #myImage{ display:none; }
I have tried the code above in CSS, instead of script. It didn't work. At the same time the code,
a:hover #box{ text-decoration: none;color:green;background-color: Turquoise;cursor:pointer }
Works really fine. Why is that? I have given class instead of id. It also didn't work. It works in ordinary HTML file. But can't get to work in Sharepoint site.
So, can you help?
Instead of appending Image and text box from the javascript, you can already write the html codes for both and do the hide/show according to your need. I think it will make things lot easier and neat.
As for the Hover property, you can attach event of hover with jquery.
You can check the following link: http://api.jquery.com/hover/

auto focus the same textbox on blur

I need to focus the text box which on blur moves to next box. but, if an error is detected it needs to be focused again.
here is my code
<input type="text" id="error_code'" name="errorcode[]" onblur="validate_code(this.id)"/>
function validate_code(id){
var error_code=$("#"+id).val();
if(isNaN(error_code))
{
$('#'+id).val("");
$('#'+id).focus();
}
}
however this id not setting focus to same text box. tnx.
EDIT: Am able to validate and get result. But, my question is on re-focusing the text box if error is returned...
Try something like this.. this works perfectly:
HTML:
<input type="text" id="error_code"/>
Jquery blur function:
$(document).ready(function(){
$("#error_code").blur(function(){
var error_code=$(this).val();
if(isNaN(error_code)) {
$(this).val("");
$(this).focus();
}
});
});
You need to tryout something like this.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="example">
<div>
<input type="text" id="error_code" name="errorcode[]" onblur="validate_code(this.id)"/>
</div>
<script>
function validate_code(id){
var error_code=$("#"+id).val();
if(isNaN(error_code)) {
setTimeout(function() {
$('#'+id).val("");
$('#'+id).focus();
}, 0);
}
}
</script>
</div>
</body>
</html>
In case of jQuery its already tries to set focus to the field. It will block further focus events to the field. To you need to hack it out by something like this.

Categories

Resources