React - How to modify the html inside root? - html

Maybe its a stupid question but:
I have an external Typescript-React app implemented into my code, but in order to add some CSS into one particular DIV (which doesnt have .class or #id) i need to reach the HTML code thats its inside root, how can i reach this HTML code?
Obviously i am able to see the code via Dev-tools but these changes doesn’t get saved after refreshing the page, and also I don’t think that modifying the web page via dev-tools could be considered as a good practice…
I tried to find the HTML file but its not inside my files or neither inside node_modules,
Thank you in advance,
Best Regards.

React HTML is all in JavaScript. In the node_modules, look for index.js and see if you can find the className or id attribute.
Alternatively, you can go to the github repo of the component and browse the code files.

Related

Add html to a site in a site (proxy)

I imported a web proxy from github known as rhodium on to replit, and, after some editing was satisfied with the results, but i cant seem to add HTML to a site that is proxied. Example: You use rhodium to navigate your way to www.discord.com, but you want HTML added to the page, "yourdomain.example/service/https://discord.com/". I looked at the files and online, but I wasn't able to find a way to edit the index.html of that specific page, but frankly I am extremely new to html. (and to a lot of things web-development).
https://github.com/LudicrousDevelopment/Rhodium
Any help available?
Based on what i know, you can't. Because of the security parameters. You can't attach or redirect a website which isn't on the same directory/server.
You can, however redirect to that site, inside or outside, freely.

How do websites keep the header on every page if the header is in html?

So, I'm trying to make a website, but the problem is I can't find the most effective way to keep the header on every single page. My header is HTML code, and it is the most important source of navigation on the website. The tabs navigate using links to other HTML files (all located locally on my computer) and so every single new page is another separate HTML file. Here are the many different methods I used that all fell short in one way or another:
The most basic way: Copying the header code to EVERY HTML page on the website. I am currently using this method, and it is probably the most ineffective and stupid method ever. The downside (which is pretty obvious) is that not only is it tedious but every time I make a change to the header (like maybe add different menus, add another tab, change the image, etc.) I have to copy the new header code to everything else. That is ridiculous!!
I tried using the w3schools method of implementing a separate HTML file (with only the HTML code) onto the page HTML files. So, I have this 1 HTML file for the header that every page uses so I make a change in that one file and it automatically applies to everything else. However, it didn't let me organize the numerous HTML files effectively because unlike referencing a stylesheet like some file named 'style.css', it doesn't let me put the HTML sheet in a folder that doesn't share the same parent folder as the referencing HTML page files. Hopefully that made sense, but basically, I couldn't get a folder that separated the HTML menu tab files ("pages") and the HTML content files ("posts") without the w3school code failing. Here's the link: https://www.w3schools.com/howto/howto_html_include.asp
I've seen other options on Stackoverflow, like getting around the "can't implement HTML files" by using js files with html code in a document.write(), but this to me is very hard to use because of all my progress so far. Also, I am very uncomfortable with the idea of using document.write because it is probably still very different from a true html file. Seriously, why is there no HTML implementing system that stylesheets and scripts have??? (script src="b.js" script and link rel="stylesheet" href="css/style.css" type="text/css")
Using jQuery. I understand this the least (being an amateur programmer) but I've heard it isn't consistent either. It doesn't seem to work on a local file, and that sounds like a nightmare. Though, if there are good suggestions, having a jquery file tag along seems not the best solution but still a plausible solution.
So, I'm in great trouble. How do other websites do this? Do they use different files??? Do they use PHP files?? Am I going to have to scrap all my hard header HTML work and styling because PHP is another language?? Do I have to use Angular.js??? This is so complicated!
Hopefully, this question made some sense. Please ask if you have questions. Thanks in advance.
UPDATE
After checking numerous other posts on Stackoverflow suggesting PHP, I got my HTML files and then renamed it from "index.html" to "index.php", and holy macro it actually still behaved like an HTML file even if it wasn't!! Now I need to find a way to put:
include("header.php");
into my page PHP files that are actually in HTML code to reference a separate PHP file that has my header. How do I do that? Does it belong in like script tags or something? How do I add PHP code in a PHP file written in HTML code? Thanks for the answers to my previous question, I'm so sorry I should've read the answers on Stackoverflow more thoroughly first.
So I know it's been awhile since I asked the question and probably nobody cares anymore, but I just want to post an update after finding a solution to my question about using php code and how it all works.
First, I learned that in order for this to work, all my files had to be in php format. So I pulled up my folder of my local HTML files and literally just renamed it from something like "index.html" to "index.php". Then, without changing the HTML code, I opened it up in my browser and it was like nothing happened, except it was better! Now it can not only read HTML and style and script codes, but also php codes as well! I added:
<?php
include("header.php");
?>
to the top of my index.php file, for example, and then converted the rest of the files into php format like I did for this. I copied over my header html and css code and saved it in a separate php file in the same folder, and - there was no header. I was confused. What?? Why is it not doing anything? The header.php itself is working, why is the include function not??
Then, I learned that this php include code can't be executed on my local drive, so it doesn't work on my local drive but works when it is public and on a real website hosting service. I then installed XAMPP, which is a commonly used PHP development environment that is an Apache distribution and is totally free. It runs a sort of local hosting service that will support this php code and cause it to execute the way I intended it to. I'm sorry I'm not good at explaining how this works, as I just find it and use it. Anyways, XAMPP did make the php code included above actually do its job and I finally got the header-system I always wanted. Happily ever after, right?
Nope. Now that fundamental stuff is gone, I have to face other problems like formatting (a real pain in the a** considering how I have to find css problems in tons and tons of overlapping code), creating an entire personal search system (having to figure out how to make a php file actually use my brand new MySQL database, which is also run by XAMPP), and lots of other things. But, that sounds like a great adventure that I am willing and definitely eager to go through. Now, finally I am done blabbing for the day...I wonder how many hours of other people's time I just wasted.
Oh yeah..I forgot to mention, happy Fourth of July! (and happy birthday to the beloved Captain America)
Using JavaScript and jQuery is a very easy way to accomplish this. First, just build a sample JavaScript file. Inside, make functions that are run on page load. For example,
function buildPage() {
var html = ' ';
//Build the html through the function
//In the end...
$('html-id').empty().append(html);
}
This way each time the html is built you can just empty(clear whatever is in the id 'html-id') and then add your specific html. For example,
<html>
<head>Put header here!</head>
<body>
<div>Put tabs with onclick events here</div>
<div id="html-id"></div>
</body>
</html>
Each time a different tab is clicked, the buildPage() function should be called in order to build the page accordingly. No multiple html headers needed!
Write something like that
<html>
<head>
<title>First page</title>
</head>
<body>
<?php include ("header.php"); ?>
<!-- rest of your code -->
?php include ("footer.php"); ?>
</body>
</html>
It's recommended to do with that way. Wordpress is working like that too. Include files to main php file.
**Notice all your files have to be .php
Maybe this can help:
Include another HTML file in a HTML file
You can make one header.html and include it in all other html files of your website.

Read HTML files directly from zip

I'm attempting to build a custom help viewer app in WPF. I can ready HTML files directly from a zip archive (no unpacking), does anyone know if it's possible to somehow resolve (redirect) links to the css, images, and other anchor links?
You need to add a base element to your pages to redirect relative links.
Another way would be to control the downloads, but I don't know if that is easy or even possible. You might search the All-In-One Code Framework for a sample of that.
You might need to subscribe the navigation events to change them.

How to link a relative html file in the scenario where user can call the files from the browser by adding a / at the end

(Sorry I am not able to frame question correctly.)
Following is the scenario.
I have 2 Html files.
File1.Html has
Click Me
File2.Html has
Click Me
Now when I open the file1.html in browser by typing following in browser.
http://Localhost/File1.html
The file1.html with a link is shown and when clicked it goes to
http://Localhost/File2.html
BUT
If I open the file1.html in browser by typing following in browser(note the / at the end).
http://Localhost/File1.html/
The file1.html with a link is shown and when clicked it goes to
http://Localhost/File1.html/File2.html
I know this is not a right way to do in browser but you cant stop user doing so.
The above example I have used just to simplify the issue. My real production issue issue is while using the MVC url are actually routed. So a user can legally use http://example.com/Employee Or http://example.com/Employee/ and due to this my jqGrid is not working.
Please guide me for a workaround.
UPDATE:
This works ok in IExplorer : wierd.
You want a link relative to the root. The following:
Click Me
(note the '/' at the start of the href) will link to http://Localhost/File1.html wherever the page containing the link is (so long as it's on the same host).
not relative to root i need it relative to parent
That's not possible. If you are using routed URIs there can be all sorts of /path/segments following the base name. The browser has no way of knowing what the real ‘parent’ is.
The usual solution is to use root-relative URIs as suggested by Joe. If you need to allow your application to be mounted at a configurable prefix under the root, that prefix will need to be copied out into the link.
Your question reminds me of a technique for search friendly URLs, implemented in PHP.
Things like:
http://localhost/index.php/2009/09/
It was described on Sitepoint.com The idea was that index.php could retrieve the trailing part of the URL from the web server and decide what to do with it. Including whether to deal with a final / or not.
It won't be relevant to html files (which could not, after all, retrieve the trailing part of a URL) but it might provide further ideas.

First widget works in Dashcode but not when deployed

My widget does not work once deployed even though it shows no errors in Dashcode. Apologies in advance for my inarticulartness with the terminology. I am a newbie.
To create the widget, I deleted the default .js file and pasted the JavaScript plus XHTML into the HTML page and created the accompanying CSS file.
The only code I can see that is generated is the plist.
I tried opening up all the permissions but nothing seems to change.
The OSX utilities console shows errors which are on lines beyond what there are numbers for in the code.
I don't think the JavaScript/XHTML/CSS is the problem as it works when in a web page and the widget does actually work within Dashcode.
Help appreciated,
Ruby
If you're using Dashcode, don't delete the default JS. file. This is important because it has the loaders necessary to render most of the parts in your widget. You can always add your custom javascript file. It also provides code that will allow it to work properly in Dashcode.