I am building a website using bootstrap and i have to use the same modal on every page. Right now i have to copy the whole code into every html and then it becomes available to every page but this is isn't the ideal way of doing things so i would like if anyone suggests me a way that i don't have to copy the same html code to every file. I want a way that the same html code becomes available to all pages while it is kept only at one place.
I cannot post my code here but i'll try to tell you my problem exactly.
<!-- navbar for website -->
1 html code
<!-- sign in and login modal(buttons are on navbar) -->
2 html code
<!-- main body -->
3 html code
4 html code
5 html code
<!-- footer for website -->
6 html code
7 html code
For example according to above block navbar, modal and footer(1,2,6,7 lines) remain same for every page. How can I put all that elsewhere and just link it somehow like css files are linked(something like that). I can give you more information just ask in comments(other than my exact code).
There are two ways to accomplish your goal:
Using Javascript
<script>
function includeModal() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
}
</script>
Then call it
<script>
includeModal();
</script>
Using HTML
<div w3-include-html="modal.html"></div>
At first you need to divide your html, like make another file for only Footer i.e. Footer.html, and header.html etc.
Then use JQuery to include them.
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("header.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
The jQuery .load() documentation is here
Related
DISCLAIMER: I'm a complete newbie to programming. I've my experiences with editing code through trial and error, but I do not have any real knowledge.
I'm looking to build a website from scratch. How do I make it so that I don't have to paste the same header/footer code to every page? I'd assume that there is a designated file for the header/footer; on the pages which I want to include the header/footer, I would have to include a line of code to call it?
Also found this similar question/topic/thread: Use same header and footer on all webpages
if you are looking to do it using just Html there is no possible way, but you can use JavaScript inside your html to create a custom attribute which will include your html files. You can read more about it here - template tag examples
This is not the best solution for this, I won't personally recommend you to do this as you are a beginner.
This might be overwhelming at first but you don't need to understand or learn it right now. For a quick example -
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test File</title>
</head>
<body>
<div include-your-html = "header.html">
<!--Cosidering I have header.html file in the same directory-->
<p>This is my body</p>
<div include-your-html = "footer.html">
<!--Cosidering I have footer.html file in the same directory-->
<!--You can use this script to set the attribute-->
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
file = elmnt.getAttribute("include-your-html");
if (file) {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
elmnt.removeAttribute("include-your-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
includeHTML()
</script>
</body>
</html>
For some of the people this may be blocked due to CORS policy, you can set up a CORS proxy to get around this. More detailed information at sideshowbarker's answer here
For example, if I'm building a page header with a menu that will appear on every single page of a website, if and when I want to make changes to the menu on every page, is there a way to implement this change on every page without having to edit every single HTML page?
Let's say my menu has 5 tabs and at a later date I want to add a 6th tab, or remove a tab, is there an efficient way of doing this without having to manually edit the HTML on every single page?
HTML itself doesn't provide such a mechanism, though SGML, the language in which the HTML element vocabulary is/was originally specified, does in the form of entities/entity references. Using SGML entities, you'd typically create an SGML file containing just your menu, and then pull-in that file from multiple individual page content files:
<!-- content of menu.sgml file -->
<nav>
<ul>
<li>About</li>
<li>Blog</li>
<!-- ... further menu items -->
</ul>
</nav>
<!-- content of page.sgml pulling-in menu.sgml -->
<!DOCTYPE html [
<!-- this declares the "menu" entity -->
<!ENTITY menu SYSTEM "menu.sgml">
]>
<html>
<head>
<title>Menu demo</title>
</head>
<body>
<!-- this pulls-in menu.sgml as if it were part
of page.sgml directly -->
&menu
<main>
<h2>Heading</h2>
<p>Main content of your page</p>
</main>
</body>
</html>
Now you'd only edit menu.sgml and have your updated menu content always up-to-date in any page files referencing menu.sgml. You can even leave out the declaration for menu (and the whole DOCTYPE document prolog) since SGML resolves the &menu entity reference to a file of that name in the same directory as the referencing file by default.
Note: browsers don't implement SGML. To make use of SGML in browsers (and/or on the server side as well when using node.js), you can use my sgmljs.net SGML parser/lib; see http://sgmljs.net/docs/sgmlrefman.html#general-entities for discussion of relevant entity techniques.
Commonly used server-side template libs such as Jade, pug, handlebars, mustache, etc. all have their own mechanisms called partials or includes to get functionality more or less equivalent to SGML general entities.
If your page is also using PHP you could add it with the help of the include statement there.
Otherwise here is a JavaScript solution:
menu.html
Start<br>
Page 2<br>
Page 3<br>
script.js
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
}
</script>
Your "normal" files
<div w3-include-html="menu.html"></div> <!-- put that line where you want to include the HTML. -->
<script>
includeHTML();
</script> <!-- Put that at the end of your file. -->
From here: https://www.w3schools.com/howto/howto_html_include.asp
I have a page that I work on daily and I need to look through the page for text that has HTML of:
<tr style="background-color:#33FF00">
How can I use CSS to auto navigate to that color or HTML code when the page loads?
Is there a way?
I cannot edit the html as it's not hosted locally and I don't have access to write access, only read.
I am currently using Stylebot to modify the css for my own display purposes and want to know if I can do the same to auto navigate to that colored section.
If there is a way similar to using style bot but for HTML like userscripts etc, I am not familiar enough so if you have a workaround any tutorial would be great to show me how to implement it.
Thanks!
UPDATED
Copy and paste the code below into a text file and save it as an html file. Then open it in a browser.
This code loads the target page from the host into the 'result' element, then uses some post-load javascript to navigate to the colored tr elements. If the page requires scripts on external stylesheets, etc., these need to be loaded explicitly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$(document).ready(function(){
var sourceUrl='https://en.wikipedia.org/wiki/Main_Page';
var sourceScript='https://en.wikipedia.org/wiki/Main_Page';
$( "#result" ).load(sourceUrl, function() {
$.getScript(sourceScript, function(){
alert("Script loaded and executed.");
});
$('html, body').animate({
scrollTop: $('tr').filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
});
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
from jQuery scroll to element
and JQuery Find Elements By Background-Color
UPDATE 2
Or, in an iFrame (but only works if you are on the same domain as the target page)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onLoadHandler(){
var $iframe = $("#result").contents();
var trs=$iframe.find('tr');
$iframe.find('html,body').animate({
scrollTop: trs.filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
};
</script>
</head>
<body>
<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>
</body>
</html>
UPDATE 3
If none of these work, try: 1) load your page in a browser, 2) open Developer Tools, 3) go to the Page Inspector or Elements tab, 3) Ctrl-F and search for your color string ('#ddcef2'), 4) right-click the first highlighted element in your search results and select "Scroll into view"
Try and see if that does the trick:
* {
display: none
}
[style*=background-color:#33FF00] {
display: table-row
}
My website has the same navigation menu throughout, instead to rewriting the HTML code for every page, can I link to a second HTML file (that contains the nav HTML code) like you would with CSS? Or will that create problems?
Simple way would be to put the header part in a separate html file.
Now load this file in html code using jQuery load function like
$("#headerDiv").load("header.html")
Know that, this will require web server because load function sends a request to server.
Check out the code sample:
demo.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function(){
$("#headerDiv").load("header.html");
});
</script>
</head>
<body>
<div id="headerDiv"></div>
<!-- Rest of the code -->
</body>
</html>
header.html
<div >
<a>something</a>
<a>something</a>
</div>
That is called HTML includes, and YES, it is possible
<div w3-include-HTML="content.html">My HTML include will go here.</div>
<script>
(function () {
myHTMLInclude();
function myHTMLInclude() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
myHTMLInclude();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
})();
</script>
NOTES
HTML doesn't have a simple include mechanism (except for frames like iframe, which have side effects).
A better solution would be to use Server-Side includes, which is the preferred way of adding common parts to your document, on the server, of course.
for an HTML solution -since you have no other tags in your question- there is HTML imports:
<link rel="import" href="nav.html">
But this new -working draft- and it doesn't have good browser support.
Resources:
W3C - imports
MDN - HTML Imports
caniuse - HTML Imports
webcomponents.org - introduction to html imports
html5rocks - imports
W3schools has an include. They also have there own CSS as a side note. Put the callup in footer (wherever)
<script src="vendor/w3js.min.js"></script>
<script src="w3.includeHTML();"></script>
And then on page:
<header class="header navbar-fixed-top">
<nav id="inc_nav" w3-include-html="nav.html"></nav>
</header>
<section id="inc_header" w3-include-html="header.html"></section>
<div id="content" tabindex="-1"></div>
i have a link in place, which opens a popup window that gives you instructions on how to add this page to your bookmarks. Now i also want the link to fire a conversion in adwords when it gets clicked. For that i have a script from google which i tried ti combine with the existing link, but i think i did something wrong since no conversion gets fired in my test. Please help me here:
<html>
<head>
</head>
<body>
<a id="bookmarkme" href="#" rel="sidebar" onClick="goog_report_conversion" title="bookmark this page">Bookmark this page!</a>
<!-- Google Code for People who added website to their bookmarks Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = XXXXXXXX;
w.google_conversion_label = "COldCKSHnl8Q2cu9ywM";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
window.google_is_call = true;
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript">
$(function() {
$("#bookmarkme").click(function() {
// Mozilla Firefox Bookmark
if ('sidebar' in window && 'addPanel' in window.sidebar) {
window.sidebar.addPanel(location.href,document.title,"");
} else if( /*#cc_on!#*/false) { // IE Favorite
window.external.AddFavorite(location.href,document.title);
} else { // webkit - safari/chrome
alert('Please press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D in order to add this page to your bookmarks, you can also use your browsers bookmark menu to do that.');
}
});
});
</script>
</body>
</html>
Setting up an onclick handler for conversions
First, make sure you selected Click instead of Page load from the "Tracking event" section of the "Advanced tag settings" in Part I of the instructions above. Your conversion tag should look like something this:
<!-- Google Code for Add to Cart Conversion Page
In your html page, add the snippet and call goog_report_conversion
when someone clicks on the chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = 12345678;
w.google_conversion_label = "abcDeFGHIJklmN0PQ";
w.google_conversion_value = 13.00;
w.google_conversion_currency = "USD";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
Now that you (or the person in charge of your website) have the conversion tracking tag, you're ready to paste. Here's how:
Go to the page on your website that shows the clickable button or link. Then open up the HTML code so you can edit it.
Find the body tags (<body></body>) of the page, then paste the code snippet you generated in AdWords between those two tags.
Adjust the HTML code to add the onclick handler. The particular onclick command you use will depend on how the link or button is displayed on your site: text link, image, or button.
Here's some sample code close up:
HTML before conversion tracking code (Sample only. Don't use in your website's code.)
<html>
<head>
<title>Sample HTML File</title>
</head>
<body>
This is the body of your web page.
</body>
</html>
Use the following command if the link is shown as:
a text link
<body>
<!-- Below is a sample link for a file download.
You need to replace the URL for the file and the
DOWNLOAD NOW text with the text you want to hyperlink. -->
<a onclick="goog_report_conversion
('http://www.example.com/whitepapers/a.pdf')"
href="#" >DOWNLOAD NOW</a>
</body>
</html>
an image
<!-- Below is a sample image for a file download.
Replace download_button.gif with your
button image and the document URL with your file's URL. -->
<body>
<img src="download_button.gif" alt="Download Whitepaper"
width="32" height="32"
onClick="goog_report_conversion
('http://www..pdf')"/>
</body>
</html>
For the tracking to work, you'll need to make sure you include both the tag and the appropriate onclick tags from one of the examples above. This tells AdWords to record a conversion only when a customer clicks on a chosen link or button.
Alright, it works the following way:
<a onclick="goog_report_conversion
('')" id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark this page!</a>