I've been very confused, i am using .json file as a Database for my HTML Contents (<p>example</p>)
When i am trying to put the JSON Value from main.json to my HTML Document index2.html using Flask (Python), but it doesn't seem to work, and just returning <p>Here begins the chat</p> on my website.
Here are the codes
main.json
{
"posts": {
"divs": "<p>Here begins the chat!</p>"
}
}
index2.html
<html>
<head>
<title>Hit-Git | Social Media Platform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='michellelogo.ico') }}">
<link rel= "stylesheet" type= "text/css" href= "{{url_for('static', filename='styles/style.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<ul>
<button type="button" class="topbutton" onclick="window.location.href='/'">Home</button>
<button type="button" class="topbutton active" onclick="window.location.href='/login'">News Feed</button>
<button style="float:right" type="button" class="books" onclick="window.location.href='/'">Hit-Git</button>
</ul>
</head>
<body>
<div style="text-align: center;">
<h3>News Feed is Under Construction!</h3>
<p>News Feed is currently on under testing and building, trial and errors are still happening, but rest assured, soon you will be able to use most of Hit-Git! Thank you for your patience.</p>
</div>
{{posts}}
</body>
</html>
and the main.py
#app.route("/posts", methods=['GET', 'POST'])
def posts():
allpost = data1()
daposts = allpost['posts']['divs']
daposts = str(daposts)
return render_template('posts.html', posts=daposts)
Sorry for my bad english
I'm trying to create a static blog using Hugo and these guides (here and here).
I've installed Hugo and created a minimal place-holder blog post for testing. The page renders correctly when I run hugo server -D and go to localhost:1313 in a browser. However, the page doesn't render correctly when I just open public/index.html with a browser.
I'm using the config file that came with the theme that I'm using. In the config file, I've changed the theme attribute to the name of the theme and the baseURL to '/', as well as other smaller fields like author, description, and copyright.
Why is index.html being rendered correctly when it's being served from the local Hugo server but not when I'm just accessing it as a file through the browser?
Here is my blog being correctly rendered through Hugo server
Here is my blog post being rendered incorrectly rendered through direct file access
This is my config file
theme = "soho"
baseURL = "/"
title = "Personal Blog" # "The World's Okayest Programmer"
languageCode = "en"
enableInlineShortcodes = true
summarylength = 10
enableEmoji = true
[params]
author = "My Name"
description = "My Blog"
## Set one of:
# gravatar = "soho#example.com"
profilePicture = "images/profile.png"
copyright = "My Name"
license = "CC BY-SA 4.0"
licenseURL = "https://creativecommons.org/licenses/by-sa/4.0"
## Set custom theme color.
# themeColor = "#fc2803"
## Set custom CSS and/or JS to override site defaults.
customCss = ["css/blog.css"]
customJs = ["js/blog.js"]
## Set as many as you want.
[[params.socialIcons]]
icon = "fa-linkedin"
title = "Linkedin"
url = "#"
[[params.socialIcons]]
icon = "fa-github"
title = "GitHub"
url = "#"
[[params.socialIcons]]
icon = "fa-twitter"
title = "Twitter"
url = "#"
[menu]
[[menu.main]]
name = "Posts"
weight = 100
identifier = "posts"
url = "/posts/"
[[menu.main]]
name = "About"
identifier = "about"
weight = 300
url = "/about/"
[taxonomies]
category = "categories"
series = "series"
tag = "tags"
[markup]
[markup.highlight]
codeFences = true
guessSyntax = false
hl_Lines = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true # if false, you need to provide you own custom CSS
style = "monokai"
tabWidth = 4
And this is the public/index.html that is generated by Hugo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Hugo 0.72.0" />
<title>Personal Blog</title>
<meta name="description" content="My Blog" />
<meta itemprop="name" content="Personal Blog">
<meta itemprop="description" content="My Blog">
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Personal Blog" />
<meta name="twitter:description" content="My Blog" />
<meta property="og:title" content="Personal Blog" />
<meta property="og:description" content="My Blog" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<link type="text/css" rel="stylesheet" href="/css/print.css" media="print">
<link type="text/css" rel="stylesheet" href="/css/poole.css">
<link type="text/css" rel="stylesheet" href="/css/hyde.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="/favicon.png">
<link href="/index.xml" rel="alternate" type="application/rss+xml" title="Personal Blog" />
</head>
<body>
<aside class="sidebar">
<div class="container">
<div class="sidebar-about">
<div class="author-image">
<img src="/images/profile.png" class="img-circle img-headshot center" alt="Profile Picture">
</div>
<h1>Personal Blog</h1>
<p class="lead">My Blog</p>
</div>
<nav>
<ul class="sidebar-nav">
<li>
Home
</li>
<li>
Posts
</li>
<li>
About
</li>
</ul>
</nav>
<section class="social-icons">
<a href="#" rel="me" title="Linkedin" target="_blank">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</a>
<a href="#" rel="me" title="GitHub" target="_blank">
<i class="fab fa-github" aria-hidden="true"></i>
</a>
<a href="#" rel="me" title="Twitter" target="_blank">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
</section>
</div>
</aside>
<main class="content container">
<div class="posts">
</div>
</main>
<footer>
<div>
© My Name 2020
· CC BY-SA 4.0
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"
integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
</body>
</html>
Assuming your layout files use relURL,¹ put the following in your config.toml.
relativeURLs = true
Make sure...
this line is above all TOML tables
the string relativeURLs uses these upper- and lower-case characters
This is documented at https://gohugo.io/content-management/urls/#relative-urls:
By default, all relative URLs are left unchanged by Hugo, which can be problematic when you want to make your site browsable from a local file system. Setting relativeURLs to true in your site configuration will cause Hugo to rewrite all relative URLs to be relative to the current content. For example, if your /posts/first/ page contains a link to /about/, Hugo will rewrite the URL to ../../about/.
¹ relURL is documented at https://gohugo.io/functions/relurl/ and your theme, which I think is https://github.com/alexandrevicenzi/soho, uses it.
It looks like the CSS files are not loaded in your page. Most likely they are not referenced properly in the HTML file, i.e. in the theme or layouts.
In your config.toml I see that you've set the baseURL to /, but it's supposed to include the hostname, so something like https://yoursite.com/. Check Hugo's config reference.
When running locally with hugo server, you can override that setting with the --baseURL flag.
I want to create common header and footer pages that are included on several html pages.
I'd like to use javascript. Is there a way to do this using only html and JavaScript?
I want to load a header and footer page within another html page.
You can accomplish this with jquery.
Place this code in index.html
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>
and put this code in header.html and footer.html, at the same location as index.html
click here for google
Now, when you visit index.html, you should be able to click the link tags.
I add common parts as header and footer using Server Side Includes. No HTML and no JavaScript is needed. Instead, the webserver automatically adds the included code before doing anything else.
Just add the following line where you want to include your file:
<!--#include file="include_head.html" -->
Must you use html file structure with JavaScript? Have you considered using PHP instead so that you can use simple PHP include object?
If you convert the file names of your .html pages to .php - then at the top of each of your .php pages you can use one line of code to include the content from your header.php
<?php include('header.php'); ?>
Do the same in the footer of each page to include the content from your footer.php file
<?php include('footer.php'); ?>
No JavaScript / Jquery or additional included files required.
NB You could also convert your .html files to .php files using the following in your .htaccess file
# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]
# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
You could also put: (load_essentials.js:)
document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright © " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:you#you.com'>Contact Us</a> / "
+ "<a href='mailto:you#you.com'>Report a problem.</a></p>";
<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>
<script src="load_essentials.js"></script>
I tried this:
Create a file header.html like
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Your application</title>
Now include header.html in your HTML pages like:
<head>
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
Works perfectly fine.
I've been working in C#/Razor and since I don't have IIS setup on my home laptop I looked for a javascript solution to load in views while creating static markup for our project.
I stumbled upon a website explaining methods of "ditching jquery," it demonstrates a method on the site does exactly what you're after in plain Jane javascript (reference link at the bottom of post). Be sure to investigate any security vulnerabilities and compatibility issues if you intend to use this in production. I am not, so I never looked into it myself.
JS Function
var getURL = function (url, success, error) {
if (!window.XMLHttpRequest) return;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status !== 200) {
if (error && typeof error === 'function') {
error(request.responseText, request);
}
return;
}
if (success && typeof success === 'function') {
success(request.responseText, request);
}
}
};
request.open('GET', url);
request.send();
};
Get the content
getURL(
'/views/header.html',
function (data) {
var el = document.createElement(el);
el.innerHTML = data;
var fetch = el.querySelector('#new-header');
var embed = document.querySelector('#header');
if (!fetch || !embed) return;
embed.innerHTML = fetch.innerHTML;
}
);
index.html
<!-- This element will be replaced with #new-header -->
<div id="header"></div>
views/header.html
<!-- This element will replace #header -->
<header id="new-header"></header>
The source is not my own, I'm merely referencing it as it's a good vanilla javascript solution to the OP. Original code lives here: http://gomakethings.com/ditching-jquery#get-html-from-another-page
The question asks about using only HTML and JavaScript. The problem is that a second request to the server using JavaScript or even jQuery (requesting the extra header.html "later") is:
Slow!
So, this is unacceptable in a production environment. The way to go is to include only one .js file and serve your HTML template using only this .js file. So, in your HTML you can have:
<script defer src="header.js"></script>
<header id="app-header"></header>
And then, in your header.js put your template. Use backticks for this HTML string:
let appHeader = `
<nav>
/*navigation or other html content here*/
</nav>
`;
document.getElementById("app-header").innerHTML = appHeader;
This has also the benefit, that you can change the content of your template dynamically if you need! (If you want your code clean, my recommendation is not to include any other code in this header.js file.)
Explanation about speed
In the HTTP/2 world, the web server "undestands" what additional files (.css, .js, etc) should be sent along with a specific .html, and sends them altogether in the initial response. But, if in your "original" .html you do not have this header.html file imported (because you intend to call it later with a script), it won't be sent initially. So, when your JavaScript/jQuery requests it (this will happen much later, when HTML and your JavaScript will get "interpreted"), your browser will send a second request to the server, wait for the answer, and then do its stuff... That's why this is slow. You can validate this, using any browser's developer tools, watching the header.html coming much later.
So, as a general advice (there are a lot of exceptions of course), import all your additional files in your original .html (or php) file if you care about speed. Use defer if needed. Do not import any files later using JavaScript.
I think, answers to this question are too old... currently some desktop and mobile browsers support HTML Templates for doing this.
I've built a little example:
Tested OK in Chrome 61.0, Opera 48.0, Opera Neon 1.0, Android Browser 6.0, Chrome Mobile 61.0 and Adblocker Browser 54.0
Tested KO in Safari 10.1, Firefox 56.0, Edge 38.14 and IE 11
More compatibility info in canisue.com
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Template Example</title>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="autoload-template.html">
</head>
<body>
<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>
</body>
</html>
autoload-template.html
<span id="template-content">
Template Hello World!
</span>
<script>
var me = document.currentScript.ownerDocument;
var post = me.querySelector( '#template-content' );
var container = document.querySelectorAll( '.template-container' );
//alert( container.length );
for(i=0; i<container.length ; i++) {
container[i].appendChild( post.cloneNode( true ) );
}
</script>
styles.css
#template-content {
color: red;
}
.template-container {
background-color: yellow;
color: blue;
}
Your can get more examples in this HTML5 Rocks post
Aloha from 2018. Unfortunately, I don't have anything cool or futuristic to share with you.
I did however want to point out to those who have commented that the jQuery load() method isn't working in the present are probably trying to use the method with local files without running a local web server. Doing so will throw the above mentioned "cross origin" error, which specifies that cross origin requests such as that made by the load method are only supported for protocol schemes like http, data, or https. (I'm assuming that you're not making an actual cross-origin request, i.e the header.html file is actually on the same domain as the page you're requesting it from)
So, if the accepted answer above isn't working for you, please make sure you're running a web server. The quickest and simplest way to do that if you're in a rush (and using a Mac, which has Python pre-installed) would be to spin up a simple Python http server. You can see how easy it is to do that here.
I hope this helps!
It is also possible to load scripts and links into the header.
I'll be adding it one of the examples above...
<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');
document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright © " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:you#you.com'>Contact Us</a> / "
+ "<a href='mailto:you#you.com'>Report a problem.</a></p>";
<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>
<script src="load_essentials.js"></script>
For a quick setup with plain javascript and because not answered yet, you could also use a .js file to store your redundant pieces (templates) of HTML inside a variable and insert it through innerHTML.
backticks are here the make it easy part this answer is about.
(you will also want to follow the link on that backticks SO Q/A if you read & test that answer).
example for a navbar that remains the same on each page :
<nav role="navigation">
<img src="image.png" alt="Home"/>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
</nav>
You can keep inside your HTMl :
<nav role="navigation"></nav>
and set inside nav.js file the content of <nav> as a variable in between backticks:
const nav= `
<img src="image.png" alt="Home"/>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
` ;
Now you have a small file from which you can retrieve a variable containing HTML. It looks very similar to include.php and can easily be updated without messing it up (what's inside the backticks).
You can now link that file like any other javascript file and innerHTML the var nav inside <nav role="navigation"></nav> via
let barnav = document.querySelector('nav[role="navigation"]');
barnav.innerHTML = nav;
If you add or remove pages, you only have to update once nav.js
basic HTML page can be :
// code standing inside nav.js for easy edit
const nav = `
<img src="image.png" alt="Home"/>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
`;
nav[role="navigation"] {
display: flex;
justify-content: space-around;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<!-- update title if not home page -->
<meta name="description" content=" HTML5 ">
<meta name="author" content="MasterOfMyComputer">
<script src="nav.js"></script>
<!-- load an html template through a variable -->
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<nav role="navigation">
<!-- it will be loaded here -->
</nav>
<h1>Home</h1>
<!-- update h1 if not home page -->
<script>
// this part can also be part of nav.js
window.addEventListener('DOMContentLoaded', () => {
let barnav = document.querySelector('nav[role="navigation"]');
barnav.innerHTML = nav;
});
</script>
</body>
</html>
This quick example works & can be copy/paste then edited to change variable names and variable HTML content.
another approach made available since this question was first asked is to use reactrb-express (see http://reactrb.org) This will let you script in ruby on the client side, replacing your html code with react components written in ruby.
Use ajax
main.js
fetch("./includes/header.html")
.then(response => {
return response.text();
})
.then(data => {
document.querySelector("header").innerHTML = data;
});
fetch("./includes/footer.html")
.then(response => {
return response.text();
})
.then(data => {
document.querySelector("footer").innerHTML = data;
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Liks</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header></header>
<main></main>
<footer></footer>
<script src="/js/main.js"></script>
</body>
</html>
You can use object tag of HTML with out use of JavaScript.
<object data="header.html" type="text/html" height="auto"></object>
Credits : W3 Schools How to Include HTML
Save the HTML you want to include in an .html file:
Content.html
Google Maps<br>
Animated Buttons<br>
Modal Boxes<br>
Animations<br>
Progress Bars<br>
Hover Dropdowns<br>
Click Dropdowns<br>
Responsive Tables<br>
Include the HTML
Including HTML is done by using a w3-include-html attribute:
Example
<div w3-include-html="content.html"></div>
Add the JavaScript
HTML includes are done by JavaScript.
<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>
Call includeHTML() at the bottom of the page:
Example
<!DOCTYPE html>
<html>
<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>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
includeHTML();
</script>
</body>
</html>
I am working on my first website that is on my computer and I am not planning to put it on the internet. However, I want to reuse nav and footer on other pages.
No php.
No frames.
Javascript?
Are there anyways to use HTML?
Modest will do this.
It's especially easy if you're not putting it on the internet, just put jquery and modest-preview.js in the section and you can start using it right away:
main.xhtml
<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="modest-preview.js"></script>
<include>myNav</include>
</head>
<body>
<myNav/>
</body>
</html>
myNav.xml
HTML |
CSS |
JavaScript |
jQuery
I know is a bit old but Ive found a way to achieve this.
You can load a portion of code into yout html by using ajax and leave the rest of your page without changes in order to use the same nav.
Code:
lets say I have this code in this file:
home.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="thirdParty/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#/">NAVBAR</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=" active">
Home
</li>
<li>
About
</li>
<li>
Rebout
</li>
</ul>
</div>
</nav>
<main id="main">
</main>
<script src="thirdParty/jquery-1.12.0.min.js"></script>
<script src="thirdParty/jquery.ba-hashchange.min.js"></script>
<script src="js/partialViewLoad.js"></script>
<script src="thirdParty/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
I will have two more files that will work as htmls partial views: 'partialViews/main.html' and 'partialViews/about.html'. (put some html into those files)
I use the plugin jquery.ba-hashchange.min for refreshing the html.
And at least I have the script used to load the partial views:
loadPartialView.js
$(function () {
$(window).hashchange(function () {
if (location.hash.indexOf('#/') > -1) {
loadPartial(location.hash.substr(location.hash.lastIndexOf('/') + 1));
}
});
$(window).hashchange();
});
function loadPartial(partialName) {
partialName = partialName || 'main';
$.get('/partialViews/' + partialName + '.html').done(function (html) {
$('#main').html(html);
});
}
$(document).ready(function() { loadPartial(); });
When you click on the links in the ul the hash location will change and this will trigger a jquery callback that we ve created. in that moment we load our partial views.
I recommend you to use a server and a more robust language to accomplish this. But this solution will work, is easy to implement and will work even on a server.
On this site: http://www.gruene-chemnitz.de/abgeordnete the right sidebar gets placed below the main content. Which of course isn't supposed to happen.
But this is the only page where this happens on the entire site. I'm not able to find the difference or get a clue whats wrong.
I would really appreciate your help in fixing the error.
Edit: The index.php of the used template looks like this:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="shortcut icon" href="templates/<?php echo $this->template ?>/images/favicon.ico" />
<?php if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left') != 0) $contentwidth = "81";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>
</head>
<body>
<div id="page-outer">
<div id="top"><jdoc:include type="modules" name="top" style="xhtml"/></div>
</div>
<div id="page">
<div id="header"></div>
<div id="shadow"><div class="shadow"><jdoc:include type="module" name="breadcrumbs"/></div></div>
<div class="inside">
<div id="sidebar">
<div class="insideleft"><jdoc:include type="modules" name="left" style="xhtml"/></div>
</div>
<div id="content<?php echo $contentwidth;?>"><jdoc:include type="component" />
<div id="footer">©Bündnis 90 die Grünen <?php echo date("Y",time());?></div>
</div>
<div id="sidebar-2">
<div class="insideleft"><jdoc:include type="modules" name="right" style="xhtml"/></div>
</div>
</div>
</div>
</body>
</html>
check below div control position on your page html source
content60 and
sidebar-2
i think there is a html break on module with div content60. so check html first.
hope this will help you.
thanks
First you have tables based layout. Second your div#sidebar-2 is inside the div#content60. Remove the div#sidebar-2 ouside the div#content60 in your HTML markup.
Like for example here gruene-chemnitz.de, the div#sidebar-2 is outside the div#content60 and these two along with div#sidebar are the children of div.inside
Almost all occurences of templates blowing apart on specific pages can be traced down to invalid html within an article - or module.
Within your content it looks like you have closed a div that wasn't open - this is then interpreted by the browser as an earlier div as well as closing some intermediate td tags and other things - basically blowing your template apart.
The easiest fix would be to view the source within your article - within the wysiwyg editor and count how many times you open divs versus how many you close.
To give you an idea of where to look use the html validator:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.gruene-chemnitz.de%2Fabgeordnete