We Keep Coding

How can I hide nav bar when on top of page

Can anyone help me out with a small responsive web project I'm currently doing?
I want to hide the menu nav bar when the user is on the top most part of the page, and only show it when the user starts scrolling down (on the mobile version), but have no idea how to, below are my code segments (mostly based on W3school template as I'm trying to learn web page making and it is the most reliable source I've found so far):
<!-- Navbar -->
<div class="w3-top">
<ul class="w3-navbar w3-sea-green w3-card-2 w3-left-align">
<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
<a class="w3-padding-large" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
</li>
<li>HOME</li>
<li class="w3-hide-small">DOWNLOAD</li>
<li class="w3-hide-small">ABOUT</li>
<li class="w3-hide-small">CONTACT</li>
</ul>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
<ul class="w3-navbar w3-left-align w3-sea-green">
<li><a class="w3-padding-large w3-hover-text-sea-green-invert" href="#download">DOWNLOAD</a></li>
<li><a class="w3-padding-large w3-hover-text-sea-green-invert" href="#about">ABOUT</a></li>
<li><a class="w3-padding-large w3-hover-text-sea-green-invert" href="#contact">CONTACT</a></li>
</ul>
</div>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
// When the user clicks anywhere outside of the modal, close it
var modal = document.getElementById('ticketModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!--Header image-->
<div class="mySlides w3-display-container w3-center">
<img src="pics/header_img.png" style="width:100%; pointer-events:none;" draggable="false">
</div>
Am really appreciating any help, many thanks!

Always use:
.classList.add() // To add the class
.classList.remove() // To remove the class
This makes your code:
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.classList.add("w3-show");
} else {
x.classList.remove("w3-show");
}
}
And finally, please don't follow W3Schools and you end up like this.

function change(){
navbar=document.getElementsByClassName("w3-top")[0];
if(window.scrollTop>20){
//show
navbar.style.display="block";
}else{
//hide
navbar.style.display="none";
}}
window.onload=window.onscroll=change;
On page load or if the user scroll, check if the user scrolled down...

you have to detect when the user scroll or not and if not scroll add class hidden and if scroll remove class hidden.
$(window).scroll(function (){
var scroll = $(window).scrollTop();
if (scroll >=20) {
$('.w3-top').removeClass('hidden');
}
else {
$('.w3-top').addClass('hidden');
}
});
the css
.hidden {
display: none;
}

Toggle classes onlick from multiple instances

So I ran into a problem regarding my toggle function. In my current case I would like to be able to turn parts of the web-based interface on and off (display:none and block). I got it to work from one of the windows but the snag I hit was when I added multiple calls to the same functions. I reverted from using getElementById and used getElementsByClass instead. This caused no problems as far as I know of. When I added the second menu however things started to malfunction.
I'll paste my code and a jsFiddle down below.
My goal is to make the onclick on the <li> toggle the other <li> and toggle the map/cesium at the same time.
HTML
<div id="map">
<nav id="primary_nav_wrap">
<ul>
<li>=
<ul>
<li><a class="buttonMap" href="#" onclick="toggleMap('none')">Toggle Map</a></li>
<li><a class="buttonMap2" href="#" onclick="toggleMap('block')">Toggle Map</a></li>
<li><a class="buttonCesium" href="#" onclick="toggleCesium('none')">Toggle Cesium</a></li>
<li><a class="buttonCesium2" href="#" onclick="toggleCesium('none')">Toggle Cesium</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="cesium">
<nav id="primary_nav_wrap">
<ul>
<li>=
<ul>
<li><a class="buttonMap" href="#" onclick="toggleMap('none')">Toggle Map</a></li>
<li><a class="buttonMap2" href="#" onclick="toggleMap('block')">Toggle Map</a></li>
<li><a class="buttonCesium" href="#" onclick="toggleCesium('none')">Toggle Cesium</a></li>
<li><a class="buttonCesium2" href="#" onclick="toggleCesium('block')">Toggle Cesium</a></li>
</ul>
</li>
</ul>
</nav>
CSS (minimal but so JsFiddle gets the point across)
#map{
height:100px;
width:100px;
background-color:red;
}
#cesium{
height:100px;
width:100px;
background-color:blue;
}
JS
function toggleMap(display) {
var elem = document.getElementById("map");
var buttonMap = document.getElementsByClassName("buttonMap");
elem.style.display = display;
buttonMap.style.display = display;
if (buttonMap.style.display === 'none'){
buttonMap2.style.display = 'block';
}
else if (buttonMap.style.display === 'block'){
buttonMap2.style.display = 'none';
}
};
function toggleCesium(display) {
var elem = document.getElementById("cesium");
var buttonCesium = document.getElementsByClassName("buttonCesium");
elem.style.display = display;
buttonCesium.style.display = display;
if (buttonCesium.style.display === 'none'){
buttonCesium2.style.display = 'block';
}
else if (buttonCesium.style.display === 'block'){
buttonCesium2.style.display = 'none';
}
};
In the JsFiddle, the colored blocks should disappear.
Any help is appreciated!
(PS! We can safely assume users will be using up-to-date browsers)

