In Coda on my iPad Pro I have the following two files in a single directory that I named assets. When I try to preview the template.html file either in Coda or Safari (in side by side mode) I cannot get any interaction with javascript calls on events.
I have consulted the panic library regarding this and tried searching if similar issues have been encountered, but to no avail. The documentation clearly states that html/css/javascript rendering is supported by the preview functionality of Coda.
I have tried including the script directly in the head, the body, importing in a script tag and importing in a source tag and none have worked. CSS styling works as expected. I have tried many iterations that I won't list below, but this is the simplest case that I'm currently working with.
assets/template.html
<!DOCTYPE html>
<html>
<head>
<source type="text/javascript" src="assets/scripts.js"></source>
</head>
<body>
<h1 class="myheader" id="theheader">Hello?</h1>
<button onclick="doStuff()">click me</button>
</body>
</html>
assets/scripts.js
doStuff(){
document.getElementById('theheader').style.color = 'red';
}
Related
Just getting back into coding after a very long break (approx 10 years) so apologies for any incorrect terminology / if this is a basic question.
-Max OS X
-Text Edit
-Google Chrome
Working on a course on Lynda on programming fundamentals. When I type the HTML source code like for like, my version doesn't trigger the .js file, whereas if I c+p the source code from the tutorial file, it does.
Using Textedit as my editor. Very confusing as it is very simple code, and I have copied it identically, but it doesn't react the same way when I type it myself. The rest of the HMTL loads fine but the .js script just doesn't load.
<html>
<head>
<title>Simple Page</title>
</head>
<body>
<p>This is a very simple HTML page</p>
<script src="script.js"></script>
</body>
</html>
I've uploaded the files to mediafire. Container.html is from the tutorial. Container1.html is the HTML file I have typed out myself. Have been scratching my head over this for a while and can't figure out what the difference is between the 2 files except the size (4 bytes).
http://www.mediafire.com/file/p4sz93u9g6admwn/Textedit_JS_Problem.zip
Thanks!
H
It's because of double quotes in your Container2.html. So its seems the code changes its format from UTF to a different one. So what you need to is, open your container2.html file, and go to this line
<script src=“script.js”></script>
Change it to below by deleting double quotes and typing again:
<script src="script.js"></script>
Notice the change in double quote ;)
I have this simple code:
HTML
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.3.0.min.js"></script>
<script src="build/mediaelement-and-player.js"></script>
<link href="build/mediaelementplayer.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<video id="video-player" preload="preload" autoplay="autoplay">
<source type="video/youtube" src="https://www.youtube.com/watch?v=q7o7R5BgWDY" />
</video>
</body>
JS
$(function() {
$('video').mediaelementplayer();
});
I have this uploaded on my server together with the files from http://mediaelementjs.com/ in the build directory. All the mediaelement files are inside the build directory, while index and the js file is in root.
In Chrome this runs without any problems, same goes in explorer/Edge. But FireFox won't run it. The player with all the controlls loads but the video doesn't play and pressing the play button does nothing either. Adobe Flash is enabled in firefox aswell while trying this.
Made the same example in a jsfiddle http://jsfiddle.net/zE26G/27/
Here the video in the jsfiddle instead runs in FireFox, but not in Chrome/IE..
Firebug is giving these warnings in both the examples:
"Specified "type" attribute of "video/youtube" is not supported. Load
of media resource https://www.youtube.com/watch?v=q7o7R5BgWDY failed."
"All candidate resources failed to load. Media load paused."
While the console in Chrome doesn't give any errors.
This is very odd to me. Anyone who have a clue on whats going on here?
This was already reported here: https://github.com/johndyer/mediaelement/issues/1684
I got similar issue and was fixed with updating library to the latest version.
I tried Google PageSpeed Insights to check how much my website speed does well! But it shows an error in mobile version. Google suggested me to remove render blocking javascript to make my site better looks in mobile device. I've written bellow what exactly they said to me.
Your page has 1 blocking script resources and 3 blocking CSS
resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered
without waiting for the following resources to load. Try to defer or
asynchronously load blocking resources, or inline the critical
portions of those resources directly in the HTML. Remove
render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/…%3A300%2C400%7CRaleway%3A400%2C500%2C900
https://www.blogger.com/…/3728782508-widget_css_mobile_bundle.css
https://www.blogger.com/…&zx=88195f1c-da8c-4c99-bb3e-609abb88c4fa
If you've written your page to be dependent on using jquery on load, removing it would mean you'd have to re-write a lot of your code, to save, perhaps 10 milliseconds in load time?
Open your browser's debugger, look at the NETWORK tab and reload the page. You should be able to decide whether this suggested optimization is worth it or not (I'm suggesting it is not).
I was having a similar issue with Javascript. Make sure that in your code after your source your java that you put a type="text/js". Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/js"></script>
Otherwise you need to go into your server and make adjustments to your htcaccess file.
Heloo Nazmul, may be you should to edit your question to "How to Remove default JS and CSS that make Render Blocking Javascript in Blogger?" may be so long but I think your problem is it.
Follow my step with :
change <head> to <head>
If your Internet Service Provider give some bloking JS and CSS add <!-- </head> --> before </head>
Change </head> to <!--<head/>-->
add <!-- </body></html> --> before </body></html>
It is about DOM get work, I will give you example my blank blogger template if you still headache.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<style/>
<b:skin><![CDATA[]]></b:skin>
<!-- </head> -->
<!--<head/>-->
<body>
<b:section class='header' id='header' showaddelement='yes'/>
<h1 style="color:blue;font-family: monospace">klikada.com</h1>
<b:section class='main' id='main' showaddelement='yes'/>
<b:section class='footer' id='footer' showaddelement='yes'/>
<!-- </body></html> -->
<style>a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:underline;}</style>
</body>
</html>
I am developing an iOS/Android app by using HTML5, JS and CSS3 in a WebView. iOS devices and phones with Android 2.x work without any problems. But tablets equipped with Android 3.x or 4.x do not load the webpage.
Basically I am building a webpage like this
<html lang="en" style="-webkit-text-size-adjust:none; display:block;">
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="content-script-type" content="text/javascript">
<title>Project Name</title>
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
<script type="text/javascript" src="File4.js"></script>
...
<body style="margin: 0px; width: 100%; height: 100%; overflow:hidden">
</body>
</html>
(in total, 25 javascript file includes)
I have overwritten WebViewClient::onPageStarted, WebViewClient::onReceivedError, WebViewClient::onPageFinished. WebViewClient::onPageStarted gets called and the LOG shows the javascripts being loaded. But WebViewClient::onPageFinished never gets called and the webpage does not build. The window "load" callback does not happen and therefore none of the js files get executed.
So, I put an alert popup into my window "load" function and removed one file after the other to see if this helps. And indeed this helped. When I only include 4-6 files the window "load" function gets called. But this is also somehow random and does not depend on which files I remove. LOG does not show any error either. Everything seems to be fine
Is there any limit in number of include files introduced in Android 3.x and later? Android 2.x works without any problem. Also Chrome and Safari on my desktop PC display the site without any errors.
Any ideas?
I am not sure of the limit, but I would suggest using google closure compiler on your js files to get around this issue.
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.