Hand Cursor is not working in the firefox browser - javascript

<html>
<head>
<title>Question</title>
<script type="text/javascript" >
function MouseOverHand(ID)
{
var Cursor='hand';
var ID=ID;
if (!document.all){ Cursor='pointer'; }
document.getElementById(ID).style.cursor=Cursor;
}
</script>
<script type="text/javascript" >
function MouseOverHelp(ID)
{
var Cursor='help';
var ID=ID;
if (!document.all){ Cursor='pointer'; }
document.getElementById(ID).style.cursor=Cursor;
}
</script>
</head>
<body>
<label id="Hand" onmouseover="MouseOverHand('Hand');" > Hand </label><br/><br/>
<label id="Help" onmouseover="MouseOverHelp('Help');" > Help </label>
</body>
</html>
The above html is used to take mouse cursor in the mouse over of labels. Here, "Hand" and "help" cursor is working fine in Internet Explorer, but it's not working in Firefox and other browsers.

you don't need var Cursor if you can specify help or hand directly like so
document.getElementById(ID).style.cursor='hand';
and
document.getElementById(ID).style.cursor='help';
please check working example and take a look at the html source code

Simpler version, works on 'all' browsers:
<script type="text/javascript" >
function MouseOverPointer(obj) //obj is the triggering element
{
if(obj.id=='Help')
obj.style.cursor = "help";
else if(obj.id=='Hand')
obj.style.cursor = "pointer";
}
</script>
<label id="Hand" onmouseover="MouseOverPointer(this);" > Hand </label><br/><br/>
<label id="Help" onmouseover="MouseOverPointer(this);" > Help </label>

"Hand" does not work in Firefox. Try "pointer". "help", however, should work -- try applying the style in a more direct way than via JS.

Related

Javascript removeAttribute style not working properly

I have a simple code in order to hide objects inside a div until a button is pressed.
The code works, but after execute the alert, the code roll back.
I understand there are several options to do the same, but same behavior occurs for others I have attempt (such as https://www.w3schools.com/jsref/prop_style_visibility.asp).
So I have attempt the removeAttribute style because it's easier to watch on Console.
I have attempt to put the script before the form, and after form, but same behavior occurs.
I have add some snapshots from Console in order to demonstrate it, please see below.
I am not sure what am I doing wrong. Tested on Chrome (89.0.4389.114) and Edge (89.0.774.75).
Any help is highly appreciated!
Thank you in advance.
PS. It is running inside a php code (using echo) due it has conditional values.
**PS. It works fine outside a form**
<body>
<form ...
(...)
<div class="field" id="pwdDIV" style="visibility: hidden">
..somocode..
</div>
<button class="button" onclick="showPwd()">Show Password</button>
</form>
<script>
function showPwd() {
var z = document.getElementById('pwdDIV');
alert("Get Style: "+z.style.visibility);
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
alert("Change to Style: "+"visible");
} else {
(...)
}
}
</script>
</body>
Before Press Show Password button
After press Show Password button - executing alert parameter
After execute Javascript code
Outside form sample (works fine outside forms)
<html>
<head>
<script type="text/javascript">
function showPwd() {
var z = document.getElementById('pwdDIV');
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
} else {
z.setAttribute("style", "visibility: hidden");
}
}
</script>
</head>
<body>
<button onclick="showPwd()">Show Password</button>
<div id="pwdDIV" style="visibility: hidden">
<input type="password" id="pwd1" name="pwd1">
</div>
</body>
</html>

how to use check box to toggle between links on the same button?

how do i use a html check box to toggle two different links in a html button?
(IE) a button contains two links. with the use of a check box, if set to true, on click of button should go to xyz site and when check box false, on click of same button should go to abc site ?
Please help as i am new to j query. using this on a share point site.
This may help you,
$('button').on('click',function(){
var url=$('input:checked').length ? 'abc.com' : 'xyz.com';
alert(url);// use window.location.href=url; to open that url
});
Try Demo
On checkbox change switch link href:
HTML
<input type="checkbox">
<a href="#" data-url1='lala' data-url2='lolo'>button</a>
JQUERY
$(function(){
$('a').attr('href',$('a').data('url1'));
$('input').on('change',function(){
if($(this).is(':checked')){
$('a').attr('href',$('a').data('url2'));
}else{
$('a').attr('href',$('a').data('url1'));
}
})
})
This is the proper code try and run it in your browser, you can even try this in jsfiddle
Two concepts here used is how to check the checkbox checked or not in jquery, there are many ways i illustrate the one way by using is(':checked')
and other is binding the click event of a button, which is quite simple. I hope you like it.
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" id="myCheckbox" />
<button id="myButton">Click</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myButton').click(function(){
if($('#myCheckbox').is(':checked')){
window.location.href = "http://www.google.co.in";
}else{
window.location.href = "http://jforjs.com";
}
})
})
</script>
</body>
</html>
Demo
HTML
<input id="choice" name="choice" type="checkbox" data-yes="http://www.xyz.com" data-no="http://www.abc.com"/>
<button id="submit">submit</button>
jQuery
$('#submit').on('click',function(){
var url ='';
if($('#choice').is(':checked')){
url = $('#choice').data('yes');
}
else{
url = $('#choice').data('no');
}
alert(url);
//Uncomment below for redirecting automatically to the desired url
//location.href = url;
});

javascript onclick custom cursor

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/

Creating Html Element with onclick() event in javascript

I've been working at this for the last hour, but I am still unable to get the expected output... All I want is to create an HTML element using the onclick event. I was able to create the element on load, but find myself unable to with the event. Please lead me in the right direction. Here's my HTML page:
<html>
<body>
<div id="d1">
<p id="p1">Paragraph.</p>
</div>
<div id="d2">
<label onclick="open()">Inbox</label>
</div>
<script>
function open(){
alert("Start");
var para=document.createElement("p");
var node=document.createTextNode("Text");
para.appendChild(node);
para.style.color="red";
var element=document.getElementById("d2");
element.appendChild(para);
}
</script>
</body>
</html>
open() seems to be a reserved functions. Tried with open1(), it works.
You are probably colliding with the window.open function built into the browser, rename your function.
Try this code
<label onclick="create_elem();">Inbox</label>
<script language="javascript">
function create_elem(){
alert("Start");
var para=document.createElement("p");
var node=document.createTextNode("Text");
para.appendChild(node);
para.style.color="red";
var element=document.getElementById("d2");
element.appendChild(para);
}
</script>

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