Css how to install scripts

Website is not loading the script, CSS, or Three.js

So basically I need a way to build this index.html file by: removing external Scripts Links removing external CSS Links add the compressed JavaScript into script tag add the compressed CSS into style tag Solution 1: So as Monacraft recommend I´ve used Python (first time) to modify/create the html file. You have two options: Use a bundler like Webpack to compile your files into a single one (and remove the import statements) (preferred) Remove and add in your HTML Question: I am searching for a way to automatically put all my scripts into the script tag in my HTML file.

Website is not loading the script, CSS, or Three.js

Let me start out by saying that I have very little experience with HTML, javascript and overall website creation and hosting, so sorry in advance if the information I am providing is lacking. I am trying to make a website by using a 3d object from three.js, however, nothing is loading in the ‘live server’ (when I upload the entire website to Cpanel), however, when I use visual studio code to run it through my local server (through the command npm run dev) the website is showing as intended. I have screenshotted the pages:

When I open the element inspect on the broken page, I get the following error through the console:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of «text/css». Strict MIME type checking is enforced for module scripts per HTML spec.

Uncaught SyntaxError: Cannot use import statement outside a module

i have the following code in my script.js:

import './style.css' import * as THREE from '../node_modules/three/build/three.module.js' import < OrbitControls >from '../node_modules/three/examples/jsm/controls/OrbitControls.js' import < GLTFLoader >from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js' import < HemisphereLight, Sphere, SRGB8_ALPHA8_ASTC_12x12_Format, sRGBEncoding, Texture, TextureEncoding >from '../node_modules/three/build/three.module.js' import gsap from '../node_modules/gsap/all.js' var gltfLoader = new GLTFLoader() let tl = gsap.timeline() var diamond = null 

I am also using this to call the script in the index.html, however, I am uncertain if this is the correct way of calling the script.

How would I be able to fix this? any help would be appreciated!

Understand that the browser import functionality is very different than that of Node, or development with a bundler like Webpack. In browser imports, scripts have to be of type module (thus causing the cannot use import statement out of module error)

1. Use a bundler like Webpack to compile your files into a single one (and remove the import statements)
2. (preferred) Remove import ‘./style.css’ and add in your HTML

