Good day to all,
I'm using foundation 5 for my mini project. I want to use the reveal/modal feature of the framework. But it seems it does not work.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Job Posting</title>
<link rel="stylesheet" type="text/css" href="../css/normalize.css">
<link rel="stylesheet" type="text/css" href="../css/foundation.min.css">
<script type="text/javascript" src="../js/vendor/custom.modernizr.js"></script>
</head>
<body>
click
<div class="reveal-modal" id="myNormal">
Modal
<a class="close-reveal-modal">x</a>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation/foundation.js"></script>
<script src="../js/foundation/foundation.reveal.js"></script>
<script>
$(document).foundation();
</script>
</body>
I'm pretty sure that the browser loaded the js as it does not show any error in the debugger. And I know it's somewhere in the code that I left out but it's been a couple of hours since I ran into this. Any help would be much appreciated.
You might have forgot data-reveal :
<div class="reveal-modal" id="myNormal" data-reveal>
Related
My code is extreamly simple. I checked all the resources, rewrote the code in different files, updated my PC, checked css file and it worked just fine can't see the problem here.
react.html:
<html>
<head>
<link rel="stylesheet" href="react.css">
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"><script>
</head>
<body>
<div id="root"></div>
<script src="react.js" type="text/babel"></script>
</body>
</html>
react.js:
ReactDOM.render(<h1>Hello, World!</h1>, document.querySelector("#root"))
``` tried document.getElementById("root") as well
To use #babel/standalone you need to load it aswell, otherwise type="text/babel" wont work.
<!-- Load Babel -->
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
Hi guys can you help me I'm just starting to learn angularjs. How to deal with these errors
app.js:6 > Uncaught ReferenceError: angular is not defined
angular.min.js:6 > Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.20/$injector/modulerr?p0=ajs&p1=Error%3A%20…%2F%2FC%3A%2FUsers%2FABK3%2FDesktop%2Fajs%2Fjs%2Fangular.min.js%3A18%3A139)
Thanks in advance guys
var app = angular.module('ajs', ['ui.router'])
<!DOCTYPE html>
<html ng-app="ajs">
<head>
<meta charset="utf-8">
<title>AJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1 ui-view>Hi</h1>
</body>
<script src="app.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="jquery/jquery.min.js"></script>
</html>
Make sure your scripts are loaded after angular so they can actually do something. The load order is important, for instance make sure to load jQuery before anything, almost all the libraries requires them to be previously loaded.
<!-- Load vendors -->
<script src="jquery/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<!-- Load source code -->
<script src="app.js"></script>
You must put all of your script tags that calls angular BEFORE your app.js because your app.js needs angular.
Because here your file loads app.js then angular
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
I am trying to implement the basic time picker in JQuery
but its not working at all
Please Help
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="../js/jquery/themes/base/jquery.ui.timepicker.css"
rel="stylesheet" />
<script type="text/javascript" src="../js/jquery/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../js/jquery/ui/jquery.timepicker.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#id1').timepicker();
});
</script>
</head>
<body>
Input: <input id="id1" type="text" name="fullname"><br>
</body>
</html>
You might need to place the jquery script tag before the timepicker script tag
put this -->
$('input[name="TOH"]').ptTimeSelect();
instead of this-->
$('#id1').timepicker();
// dont write the id. just write the name of your html tag used.
and it will work like a miracle. i tried. and make sure your css and js files from your laptop has the proper file path.