Let's say I have a element in foo.html. How can I import and embed it in another HTML file?
Have you tried using jQuery .load ?
So in another.html you would have:
<div id="place-to-embed-element"></div>
<script>
$( "#place-to-embed-element" ).load( "foo.html #imported-id" );
</script>
Hope this helps!
Okay ... that sounds odd. What do you mean by "importing"? HTML is a mark-up language, not a "real" programming language like PHP etc., so this functionality is, of course, not given by default. You could start to write PHP or juse JavaScript ... or just explain your question more detailed ;)
(Or just copy your html segment into the other file ]:-> )
maybe use php...
rename your file from 'file.html' to 'file.php' and copy this into it:
<?php
include("foo.html");
?>
Related
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!
I'm very new to html and CSS, been learning on the go to update a website.
I understand how you can use CSS to store styles so that you can apply styles to multiple elements/pages with ease, and changing the attributes in a CSS style will automatically change all the html styles it governs across multiple pages.
I was wondering if you are able to do this somehow with actual html content instead of just style attributes.
Example: We have heaps of project pages, at the end of every project page we have a table with a bio of the manager who ran the project. This html code is manually written into every page. Since it is manually written though, if you ever want to change or update the info in bio table, you will have to go through and manually update it on every page. Is there a way to have the info in the bio table stored in something similar to a CSS stylesheet, so it just links to every page, and updating the info in the stylesheet will automatically update the info on every page it is linked in.
Code something like:
CSS
.personAbio {
<table><tr><td>Name</td>
<td>Sales Last Week</td></tr>
<tr><td>John</td>
<td>$100</td></tr>
</table>
}
Html
<table class="personAbio">
</table>
There are several ways to accomplish what you need.
Statically include content
The first way is by using (as already suggested) some server-side language.
Using PHP it's simple as, say we're inside your project_8.php (notice the PHP extension!) you simply place this PHP code where you want the about content to appear:
<?php include "about.html"; ?>
Dynamically include content
There's also a dynamic way to accomplish the same using JavaScript and AJAX.
For sake of simplicity hers's how it's done using the jQuery library:
<div id="hereGoesTheAbout"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$("#hereGoesTheAbout").load("about.html");
</script>
The above two <script> tags are best placed right before the closing </body> tag.
Including content dynamically is crawlable by Googlebot, just, a small penalty is given (over the static implementation) - since the additional requests to retrieve the content.
The difference is that using a server-side technique the content is found and embedded into a page while still on the server.
Using JavaScript and AJAX (like in the example above) the page arrives to your browser and than JavaScript dynamically sends to the server a request for the desired content to include.
Not a good way to insert content is by using <iframe>. It's terribly complicated (and involves lot of JS and messaging techniques) to make it responsive.
Also search engines will not index such content so it's not good for your page SEO.
Winner
Static include. Using the same technique you can split your website architecture into manageable includes.
Say you have some product.php template page, and you have all your products inside a folder products/ as files like 000.html to 999.html.
By just linking to example.com/product.php?pr=233 you can get your 233.html product:
<?php include "header.html"; ?>
<article>
<h2>Product:</h2>
<?php include "products/{$_GET['pr']}.html"; ?>
</article>
<aside>
<?php include "about.html"; ?>
</aside>
<?php include "footer.html"; ?>
with the above what you have:
one product.php file template (for all your products)
only one header.html file
only one footer.html file
only one author file
one products/ folder with all your nnn.html products contents.
You are looking for a back end coding language like PHP.
No you can't.
But you can use JavaScript instead to store your data and then bind them into the table.
For exemple:
html:
<table class="personaBio">
<thead>
<tr>Name<\tr>
<tr>Sale of the last week</tr>
</thead>
<tbody></tbody>
</table>
JavaScript/JQuery
var persons = [{name:'John', saleLastWeek:'100'}];
persons.forEach(function(person) {
$('tbody').append(`<tr><td>${person.name}</td><td>${person.saleLastWeek}</td></tr>`);
}
This is an exemple, I am on my phone, I didn't try this code.
You need to learn JavaScript or Jquery.
As already mentioned, you can do it server-side, using a number of approaches:
Server-side includes
Any server-side language/frameworks: PHP, Ruby, Python, Java, etc.
You can, however, also do it on the client side:
With <iframe>: <iframe src="managers/john.html">
With Javascript:
Put all manager bios into, say, manager-bios.js:
var managerBios = {
"john" : { "fullName": "John Doe", "projects": ["a", "b", "c"] ...}
"jane" : ....
}
Reference it in the html: <script src="manager-bios.js"
Reference corresponding manager on the page: <div id="responsibleManager" data-manager="john">
On page load, populate manager's data (I'm using jQuery here):
$(document).load(function() {
var managerId = $("#responsibleManager").data("manager");
$("#responsibleManager").html("<div>" + managerBios[managerId].fullName + "</div> Projects: " + managerBios[managerId].projects.join(","));
}
Load data from external source with Javascript (again, using jQuery here, assuming same html as above):
$("#responsibleManager").load("managers/" + $("#responsibleManager").data("manager") + ".html");
I wonder how to make shortcut URL in html and css (if it is possible)
I mean this:
HTML URL1
CSS #URL1 { URL('nextpage.html');}
Is this somehow possible?
Thank you for your answers.
So it can't work like this?
var url1 = "http://www.google.com";
Google
Is there any option how to do it?
To give you the short answer, no, you can't achieve this only by using CSS and HTML.
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. (...read more)
Also, here is an introduction to what CSS is and how to use it.
I recommend you also take a look at HTML Links.
To not be all negative, I will give you some solutions, you could use .attr and do it like this :
SCRIPT
$('#firstlink').attr("href", "http://google.com")
HTML
This will take you to google
...or you could do it like this:
SCRIPT
var url = document.getElementById("firstlink")
url.setAttribute("href", "http://google.com")
HTML
This will take you to google
It can't be possible. As css is for only styling the html.
Yes you can target particular url to style it.
Check out this page for further detail.
Or you can do it with php.
<?php
$url = 'example.com' ;
?>
<a href="<?php echo $url; ?>" >
click here
</a>
I can't seem to figure out how to include a file using Node.js. All of the other questions seem to discuss including other JS files, but I'm looking for the equivalent of a PHP include (files that can contain HTML content).
Usually in PHP, my view files like this:
...stuff
<?php include 'header.php'; ?>
<?php include 'nav.php'; ?>
... more stuff
<?php include 'footer.php'; ?>
And for example in nav.php I have:
<nav role=navigation>
<ul>
<!-- links -->
</ul>
</nav>
Is there similar functionality in Node or do I have to change my way of developing web applications? I am using the Express framework if that helps.
A short, working example would be highly appreciated.
No, that isn't the way nodeJS is working. If you like to compare, compare nodejs to ruby or ASP.NET. There is jade, as dystroy said, but if you are familiar with HTML syntax prefer ectjs for example :
stuff...
<div id="content">stuff</div>
<% include 'footer.ect' %>
Of course, if there is code to include use require
There's nothing similar directly into nodejs.
But many people using nodejs also use a framework like express and template engines.
For example Jade lets you do includes :
index.jade file :
doctype html
html
include includes/head
body
h1 My Site
p Welcome to my super lame site.
include includes/foot
includes/head.jade file :
head
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
includes/foot.jade file :
#footer
p Copyright (c) foobar
It should be noted that in the age of ajax, single page applications and javascript, template includes are much rarely needed that in the old times of PHP. You might want to first play a little with templates (for example using Jade) and only after decide if you need includes.
You can user vash engine. Take for example this layout page:
<body>
<!-- Body content -->
<div>#html.block("body")</div>
<!-- Render Page Specific Scripts Here -->
#html.block("scripts")
</body>
Now in your other views, you can do smth like this:
#html.extend("layout", function(model){
<!-- main content of the page -->
#html.block("body",function(model){
<h1>This will be the login page</h1>
})
<!-- page specific scripts -->
#html.block("scripts",function(model){
<scrip></script>
})
})
Hope this helps!
let's assume we have to include 2 files inside index.html
the simplest way
html index.html
<%include filename.extension%>
<%include anotherfile.html%>
node.js
var temp = require('templatesjs');
// ... ... ...
fs.readFile("./index.html"){
if(err) throw err;
var output = temp.set(data);
res.write(output);
res.end();
});
those two file will get included inside index.html automatically when you use set()
i have used module templatesjs
$ npm install templatesjs
a good documentation here
github : templatesjs
I know a trick to make link to article without template (tmpl=component), but I see that it still links some styles:
index.php?option=com_content&view=article&id=171:uvjeti-plaćanja&catid=19:poliklinika&Itemid=101&tmpl=component
Is it possible to create link to just bare bones data you'd see in content editor for example?
It would be prefferable if nothing else but pure article content is returned. No html, body, head ... tags.
I have ended up creating file raw.php which contains following code:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?><jdoc:include type="component" />
I have placed this into my template folder and I can just call it with following url:
/?option=com_content&view=article&id=171&catid=19&Itemid=101&tmpl=raw
Analog to that you one can make new.php, place it to folder of current template in use and call it with &tmpl=new argument.