How do I include a JavaScript file in another JavaScript file?, import_js() helper (for JavaScript importing within JavaScript code). */ var import_js_imported = []; $.extend(true, < import_js : function(script)

How To Include CSS And Run JavaScript In HTML Index

0:00 Where to enter / put / insert CSS code in HTML0:10 Inline CSS with style attribute1:04
Duration: 25:59

Modify HTML file to embed all external Scripts and CSS into <script> and <style> tags

I am searching for a way to automatically put all my scripts into the script tag in my HTML file.

Could this be done with ant or a bat or something else?

I also want the JavaScript to be minified. But thats not the point.

So what I already have is an bat file that minifies all JavaScript files and all CSS files into one main.js and main.css :

But I only want a single index.html file containing all CSS and JavaScript. So I can offer this single file as an offline Webapp.

So basically I need a way to build this index.html file by:

• removing external Scripts Links
• removing external CSS Links
• add the compressed JavaScript into script tag
• add the compressed CSS into style tag

So as Monacraft recommend I´ve used Python (first time) to modify/create the html file.

Now I only have to run this:

python build.py ../source.html target.html 

import sys, re, os from collections import deque from bs4 import BeautifulSoup, Tag from jsmin import jsmin from csscompressor import compress # html param html = sys.argv[1] # target param target = sys.argv[2] # path from html param path = re.sub(r"[^\/]*$", "", html) # open html file soup = BeautifulSoup(open(html)) # find last script as anchorpoint lastScript = soup.findAll("script", attrs = )[-1] # get all scripts containing src attribute (= external scripts) scripts = soup.findAll("script", attrs = ) # find last style link as anchorpoint lastStylesheet = soup.findAll("link", attrs = )[-1] # get all links to css stylesheets stylesheets = soup.findAll("link", attrs = ) # create list of script srcs print("\nRead Scripts:") scriptsSrc = deque() for script in scripts: scriptsSrc.append(path + script.attrs["src"]) print("\t" + path + script.attrs["src"]) # create list of stylesheets srcs print("\nRead Stylesheets:") stylesheetsSrc = deque() for stylesheet in stylesheets: stylesheetsSrc.append(path + stylesheet.attrs["href"]) print("\t" + path + stylesheet.attrs["href"]) # merge scripts to temp.js print("\nMerge Scripts:") print("\t", end="") with open("temp.js", "w") as outfileScript: for fname in scriptsSrc: # add space every script outfileScript.write("\n") print("~", end="") with open(fname) as infile: for line in infile: outfileScript.write(line) print("\n"); # merge stylsheets to temp.css print("Merge Stylesheets:") print("\t", end="") with open("temp.css", "w") as outfileCSS: for fname in stylesheetsSrc: # add space every script outfileCSS.write("\n") print("~", end="") with open(fname) as infile: for line in infile: outfileCSS.write(line) print("\n"); # minify javascript print("Minify temp.js\n\t~") with open("temp.js") as js: minified_js = jsmin(js.read()) # minify css print("\nMinify temp.css\n\t~") with open("temp.css") as css: minified_css = compress(css.read()) # replace scripts with merged and min embed script / css print("\nReplacing and deleting\n\t~") tag = soup.new_tag("script") tag["type"] = "text/javascript" tag.append(minified_js) lastScript.replace_with(tag) tag = soup.new_tag("style") tag["type"] = "text/css" tag.append(minified_css) lastStylesheet.replace_with(tag) #remove script and style tags for script in scripts: script.decompose() for stylesheet in stylesheets: stylesheet.decompose() #remove temp os.remove("temp.js") os.remove("temp.css") #save html as target file = open(target,"w") file.write(soup.prettify()) file.close() print("\nFIN\n") 

• Load source HTML
• Search for with «src»-attribute and with «rel»-attribute
• merge scripts and css in temp files
• Minify them
• Embed them into the html file (where the last tag of script/link was found)
• Remove (src) and (rel) tags
• Save as target HTML

You can use on linux, a simple shell script to do the work. It just merge all the files in one. https://github.com/dfsq/compressJS.sh

Import JavaScript files with CSS, The ‘@import’ rule allows users to import style rules from other style sheets. Any @import rules must follow all @charset rules and precede all

Using <script> in CSS

Is there any way to write script in css and call or execute it whenever required ?

I need a tag to be executed .

i need something like this..

so if i change the script changes will be reflected everywhere.

Is it possible to keep my tags inside some js file and i will host it. and then i will call some function() from my HTML so that the script will be executed everywhere i need it.

Can someone show me any example, tutorial how i can do it. I don’t have much information about the Js file and how the function should be called.

Does it have to be in CSS? jQuery is a great, simple way to do what you’re asking. You put all your style information in the CSS (what it’s intended for) and keep your javascript in the html or a .js file. Take a look at http://jquery.com. The code would look something like this

You use $(function() < /* code */ >); to run the code when your document is ready, and you use $(‘#execute’) to grab the element with the execute tag. You can then do a lot of cool javascript really easily with that jQuery element.

No, you cannot mix CSS and Javascript this way. Why would you want to?

If you simply want a common JavaScript include, do it like this:

You can’t do this in standard CSS.

There is a way in which you can run code from within the CSS context, using a technology called ‘Behaviours’, referencing an HTC file (which is basically Javascript) in the stylesheet.

However, this technology is non-standard, and only exists in IE. It is therefore only really used to write hacks to make IE support features that it doesn’t have which are in other browsers. An example of this in use is CSS3Pie.

If you’re working on a site which will never be used in any browser other than IE, and you’re happy to use a non-standard technology, then you may consider this to be the exact answer to your question. However I would strongly recommend you don’t do this.

More realistically, you should be using a Javascript library such as JQuery, as the functionality you describe is pretty much standard fare for JQuery.

With JQuery, you would write code like this (in a normal script block, not in the CSS!):

As you can see, it uses a CSS-style selector syntax to select the elements to work with.

(also NB: I’ve used execute as a classname here, not as an ID, because you imply that you want more than one of them — note that you should never use the same ID more than once in any HTML page; it is invalid. If you need the same thing several times, use a class.

JQuery has functionality to watch for changes to elements, respond to events such as clicks or mouse over, and much more. Other similar libraries such as Prototype, MooTools and Dojo would also be able to do a similar job.

[EDIT] Given the edit to your question, can you not just place the advertisment tag inside the on the page where you want it?

So with JQuery, you could write something like this to run your ad in each place you want it:

Javascript code (remember to also include the JQuery library, or this won’t work):

Hopefully that will get you started. I can’t really help you much more without knowing more about the advertisement script, though.

Also, the people who supplied the advert script should be able to tell you how to use it.

I believe a Javascript library like JQuery or Dojo is what you are looking for. It will allow you to add event handlers on tags with certain CSS attributes, which will behave exactly like what you are trying to do right now.

Here is an example with Dojo pulled from the Google CDN that will popup an alert window when you click on any block:

This example uses an onClick event but Dojo (JQuery) allows you to do much more things. For instance if you wanted to dynamically add an image or something onLoad inside .execute divs, you could do it with Dojo (JQuery) in a similar way to this.

Doing it with a library saves you a lot of effort, but if you still want to write and call your own functions from javascript files, this is a rough idea of how you would do it:

// myScript.js function foo() < // . >// page.htm     
  
 

How to load CSS and JS files dynamically ?, Load CSS and JS files dynamically: We create a script element for the JS file and link element for the CSS file as required using DOM, assign

Источник