I am writing some Javasript and I'm wondering why I have access to ES6 features automatically. Is it just enabled in Chrome? Here is some code I have... I'm surprised these backticks just work already.
$(function(){
var coin_form_wrapper = $(".coin-form-wrapper")
var add_address_button = $('.add_address_button')
var inputHTML = `
<div>
<input type="text" name="field_name[]" value=""/>
<img src="grumpy_cat.jpg"/>
</div>
`;
This is my erb file:
<html>
<head>
<title>Greeting Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="add_coins.js"></script>
<link rel="stylesheet" href="css/add_coins.css">
</head>
<body>
<div class="logo">
<img src="grumpy_cat.jpg">
</div>
<div class="coin-form-wrapper">
</div>
</body>
</html>
It's a pretty bare Sinatra app. What is going on? Why do I have access to backticks already? I am viewing the page in Chrome.
Will this fail on other browsers? How do I prevent that from happening?
Yes, some browsers have already updated their JavaScript engines to support most ES6 features.
You can learn about most of that support on https://caniuse.com/#search=ES6
You cannot however be sure which browser supports what part of ES6 at any given time, nor opt-out of it AFAIK.
The safest approach is to look at your audience's browser use and then find the common set of JS features that are common to all of them. Some browsers still in use today do not even fully support ES5.
Related
I am wondering if we could use pyscript on HTML pages inside a Django project.
I'd tried to use it but unfortunately, it doesn't work.
this is the code :
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12" >
<center><h3><py-script> print('Now you can!') </py-script></h3></center>
</div>
</div>
</body>
</html>
I was using Django==2.2.28 then I upgraded it to the last version Django==4.0.4 both didn't work and I get a black page!.
Any suggestions?
I get the solution.
I was using IDM that was catch any download in the browser.
So I deleted the file extension from IDM (.TAR) so my browser was able to download and use the pyodide_py.tar file.
(you should wait for a little python is slow :) )
Many thanks
I am trying to build a simple webpage that replaces the contents of the <div id="body"> with something new based on the user clicking on a "link"
The following code does exactly what I expect in Chrome and Firefox, but does nothing (except turn the link to the visited color) in IE 10 or 11:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("test02.html");
});
});
</script>
</head>
<body>
<div id="header">
Activities
<!-- this stays the same -->
</div>
<div id="body">
<p>this is the content that arrives without needing prompting</p>
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
This is the content of "test02.html":
<p>---</p>
<p>Hello world!</p>
<p>---</p>
I've checked the javascript security settings in IE and everything is set to "enable." I've also tried adding type="text/javascript" to the script tags.
Some amount of Googling has turned up the possible need to reinstall IE, which I have tried.
Anyone have an idea about how to get this working in IE?
The problem is that IE breaks itself in "compatibility" mode. The way in which it breaks itself in this case is failing to correctly look up your div id="body" element. I think that was observation error on my part, I think the real problem is addEventListener (because jQuery 2.x doesn't fall back to attachEvent anymore, since it doesn't support IE8 and earlier [or the "compatibility" modes that act like them]):
I can replicate the problem. The problem goes away if I tell IE not to break itself (e.g., not to use compatibility mode) by adding this to the top of the head element:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
IE's default for intranet sites is to display them in "compatibility" mode.
At one point I wasn't at all sure that when in "compatibility" mode it didn't get confused about that element with the id "body". IE has a history of getting confused by things like that. So you might also consider the-body or similar, but I tested and didn't seem to need it.
Side note: You probably also want to add a return false or e.preventDefault() to your click handler, so it doesn't follow the # link (which will scroll back to the top of the page and add # to the address bar).
add meta tag below to your page
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
Do you mean <body> tag or <div id="body"> and do you ever try preventing default behavior of the link by using this below code :
$(document).ready(function(){
$("#activities").click(function( e ){
e.preventDefault(); //<---- add here
$("#body").load("test02.html");
});
});
Real simple but I'm starting with javascript so it should be quickly soved
I have this html:
<body>
<div id="content">
<div id="logo">
<noscript>
<img src="fin_palais.png"/>
</noscript>
</div>
</div>
</body>
and i want to select the div with an id of "logo" with javascript to then overwrite the <noscript> with the apropriate file ( a simple browser test to see if you can support SVG )
this innerHTML look like this:
document.getElementById('logo').innerHTML='<content to be added>';
Firebug send me this error: TypeError: document.getElementById("logo") is null
but its right there!
Thanks
okay so here is the full HTML:
<html>
<head>
<META CHARSET="UTF-8">
<title>Bienvenu au Fin Palais</title>
<script type="text/javascript" src="svg_support.js"></script>
<script type="text/javascript">getSvgSupport("fin_palais")</script>
</head>
<body>
<div id="content">
<div id="logo">
<noscript>
<img src="fin_palais.png"/>
</noscript>
</div>
</div>
</body>
</html>
and here's the full svg_support.js I've made;
function getSvgSupport(file)
{
var ua = navigator.userAgent;
if( ua.indexOf("Android") >= 0 )
{
var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
if (androidversion <= 2.3)
{
document.getElementById('logo').innerHTML='<img src="',file,'.png"/>';
}
} else {
document.getElementById('logo').innerHTML='<!--[if lt IE 9]><img src="',file,'.png"/><![endif]--><!--[if gte IE 9]><!--><embed src="',file,'.svg" type="image/svg+xml" /><!--<![endif]-->';
}
}
yes that is the only reason, and since you seem new to javascript I guess this would make more sense to you
window.onload=function(){
document.getElementById('logo').innerHTML='<content to be added>';
}
You see when your script runs you page has not loaded. so you must use window.onload.
Or you can use this too, if your code is in file.js:
<script defer src="file.js"> </script>
this makes sure your code doesn't run unless document is parsed.
You may be trying to run the javascript before the DOM has finished loading. Try this:
$(document).ready(function(){document.getElementById('logo').innerHTML='<content to be added>';});
This assumes you've included jQuery.
As #Thristhart said, you can also use window.onload. This is a built-in javascript event which happens AFTER $(document).ready() does, so you should be safe with that as well.
If using JQuery:
$(document).ready(function(){
$('div#logo').html('<content to be added>');
});
Or
$(function(){
$('div#logo').html('<content to be added>');
});
You don't have to load jQuery if you don't want to it seems like something is off with the chaining of the javascript. When I broke it apart it worked fine.
Fiddle: http://jsfiddle.net/DamianHall/GxghG/
var ele = document.getElementById('logo');
ele.innerHTML = 'content to be added';
Looking at other posts it is an onload issue. The JS fiddle did the onload for me so I didn't notice.
I am trying to get history.js to work in Internet Explorer because I need history.pushState() to work. I have read over the instructions on GitHub (https://github.com/browserstate/History.js/) and have tried implementing it, but havent had any success.
Here's what I have
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- History.js -->
<script defer src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<script type="text/javascript">
function addHistory(){
// Prepare
var History = window.History; // Note: We are using a capital H instead of a lower h
// Change our States
History.pushState(null, null, "mylink.html");
}
</script>
</head>
<body>
My Link
Other Link
<button onclick="addHistory()" type="button">Add History</button>
</body>
Not sure what I'm doing wrong, but it's definitely not working in IE8 or IE9. It does work in Firefox, but that may be because Firefox actually supports history.pushstate to begin with. Any help is appreciated
In second <script> tag remove the word defer.
because, if you mention that word, which means postpone. ( If you want to save that from to reduce blocking of page rendering, don't remove it). That too IE is very strict, that's why you got that problem. Hope it helps
refer this
I'm looking for a solution to show the visitor of my website an info message, if he has no javascript enabled. I tried it with a message in a div, that is visible by default but immediately hidden by a jQuery function on start up. The problem is, that the message is visible for a short time (until it is hidden), what is very irritating.
Are there other ways to show a message, if JS is not enabled?
Thanks,
Konrad
Use the noscript tag:
<noscript>
<div class="awesome-fancy-styling">
This site requires JavaScript. I will only be visible if you have it disabled.
</div>
...
</noscript>
See https://developer.mozilla.org/en/HTML/Element/noscript.
You can use noscript, inside these tags is what will display if the user has javascript disabled.
If you want to hide the other content if the user doesn't have javascript enabled, you can do something like so (this uses jquery):
<style type="text/css">
.example {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.example').show();
});
</script>
<div class="example">
<p>...</p>
</div>
<noscript>
<p>You must have javascript enabled for the example div to show!</p>
</noscript>
This will only show the content if the user has javascript enabled.
There is never a need to use <noscript> tags with browsers more recent than IE4 and Netscape 4. All that is needed is to use JavaScript to hide anything in the page that you don’t want those with javaScript enabled to see. This is way more flexible than <noscript> since you can actually test for the browser supporting specific JavaScript commands using feature sensing and only hide the HTML when the features that your JavaScript requires to work are actually supported properly by the browser.
<p align=center id=js_disabled_message>
x.com requires JavaScript Enabled <br> www.enable-javascript.com
</p>
<script>
document.getElementById('js_disabled_message').style.display = 'none';
</script>
The above code will hide the p tag, only if js is enabled.
It's kinda of the opossite logic to detect if JavaScript is enabled and it works well on all browsers.
SRC
You can use '' and provide the error message you want.
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>