To apply a CSS to an existing html page I need to add a link that links to the css file, I am asked to include a link in the webpage that I am building that would link to the same html page but with a different css file, I am thinking I need to create a different css file, then create another .html page by copy the exact content from the first page and only change the link of the css file, but it doesn't seem so efficient and I am assuming there should be a standard method to do this.
thanks
you can use a JAVAscript to documet.write a link
If you can use a server-side language like PHP, I would do it something like this:
<?php
$allowed_stylesheets = array("red", "white", "blue", "green", "mobile");
$default_stylesheet = "red";
$stylesheet =
(in_array($_GET["stylesheet"]) ? $_GET["stylesheet"] : $default_stylesheet);
?>
<link rel="stylesheet" type="text/css" href="<?php echo $stylesheet; ?>">
you would then be able to call your page, and switch the style sheet like so:
www.example.com/page.php?stylesheet=mobile
note that to make a .html page run in PHP, there is probably some server setup necessary, by default only .php pages are parsed in PHP. Depending on your situation, that may be too much hassle than it's worth. However, I don't know any pure HTML way of switching style sheets reliably.
Also, this way, you will have to repeat the style sheet command every time you call the page.
Related
I currently have a pageMaster file which is an HTML file. I am trying to keep it clean. I am linking my javascript files to this pageMaster for example <script type="text/javascript" src="/resources/js/mainpage.js"></script>. I would like to link an HTML page this pageMaster to avoid having a clutter. Is this possible?
This is what i'm attempting <script="text/javascript" src="/resources/state-icons.html"></script> but it is not receiving back the icons I am expecting
Since html isn't a script, you can't load it as an script (using <script type="text/javascript"> does't make a lot of sense, does it?).
You have to use a preprocessing language, like php, which will build the output on the server. Using php, you could have something like:
<p>Some html
<?=file_get_contents(__DIR__.'/resources/state-icons.html')?>
...more html...</p>
Or:
<?php
include(__DIR__.'/header.php');
?>
...html...
If you can't or don't want to use a server-side language, you can do this with javascript. You can download the contents of the other page and insert them wherever you want (I will use jQuery just because it's easy to write, you don't actually need it):
HTML:
<span class="some-placeholder-for-state-icons"></span>
JS:
$(function() {
$.get('/resources/state-icons.html',function(html) {
$(".some-placeholder-for-state-icons").html(html);
});
});
Of course, this way will be slower and produce more requests per page view. Which one is better depends on what you want to achieve.
You can't do something like this with html. This is possible only for javascript file or stylesheets (css)
I want to generate a pdf (an invoice as letter) out of a twig template. The template uses a css and contains a header with a logo (png-image) and a footer, which should appear at the bottom of the document.
I tried it with the KnpSnappyBundle, but this doesn't work (css only works inline, images are not rendered..., etc.). Are there any other tools to generate a pdf?
With Java I used jasper-reports (really cool), isn't there anything similar for php?
I have used KnpSnappyBundle to generate pdf before, and it worked with external css files, thought there's is some diffrence bettween regular tempaltes:
When linking asset you have to provide absolute path:
<link type="text/css" rel="stylesheet" href="{{ asset('css/css.css', null, true) }}" />
I didn't needed images files, but I think it should work the same, also you need to use "renderView" method instead of "render".
$pdf = $this->renderView('**:**:tempalte.html.twig', array());
After that you just simple use:
$file = $this->container->get('knp_snappy.pdf')->getOutputFromHtml(pdf);
The answer is: The server startet via
php app/console server:run
is single-threaded, so there is no chance, to get a response, when requesting an image or css-file...
Is it a bad idea to link CSS files inside the body?
I've read that the browser is forced to start CSS rendering over again if it finds another CSS file outside of head, just because it might need to apply styles to elements it's already rendered. Also I don't think the HTML will validate properly (I need to confirm this).
Are there any other reasons?
The questions have been answered (is it bad, why...) but the correct way to achive that if you can't add your links (or scripts) in the header, is to dynamically insert them with javascript. It's also sometime a good idea for improving the speed of your code. For the links you can use this function:
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
You should use a JavaScript file loader like require.js for the scripts.
The only reason I've seen people use to justify doing this is when they're using certain templating engines, and they can't arbitrarily change the stylesheets linked in the head when loading new content or a particular view (in the case of MVC frameworks).
Either way, this should be avoided at all costs as it's sloppy, and improper. Instead, always develop your projects in such a way that you can get an arbitrary stylesheet into the head at any time. I generally do this by cycling through a stylesheet array in the head. That way, if I need to add a new stylesheet, I simply add its pathname to the array to be printed in the head.
<?php
$styles = array();
$styles[] = "css/main.css";
$styles[] = "css/text.css";
?>
<head>
<?php foreach ($styles as $style) { ?>
<link href="<?php print $style; ?>" rel="stylesheet" type="text/css" />
<?php } ?>
</head>
The HTML standard (at least HTML 4 that I looked at) mandates that the <link> tag must be in the <head>. There is no telling what browsers will do with a <link> in the <body>. If I were building a browser I'd probably ignore it.
And why on earth would you even want this?
Having a link element with the stylesheet link type in the body is allowed in
the current version of WHATWG’s HTML (2016-07-28), see link: allowed in the body/body-ok
the current draft of W3C’s HTML 5.2 (2016-07-04), see link: allowed in the body/body-ok
and not allowed in
W3C’s HTML5 (Recommendation from 2014), see link
the current Candidate Recommendation of W3C’s HTML 5.1 (2016-06-21), see link
You either link to external stylesheet or write it directly, both in head, it won't work if you'll try differently.
I use JQuery UI, but only in Member's Area zone, where lot of interactivity is happening.
In my static pages, no JQuery UI is used, therefore this link went to body, after <?PHP include "header.php" ?>:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/south-street/jquery-ui.css" />
I'll restrain from saying it is OK, but I can confirm that I've not seen anything rendered wrong by any of modern browsers so far.
I want to wrap a mediawiki site inside another site - using the header.inc and footer.inc files that the rest of the website's html files use.
I'm not familiar with php, is there a 'masterpage' file somewhere I can put them in?
Your best bet would be to create a custom skin, or edit one of the default skins, such as monobook. They control most of the basic presentation code. Here is one short tutorial on creating a custom skin. The files usually live in the /skins/ folder; if you skim through one, you can find where the HTML begins and ends.
You can include another file using the PHP include function, like so:
<html>
...
<body>
<?php
include 'header.inc';
?>
...
For future reference in the LocalSettings.php you can also prevent users from using any other skin.
$wgDefaultSkin = 'myskin';
$wgAllowUserSkin = false;
$wgSkipSkins = array( "chick", "cologneblue", "monobook", "modern", "myskin", "nostalgia", "simple", "standard" );
I'm sure this topic comes up all the time,
But I can't seem to fine a concise answer.
I've got a vertical menu bar that I want to reuse in webpages (>20).
The Menu Bar is coded in HTML and uses uses: UL, LI, A, <Div> tags, and CSS. We need this:
Reusable
Maintainable
Scalable
So we don't have to modify all pages every time we add a page.
We'd rather avoid a coding approach if possible. We could live with just one master file that we edit as needed. Since we're using CSS and <div>s, I don't think frames scale for us. What can we do?
Server side includes are the way to go if you don't want to use a programming language.
They take this form:
<!--#include virtual="menu.html" -->
and will be inserted in the page wherever you put that tag in your HTML. It requires server side parsing, so your web server must have server side includes enabled. You can try it out, and if it doesn't work, contact your server host to see if you can get them enabled. If it's Apache, there's a method of enabling them via .htaccess files as well.
In order to do this, you'll have to use some server side technology. For instance you could...
include them in php
put them in the master page in .net
put this in a partial or a layout page in rails
Some reading:
http://us.php.net/manual/en/function.include.php
http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
Another solution would be to create all this using Javascript, but please don't do it like that :)
html:
<script type="text/javascript" src="hack.js"></script>
<div id="mymenu">
</div>
hack.js:
function createMenu(){
$("#mymenu").html("all the html of your menu");
}
Without any server side script or Javascript you can use object or iframe tags.
http://www.w3schools.com/tags/tag_object.asp
http://www.w3schools.com/tags/tag_iframe.asp
The only thing to care is to indicate target="parent" in links.
Hope it helps
Using a w3 script..
index.html
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="header.html"></div>
<div w3-include-html="nav.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
header.html
<h1>Title</h1>
nav.html
<h2>Your nav</h2>
See also: http://www.w3schools.com/howto/howto_html_include.asp
And don't forget to test this code on your localhost.
I've done this two separate ways - one using server side (PHP) and one using Javascript includes (for demos that need to be able to run without any internet connection or server capabilities).
For PHP includes your pages will have to end with .php rather than .htm or .html, and these are very ideal to replace your header, footer, navigation, etc. Anything that is repeated on multiple pages.
Basically you would create your normal code then copy and paste the code you want to break out - in this example, your navigation - and save it in another file called (for example) inc_navigation.htm (this page can be called .htm).
Then in your actual pages you'd use the following code:
<?php include('inc_navigation.htm') ?>
That would insert your navigation at that point, if you had a change to make you'd make it to the .htm file and it would propagate to any page with that included.
For javascript includes you will have to include the following line at the top of every document where you want to include your navigation:
<script type="text/javascript" src="includes.js"></script>
Then you'll create a document called includes.js.
At the top of this document you'll declare your navigation variable:
var navigation = new Array(); // This is for the navigation.
Then a little ways down in that same document you need to actually outline your navigation code (the line numbers in the square brackets are crucial - keep them in order and start with 0 - you cannot have line breaks in this code so every line of code has to be a new line):
// ==================== Navigation ==================== //
navigation[0] = '<div id="tab_navigation">';
navigation[1] = '<ul id="dropline">';
navigation[2] = '<li><b>Home</b></li>';
navigation[3] = '<li><b>About Us</b></li>';
navigation[4] = '</ul>';
navigation[5] = '</div><!-- Close TAB NAVIGATION -->';
Then a little ways after that you'll actually insert the javascript that will put that code into your page (it doesn't actually put it there but rather makes it accessible in the page without actually altering the code of the .htm page - so if you view source you'll see the reference to the code not the code itself).
function show(i)
{
for (x in i)
{
document.write(i[x]+'\n')
}
}
Finally - in your .htm document, say for your index.htm page, you'll replace your navigation code (that you put in the above block called navigation) with this:
<script type="text/javascript">show(navigation);</script>
Where that name after SHOW and in the parenthesis is the name of your variable (declared earlier).
I have sites showing both methods in use if you'd like to see them just send me a message.
I was facing the same thing. Then, I created a new file for storing the html of the navigation bar.
I created a file navbar.html which had all my navigation bar code.
Then, in your main html file where you want navigation bar, just include this file by using jquery.
$(document).ready(function() {
$('#navigation').load('navbar.html');
});
Then at the place where you want navigation bar, just add this line:
<div id="navigation"></div>
As a modern answer to a six year old question: Web Components are specifically reusable HTML components, and Polymer is possibly the most popular implementation of it at the moment. Currently virtually no browser has native support for Web Components, so at the very least a Javascript polyfill is required.
If you would use PHP, all you have to do is use the include command, no coding beyond this one command.
Also, check out server side includes
So far one of the best solutions I have found is to model the menus after the Son of Suckerfish XHTML/CSS solution that is pretty well documented on the internet now combined with some logic on the server to render the unordered list. By using unordered lists you have a couple different options on how to output the results, but as long as the menu has some basic hierarchy you can generate it. Then for the actual page all you need to do is include a reference to the menu generating function.
I was searching for a way to write a reusable navigation menu that toggled(show/hide) when clicking a button. I want to share a solution that worked for me in case anyone else is looking to do the same. This solution uses jQuery, html, and css.
Add this line of code to your head tag in your main index.html file:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Add div for your nav in body tag:
<div id="mySidenav" class="sidenav"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#mySidenav").load("nav.html").toggle().width("400pt");
});
});
</script>
Create a html file that will be where your navigation menu resides. My file is called nav.html and inside the file the contents look like this:
have you found your one true musubi?`
item2
item3