https://jsfiddle.net/rz4wu4qd/18/
Somewhat working solution as mentioned in comments.
getElementsByClassName returns an array, so you need to iterate through it, for example with a for loop.

javascript to swap content on page

here is the jsfiddle of what im trying to accomplish..
http://jsfiddle.net/#&togetherjs=08LnngLQ1M
im trying to make the content in an html file swap in and out. The java script file is set up to apply the slide function to my div. Please show me what I need to add to the javascript in order to allow the information to swap in and out as well as display appropriately.
first my javascript file then under is the index.html file. also displayed the css in the head in order to show how i am trying to hide the content.
please show me how to implement the javascript i am lacking and then make appropriate changes to my html and css if necessary.
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#navigationMenu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#navigationMenu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
<style type="text/css">
#page1, #page2, #page3, #page4, #page5 {
display: none;
overflow:hidden;
}
</style>
</head>
<body>
<div id="top">
</div>
<!-- The navigation css is in styles.css -->
<div id="main">
<ul id="navigationMenu">
<li>
<a class="home" href="#home">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#about">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="#services">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="#portfolio">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="#contact">
<span>Contact us</span>
</a>
</li>
</ul>
</div>
<!-- The css for the main area is in css.css-->
<!-- The wrapper and the content div control the jquery slide up effect -->
<div id="wrapper">
<div id="content">
<!-- The 5 pages content divs will display in this area -->
</div>
</div>
<!-- The actual content I want to switch in and out of the panel, this is hidden -->
<div id="page1" class="pages">
<p>1 Whole bunch of text 1</div>
<div id="page2" class="pages">
<p>2 Whole bunch of text 2</div>
<div id="page3" class="pages">
<p>3 Whole bunch of text 3</div>
<div id="page4" class="pages">
<p>4 Whole bunch of text 4</div>
<div id="page5" class="pages">
<p>5 Whole bunch of text 5</div>

I suggest that you change your html so that your "pages" have ids that actually correspond to the href of the associated menu items:
Home
...
<div id="home" class="pages"><p>1 Whole bunch of text 1</p></div>
Then you can implement your slide animation paging thing something like this:
$(document).ready(function() {
$("#navigationMenu a").click(function(e) {
e.preventDefault();
var item = this.href.split("#")[1];
$("#content").slideUp(function() {
$(this).empty()
.append($("#" + item).clone().show())
.slideDown();
});
});
});
Note that there is no need to use .load() because you have all of the content already on the page. You can just empty the container and then append a clone of the relevant content.
Demo: http://jsfiddle.net/FtS8u/1/
Or in my opinion a neater option would be to move all of the content into the #content div to start with, show the #home "page" by default, and then just hide and show the pages in place:
$(document).ready(function () {
$("#navigationMenu a").click(function (e) {
e.preventDefault();
var item = this.href.split("#")[1];
$(".pages:visible").slideUp(function () {
$("#" + item).slideDown();
});
});
$("#home").show();
});
Demo: http://jsfiddle.net/FtS8u/2/
And a last thing to consider: if you remove the .pages { display : none; } CSS and instead use jQuery to hide the pages by adding this to the start of your document ready:
$(".pages").hide();
Then you'll still get the same effect: http://jsfiddle.net/FtS8u/7/ - except that if the user happens to have JavaScript disabled the page will still work because then the default anchor navigation will jump down to the associated div: http://jsfiddle.net/FtS8u/8/

How to change a colore of menu bar when user click on net link

I want yo Change a color of nave when user click on other nav button i don't no how can i do this by code here is a image below:
when user click in abut then that color should be change in orange and home page active orange color will be black and about will be orange. i want to do this by JavaScript. here is a code lines below.
<div class="container clearfix">
<nav id="menu" class="navigation"
role="navigation" style="float: left">
Show navigation
<ul id="nav">
<li class="active">Home</li>
<li>About</li>
<li>T-P</li>
<li>M-P</li>
<li>B-M</li>
<li>R-B</li>
<li>L-C</li>
</ul>
</nav>
</div>
i use this JavaScript for change this.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
} )
//Add the clicked button class
$(this).addClass('active');}
//Attach events to menu
$(document).ready(
function()
{
$(".menu li").click(make_button_active);
} )
</script>
but nothing happen please let me know how can i do this. anyone have any Idea?
Thank You

There are a number of issues here. For one menu is the value of an id so you would need to reference it in jquery with $('#menu"). Below is a working version of your code. I had to remove the href attributes to achieve the desired style change with minimal effort. You now have two choices:
Use this code and swap content dynamically using javascript and css display property
On each page in your site modify the markup, to set the active nav item; with this approach the javascript is not necessary.
<htmL>
<head>
<script type="text/javascript">
var make_button_active = function(){
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index){
$(this).removeClass('active');
});
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(function(){
$("li").click(make_button_active);
});
</script>
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<div class="container clearfix">
<nav id="menu" class="navigation"
role="navigation" style="float: left">
Show navigation
<ul id="nav">
<li class="active"><a>Home</a></li>
<li><a >About</a></li>
<li><a >T-P</a></li>
<li><a >M-P</a></li>
<li><a >B-M</a></li>
<li><a >R-B</a></li>
<li><a >L-C</a></li>
</ul>
</nav>
</div>
</body>
</html>

Hi more simple way to chafe class in li
string thisURL = this.Page.GetType().Name.ToString();
switch (thisURL)
{
case "home_aspx":
lihome.Attributes.Add("class", "Active");
break;
case "support_aspx":
lisupport.Attributes.Add("class", "Active");
break;
case "logout_aspx":
lilogout.Attributes.Add("class", "Active");
break;
}
need to do this code on load event of page and it will working that vote for this solution=)

toggle effect motion using javascript or jquery

I fund a toggle code that works perfectly, but I'd like to add a speed effect to slow it down a bit it when opening and closing. I did try to insert this code on it <p onclick="javascript:setTimeout(toggle(), 3000);">OPEN</p> instead of <h1>OPEN</h1> but without success.
I've a joomla website, some plugins use jquery. It seems that Jquery could do the trick with something like .toggle( [duration ] [, complete ] ) I've seen that JQ is a "Javascript's library", so it should work with the code bellow but no idea how I should insert it. I don't know if "simply" adding jquery code inside the code below would work, or if I should add something else in the FTP website some XX.js files (as I have seen in some tuto). I'm lost...
<script type="text/javascript">
// <![CDATA[
function toggle(id, link) {
var elem = document.getElementById(id);
var text = document.getElementById(link);
if (elem.style.display != "none") {
elem.style.display = "none";
text.innerHTML = "show";
} else {
elem.style.display = "block";
text.innerHTML = "hide";
}
}
// ]]>
</script>
<ul>
<li><a id="displayText" href="javascript:toggle('toggleText', 'displayText');">show</a>
<div id="toggleText" style="display: none;">
<h1>OPEN</h1>
</div></li>
<li><a id="toggler2" href="javascript:toggle('secondText', 'toggler2');">show</a>
<div id="secondText" style="display: none;">
<h1>OPEN</h1>
</div></li>
</ul>
thanks!

Since you are using jquery make some minor changes to the mark up for ease of use
<ul id="container">
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
</ul>
Then
$(function(){
$('#container').on('click', 'a.opener', function(){
$(this).next().toggle('slow')
});
});
Demo: Fiddle

for joomla :
1/ add in the index.php just after the tag this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript"></script>
2/ create in the ftp a file called app.js and write in it:
var $j = jQuery.noConflict();
$(function(){
$('#container').on('click', 'a.opener', function(){
$(this).next().toggle('slow')
});
});
3/ in the article source code :
<ul id="container">
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
</ul>