There are several examples of this on the net, using just HTML and CSS, or Bootstrap. They often have examples like this:
<li>News</li>
<li>Contact</li>
<li>About</li>
What I'd like is for the navbar to not have to load on each refresh / link click. Are the anchors in the example supposed to be replaced by links to other pages that include the full navbar source themselves?
What is a typical implementation, so that the navbar stays static?
How can I implement a static navbar between pages with HTML / CSS?
HTML
<ul class="w3-navbar">
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Put your content in to each list item above.
JS
openCity("London");
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
First, call openCity() to open "London" (id="London).
Then call open City() with a different city name (id="Paris) when the user clicks on one of the buttons in the menu.
The openCity() function hides all elements (display="none") with the class name "city", and displays the element (display="block") with the given city id.
Sourced from http://www.w3schools.com/w3css/w3css_tabulators.asp where you can find other examples too.
One problem with the accepted answer is that the browser will have to load the content of all the tabs on page load. This may not be very good if your tabs have a lot of content and your users are using mobile devices. One way around that problem is using iframes. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<ul>
<li><a target="iframe" href="page1.html">Tab1</a></li>
<li><a target="iframe" href="page2.html">Tab2</a></li>
<li><a target="iframe" href="page3.html">Tab3</a></li>
</ul>
<iframe name="iframe" src="" onload="resizeIframe(this)" style="width:100%;"></iframe>
</body>
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.style.height = 0;
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
</html>
This will load the content of each page into the iframe only when the link is clicked. Note that news.html, contact.html, and about.html have to be created as well.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:300px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Just wanted to give you another possible solution. I'm putting it in a separate answer since it is a different idea.
Basically you can use javascript to fire an ajax request every time a link is clicked. The request will return the HTML content that will be inserted into the page. Here is a demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<ul id="nav">
<li><a target="#" href="page1.html">Tab1</a></li>
<li><a target="#" href="page2.html">Tab2</a></li>
<li><a target="#" href="page3.html">Tab3</a></li>
</ul>
<div id="pageContent">
</div>
</body>
<script type="text/javascript">
$("#nav li a").click(function() {
$("#pageContent").load($(this).attr('href'));
return false;
});
</script>
</html>
Note I am using jQuery since it makes it much easier but the idea is the same if you want to use a different library or just vanilla javascript. Basically it attaches a callback function to the links' click event and that function calls jQuery's load function to fetch the content of the page and insert it into the div. I think this approach is much more common and you can find it in a lot of popular websites.
Related
I'm trying to build a tool that allows you to create a HTML-page using Blockly-Blocks (Blockly).
It is a HTML-page that looks like this at the moment:
It can already create code out of blocks, but now I need a way to preview the result live on the page in the upper right corner. Does anyone have an idea how that could be somewhat easily implemented? I've looked around a bit but only found tools that are able to Live-Preview HTML but none to use in your own page.
Thanks in advance!
You could document.write the page into an iFrame
This will alas not work here at SO since iFrames are sandboxed
but it does work in a jsfiddle
PS: Your HTML is malformed.
const ifr = document.preview;
const html = `<!doctype html>
<head>
<meta charset="UTF-8" />
<title>Preview</title>
</head>
<body>
<div style="font-family:Ariel, sans-serif; background-color: #ffcc00; color: #003300">
<ol>
<li>Line 1</li>
<li>Line 2</li>
</ol>
</div>
</body>
</html>`;
ifr.document.write(html);
ifr.document.close();
#preview {
width: 500px;
height: 500px;
float: right;
}
<iframe name="preview" id="preview"></iframe>
You can save the code in a file ex: "index.html"
Copy the code from the right side bottom from
<DOCTYPE HTML> to the end </html>
And open the file with your browser simple as that :)
The sitemap of my page, I set it to click and show a second div (for more infos) when I preview the second div is already open and with the click closes and opens accordingly, I want the first time to display it, to be closed.
(The following example does not work, I do not know why, on m preview web it's ok)
<script>
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
</script>
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
`tthe first time to display it closed
You can add this code to the top of your script to hide it when the page opens.
$(".sitemapfooter").hide();
The best way is to use CSS as this will hide the element before the jQuery runs rather than once the DOM has loaded.
CSS
.sitemapfooter {
display: none;
}
Just set the inline style of the element to display: none, and then it will default to hidden on page load.
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter" style="display: none">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
Just add display: none to the sitemapfooter div, it will be hidden at startup.
.sitemapfooter {
display: none;
}
If I understand your question correctly you want the second div hidden by default.
In order to make that happen you have to change your css code targeting the class "sitemapline2" and add a display style of none.
This will cause the div with the class "sitemapline2" not to show in the beginning, and when you click the jquery function will run to change the css style to display:block showing your info div.
I'm just having a go at creating a website for a friend, but I've not actually done any development for a few months, and so I'm a bit rusty at the moment.
I've started putting a basic page together, to use as a template for all of the pages of the website, but I'm having a bit of trouble getting the horizontal navigation bar to display on the page beneath the logo, and I was just wondering if anyone could explain to me why it's not showing?
The HTML that I have for this is: (code updated 25/09/2013 # 17:40)
<!DOCTYPE HTML>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul{
list-style-type: none;
}
#navbar ul li{
list-style-type: none;
display: inline-block;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<img src = "images\masterPageTop.jpg" width = "700" height = "800" alt = "Cosy Hearts Banner" />
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</body>
</html>
Currently, when viewing the page in the browser, the logo image is displayed at the top of the page as intended, but then the navigation bar, which I've tried to created using a div and horizontal list is not displayed at all...
I was just wondering if anyone could explain to me why this is, and what I need to do to get it to display?
Cheers!
Edit 25/09/2013
I've edited the code to show changes made as suggested, also here's the screenshot of the page when viewed in Chrome (it displays exactly the same in Firefox):
As you can see, the image is displayed (although not longer central, having removed the 'center' tags as suggested- will sort this out later with CSS. But, the navigation bar is not displayed on the page at all, and I can't tell why this is... does anyone know what I should do?
Your HTML is a little bit botched... you may want to review the purposes of tags like <head> and <body>. The following HTML will give you the desired effect.
See this working demo.
<!DOCTYPE html>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul {
list-style-type: none;
}
#navbar ul li {
list-style-type: none;
display:inline-block;
}
</style>
</head>
<body>
<center>
<img src="images\masterPageTop.jpg" width="700" height="800" alt="Cosy Hearts Banner" />
</center>
<div id="navbar">
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</div>
</body>
</html>
I've tried to indent things in such a way that you can easily remember what the layout of an HTML document looks like. As your page gets more complex, you might consider putting your CSS in a separate file -- say, stylesheet.css -- and including it by adding the following to the <head> section:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Best of luck!
How can I create a simple HTML/CSS social sharing menu similar to the one found at the bottom of each post on http://bitquill.com/ — (I know it's my site, but I didn't code the sharing menu. I'm using a Squarespace template and love their sharing menu and want to re-create it elsewhere.)
You have to use an API from each site to get the buttons/badges. For example, you have to review the docs for the Facebook like button: https://developers.facebook.com/docs/reference/plugins/like/ and get the code that way.
To create the menu:
Make a share button using a div, then put another div after it, which is the menu. Style to your liking. Then, make the menu display: none - this will hide it. Use JS to bind the button's click event to a function that shows the menu:
HTML
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
CSS
.menu {
display: none;
}
JS
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
So your entire HTML file should look like:
<html>
<head>
<style>
.menu {
display: none;
}
</style>
</head>
<body>
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
<!-- This is the jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
</script>
</body>
</html>
Here is a quick example. You set up a container div (which must have position:relative), and menu div (which has positioned:absolute). Use jQuery to hide the menu div when the page loads. When a user clicks on Share, the div will be displayed.
The API code that you get from Facebook will be placed in the div that has the Facebook placeholder text.
To see more about how the menu in your example was implemented, open the page using Chrome. Right click on "Share" and go to "Inspect Element."
<script type="text/javascript">
$(document).ready(function () {
//Initally hide social-menu div
$("#social-menu").hide();
//When social-button is pressed, show social-menu
$("#social-button").click(function () {
$("#social-menu").show();
});
});
<div id="social-button" >Share</div>
<div id="social-container" style="position:relative;">
<div id="social-menu" style="position:absolute;top:0px;bottom:0px;z-index:10" >
<div>Facbook</div>
<div>Google +</div>
</div>
</div>
Sorry If this is simple but I need some help with my navigation bar. I can't seem to be able to toggle to show/hide the div with the click of a link. My code is here. This is just some a basic format as I want the right functionality before adding it to my website. Thanks!
<html>
<head>
<link rel="stylesheet" type="text/css">
<style>
#submenu ul{
display:none;
}
</style>
<script type="text/javascript">
function showDiv() {
document.getElementById('submenu').style.display = "block";
}
</script>
</head>
<body>
<div id="navigation">
<ul>
<li id="submenu" onclick="showDiv()";> Hi
<ul>
<li> Hi2
</ul>
</li>
</ul>
</div>
</body>
</html>
So in this example I want the hidden div to show Hi2 once I click Hi1. I don't mind using JQuery or Javascript I just need a way around this. I've made other navigation menus's however they were horizontal and usually worked by hover menus. Appreciate any help!
Use this
$('#submenu').click(function() {
$('#submenu ul').toggle('');
});
DEMO
If you dont want to toggle then use
$('#submenu').click(function() {
$('#submenu ul').css('display','block');
});
DEMO 2
Try:
<script type="text/javascript">
function showDiv() {
$("#submenu ul").css("display","block");
}
</script>