I'm building a site with HTML, CSS, JS (And of course Jquery), VueJS and Bootstrap. I'm wondering if there is a way to make some sort of 'layout' file that can be reused over and over? I don't want to copy paste all the HTML for my top bar every time I make a new page or have to go through every page and update that code. I've tried using the tag with javascript to put different HTML files (Content) inside of a 'layout' file but I've had trouble with formatting. Should I continue down that route? Is there another easier way?
It would be nice if there was a way to do it similar to blazor where you can just write some HTML and then do an #Body.
I ended up making a SPA through the use of Jquery. The index.html file contains my navbar and then the content is put into a "content" div which is populated by separate page.html files. All you have to do is make a page.html file and then go to site.com/#page and the router handles everything else. This code also needs to be run on page load..
$(window).on("hashchange", function ()
{
var page = window.location.hash;
console.log(page.substring(1));
$.get(page.substring(1) + ".html", function (pageContent) {
$("#content").html(pageContent);
});
});
Related
I'm trying to create a website with a Home Page UI from which loads of different files (pages) could be navigated to. I've set up the Home page (index.html with its css, jQuery & JS loading correctly). But I can't seem to get a grasp on how to integrate my vision of buttons on a home page which will redirect user to other HTML pages with corresponding links to CSS, JS & jQuery. But my question is more specific:
How do you render HTML files in express with a function in a js file? in directory:
C:\CodingProjects\Principles\ public\javascripts\home.js
(Principles being the project folder)
I've namely set up a function which executes when I click a button, like so:
<button onclick="BoostOddsRedirect()">Boost your odds of success through de-centralized principle-guided decision-making.</button>
& JS ofc:
const BoostOddsRedirect = () => {
//Here I want the functionality of rendering another HTML file, namely BoostOdds.html, with the directory: C:\CodingProjects\Principles\public\markups\IntPrinHTML\BoostOdds.html
};
Which I've tested to be correctly linked in HTML file in which button with onclick attribute is created.
It'd be great if solution can be reproduced for other buttons and other files effieciently.
What I've done is just intuitive start of a functionality which I do not know how to complete, so if you have a better idea, I'd love to here it. Please let me know if you need more info, thanks.
I know a way to solve this but it's the wrong way and involves creating a new file and simply cheat.
Now the problem:
i have a folder with the index.html file; this file has a menu which has a <a href="reg_interlocutor.html">
in reg_interlocutor.html i use div's and in one of them i call the registration form:
this inserts the content of file form_registo_interlocutor.html into the div and sends the data inserted by the user to the file reg_interlocutor.php inside a folder called php;
in this file reg_interlocutor.php, when there is a problem with the data i use
echo "<script>alert('blablabla.'); window.location = '../index.html';</script>";
But if everything goes ok, i want to reload index.html.
The problem is that the browser reloads index.html inside the same div i was using since Step 2.
Actually, the tab url stays the same: localhost/proj/reg_interlocutor.html every step since step_2.
I already used:
header('window-target: main');
header('location:../index.html');
<script>top.window.location='../index.html';</script>
window.open("http://localhost/proj/index.html","_self");
Can anyone help me? I understand that my code is stuck on the div and that is why the index file is open inside that div.
You would probably be better off by using PHP (instead of HTML) to include an external html file instead of doing this directly in HTML. PHP can inject the external HTML file into the final output, which results in a much cleaner result than having the user's web browser fetch the other html file (creating a second request). This should also resolve the html loading into the <object> tag instead of the full page.
I am very new to HTML and the complete web world wrt development. I am trying to create a chrome extension and have decided upon showing the extension UI to the user by injecting a content script when the browser action is clicked. I have created an HTML page for the UI to be shown and now I need to load this HTML page as a small widget somewhere on the right top of the current page (to appear like a popup). From the different things looked up on the internet, I have decided to use shadow DOM but have no clue how to do all this. Can someone help me with a sample code to help me go ahead with this? I am not able to write a javascript that would be used as the content script to do the above mentioned job.
Edit 1: After some more reading, I found out out that we need to create the element hierarchy using javascript and cannot directly make use of any created HTML page. Is that correct? And if we have to make use of javascript, should make use of calls to document.createElement and add element? or document.write?
Just compiling reference from the responses I've got in this thread:
My Background.js:
function hello() {
chrome.tabs.executeScript(null, { file: "injectedScripts/jquery-2.1.3.min.js" }, function () {
chrome.tabs.executeScript(null, { file: "injectedScripts/a.js" });
});
}
// Supposed to Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(hello);
Injected Script a.js:
$.get(chrome.extension.getURL("popup.html"), function (data) {
//$(data).appendTo('body');
// Or if you're using jQuery 1.8+:
$($.parseHTML(data)).appendTo('body');
});
Also added popup.html and a.js paths to web_accessible_resources in manifest.json
For Chrome extension content scripts you'll only be able to inject JavaScript/CSS. You won't be able to have you're own HTML popup page like when using browserAction.
With JavaScript you'll need to dynamically create elements and insert them into the DOM. You're on the right track. You can use document.createElement or a library like jQuery to help with DOM manipulation as you get more familiar with web dev.
In my ASP.NET MVC4 application I got 1 javascript file for my functions across the site.
This works pretty good - however I want to run certain code in certain views.
Usually I would solve this by simply putting a short script tag in the view calling the desired function.
However I load my js files at the bottom of the body tag so this script tag would call a function before it being loaded which would obviously not work.
How can I call individual parts of my js file from different views while keeping my js files at the bottom of the body?
There are a few things going on here.
I would not be putting JavaScript directly in the page. Many reasons for this, and is not the focus of your question, but something I wanted to bring up.
You can have a separate JS file that gets loaded after your main JS file that actually does the call to the functions from "main".
My approach is to tag said views with an id:
<div id="specific-page-name"></div>
Then in my javascript simply do:
if ($('#specific-page-name').length) {
// Run code
}
This way you can still separate your views from js code.
Finally, if I have to use model data in js I can do something like:
<div data-model-data="#Model.Data"></div>
And simply read it as:
$('div').data('model-data');
I'm detailing the answer given by Matt in his comment : in your layout, you can specify that you want some additional HTML content (in your case, that will be your JS). You'll want to add it after your main JS block.
#RenderSection("AddScripts", required: false)
Then in your view, you can add a section and it won't be rendered in the view, but in the corresponding section in the layout (after your main JS block).
#section AddScripts {
<script type="text/javascript">
...
</script>
}
So I'm looking to take HTML code for a slideshow and insert it into an HTML box for an app.
However, obviously the .js and .css dependencies need to go with it, or else it won't function properly.
Is there a way/program that allows me in VS to take those classes and insert them within the HTML file so that they are all read at once, and the slideshow works? Ideas?
Thanks,
D.
Use external files to allow the browser to cache them. Put the reference to the external files in your master page.