I am trying to study bootstrap-4 and that's will work but take the inspect element and show error in console like
Uncaught TypeError: Cannot read property 'fn' of undefined at setTransitionEndSupport
Why this type error show when I am loading css file like
<link rel="stylesheet" href="sourcz/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap-grid.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap-grid.min.css" type="text/css">
and js file are
<script type="text/javascript" src="sourcz/js/bootstrap.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.bundle.min.js"></script>
any way to slove this issue ? or loading problem !!
You need to load jquery first before bootstrap's js. And don't use minified, uncompressed file together. Use one of those.
css files like:
<link rel="stylesheet" href="sourcz/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap-grid.min.css" type="text/css">
js files like:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.bundle.min.js"></script>
Related
I have a CSS LESS file, and it include css less code. I am trying to import it into my html file, in the head, like so:
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
<script src="./script.js"></script>
</head>
However, the css is not processing, and there is no css showing up all just non-css stuff on the html page.
am i importing it wrong?
I don't know what's in you less.js file, but in case less.js is a script to compile your less file, you have to put it before the link tag in your head.
<head>
<script src="less.js" type="text/javascript"></script>
<script src="./script.js"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
</head>
I have included Bootstrap into my Scala/Play Project in Intellij.
But it is not rendering.
I included bootstrap.min.css, bootstrap.min.js and jquery-3.4.1.min.js.
Folder structure:
in public folder: Folder css with bootstrap.min.css and main.css; Folder images with favicon.img; Folder js with bootstrap.min.js, jquery-3.4.1.min.js and main.js
HTML-Codes where I am trying to access bootstrap
in the HTML header
<link rel="stylesheet" media="screen" href=#routes.Assets.versioned("css/main.css")">
<link rel="shortcut icon" type="image/png" href=#routes.Assets.versioned("images/favicon.png")">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
Before the closing body-tag:
<script src=#routes.Assets.versioned("js/main.js")" type="text/javascript"></script>
<script src=#routes.Assets.versioned("js/jquery-3.4.1.min.js")" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src=#routes.Assets.versioned("js/bootstrap.min.js")" type="text/javascript"></script>
The result is a HTML page without any css (Default font: Times new Roman).
The HTML page is not rendered using bootstrap.
How I can include Bootstrap so that it is rendered correctly?
Is there a way to have Webpack scan Javascript files for require("file.js") and require("file.css") and insert <script type="text/javascript"> and <link rel="stylesheet"> (respectively) to any HTML file that includes the root Javascript file?
For example. Given:
Main.html
<html>
<head>
<script type="text/javascript" src="main.js"></script>
[...]
Main.js
require("./login.js");
require("./login.css");
I expect to get this output:
Main.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css"/>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="main.js"></script>
[...]
Bonus points: ability to require("login.scss") and end up with <link rel="stylesheet" type="text/css" href="login.css"/> (meaning, take into consideration the fact that SCSS files will get converted to CSS).
According to the author of Webpack, this feature does not exist yet.
I have filed this feature request: https://github.com/webpack/webpack/issues/754
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer
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
<link type ="text/css" href="../../Content/jquery.treeview.css" rel="Stylesheet" />
<link type ="text/css" href="../../Content/screen.css" rel="Stylesheet" />
<script src="/../../js/jquery.js" type="text/javascript"></script>
<script src="/../../js/jquery.cookie.js" type="text/javascript"></script>
<script src="/../../js/jquery.treeview.js" type="text/javascript"></script>
i am working with mvc. i have these css and js links in my view. it works perfectly when i work on localhost. but after publishing, it seems like these css or js files does not work. i checked authorization settings of these files and there is nothing wrong.
Try using
<link type="text/css" href="#Url.Content("~/content/jquery.treeview.css")" rel="Stylesheet"/>
Instead of giving path like this. i think you should provide the full path. After giving the full path, it will work everywhere.
<link type ="text/css" href="http://www.domain.com/Content/jquery.treeview.css" rel="Stylesheet" />
<link type ="text/css" href="http://www.domain.com/Content/screen.css" rel="Stylesheet" />
<script src="http://www.domain.com/js/jquery.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/jquery.cookie.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/jquery.treeview.js" type="text/javascript"></script>
Can you post the URL where you are having the problem? It sounds like an issue with your relative
paths.
Here is what you can do:
Open up the site in Chrome
View page source
Up in the header, right click on the link to your CSS file and select Open Link in New Window
My guess is that you will get a Not Found error. Look at the URL to the non-existent CSS file
and see if it matches up to where you think it is.
Best,
Cynthia
The recommended way to insert URLs of contents in your MVC web application is by using Url helper.
E.g.
Css:
<link type="text/css" href="#Url.Content("~/Content/jquery.treeview.css")" rel="Stylesheet" />
Scripts:
<script src="#Url.Content("~/js/jquery.js")" type="text/javascript"></script>