I´m using this W3 script:
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
It works perfectly, but my issue would be that I only need one particular portion of the "content.html", and not all of it. So my question is: How do I use w3-include-html for PARTIALLY html include?
Thanks!!
You can't include part of a partial; the whole point of a 'partial' is that it in itself represents part of the code, not code that you should extract a part from.
You can include more than one partial on a page, but the partials themselves must be exactly what you're trying to include at that point; you can't 'extract' content from a partial.
Simply shrink your content.html so that it only contains the output that you would like to include on your main page.
Having said that, considering W3.js can only import HTML, there's literally no reason to store the partial HTML in an external file. Not only does this create a second, unecessary file, but it also adds a reliance on JavaScript. If your visitor opts to disable their JavaScript, your partial won't work. Thus, I strongly recommend simply writing the content of content.html in the main page itself.
Hope this helps!
Related
In HTML, I want to define a block of text in the page, and then reuse the text multiple times on the same page. Can I do this using HTML only?
I specifically don't want the duplicated content to live in another file. I want it to be defined in the same page. Like declaring a constant at the top of a code file and reusing it throughout your code.
You can use JavaScript inside your HTML Document, so you don't need an extra page. Just define the variable inside a <script> tag (best way would be to do it in the header, but it also works in the body) and then access the value of the variable inside another <script> tag in the body like this:
<!DOCTYPE html>
<html>
<head>
<script>
var carName = "Volvo"; <!-- defining the variable -->
</script>
</head>
<body>
<p id="demo">Hi.</p>
<script>
document.getElementById("demo").innerHTML = carName; <!-- changing the Hi in the <p> tag to Volvo (value of the variable -->
</script>
</body>
</html>
Oh boy, that's the first question I was able to answer ^^
You just duplicate your text couple of times in your html code. You should usually use the p tag.
Is there a way to include the content of one HTTP request (containing either text/html or text/plain) in another HTML file? Of course this can be done via AJAX or on the server side, but I'm interested in a pure browser HTML way. Perhaps using a <link> tag, or some HTML5 method I'm not familiar with?
For example:
index.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>This is my text loaded from the original document</p>
<p>This is text I want to load from another file: <span id="other"><!-- link other resource here --></p></span>
</body>
</html>
otherResource.html:
<p>This is from another resource</p>
You can try to use an iframe.
<iframe src="page.html" width="300" height="300"></iframe>
If you are thinking about including text from another page, such as a footer or header, and just trying to find a way to include that, you might try a template engine.
Template Information: http://www.creativebloq.com/web-design/templating-engines-9134396
For example with EmbedJS from the link above:
new EJS({ url: "template.ejs" }).render({ name: "Jack" });
would allow you to include a template in a file called template.ejs.
Another option is to use a tool, such as Dreamweaver to accomplish it.
Finally you could do it with a script before you put the html on the server.
I'm new to web development and I'm working on my second website. I feel it should be a basic question and probably have already gotten addressed somewhere on Stack Overflow. However I can't find anything directly relevant, due to a lack of precise description. The problem is:
Because I'm doing copywriting along the way, frequently I find myself needing to update the copy inside the HTML code wrapped deep inside many div's. It's quite inconvenient; and because of texts, codes can sometimes get messy.
I wonder if there's a simple way to leave a "handle" in place of texts inside HTML code, "plugging in" text from elsewhere, like plugging in style from CSS? I suppose it should work in a concept similar to what a CMS have.
With jQuery, you can use .html to plug text and symbol to html page
<html>
<head>
<title>Your page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#statictext").html('<b>jQuery</b>');
$("#symbol").html('©');
});
</script>
</head>
<body>
<div id="statictext"></div>
<div id="symbol"></div>
</body>
I think what you're looking for is the id HTML attribute. You can use it like this from javascript (i'm using js since you don't specify a language):
var yourelement = document.getElementById('yourelementid');
yourelement.textContent = "Yer text";
with your html being:
<div id="yourelementid"></div>
with the element being a div or any other element that can have text content.
If you need to insert HTML, you can do it through .innerHTML or, preferrably, manipulate the DOM, by adding and removing elements. CSS also has an attr() property function, which allows you to set an arbitrary property on an HTML element (such as piece="textstuff", with the css being content: attr(piece)).
You can also construct elements and append them (again, if what you want is to insert HTML markup) by using .appendChild and .removeChild.
i want to insert html codes using chrome extension.
Adding complex HTML using a Chrome content script
this link works but i need to insert more specific area. For example this links add html codes to top of codes but i need to insert in specific codes like
<html>
<body>
...
...
<div>
//codes
</div>
// i want my code goes here
// <div>
// </div>
...
...
</body>
</html>
if im still can't explain myself, there is a chrome extension which name is "looper for youtube" this extension is doing what i need. Thanks for any helps, and sorry for my bad english
You have to write code in the content_script to specify where your HTML will be injected. For example, you could use the insertBefore function to insert HTML code before an existing element.
There are many functions surrounding the DOM tree which can help you specify the exact point in the document to insert new objects. Do not think about the HTML as a text file, think about it as a document tree (with parent nodes, child nodes, and ids). Here is a list of functions to get you started:
http://www.w3schools.com/jsref/dom_obj_all.asp
For example, something like:
document.getElementById('test').innerHTML = "HI!";
Will insert "HI!" inside the div tags in the following HTML:
<html>
<body>
<div id='test'>
</div>
</body>
</html>
If you require further assistance, please be more specific with your request. Where (exactly) do you need the HTML to be injected?
Hi I wanna do something really simple: a multi-level template system using only HTML and JS.
I would have like to do that with HTML only, I tried with object and embed tags but I can't make it work properly (embed doesn't display and object generates a new HTML document with and , plus it's pretty ugly).
So, next I tried handlebars.js but I didn't manage to use it to put HTML from a file into another one.
I just want to separate the distinct components of my page into different HTML-like documents (but not full HTML-valid documents, just one with the header only, one with the navigation menu only, and so on). Then on "level 2" I would have a "structure" HTML-body document which would arrange the previous elements as I want (one structure could have a menu on the left, content on the right and a footer, another would have menu on top, full-size content and a header, etc. like the different themes of a CMS only much simpler). Then on "level 3" finally, my "real" pages would use a "structure" template and then I guess I should use something like handlebars to pass content, titles etc. to level 2 and again to level 1.
So, is there any easy way to do this? Without having to rewrite a whole JS library :P And if you think handlebars.js would suit my needs (but I really don't need dynamic parts, just a title and a content for each page, maybe something to handle the current position on the website to manage menus and breadcrumb), could you please tell me how to use it to include HTML from one file to another?
Thank you very much :)
EDIT
Well after a little bit of struggling, I dit it really easily with only jQuery. I'm really not familiar with javascript (but I'm still a little ashamed) here is the way to go :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("body").load("structure.html", function() {
$("nav").load("nav.html");
$("section").load("section.html", function() {
$("section hgroup h1")[0].innerHTML = document.title;
});
$("footer").load("footer.html");
});
});
</script>
</body>
</html>
with structure.html containing just empty tags in the order you want them like this:
and section, nav and footer.html contining what should be inside the respective tags.
Wouldn't it be easier to simply use a couple iframes? Something like:
<html>
<body>
<iframe src="nav.html"/>
<iframe src="content.html"/>
</body>
</html>
Or am I misunderstanding your question?