<!doctype html>
Multi Level Dropdown
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
...................
<script type="text/javascript" src="scripts.js"></script>
it is hard to understand your problem based on the context you gave. Consider to be more precise and share all of your code. However a couple of ideas:
Your <script> tag should be placed within the <body> ... </body> tag
Use <script type="text/javascript" src="./scripts.js"></script>
Check/ confirm whether your stylesheet "style.css" is working
Check for valid javascript code by testing with simple code such as alert('Test'); in your scripts.js file
Related
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
I'm currently writing an Electron app with Bootstrap css. For whatever reason, bootstrap-theme.min.css is loading before bootstrap.min.css, despite it being in the opposite order.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="src/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
<link type="text/css" rel="stylesheet" href="src/css/styles.css">
<link type="text/css" rel="stylesheet" href="src/css/tooltip.css">
<title>Hello World</title>
<link rel="icon" href="src/img/favicon.ico">
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="src/js/jquery-ui.min.js" type="text/javascript"></script>
<script>window.sigma = require('linkurious');</script>
<script src="node_modules/linkurious/dist/plugins.min.js" type="text/javascript"></script>
<script src="node_modules/dagre/dist/dagre.min.js" type="text/javascript"></script>
<script src="node_modules/bootstrap-3-typeahead/bootstrap3-typeahead.min.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
</div>
<script>
(function() {
const script = document.createElement('script');
if (process.env.ENV === 'development '){
script.src = 'http://localhost:9000/dist/bundle.js';
}else{
script.src = './dist/bundle.js';
}
document.write(script.outerHTML);
}());
</script>
</body>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</html>
As an example, here's the expected output from chrome dev tools when inspecting a button:
And here's what I get instead:
Additionally, here's the network tab in dev tools showing the theme file coming first:
Am I missing something obvious? And is there a workaround to this issue?
Another example, this is on the same app with the same html running outside of electron.
And heres inside electron:
The panel-header style isn't being properly applied by the bootstrap-theme file inside the electron app, while it is outside of Electron.
The reason lies in CSS specifity, that's a system ruling the importance/hierarchy of CSS selectors. Simply said, a single class selector will have a lower specifity that a more complex selector consisting of a chain of classes/tags/IDs, which is what happens in your case: .btn-success as a selector has a lower specifity than that the selector for that rule listed first in your screenshot, since that one consists of a quite specific chain of selectors which - in combination - "count more" than a single class.
Here's a helpful article on the subject: https://css-tricks.com/specifics-on-css-specificity/
I have several web development projects hosted online. I decided it was important to get the projects into source control, so I created copies of the files on my local machine. The way the projects are hosted online, the css and js are inserted by the website and they don't need to be added to the html code. To develop on my machine, I require the js and css files to be added directly to the html, but I don't want to add anything unnecessary to the code that will be placed back online. My solution is an abstracted html file called main. The css and js are added to the main.html file and the original html file is linked in. Like so...
<!-- main.html-->
<head>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<link rel="stylesheet"href="bootstrap.min.css">
This works great if the head section is added to the original html file. If the head section is removed, there is unwanted css that suddenly afflicts the original html file.
<!--original.html-->
<head>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body> ... </body>
works fine, but contains the code that I want to abstract.
<!--original.html-->
<body>...</body>
has messed up margins from unwanted CSS
in the main.html file, the original html is linked from a git hub page with
<div w3-include-html="github.com/original.html"></div>
Any Ideas?
I would like to include a webix table such as this one into a sphinx document.
I've found that directive:
.. raw::
:file: data.html
Unfortunately it does not work because the head should be included into <head>. Also the relative links should be updated according to the sphinx generated html.
<head>
<title>"Find" API</title>
<link rel="stylesheet" href="webix.css" type="text/css" charset="utf-8">
<script src="webix.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="samples.css">
<script src="testdata.js" type="text/javascript" charset="utf-8"></script>
</head>
How to include a webix widget into a static sphinx page?
One possible solution would be to fully include the html using jquery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
However this requires to add stuff into the <head> of the page
It sounds like what you want to do is create a custom HTML theme for use in Sphinx. This is less work than it sounds like, since you can probably just inherit from an existing theme, and only override a small part of it in your new theme. See the Sphinx docs re: templating and theming
Also, see this answer, which might be helpful:
Adding a javascript script tag some place so that it works for every file in sphinx documentation
This is a very simple thing that I can't seem to get to work. What is the correct way for referencing my resources folder in my script and link tags? Is there a trick to this since my URLs are mapped to Spring resources? Do I have to do anything special since my resources folder isn't in my WEB-INF folder? Do I need to move it into the WEB-INF folder? If I do move it there, how would it be referenced inside the WEB-INF folder. I have tried everything I can think of, including....
With folder in current position -
/WebContent/resources/scripts/jquery-1.6.1.min.js
/resources/scripts/jquery-1.6.1.min.js
../resources/scripts/jquery-1.6.1.min.js
../../resources/scripts/jquery-1.6.1.min.js
/../resources/scripts/jquery-1.6.1.min.js
/../../resources/scripts/jquery-1.6.1.min.js
With folder inside WEB-INF -
/resources/scripts/jquery-1.6.1.min.js
../resources/scripts/jquery-1.6.1.min.js
../../resources/scripts/jquery-1.6.1.min.js
/../resources/scripts/jquery-1.6.1.min.js
/../../resources/scripts/jquery-1.6.1.min.js
Are any of these right?
I'm getting this in my console when I use 'resources/scripts/jquery-1.6.1.min.js' -
May 23, 2011 11:30:19 AM org.springframework.web.servlet.DispatcherServlet noHandlerFound
WARNING: No mapping found for HTTP request with URI
[/ProjectName/resources/styles/global.css] in DispatcherServlet with name 'spring'
home.jsp -
<html>
<head>
<title>
title goes here
</title>
<script type="text/javascript" src="/WebContent/resources/scripts/global.js"></script>
<script type="text/javascript" src="/WebContent/resources/scripts/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/WebContent/resources/styles/global.css" media="screen" />
<script type="text/javascript">
$(document).ready(
function(){
alert('hello');
});
</script>
</head>
<body>
${message}
<input id="inputField"></input>
</body>
</html>
Replace for this:
<script type="text/javascript" src="resources/scripts/global.js"></script>
<script type="text/javascript" src="resources/scripts/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/styles/global.css" media="screen"