VS Code going crazy not let me open my projecr - javascript

When i open my project through vs code live server it is perfectly fine and when i directly open that same project through html file it is showing with some css missing(Not all css is missing mostly pictures and padding) sorry for my bad english
I don't even know what to try help me out i'm a newbie

Can you be more specific pls? Mostly it looks like a relative path issue in your CSS and image code. If you can paste your code (part of) it will be helpful. Mainly when you use a live server your HTML is served via that server but when you open the .HTML file directly it is just getting loaded from your filesystem.
The most common mistake is using root in the path. See the following example.
<link rel="stylesheet" href="/style.css">
When this is loaded from the live server it is loaded from the sam folder where your .HTML is present because the "root" of the server is that folder but when you open it directly your harddisk's root becomes the root (e.g. in windows c:) and of course, your file is not there.

Related

How to insert trigonometrical shape in webpage?

I am working a project in which I have to insert thousands of trigonometrical shape in a webpage. Basically I'm working on a project of converting an ancient book in html. But the problem is- drawing a svg in Adobe illustrator or in any software is time consuming and managing thousands of svg shape in one html page seems very difficult for us. I have searched a lot in stack overflow to draw a shape quickly and I found this library which convert latext into svg which seemed to be a great solution for us. See a live demo here. We simply create a shape in Mathcha and copy the latext of the shape and insert it in our html page.
But the problem is when we import the tikzax Library in the head of our html page and insert the latext code of that shape (as instructed in the documentation) in the body like this:
<script type="text/tikz">
\begin{tikzpicture}
\draw (0,0) circle (1in);
\end{tikzpicture}
</script>
we can't get the ouptut. It only shows a blank html page . The latext code does not effect in any part of the html page. In short we are unable to render the latext in html. Can someone please explain how to render these latext into svg on a webpage. we are unable to find a way to get of it.
Can someone please explain how to render these tikz latext into svg format in a webpage ?
I've attached the screenshots of the html code and the output of it in the chrome browser.
Screenshot of Code:
Output of the Code in Google Chrome (Blank page) as I have told:
I tried to setup the example and ran into two issues. I'll explain how to solve those. However, before you do this, try opening your own example again. After I fixed the issues, I went back to look more closely at the problems, but.. it worked. There is a small chance that the maintainer of the files adjusted the CORS-Headers just while I tried this out - so maybe your problem solved itself. In case it doesn't work for you just like that, here is how I solved the initial problems:
The library doesn't allow requests from other domains, so you can't just include the JS file from tikzjax.com. To solve this, you have to download the source files and put them in the same folder. The js file itself is not enough, you have to download these files:
https://tikzjax.com/v1/tikzjax.js
https://tikzjax.com/ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm.
https://tikzjax.com/7620f557a41f2bf40820e76ba1fd4d89a484859d.gz
Then change your script tag to that local js file: <script src="./tikzjax.js">
The script uses fetch to get other files, and this is not working, when opening the page with the file:// protocol (you'll get this error message in the console: Fetch API cannot load file:///ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm. URL scheme must be "http" or "https" for CORS request.
So you have to setup a local webserver to show the page on e.g. http://localhost:8080. If you're comfortable with the command line, you can use the npm package http-server for such cases. If you haven't installed npm and/or node, you can install it from here (npm is installed with node). Then run the command npm install -g http-server. Then navigate to the folder where your html and js files are (in the terminal) and execute http-server. This will setup the server and the circle should render there.

window.open() not working when the file location is within a subfolder

I am quite new to programing so I apologize for any blatant ignorance, but, I can't find this answer.
I am using window.open() to open a .php file in a popup and passing a variable within the URL for use with $_GET.
Everything works fine when the .php page file I am opening is located in my main directory, for example:
window.open("../filetoopen.php?link="+variable, ...)
But, when I move filetoopen into a different subfolder and change the path, the webpage will not load.
example:
window.open("../subfolder/filetoopen.php/link="+variable, ...)
Just as a side note, I am working on a web app that has been developed by multiple people over several years and have only just begun familiarizing myself with its inner workings.
Any insight/suggestions would be much appreciated.
I figured out the issue:
There was another .php file located in the root directory which was needed to be referenced for the page to load.
example:
include 'utils.php';
And, when I moved the file within the subfolder, I did not change the path of the other file as well.
example:
include '../utils.php';
Thank you for all your responses.

How to include a .js file into an html file that is served by a compojure server?

One of my html file needs to include a script file, as it often happens, and no matter what I do, the browser doesn't seem to get it.
following this answer: How to include css files into compojure project?
I created a public folder in my resource folder. The structure looks like this:
resources
|-public
|-views
| |-myview.html
|-scripts
|-my.script.js
Inclusion of the file in myview.html looks like this:
<head>
<script src="/scripts/my.script.js"></script>
</head>
When I request myview.html from the server I get it, but all of the types in my.script.js are unknown. The html works as expected when I just load it in the browser (I have to adjust the path to the script file to be relative, of course, and no, that doesn't work either when I request it from my server).
So how do I get my script files (and later css files) to be found by the html in a typical compojure setup?
Turns out I was just missing
(route/resources "/")
in my routing. As that wasn't the problem with the topic I looked at, I didn't figure it out for a while.
Turns out sometimes you should read the code in the question just as carefully as the answer...

Chrome / Mozilla - Mask html file name (index.html) to HomePage

I have a html pages prototype. If I open any .html file in browser, it shows index.html, page1.html etc at the brows...
What my boss wants is, she dont want clients to feel these are not .html pages. Instead it has to rename either index.html to Index or HomePage...
Please refer below image for clear idea...
I do know this can be done by JSP/PHP etc... But, these are all just static html pages and some times we will be sending all these html pages to client directly. In that case, we cannot ask client to install server... there is a tricky part :(
I know this is weird, but Boss is always right :)
OR

Edit external JavaScript file after breakpoint is hit

In the VS2010 IDE when a breakpoint (or an error) is hit, it opens a read-only [dynamic] version of the external JavaScript file I referenced. My workflow would be vastly improved if I could immediately edit this file, and refresh the browser. That is as opposed to digging up the original JS file opening it, finding the correct line and editing there.
I only know that this is possible because I was able to do this on my old work computer configuration, but for the life of me I can't duplicate it at home.
Has anyone made this work? Perhaps an extension? or maybe it has to with the way the files are referenced, or my basehref tag, or url rewriting.
This happens when the base href specifies a domain other than localhost. My issue was that to enable a local environment for Facebook JS, I need my domain in the url. So I set up my host file to remap localhost.mydomain.com to localhost.
When the Visual Studio IDE encounters a file reference which is something other than localhost, it does not attempt to grab the local file since it assumes (correctly in most cases) that it is being served from another site. In these cases it loads a file as [dynamic] and readonly.
Here is the test case:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://localhost.mydomain.com/virtual-directory/" />
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</html>
Any breakpoint within test.js will result in opening a readonly dynamic file.
how are you referencing your files? whenever a script block is written inside the html or is dynamically inserted the debugger will open the instance of the page where the code stops. If you reference the script using tags vs should open the original script file (at least that's what it does on my machine). could you upload an example of your current structure?

Categories

Resources