I am trying to use a js file in my html file but got stuck.
The html file links to my js file but the js still wont work.
my code (in the snippet it seems to be working but in my file it wont):
document.body.innerHTML = "<h1>Today's date is </h1>"
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
<title>Reservify</title>
</head>
<body>
</body>
Your javascript is executed before the DOM document is loaded.
Run JavaScript after loading the DOM document.
Like this:
window.addEventListener('DOMContentLoaded', function(){
document.body.innerHTML = "<h1>Today's date is </h1>";
});
Or like this:
window.onload = function() {
document.body.innerHTML = "<h1>Today's date is </h1>";
}
Best Practice
The best practice is to implement your scripts at the end of the body tag.
The browser will load the visible page first and it is a better user experience.
Code Example
<head>
<title>Reservify</title>
</head>
<body>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
Also read
Why script tags should be placed at the end of body tag
You have to put the js call on the body, this because the DOM load first this element when is loading the page this make the load of the page faster
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
So you have to put the above line on the end of the body, and your code will be like this:
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- YOU HAVE TO DELETED THE JS CALLS HERE -->
<title>Reservify</title>
</head>
<body>
<!-- Here is your code -->
<!-- In the end of the body you put your js calls -->
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
I hope I've helped you (;
Related
I'm Vuejs beginners. How can I have multiple template in one application?
Example, for SignIn page, i would like to use Flatkit template, and for Admin dashboard, i would like to use other template (Dashboard). How do i combine those template in one app? In my index.html file, I already insert element for Flatkit, but when I insert Dashboard element, the CSS not working. What is the way to combine those link and script element
Here the project flow
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- LOGIN TEMPLATE -->
<!-- for ios 7 style, multi-resolution icon of 152x152 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
<link rel="apple-touch-icon" href="./Flatkit/assets/images/logo.png">
<meta name="apple-mobile-web-app-title" content="Flatkit">
<!-- for Chrome on Android, multi-resolution icon of 196x196 -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="./Flatkit/assets/images/logo.png">
<!-- style -->
<link rel="stylesheet" href="./Flatkit/assets/animate.css/animate.min.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/glyphicons/glyphicons.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/material-design-icons/material-design-icons.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<!-- build:css ../assets/styles/app.min.css -->
<link rel="stylesheet" href="./Flatkit/assets/styles/app.css" type="text/css" />
<!-- endbuild -->
<link rel="stylesheet" href="./Flatkit/assets/styles/font.css" type="text/css" />
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
<script src="./Flatkit/libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
<script src="./Flatkit/libs/jquery/tether/dist/js/tether.min.js"></script>
<script src="./Flatkit/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
<script src="./Flatkit/libs/jquery/underscore/underscore-min.js"></script>
<script src="./Flatkit/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
<script src="./Flatkit/libs/jquery/PACE/pace.min.js"></script>
<script src="./Flatkit/scripts/config.lazyload.js"></script>
<script src="./Flatkit/scripts/palette.js"></script>
<script src="./Flatkit/scripts/ui-load.js"></script>
<script src="./Flatkits/cripts/ui-jp.js"></script>
<script src="./Flatkit/scripts/ui-include.js"></script>
<script src="./Flatkit/scripts/ui-device.js"></script>
<script src="./Flatkit/scripts/ui-form.js"></script>
<script src="./Flatkit/scripts/ui-nav.js"></script>
<script src="./Flatkit/scripts/ui-screenfull.js"></script>
<script src="./Flatkit/scripts/ui-scroll-to.js"></script>
<script src="./Flatkit/scripts/ui-toggle-class.js"></script>
<script src="./Flatkitscripts/app.js"></script>
<!-- ajax -->
<script src="./Flatkit/libs/jquery/jquery-pjax/jquery.pjax.js"></script>
<script src="./Flatkit/scripts/ajax.js"></script>
<!-- endbuild -->
</body>
</html>
you can use 2 different main html page if your main scripts are entirely different. You can configure it in backend.
Another idea is adding only common scripts and styles in html file. And use your scoped styles in components. Add style of each component in "style" tag below "script" tag. make the style scoped using :
VUE COMPONENT:
<template>
</template>
<script>
<script>
<style scoped>
/* your style */
</style>
Scope of this style would only be applicable to current component.
I created a new Blazor WebAssebly project in VS19 and wanted to add a website template to my project, I downloaded it but was wondering where I should put the JavaScript files it came with.
I currently have them here in my index.html file in wwwroot folder:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ImmoPlatform.SPA</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="ImmoPlatform.SPA.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<!-- jQuery library -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- slick slider -->
<script type="text/javascript" src="js/slick.js"></script>
<!-- Price picker slider -->
<script type="text/javascript" src="js/nouislider.js"></script>
<!-- mixit slider -->
<script type="text/javascript" src="js/jquery.mixitup.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
but when I start my blazor project the javascript doesent seem to load. the CSS I put in the mainlayout.razor file in the Shared folder works file and that CSS came with the template.
Is this the correct place to put them? or should I put them somewhere else?
I ran into the same problem as you. The J/S files must point to the index.html; however, Blazor does not load them automatically – it must use the J/S interoperability, which is complex, and much more so if you do not know the functions that the template has.
At home, I wanted to use Admin LTE, luckily I found a project on GitHub, where they are making a version of this template for Blazor.
https://github.com/sjefvanleeuwen/blazor-adminlte
Hopefully the Blazor team will change this type of operation, since, in my view, it is a setback in the way of doing frontEnd.
I am trying to understand how to include multiple css, javascript and CDN in my wordpress plugin to create a dashboard.
I have a file called index.html that creates the dashboard of my plugin. If I run the file in the browser all the css, CDN and javascript are loaded.
Now I would like to use this index.html as the UI for a plugin in wordpress.
I have managed to include the html file in the main PHP file of my plugin(myplugin.php).
Now I would like to load all the css, CDN and javascript that would normally be located in the <head> of my index.html as in the following example. How can I do it?
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> Dashboard</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/light-bootstrap-dashboard.css?v=2.0.1" rel="stylesheet" />
<!-- Chart.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist Plugin -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
<script src="../assets/js/light-bootstrap-dashboard.js?v=2.0.1" type="text/javascript"></script>
<script src="../assets/js/demo.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Javascript method's body can be found in assets/js/demos.js
demo.initDashboardPageCharts();
demo.showNotification();
});
</script>
</head>
Add this to your main plugin file:
function add_my_plugin_script() {
$plugin_url = plugin_dir_url( __FILE__ );
// css
wp_enqueue_style( 'plugin-style-1', $plugin_url. '/css/plugin-style-1.css' );
// js
wp_enqueue_script( 'plugin-script-1', $plugin_url. '/js/plugin-style-1.js' );
}
add_action('admin_enqueue_scripts', 'add_my_plugin_script');
As the title of this post says, since I added the fancybox's sources to my file, other js functions doesn't work anymore. If i switch the position of js source files and put mine after fancybox's js source files, my js functions work but the fancybox no, in the other hand, the fancybox work but my js functions don't.
Here is the header of my file:
<head>
<link rel="shortcut icon" type="image/x-icon" href="imagens/its.png">
<link href="css/mystyle.css" rel="stylesheet" type="text/css"> <!-- MY CSS -->
<link href="http://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- FANCY BOX SOURCES -->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<!-- FANCY BOX SOURCES -->
<script src="js/myjs.js"></script> <!-- MY JS SOURCE FILE -->
I think that src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" is what's doing some conflict..
What can I do ?
You're importing a very old version of jQuery for your own code http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js, but then importing the latest version for Fancybox http://code.jquery.com/jquery-latest.min.js
Many things in the jQuery library have evolved since 1.3 was released almost 5 years ago, and several old APIs no longer work. The ideal thing to do would be to modernize your own code, and then just import jQuery once (a new or new-ish version).
Start by checking the error console to find out what's breaking.
I am struggling a bit with conflicting jquery in my head section of my site.
The problem happens when if I put the bootstrap jquery underneath then it stops working and the supersized DOES work.
But then when I swap them around it is visa versa, supersized DOESN'T work and bootstrap DOES.
This is my current head section
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/1140.css">
<link rel="stylesheet" href="/css/ie.css">
<!-- Bootstrap (for mobile navigation) -->
<link href="/css/bootstrap.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">
<link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">
<!-- supersized sytlesheets -->
<link rel="stylesheet" href="/css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/theme/supersized.shutter.css" type="text/css" media="screen" />
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
<!-- supersized scripts (can't go in the bottom as it stops working -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<!--bootstrap has to go below min jquery for it to work and above supersized-->
<script src="/js/bootstrap/jquery.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
When I look in the bootstrap/jquery.js file, I cannot get my head round it as it is just all block text.
Anybody got any solutions? I am only using the bootstrap for mobile version also, so is there a way I can just include the jquery at a certain width, for example 480 - (which is when I disable the supersized anyway).
I also have script at the bottom of the document also and maybe this could be affecting this also??
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Bootstrap Scripts -->
<script src="/js/bootstrap/bootstrap-transition.js"></script>
<script src="/js/bootstrap/bootstrap-dropdown.js"></script>
<script src="/js/bootstrap/bootstrap-collapse.js"></script>
<!-- Bootstrap scripts end -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
Basically, just due to trial and error, supersized won't work at the bottom for some reason and has to go in my head section.
And when bootstrap works then the supersized will not.
Please let me know a way to get past this and if there is something I have done wrong in my head section that is causing this.
Thanks