index.html
<!DOCTYPE html>
<html>
<head>
<script>
function cha(title){
document.getElementById("change").innerHTML=title;
}
</script>
</head>
<body>
<ul> //sample navigation bar
<li><a href='index.html'>Home</a></li> //sample navigation bar
<li><a href='mission.html' onclick='cha("Mission")'>Mission</a></li> //sample navigation bar
</ul> //sample navigation bar
THIS IS MY HOME PAGE
</body>
</html>
mission.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul> //sample navigation bar
<li><a href='index.html'>Home</a></li> //sample navigation bar
<li><a href='mission.html'>Mission</a></li> //sample navigation bar
</ul> //sample navigation bar
<h1 id='change'>THIS IS MY Mission </h1>
</body>
</html>
the ideal output of this 2 webpage is when i click the mission in index.html the heading <h1>in mission.html will change its inner content, from THIS IS MY Mission it will became mission only as stated in the cha("Mission"); but i dont know that is wrong in my code my ideal output did not show. thanks guys and sorry about my grammar.
It might be possible to make this a one page solution where the mission.html contains only the mission data, that way you can load it directly into the index.html as is and not have to navigate way from the page at all.
if you have the ability to use JQuery/AJAX you could load the html, and then on 'success' trigger the text change. You would add a "mission" div somewhere on the page to load mission.html into.
HTML Header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
HTML Body
<div id="mission"></div>
Javascript
function cha(title){
$('#mission').load('mission.html', function(title) {
document.getElementById("change").innerHTML=title;
});
}
I hope this helps if it is an available option
Related
I have a page with links in a nav. When a user clicks Page B, I'd like to load content from Page B into the div #main-text of Page A but I can't seem to get it to work. I'm very new to js, so be easy on me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function(){
$("#nav_a").on("click", function(){
$("#main_text").load("pageA.html");
});
$("#nav_b").on("click", function(){
$("#main_text").load("pageB.html");
});
});
</head>
</script>
<body>
<div class="nav">
<ul>
<li><a id="nav_a" href="#">Page A</a></li>
<li><a id="nav_b" href="#">Page B</a></li>
</ul>
</div>
<div id="main_text">Page A</div>
</body>
</html>
If the pages are from the same domain as the page with the script and contain valid (x)html, then it should work.
Note: Ajax does NOT work from file system. It needs all files to come from a web server.
I would personally do
$(".nav a").on("click", function(e){
e.preventDefault(); // cancel the click
$("#main_text").load("page"+this.id.split("_")[1].toUpperCase()+".html");
});
working on a personal project and got stuck and thought why not give stackoverflow a try
What I'm trying to do is have many links to all link to the same page with different content depending on what link(id) they clicked on i cant seem to figure it out >.<
<html>
<header>
<title></title>
</header>
<body>
Link1
Link2
Link3
Link4
<body>
</html>
Then once clicked then it goes to a page with the same header and footer but different content e.g. a video tag
<html>
<header>
<title></title>
</header>
<body>
<video id="58315bfa" class="sublime" width="640" height="360" data-player-
kit="2" data-uid="1234" preload="none"><source src="WebIntroduction.avi /></video>
<body>
</html>
doesn't necessarily have to stay on the first page which is the first code it can go to another page but once on the other page all the other links need to go to that page with different content. So for example if i am on index page with the links and i click link 1 i got to a list.html page with a video. and if i where to go back to index and click link2 it would go to list.html again but with different content i hope i made it clear please help!!!! thanks
There are many ways to do this, one would be to pass an id in the url and show content based on that.
<html>
<header>
<title></title>
</header>
<body>
Link1
Link2
Link3
Link4
<body>
</html>
Content page would look for the id which is the GET variable and then print the content depending on what the id is.
Another thing you could do is use ajax.
<html>
<header>
<title></title>
</header>
<body>
Link1
Link2
Link3
Link4
<script src="jquery.js"></script>
<body>
</html>
On click of a link you could make a ajax request to get the content JSON, pass it to a template engine such as handlebars or moustache and then inject it into the body.
The third way you could go about this is to use a framework such as angularjs.
On the first page:
Link 1
Link 2
Link 3
//...etc.
Then at list.html:
var contentID;
s = location.search;
if(s != '') {
var split = s.split('=');
contentID = split[1];
}
You now have a global variable (contentID) on list.htmlthat you can use to select which content to display.
I have an HTML template file which uses Spring MVC + thymeleaf and I'm trying to create a navigable menu at the top of the page using Foundation's "top-bar" component.
So far, the menu bar is displayed but menus are not being shown when the cursor is placed on top.
I can display the sub-menus related to my main menu options (the ones placed at the bar) but sub-menus are not working because when I click an option on the first sub-menu, the menu closes instead of displaying another sub-menu.
My HTML file looks like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/foundation.min.css}" />
</head>
<body>
<nav class="top-bar" role="navigation" data-topbar="true">
<ul class="title-area">
<li class="name">
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown"><span th:text="#{menu.administration}"></span>
<ul class="dropdown">
<li class="has-dropdown"><span th:text="#{menu.administration.material}"></span>
<ul class="dropdown">
<li><span th:text="#{menu.administration.ontology}"></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</nav>
<div>
<div class="large-12 columns">
<h2 th:text="#{material.search.title}"></h2>
</div>
</div>
<script th:href="#{/js/vendor/jquery.js}"></script>
<script th:href="#{/js/foundation.min.js}"></script>
<script th:href="#{/js/foundation/foundation.topbar.js}"></script>
<script th:href="#{/js/vendor/modernizr.js}"></script>
<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>
</body>
</html>
I'm sure my resources are being properly imported.
Also, I had to use data-topbar="true" because if I use data-topbar only, my page fails while rendering saying it a expecting for a = after the property name.
Am I doing something wrong?
Thank you so much for any help guys!
The problem was located in the property I was using to import my JS files.
As seen in my code, the import looks like this:
<script th:href="#{/js/foundation.min.js}"></script>
But to import a script file the href property is wrong, it must be src so the correct format is:
<script th:src="#{/js/foundation.min.js}"></script>
I know it was a silly mistake but I hope it helps someone else.
The fact that an error was never shown while compiling nor while generating the page worries me a little.
your th:text="#{menu.administration} is not working
the structure should be
<h1 th:text="${header.title}">title</h1>
<small th:text="${header.subtitle}">Subtitle</small>
you can't leave the empty and expect a value
please take a look at the tutorial http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html
I am making an application where a header with some Menus and a footer will stay in all the pages.
Now one way to this is write the code for header and footer in every page, which is a bad option.
The other option is using iframe,which I am using. here is my code-
<div style="height:75%;width:98%;">
<iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>
In this iframe I am calling the the contents of the other pages. I have one home page with a header and footer, and the middle portion will change using iframe.
To achieve the overlapping of iframes perfectly I use a jquery function which is below.
<script>
$("a").click(function(e) {
e.preventDefault();
$("#someFrame").attr("src", $(this).attr("href"));
$("a").removeClass("active");
$(this).addClass("active");
})
</script>
Now what I need is - is there any other way to do it?? That I can make 2 different pages for header and footer, and get the contents in every page? using java?? or ajax or whatever.. Any help will be appreciable...
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.html",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
demo_test.html
<h1>I am not part of this page</h1>
There is another way to solve your difficulty.create a html file for menu named navbar_menu.html
navbar_menu.html
<ul>
<li>Home</li>
<li>About Us</li>
<li>Ticket Sales</li>
<li>Merchandise
<ul>
<li>Products</li>
<li>Shopping Cart</li>
</ul>
</li>
<li>Past Shows
<ul>
<li>Photo Gallery</li>
<li>Video Clips</li>
</ul>
</li>
</ul>
In another html page say index.html. In index.html page code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.get("navbar_menu.html", function(data) {
$("#header").html(data);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
The standard way to achieve this would be to use PHP. In the page where you want the header html included add in: <?php include 'header.html';?> Then change the extension of the pages you put this code into to .PHP instead of .HTML .
You can use jquery load function to load the content into a container div.This way we can have separate fragments for header and footer and be reused across pages
For example
$('#headercontainer').load('ajax/header.html #header')
Please see
[http://api.jquery.com/load][1]
Hope this helps
Why not just use Asp.net with master pages. You can have a desktop and a mobile master page where you write the header, menu and footer once, then you just add content pages.
It also gives you a programming language to use. C# will allow you to do way more than just HTML and JavaScript. Plus you can setup web user controls and black box your controls.
If youre interested check out the free microsoft IDE at http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
I have a main.scala.html which has header,navbar and footbar as follows-
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<ul class="nav nav-justified" id="myTab">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout" data-toggle="tab">#Messages("views.main.logout")</li>
</ul>
<div id="showData">
#content
</div>
</div>
</head>
<body>
</body>
</html>
The page content should be displayed as in the tags.
However on clicking the tabs the page contents are not getting displayed.
Note the page contents were getting displayed earlier on clicking on the tabs but after adding data-toggle="tab" to the list elements it stopped displaying.
Check your html code:
...
<head>
<ul class="nav nav-justified" id="myTab">
There is a end head and start div tag missing.
Preview source code generated by Play in the browser and use built-in browser inspector for HTML error (also you can just try to validate it with W3C Validator
If your view looks exactly as you showed as - it can not produce valid HTML document