This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 7 years ago.
I've been asked to develop some simple views for an e-commerce website, but I can not use any framework, just raw HTML and CSS. My problem is that I do not want to repeat the navigation bar and footer code in each view. I am used to developing with Ruby on Rails, where I can solve this issue using partials.
Is there anything similar for this case or do I have to include the same code in each view (just because HTML is a static language)?
Thanks in advanced
This is where it can be useful to have a build script like gulp. Generally the process for things like static web pages is using a templating language like Jade or Handlebars. With Jade, you could just write something like this:
html
body
include ./includes/header.jade
Then compile it using gulp
var jade = require('gulp-jade');
gulp.task('templates', function() {
var YOUR_LOCALS = {};
gulp.src('./lib/*.jade')
.pipe(jade({
locals: YOUR_LOCALS
}))
.pipe(gulp.dest('./dist/'))
});
Other than a build step, however, there is no way to repeat static content using pure HTML and CSS.
You can create a separate footer and header html file then include them on your pages using php include like this <?php include 'header.html';?> and <?php include 'footer.html';?>
Just and them inline your main.html page wherever you want to add them.
or you can use Jquery like this:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("footer.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</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 have a div that has a dynamic background image. The background image url is logged in a database. I'd also like to replace this image with a dynamic GIF (which is logged in the same table) when the div is hovered over...but I'm struggling with figuring out a clean way to do this.
Here is a brief snippit from the html.erb file I'm working with...it seems that I cannot use the hover selector in in-line HTML, so I'm not sure if I need to resort to JavaScript? I'd essentially like to replace blah.jpg with blah.gifon:hover.
<% #workout[:image_url] = "blah.jpg" %>
<% #workout[:gif_url] = "blah.gif" %>
<div class="image-wrapper">
<div class="workout-image" style="background-image:url(<%= #workout[:image_url] %>)">
</div>
</div>
EDIT:
It works now using <script> tags.
<head>
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover { background-image:url("blah.gif");}</style>');
</script>
</head>
Unfortunately this can't be solved using raw CSS, as you can't target pseduo-selectors with inline CSS. However, it's possible to get around this using JavaScript. What you need to do is add the following to your page:
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover{background-image:url(<% #workout[:gif_url] %>);}</style>');
</script>
That should append CSS styling of .workout-image{background-image:url("blah.gif");} to the end of the head section.
Another solution would be to simply use an external css.erb file instead of a .css file, in order to process Ruby variables directly:
.workout-image:hover {
background-image:url(<% #workout[:gif_url] %>);
}
Be aware that using ERB in CSS will only work if the file is loaded ad-hoc, and will not work if you precompile your assets! You can get around this using the SCSS Rails Preprocessor, assuming you have access to, and want to use, SASS.
Hope this helps :)
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
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?
I am working on an asp.net MVC4 application. In my layout page, I have the following code
#RenderSection("page-specific", required: false)
and In my view which uses the above layout, I have
#section page-specific{
<script src="~/Scripts/page-specific.js" type="text/javascript"></script>
}
When I run my application, it gives me the following error
Sections cannot be empty. The "#section" keyword must be followed by a block of markup surrounded by "{}"
But all I want to do is include some page specific styles and javascript. I dont want to include any HTML markup in this particular section. How can I do this while avoiding the empty section error?
Try naming it pageSpecific. I haven't tried using a hyphen in a section name before, but I have a feeling mvc might not like that.