I am developing a Chrome Extension. I tried the below code for datepicker. But it is not working in extension file. Successfully working in a normal html file.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display inline</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date: <div id="datepicker"></div>
</body>
</html>
Im trying to do the same thing the first thing is that you cant have script in your html file you have to get it from a .js file.
as its not allowed to be written in .html for chrome extension
Related
I am currently trying to figure out why my dialog boxes are not working. I took code directly from jQuery UI and put it into my own new file too see if I could troubleshoot the problem, but the code from the website doesn't even work correctly when I copy and paste it into a new HTML file. The code in question (directly from jQuery UI):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
It is supposed to be simple and straightforward but it is driving me crazy at the moment. Any help fixing this would be fantastic.
I just tried the code on codepen and it works fine
But when I tried it on my computer, the css format did not appear in front of me, due to a simple reason
Focus on the following code
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
As you can see, there is only // without https:, so to solve the problem, we just add this https: to the format, so the format becomes as follows:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
The problem is solved, of course, if this is your problem, but if it is not, please explain the problem more with an example of a picture
I am going through the Augular course at edX. For one of the labs, I launched a file D:\Documents\Node.js\angularcourse\index.html. It works fine in Edge. However, in Chrome I get:
Failed to load file:///D:/Documents/Node.js/angularcourse/app/main.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Isn't main.js on a path that is below the location of the running file?
The source calling main.js in inside zone.js and my index.html is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Angular 4.x Application</title>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<app>
Loading...
</app>
</body>
</html>
If I launched Chrome with --disable-web-security then it works ok.
There's nothing fancy about the HTML, JS or CSS code. It all works fine if I embed the css inside the HTML file, but when linking to the external file it doesn't work.
Just uploaded it all to Digital Ocean, so I'm not sure if there are any special configurations I need to make to enable these external files to work.
Here's the HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>v1</h2>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I have already an exsisting html file which use another librairies and stuff, I want to use in my new ionic application.
So I would like to use it as an ion-view. so I would like to know if it would be possible to include an html file in the ion-view ? which look like :
<ion-view>
<io-content>
</ion-view>
</ion-content>
this is the existing HMTL file where I use different libraries and css file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./assets/js/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/ofc.css" rel="stylesheet" type="text/css" />
<script src="./assets/js/jquery-1.7.1.min.js"></script>
<script src="./assets/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="pouchdb-3.4.0.min.js"> </script>
<script type="text/javascript" src="blob-util.min.js"> </script>
<script type="text/javascript" src="moment.js"> </script>
<script src="properties.js"> </script>
</head>
<body>
<div data-role="page" id="p1">
</div>
<script src="core.js"></script>
</body>
</html>
Why would you do this? I believe this question comes from a problem you haven't described yet.
Normally all libraries used in an Ionic app are included in the index.html and not within each <ion-view> or <ion-content>. In these Ionic directives you only load the HTML needed for that view.
I suggest you start reading from the beginning:
Getting Started with Ionic
Ionic documentation
CodePen examples Ionic
I'm a very new programmer with no experience with tabletools or swf paths whatsoever. I'm trying to implement Table Tools to print/export/etc but so far only print is working for me. Most solutions have said that means the swf path is incorrect. But I have no idea what to put as my swf path. Could anybody please help? Sorry for such a basic question. :(
Here are my plugins and script for dataTables:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css" />
<script>
$(document).ready(function () {
$('#table_id').DataTable({
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
});
});
</script>
You can browse tabletools files available for cdn here: datatable tabletools plugin files
by visiting the link you will find version list, click one for example 2.2.2
so scroll down to the bottom and see magic:
swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls.swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf