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>
Related
Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.
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.
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.
I am newbie for polymer. I just tried to add but getting blank screen. Did I missed any script or something?
Head
<script src="bower_components/polymer/polymer.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
body
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer></section>
<section id="section1" main></section>
</core-drawer-panel>
<script>
Polymer({
});
</script>
Actually, this is exactly how it should be.
Look in your inspector and you will see that there is a core-drawer-panel element with two section's. The core-drawer-panel doesn't have any visual and is just a container that holds your sub components.
Basically you need to put something in the sections to see something in the browser :)
Add the following to your code:
<style>
core-drawer-panel /deep/ section {
border:1px solid red;
}
</style>
This will visually highlight the sections.
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>