I have simple app with index.html, style.css and app.js and
i need to built a myBundle.js for easy implemantation in other site like:
<script type="text/javascript" src="myBundle.js"></script>
is that posible ?
That's not a good idea, but maybe you can create elements in js and then use append() method to put your HTML / CSS
You can bundle it all inside the HTML file if you'd like. That would be the easiest way to make it portable
So for example:
yourfile.html
<html>
<head>
<style type="text/css">
/* your CSS */
</style>
<script type="text/js">
// your JS code
</script>
</head>
<body></body>
</html>
Then you can move the file anywhere and it will work independently.
As mentioned below this is not a clean way to code but it will work and is useful in some instances
Related
Where should I add CDN Link in my Project? I have made a Project in Codepen, and over there It’s added in the Javascript column. But in my local machine do I have to add it in .html or .js? I have tried adding it in my <head> of .html but it’s not working.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have tried without "https:" and "//" as well. But still no luck.
Please let me know if I need to do anything else besides this.
If you are running the code locally, your HTML file should look like this:
<!DOCYTPE html>
<html>
<head>
<script src="url here"></script>
</head>
<body>
</body>
</html>
If that still does not work, you should put your code through the W3 Validator. You can view the errors with your HTML there.
In Codepen you need to go to settings.
Then choose JS and there you can add external libraries.
Thank you for the answers, Actually, I got the solution, I mistakenly added js/main.js instead of <script src="main.js"></script> .
And next thing I checked, I had added jQuery CDN Link in my .js file as well. I removed it from there and It worked.
I am still a newbie, I have an issue.
I have a website which uses some custom edited mybootstrap.css.
I want to add a page by <?php include 'page.html';?>
For this page.html, I want to use a normal bootstrap.css
Now the issue is when i use external css bootstrap.css to my page.html, it messes the whole page. I want this bootstrap.css only for my page.html and not for whole website.
I tried to search a lot on Google and StackOverflow, there were 2 possible ways to do it:
First, by creating a frameset and the other was
`<div>
<style scoped>
#import "scoped.css";
</style>
enter code here
</div>`
Both are not working effectively. Is there any other way? Like using some jquery/javascript for it?
Thanks in advance.
you need to add this in the html page
<link rel="stylesheet" type="text/css" href="scoped.css">
or like this
<!doctype html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="scoped.css">
</head>
<body>
</body>
</html>
If I understand the question well, the header/footer of the page is being styled by the CSS you have mentioned. In this case, you could modify your page to contain the header/footer and and iframe. The iframe would point to a page where an empty header/footer is being used and only the content is being shown. The content will be page.html. This way you will be able to show page.html with the new styles without being worried that the design of the other content of the page will be ruined.
You can directly link your CSS like:
<link rel="stylesheet" type="text/css" href="scoped.css">
You can try this **jQuery Scoped CSS plugin**
Include this plugin file (minified, ideally) and call $.scoped() on load. If you add style blocks to the page later, you need to rerun the plugin.
Any style blocks with the scoped attribute are processed and limited to only affect their parent's children:
<section>
<style scoped>
p {color:red;}
</style>
<p>This will be red.</p>
</section>
checked that you haven't use some bootstrap classes on your website e.g container, container-fluid, row e.t.c
add the bootstrap.css only to page.html and not on your main index file..note that if you include page.html in your index file probably through php include, then your website will inherit some css classes from bootstrap
Just like #hamza suggested, you can copy the css styles you neex from boostrap and add it to mycss.css or better still google the css styles you need for the page.html and add it to your css
I'm trying to make a paper.js example but my problem is that I don't know how to make it work without <script type="text/paperscript" canvas="canvas-1">. The script works but I would like to put the js separate to html.
jsFiddle
Thank you
You can use external js file as
<script type="text/paperscript" src="js/script.js" canvas="canvas-1">.
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.
I was able to create an Android hello world app that loads html file from assets folder using WebView.loadDataWithBaseURL method:
webView.loadDataWithBaseURL("file:///android_asset/appcode/", html, "text/html", "UTF-8", null);
My html looks somewhat like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="/js/lib/jquery-1.11.0.js"></script> <!-- This script is not being loaded -->
<script src="helloWorld.js"></script> <!-- This script is being loaded -->
</head>
<body>
<div id="placeholder"></div>
</body>
</html>
The problem is the following: jquery-1.11.0.js is not being loaded while helloWorld.js file loads successfully. I verified that the file exists under relative path.
If I move jquery-1.11.0.js to the html file location (to the same place where helloWorld.js is located), it fixes the problem. But I want to use relative paths for loading scripts. Thanks in advance.
UPDATE:
Moving all js files under /assets/appcode/ is not an option,
because I am planning to reuse html files that are relying on these
relative paths
Using CDN links will not work, because I'm
planning to load my own scripts that are not available on the web
If i use "file:///android_asset/appcode/js/lib/jquery-1.11.0.js" instead of "/js/lib/jquery-1.11.0.js" it also works. But this is absolute path, when I want to use relative.
I'd suggest you to use CDN instead:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="helloWorld.js"></script>
Absolute paths sometimes don't work in the WebView such as JavaScript file.
I suggest use relative path with dot(.) followed with path
<script src="./js/lib/jquery-1.11.0.js"></script>
^