I'm really new to js and just need a short script that redirects users to an URL from another website. This is my script so far:
<!DOCTYPE HTML>
<html>
<head><META CHARSET='UTF-8'><title>My webpage</title>
</head>
<body onload="redirectUser();">
<script>
function redirectUser() {
window.location = "https://www.google.com";
}
</script>
</body>
</html>
The major issue is that some web browsers (i.e. IE) do not automatically run these scripts (they are prompt to manually activate javascript and activeX in order to run the scripts). If this turns out to be the case, is there a way to automatically display a text in the middle of the screen to warn the user about this or to simply display the link?
you can place your link into a <noscript></noscript> tag.
<noscript>Go!</noscript>
You can take advantage of the fact a user doesn't have JavaScript enabled to tell them that they don't have JavaScript enabled.
You can add a div with a message warning about JavaScript being required to use your site, then immediately remove/hide this div with JavaScript.
Users that have JavaScript enabled won't see it as it will have been removed by JavaScript.
Those that don't have JavaScript enabled see the message.
Example below, either disable JS or comment out to see the message.
document.getElementById("jswarning").remove();
#jswarning {
width: 100%;
padding: 10px;
background: red;
color: #fff;
text-align: center;
}
header {
text-align: center;
background: #333;
color: #fff;
font-size:40px;
}
<div id="jswarning">This website requires JavaScript.</div>
<header>Your Website</header>
No script solution (credit to #Founded1898):
<noscript>
<div id="jswarning">This website requires JavaScript.</div>
</noscript>
<header>Your Website</header>
Related
The idea is to handle paste event at the level of page as such (contrary to handling it at the level of individual input fields/elements). The solution is to have paste event handler bound to a top level div element.
The problem is that before paste event starts to be firing, user must first physically click anywhere inside the browser window after the page loads for the first time (even though the browser window as such is in focus).
The question is: How to make the page sensitive to paste without this step (of having to click inside the window)?
Techniques I've tried that didn't work:
Focussing the outer div programmatically on load (see the js code below)
Clicking the outer div programmatically on load (see the js code below)
Note: My actual project is a rather complex angular web page, fortunately, I was able to replicate the behaviour using pure HTML/javascript.
Note: Paste event on div seems to be working only in Chrome. So don't even try this in MSIE or FF. Nevertheless, cross browser support is another issue that I'd like to tackle separately.
Test html page to replicate the problem:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>paste test</title>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
div#outer {
margin: auto;
height: 100%;
padding: 20px;
background-color: whitesmoke;
box-sizing: border-box;
}
div#inner {
margin: auto;
margin-top: 20px;
padding: 20px;
width: 500px;
height: 500px;
border: solid 3px green;
}
</style>
</head>
<body onload="load()">
<div id="outer" onpaste="paste()" tabindex="1">
First click anywhere to make the paste work.
<div id="inner">
Just any content.
Not important for example.
</div>
</div>
<script type="text/javascript">
function load() {
document.getElementById('outer').focus();
document.getElementById('outer').click();
}
function paste() {
alert('paste');
}
</script>
</body>
</html>
I would like to make my own custom Coinbase payment button and have the following code which is just a copy paste of "Using Your Own Button And Custom Javascript Events" example.
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="none"></div><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.my-custom-link').click(function(){
$(document).trigger('coinbase_show_modal', '4d4b84bbad4508b64b61d372ea394dad');
return false;
});
$(document).on('coinbase_payment_complete', function(event, code){
console.log("Payment completed for button "+code);
window.location = "/confirmation.html";
});
});
</script>
</body>
</html>
However it does not work. Any ideas why?
'Show Me The Modal!' link is displayed. The $('.my-custom-link').click() function is called. Using Google Chrome I can see that an iframe is loaded with what I assume is the modal dialog code containing payment instructions. However nothing happens when I click on the 'Show Me The Modal!' link.
I think I have solved it. I tried it out with your code and it does not work as you said. I took the time to modify it a little bit and it works now. http://pastie.org/8687468 Please let me know if what I fixed was intended.
The code isn't working because coinbase.com blocks custom buttons from working after triggering them with custom scripts too much
Ask a friend to test your code, it should work for other people.
I'm having the same issue. Deleting browser cookies, cache, flash cookies, changing IP doesn't work. I guess the only solutions are:
wait for the ban from coinbase.com to expire
contact support about it
don't do anything, it's working, but not for you
Update:
A working solution/hack that I found was using the default button, hiding it with opacity: 0; and putting it on top of your custom button. That way you can make it look like the user is clicking the custom button, when in fact, he's clicking the hidden default button (which works).
Here's a demo: http://jsfiddle.net/uaMdX/show
Code demo: http://jsfiddle.net/uaMdX/
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="small"></div>
<script src="https://coinbase.com/assets/button.js"></script>
<style>
#coinbase_button_iframe_4d4b84bbad4508b64b61d372ea394dad {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 140px!important;
height: 18px!important;
margin-left: 7px;
margin-top: 10px;
/*
debugging_code: uncomment_to_show_the_button;
opacity: 0.5;
outline: 1px solid red;
*/
}
</style>
*If your needs are more specific you should use jQuery to dynamically add the styles/position the iframe for the hidden button.
Try creating another page, and put only what coinbase gives you. If that works then it is probably a Issue on your side. If not, let me know.
I have a website with the <noscript> tag that works just fine on all browsers except IE (7,8,9,10).
After I disable scripting under the security settings inside Internet Options, On my PC only I can the the <noscript> content on IE, but on other PC's (almost all of them) I can't see the code. With these PC's we go with the same settings to Gmail's and FB's sites and we do get the warning for not having js enabled.
This is the HTML:
<noscript>
<div class="noscript">
JavaScript must be enabled in order for you to use WEBSITE NAME in standard view.<br />
However, it seems JavaScript is either disabled or not supported by your browser.<br />
To use standard view, enable JavaScript by changing your browser options, then try again.
</div>
</noscript>
CSS:
.noscript {
background: red;
color: #fff;
padding: 10px;
text-align: center;
position: relative;
z-index: 3;
}
Any ideas?
Thanks!
Encountered this issue as well. I had this working in IE and then it stopped all of a sudden. What I found is that if your css is nested beneath a noscript tag in your actual css definition it will not work. If you use just a class name its fine.
I'm using IE 10 to test with and their dev tools to change the document mode to older browser modes to verify. Results may vary when actually using older browsers. Report back if this is the case.
Example html:
<noscript>
<div class="noscript">
JavaScript must be enabled ...
</div>
</noscript>
Doesn't Work:
// classes nested beneath a noscript tag are not applied by IE
noscript div.noscript {
display: block;
text-align: center;
color: white;
font-weight: 700;
background: #D53333;
margin: 0 auto;
padding: 4px;
}
Does work:
div.noscript {
display: block;
text-align: center;
color: white;
font-weight: 700;
background: #D53333;
margin: 0 auto;
padding: 4px;
}
I remember how I struggled with this problem when I was new to html. Though, I haven't found a solution to the problem, I found a really nice trick that does the job well. It has been explained below:
Normally, we use a noscript tag for this purpose. But this tag isn't supported in Internet Explorer.
So, instead of going the normal way, use a div tag instead of the noscript tag. Give it an id.
Later just above the closing body tag, add a script tag and paste there the below code:
var noscript = document.getElementById('_id_of_the_div_used_instead_of_noscript');
noscript.style.display = 'none';
What the above code does?
It gets the #noscript element and sets its display style to 'none'. Hence it disappears.
How does this work?
This works because if scripts are disabled, the script tag where you pasted the above code won't work. Hence the div#noscript will still be visible. But if scripts are enabled, the the above code will make the div#noscript to disappear. It works just like the noscript tag.
See below an example:
Normally we do this:
html: <noscript> please enable javascript ... </noscript>
css: noscript{background-color: red; color: white; font-size: 24px; ... }
Instead do this:
html: <div id="noscript"> please enable javascript ... </div>
css: #noscript{background-color: red; color: white; font-size: 24px; ... }
js: document.querySelector('#noscript').style.display="none";
try this css
.noscript {
background: red;
top: 100px;
color: #fff;
padding: 10px;
text-align: center;
position: relative;
z-index: 3;
}
I need to display a banner in a my HTML file when java script is disabled as in stackoverflow site. In stackoverflow site, it is displayed a red banner when java script is disabled. It is good to whole HTML page goes little bit down and display a red message as in this stackoverflow site when JS is disabled. Can any one help me to do this..
Thanks in advance..
Use <noscript> tag:
https://developer.mozilla.org/en/HTML/Element/noscript
I don't know if it's still the way to do it, but noscript works for that.
<noscript>Javascript is disabled</noscript>
So I suppose that a specific div inside the noscript should do the job.
<html>
<head>
<title>noscript test</title>
<style>
#nojs {
top: 0px;
width: 100%;
position: absolute;
background-color: red;
color: white;
border-bottom: solid 5px black;
}
</style>
</head>
<body>
<noscript><div id="nojs">You should enable javascript!!</div></noscript>
</body>
</html>
Display the banner and hide it with JavaScript. Thus it is shown if JavaScript is not enabled!
For example
<img src="myimage.gif" id="myImage" />
<script type="text/javascript">
window.onload = function(){
document.getElementById("myImage").style.display="none";
}
</script>
When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to this stackoverflow post gave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions?
Here's the code that I borrowed from the answer linked above:
CSS:
#hideAll
{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
z-index: 99; /* Higher than anything else in the document */
}
HTML:
<div style="display: none" id="hideAll"> </div>
Javascript
window.onload = function()
{ document.getElementById("hideAll").style.display = "none"; }
<script type="text/javascript">
document.getElementById("hideAll").style.display = "block";
</script>
I'd suggest that you define the base/JavaScript-enabled styles of elements you want to display with CSS in the regular style block:
<style type="text/css">
#javaScriptAccordion {
display: none;
}
</style>
And then use the noscript tags (in the head) to amend this in the absence of JavaScript:
<noscript>
<style type="text/css>
#javaScriptAccordion {
display: block;
}
</style>
</noscript>
This ensures that the content is hidden on document load, preventing the flash, but visible to those users that have JavaScript disabled.
The above has been amended to prevent the 'flash of no content' (as described by #Josh3736 in his answer), and now uses opacity to hide the content:
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 0.001;
width: 50%;
margin: 0 auto;
padding: 0.5em;
border-radius: 1em 0;
border: 5px solid #ccc;
}
</style>
<noscript>
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 1;
}
</style>
</noscript>
Live demo.
I'm not, unfortunately, entirely sure that I understand your question. Which leaves me proposing a solution for the question I think you asked (all I can offer, in excuse, is that it's early in the UK. And I'm not awake by choice...sigh); if there is anything further that I'm missing (or I'm answering the wrong question entirely) please leave a comment, and I'll try to be more useful.
The hack in the linked question is—in my opinion—very poor advice. In this case, it is a better idea to include some script directly following your accordion elements.
<div id="accordion">...</div>
<script type="text/javascript">...</script>
However, inline script intermingled with your HTML markup is a Bad Idea and should be avoided as much as possible. For that reason, it is ideal to include inline only a function call to a function declared in your external script file. (When you reference an external script (<script src="...">), the rendering of your page will pause until it has loaded.)
<html>
<head>
<script type="text/javascript" src="script.js"></script> <!-- renderAccordion() defined in this file -->
</head>
<body>
...
<div id="accordion">...</div>
<script type="text/javascript">renderAccordion();</script>
...
</body>
</html>
Of course, the correct way to do this is to just attach to the DOM ready event from script.js and not use any inline script at all. This does, however, open up the possibility of a content flash on extremely slow connections and/or very large documents where downloading all of the HTML itself takes several seconds. It is, however, a much cleaner approach – your script is guaranteed to be loaded before anything is rendered; the only question is how long it takes for DOM ready. Using jQuery, in script.js:
$(document).ready(function() {
// Do whatever with your accordion here -- this is guaranteed to execute
// after the DOM is completely loaded, so the fact that this script is
// referenced from your document's <head> does not matter.
});
Clever use of <style> and <noscript> does a a good job of guaranteeing that there is no flash of all the content in your accordion; however, with that method there will be the opposite effect – there will be a flash of no content.
As the page loads, your accordion will be completely hidden (display:none;), then once your script finally executes and sets display back to block, the accordion will suddenly materialize and push down everything below it. This may or may not be acceptable – there won't be as much movement, but things will still have to jump after they've initially rendered.
At any rate, don't wait until onload to render your accordion. onload doesn't fire until everything—including all images— have fully loaded. There's no reason to wait for images to load; you want to render your accordion as soon as possible.