I have been trying to implement an accesibility function for a Website and one of my requirements is having a grayscale activated or deactivated on the click of 2 links. The users are still on Internet Explorer 11, so the compatibility with that navigator is a must.
So far, I have implemented some styles and code I found on the web and those are working great, I adapted the code, so I have 2 hyperlinks that execute a javascript function. One for enabling the grayscale and another one for disabling it.
But I have an issue, the grayscale is always turned on from the start whenever I load the page. I would like the grayscale starting disabled and then being enabled on by the click of one of my links.
Testing with Chrome and Firefox, the grayscales are turned off by default by adding the "grayscale-off" class to my images. Despite this, the issue persists on Internet Explorer.
So, I tried forcing the call to my javascript function that disables the grayscale on several parts:
Body
<body onload='enableEG(null)'>
Images themselves
<img src="img/FOV_8967.JPG" alt="Goal 1" width="600" height="400" class="grayscale grayscale-off" onload="enableEG(null)">
On the required script tag
<script src="js/jquery.gray.min.js" onload="enableEG(null)"></script>
Even tried creating a new script tag all the way to the bottom of my code, just before closing the body tag.
<script>enableEG(null);</script>
Interestingly, I put a couple of alerts that pop up when the function is executed, and they do appear when loading the page in IE with those forced function calls, however, the images still are grayscaled initially.
Here's my entire html code for reference (without the forced calls to the function):
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gray</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/gray.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script>
function enableEG(t){
var activeT = t;
//Internet Explorer
var isIE = /*#cc_on!#*/false || !!document.documentMode;
if (isIE) {
if ( activeT == null ){
alert ("activateEG1: NULL; disable");
$('.grayscale').toggleClass('grayscale-off',true);
}
else {
alert ("activateEG1: 1; enable");
$('.grayscale').toggleClass('grayscale-off',false);
}
}
//Other navigators
else {
if ( activeT == null ){
document.documentElement.style.webkitFilter = 'grayscale(0%)';
}
else {
document.documentElement.style.webkitFilter = 'grayscale(100%)';
}
}
}
</script>
</head>
<body>
<p>Grayscale Test</p>
<p><a id="linkEnable" href="#" onclick="enableEG(1);">Enable</a></p>
<p><a id="linkDisable" href="#" onclick="enableEG(null);">Disable</a></p>
<div class="gallery">
<a target="_blank" href="img/FOV_8967.JPG">
<img src="img/FOV_8967.JPG" alt="Goal 1" width="600" height="400" class="grayscale grayscale-off">
</a>
<div class="desc">Goal 1</div>
<a target="_blank" href="img/FOV_9088.JPG">
<img src="img/FOV_9088.JPG" alt="Goal 2" width="600" height="400" class="grayscale grayscale-off">
</a>
<div class="desc">Goal 2</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/jquery.gray.min.js"></script>
</body>
</html>
Any help will be appreciated!
Update:
Found that I can turn off the grayscale if I put a script executing on a Window Load event after calling the external js, and it works like a charm on a single index page!
<script>
$(window).on('load', function() {
alert ("script function: turn off gray");
enableEG(null);
});
</script>
However, I'm still looking for a more permanent solution, because this fix doesn't work on internal pages that go beyond the index of the site I'm testing.
Related
I've been learning HTML and CSS this semester and originally started to code my project in HTML and CSS, but in order for my project to work, I had to link HTML pages to each other. It ended up making a lot of HTML pages just to change one line of text. I've been trying to get a handle on JavaScript to make my project more efficient. My HTML code looks like this:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Oakwood</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel=stylesheet type=text/css href=default.css>
</head>
<body>
<div id=back></div>
<div id=drdick></div>
<div id=choice></div>
<div class="typewriter">
<script src="run.js"></script>
<p id=text>While out running someone says “Hi” causing you to trip. He helps you up.</p>
</div>
<div id=move>
<button type="button" onclick="changeThis()">Next</button>
</div>
</body>
</html>
My Javascript Looks like this:
var quoteIndex = 0;
var quotes = [
"Thank you.",
"Are you ok?",
"Yes, I’m not normally this clumsy"
];
function changeQuote() {
++quoteIndex;
if (quoteIndex >= quotes.length) {
quoteIndex = 0;
}
document.getElementById("text").innerHTML = quotes[quoteIndex];
}
function showPic()
{document.getElementById("drdick").src="img/drdickab.png";}
function changeThis() {
changeQuote();
showPic();
}
when I test my code my quotes update how I want them to. My picture does not show up at all. Is there something I am missing when it comes to how HTML and Javascript interact? I have been looking through the forums to figure out what I have wrong, and I haven't been able to figure that out.
Your image is not displaying because you did not specify your image anywhere in your markup, and your javascript is also not enough. But try this inside your body tag:
<body>
<!--replace your button with this code.-->
<div id=move>
<button type="button" onclick="showMyImage();" value="Next"></button>
</div>
<!--I assumed you will display the image just below your button, note that initially your image is hidden and displayed on button click event-->
<div>
<img id="myImage" src="img/drdickab.png" style="visibility:hidden"/>
</div>
</body>
.
<!--There's really no need to have multiple scripts, just one will do the job-->
<script type="text/javascript">
function showMyImage(){
document.getElementById('myImage').style.visibility="visible";
}
</script>
I am making a simple website which changes the image displayed when a button is clicked. But my code doesn't seem to be working as when I click on the button 'Click!' the alt text gets displayed instead of the image changing.The source of the images is perfectly fine, as when I use the same source outside the script the images show up.
<head>
<title>Pic Change</title>
<meta charset="utf-8">
<meta name="Pic Change">
<meta name="keywords" content="face,PES">
<meta name="author" content="Thalle">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="body" style="background-color:#4682B4">
<script>
function display(whichimage){
if(whichimage == 0){
document.getElementById('Click').src="C:\.....\Memes\Animals\initial.jpeg"
}
else{
document.getElementById('Click').src="C:\.....\Memes\Animals\Whenlife.jpeg"
}
}
</script>
<image id="Click" src="C:\......\Memes\Animals\initial.jpg" alt="Click Button to click picture" style="width:300px;height:300px" >
<p>
<button type="button" onclick="display(1)">Click!</button>
<button type="button" onclick="display(0)">Reset</button>
</p>
</body>
</html>
The code is fine, you just forgot the file:// before the start. This code shows that when you give a working image src in your code, it will work just fine. Also, don't use files from your disk on Stack Overflow, it gives out private information that you probably don't want on the web.
<head>
<title>Pic Change</title>
<meta charset="utf-8">
<meta name="Pic Change">
<meta name="keywords" content="face,PES">
<meta name="author" content="Thalle">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="body" style="background-color:#4682B4">
<script>
function display(whichimage){
if(whichimage == 0){
document.getElementById('Click').src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico"
}
else{
document.getElementById('Click').src="https://maxcdn.icons8.com/Share/icon/Animals//duck1600.png"
}
}
</script>
<image id="Click" src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico" alt="Click Button to click picture" style="width:300px;height:300px" >
<p>
<button type="button" onclick="display(1)">Click!</button>
<button type="button" onclick="display(0)">Reset</button>
</p>
</body>
</html>
You forgot the protocol (file://). It should be like
document.getElementById('Click').src="file://C:\Users...";
otherwise it will be just appended to the src everytime you click a button.
Try to put your JavaScript in the <head> section. Then it might work.
Also. There is no such thing as image in HTML. It's img.
In javascript, you need to escape backslashes in strings, so in adresses in particular. Replace all "\" by "\\".
You shouldn't load images from your disk. We and others can't see it. If you use relative paths and you make sure every images and the HTML file is in the same directory, that should be fine. Even if you do, you must specify the file:// protocol. But if you use external images from a website, we could see them.
There is no <image> element in HTML. It's just <img>.
You should type \\ instead of \, because the \ character has a special meaning. However, Javascript is smart, and you can use / too, don't have to follow Windows' method.
Please don't use the onclick attribute. It's really old. Instead use event listeners.
Right now I don't know what is the problem in your code extacly, however, there is a working example:
<!DOCTYPE html>
<html>
<title>Pic Change</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("button").addEventListener("click", function() {
document.querySelector("img").setAttribute("src", "file://C:/Data/300x300-colored.png");
});
});
</script>
<p><img src="file://C:/Data/300x300.png" /></p>
<p><button type="button">Click!</button></p>
</html>
If both images and the index.html is in the C:\Data directory, it works fine.
I have angular application in which I want to show the user a splash (loading text) immediately while the browser fetches all the resources like js files and images.
I have included only css files in the head section. The first element in the body is the div that has the text Loading in it.
All the script tags are at the end of the body (just before the closing tag).
The issue is, theoretically the browser should render the loading text as the first thing, but what happens is that i just see a white screen until all my js files are fetched (even if i have only one after concatenation, the browser still fetches them first and then my loader comes after a long white screen).
Here is what I am doing:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="link to first css file" />
<link rel="stylesheet" href="link to second css file" />
</head>
<body ng-app="my-app" class="{{$state.current.name}}">
<div ng-hide="loaded()">
<h2>Loading...</h2>
</div>
<div id="content-wrapper" ng-cloak>
<!-- all other angular app content is wrapped into this section -->
</div>
<script src="first script"></script>
<script src="second script"></script>
<script src="third script"></script>
</body>
</html>
Unable to figure out why the Loading msg is not shown and browser starts fetching the js files. I am using angular 1.2.28
ng-hide should be listening to a property on $scope, not calling a function.
You need your code to look something like:
$scope.loaded = false
myLoadingFunctions() {
// ... do loading stuff
$scope.loaded = true;
}
And then your loading div is:
<div ng-hide="loaded">
<h2>Loading...</h2>
</div>
If you look at the console, it's likely that you're either interrupting your JS or calling a non-existent method and causing an error, or the loaded() call is simply evaluating to null and therefore hiding the div.
I got the reason for why my loading message was not being displayed. It turned out to be a silly CSS issue after all. :)
The body's height was 0 px as there was no content and my div was positioned absolute. (so it did not add to the body's height)
For me, making my div to position fixed solved the case.
I'am developing a web-application that allows to select parts of an html document and put some kind of annotation on it.
To get hold of the selected text I use window.getSelection() which works pretty fine in IE9, FF, and Safari.
However I run into trouble when using the same page on my IPad 2:
If I just select a word by tapping it for a sec, window.getSelection() returns the proper selection.
If I create a text range ( as discribed here http://blog.laptopmag.com/how-to-select-copy-and-paste-text-on-the-ipad ) always return "null".
I've already examined the window, document and related event objects - but without success...
Any help would be really appreciated!
Edit: Just a small example. Select a text and press the button. On Safari (PC) the function prints the selected value...
<html>
<body>
<script>
function a()
{
alert(window.getSelection());
}
</script>
Hello World! <input type="button" onclick="a();"
</body>
</html>
Okay finally I've solved the problem: As Tim assumed the click events causes to selection to collapse. I consider this as rather strange behavior as on regular Safari this does not happen.
However, the solution is not to use the click event. Instead of I'm using "vlick" provided by the jquery mobile.
Full working example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
Hello World! <input type="button" id="button1" />
<script>
function a()
{
alert(window.getSelection());
}
$("#button1").bind("vclick",a);
</script>
</body>
</html>
Most of us know that HTML5 Canvas element is having much better support with these amazingly fast Javascript Engines from Firefox, Safari and Chrome.
So recently I have been experimenting with game development with Javascript and the Canvas, and I am wondering what would be a good approach to be creating a Start Screen for a Javascript Game.
So far, the only idea I have would be creating a UI before the game and stuff with Javascript and use Event Listeners to track the mouse and when they click buttons. But I'm not sure if this a wise thing to do.
What would a good way to go about a Starting Screen, etc. in a Javascript game? Any help would be useful, thanks!
UPDATE: Thanks for the blazing fast reply(s)! A lot of you are suggesting placing a img until the game loads, etc. So do I need to write a asset manager or some sort - to check when all the images etc. are loaded?
Populate a div tag with your splash screen. Have it showing on page load and have your canvas hidden. Add a 'start' button to the div tag and on it's click event, hide the splash screen div tag and show the canvas using either jQuery or classic JavaScript.
Here is some sample code using jQuery:
<div id="SplashScreen">
<h1>Game Title</h1>
<input id="StartButton" type="button" value="Start"/>
</div>
<canvas id="GameCanvas" style="display: none;">Game Stuff</canvas>
<script>
$("#StartButton").click(function () {
$("#SplashScreen").hide();
$("#GameCanvas").show();
});
</script>
Simple, use a regular HTML img that is located 'above' your canvas until everything is loaded / initialised.
function startGame() {
alert('Are you sure you want to make a new Game?');
}
function continueGame() {
alert('Continue Game?');
}
body, button {
color: blue;
text-align: center;
font-family: cursive;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Game Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Game Title</h1>
<script src="script.js">startGame()</script>
<button onclick="startGame()">New Game</button>
<button onclick="continueGame()">Continue Game</button>
</body>
</html>