Can I hide the mouse cursor when using the .hta extension? - html

I have a .hta with some HTML code whose sole purpose is to display a 1920x1080 image on a 1920x1080 display, and I want the cursor to be hidden.
I've tried a few things already, notably
<style type="text/css">
* {
cursor: none;
}
</style>
or
<style>
body, html { margin:0; border:0 }
.no-cursor { cursor : none; }
</style>
<div class="no-cursor"><img src="D:\Logos\NewLogo.jpg" /></div>
Ultimately, I feel like everything that relates to the cursor (that works in a regular HTML instance) doesn't work when using the .hta extension.
<HTA:APPLICATION ID="hello"
APPLICATIONNAME="hello"
BORDER="none"
BORDERSTYLE="normal"
CAPTION="no"
CONTEXTMENU="no"
INNERBORDER="no"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="no"
NAVIGABLE="no"
SCROLL="no"
SCROLLFLAT="no"
SELECTION="yes"
SHOWINTASKBAR=yes"
SINGLEINSTANCE="yes"
SYSMENU="no"
VERSION="1.0"
WINDOWSTATE="maximize" />
<html>
<head>
<style>
body, html { margin:0; border:0 }
</style>
</head>
<body>
<img src="D:\Logos\NewLogo.jpg" />
</body>
</html>
This is my full working code, with the cursor showing. I just need something in there to hide the cursor when running it from a .hta file.
Many thanks in advance!
Edit:
I found this here:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
With a bunch of different cursor variations, and they ALL work in my HTA. They ALL DO, except for "none". It makes no sense to me!! This is driving me crazy!! :'(
The fact that they all work proves that the code itself is working correctly. But I have no idea why the "none" refuses to work properly.

Works for me:
test.hta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>No Cursor</title>
<style>
.no-cursor { cursor: none; }
</style>
</head>
<body>
<img class="no-cursor" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/6f050e39-windows_10_logoblue.svg-copy_windows.jpg" />
</body>
</html>

Related

Setting black for one line - There are more web links on the line

I'm trying to set black for one line. There are more web links on the line. But the link is still blue. Thanks for the help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2 style="color:black;">YouTube Google</h2>
</body>
</html>
Because there is a default style from <a> tag, which it hides the set style from <h2>. There are 2 ways (not only 2) to resolve the problem.
Way 1: by adding a <style> tag and put your styles inside it.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
<style>
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<h2>YouTube Google</h2>
</body>
</html>
Way 2 (not recommended because it looks not really tidy): add styles to each <a> tag.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2>
YouTube
Google
</h2>
</body>
</html>
Hope helped.

How to fix "2.4.7 Focus Visible" Element not highlighted in mac machine

It gives me "2.4.7 Focus Visible" AA error in Mac when I check my site with siteimprove chrome extension. Some times it works fine in windows systems some times it's not.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
a#login-as-guest:focus{ background-color: yellow; }
a#login-as-guest-active:active{ background-color: yellow; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>
<body>
<a tabindex="0" id="login-as-guest">Cancel and browse as guest</a>
<br />
<a id="login-as-guest-active">Active Cancel and browse as guest</a>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "t2hbS"
}], "*")
}
</script>
</body>
</html>
It's already running in my server "https://myappdemo.com/focus/test.html"
Please help me thanks in advance.
Your code sample just changes the focus background color and your demo link just sets the focus text color. A typical focus indicator is an outline border, which is provided by default by most (all?) browsers, but your color changes are sufficient to show a focus too. In fact, since you are only changing :focus{background-color} and a{color}, respectively in the two examples, you will get your color change and the browser's default focus border.
I don't see why siteimprove is flagging it. Can you post the error siteimprove is claiming and all relevant info it's complaining about?
Make sure that user interface elements, that can receive keyboard focus, are highlighted on focus.
a:hover, a:active, a:focus {
text-decoration: underline;
color: green;
}

Link html to css doesn't work on Google Chrome

I'm having a problem with linking html to CSS. It doesn't work on Google Chrome, but it does on IE. Is there anything wrong with it. By the way, I downloaded the newest version of Google Chrome moments ago.
This is my html:
body{
background:black;
color:white;
font-family:arial,helvetica,sans-serif;
float:left;
}
h1{
font:"courier new"
size:14px;
color:yellow;
font-weight:bold;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8"/>
<meta name="author" content="Alvex"/>
<link rel="stylesheet" href="../CSS/test.css"/>
</head>
<body>
<h1>Hello World</h1>
<p>Nothing here</p>
</body>
</html>
Thank You!
If it is working in IE then path must not be an issue.
Did you check network tab in chrome developer tools? See if the .css file loads.
<link rel="stylesheet" href="CSS/test.css"/>
use like above

How can I change entire Website Background Color when I Mouseover

How can I change ENTIRE WEBSITE Background Color when I Mouseover image,text etc.
hope this will help to you.but you may need little bit jquery.paste this and try it.you may need internet connection because I have linked jquery online.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
.classOne{
background-color: orange;
color: white;
}
.changeme{
cursor:pointer;
}
</style>
</head>
<body>
<p class="changeme">change the body background color</p>
<script type="text/javascript">
$(document).ready(function(){
$(".changeme").mouseenter(function(){
$('body').addClass("classOne");
});
$(".changeme").mouseleave(function(){
$('body').removeClass("classOne");
});
});
</script>
</body>
</html>
you can use this with any other element such any img,div, etc....
or, if you want to change only the body background with css,you can use hover like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>
<style type="text/css">
body:hover{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<p>change the body background color</p>
</body>
</html>
Without seeing your code and making a guess, I imagine you could use a css selector more specifically :hover if you just want it to change when you hover and at no other point. http://www.w3schools.com/cssref/sel_hover.asp

IE8 does not print an image in :before pseudo-element

I want to put an icon image before a text. Any HTML tag such as <img> should be avoided because any changes of HTML structure may affect our javascript code.
I write the following code and it works on screen with IE8/Firefox.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=8' />
<style type="text/css">
div.before-test:before {
content: url("sample.png");
}
</style>
</head>
<body>
<div>aaaa</div>
<div>bbbb</div>
<div class="before-test">cccc</div>
<div>dddd</div>
</body>
</html>
But, when visitors try to print the web page with IE8, the image disappears. How can I show the image even when printing with IE8, or must I add HTML tag for the image?
IE8 supports before but not in compatibility mode.
i think you should look at this guide as to what properties and stuff are supported on some browsers especially IE 6 and up.
http://www.quirksmode.org/css/contents.html
by the way, the url in url() - quotes are optional. better to have none to avoid unnecessary escaping issues
http://www.w3.org/TR/CSS2/syndata.html#value-def-uri
<style type="text/css">
div.before-test:before {
content: url(sample.png);
}
</style>
The only way i could find is from in stackoverflow. I know, it is not a good approach but , i guess there is no solution about this bug
HTML:
<div class="PrintOnly">
<img id="PrintLogo" src="sample.png"/>
</div>
CSS:
.PrintOnly { display:none; }
#media print {
.PrintOnly { display:block; }
}