I have sidebar in this code :
<nav id="sidebar">
<ul class="list-unstyled components">
<li >
Home
</li>
<li>
Page1
</li>
</ul>
</nav>
Now I want to change the only content when user click sidebar button (Home or Page1)
and I already have a body for those 2 content (Home and Page1)
Try using this code. I wrote the explanation in the comments
//container is the selected element into which the content is to be loaded
var container = document.querySelector('#content'),
//these are the selectors for your links
linkHome = document.querySelector('#link__home'),
linkPage1 = document.querySelector('#link__page1');
//function that loads content
function loadContent(content) {
// AJAX request
var xhr = new XMLHttpRequest();
xhr.open('POST', content, true);
xhr.onload = function() {
var el = document.createElement('div');
el.innerHTML = this.response;
container.empty()
container.prepend(el);
}
xhr.send();
}
//After clicking the selector it will start the function loading the content. Enter the URL to your files in the appropriate place
linkHome.addEventListener('click', function(e){
loadContent('/URL/TO/home.html');
e.preventDefault() ;
});
linkPage1.addEventListener('click', function(e){
loadContent('/URL/TO/page1.html');
e.preventDefault() ;
});
<nav id="sidebar">
<ul class="list-unstyled components">
<li>
<!-- Add to your links ID attribure -->
<a id="link__home" href="#">Home</a>
</li>
<li>
<!-- Add to your links ID attribure -->
<a id="link__page1" href="#">Page1</a>
</li>
</ul>
</nav>
<div id="content"></div>
Related
I have an html page that displays admin links in nav bar as given:
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a id = "addUserAnchor" onclick="loadDoc()">Add User</a></li>
<li>View User</li>
<li>Count Users</li>
<li>Add Train</li>
<li>View Train</li>
<li>Count Trains</li>
<li>
<a class="btn btn-default btn-outline btn-circle" href="logout" aria-expanded="false" >Sign out</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
I am also calling ajax to display each of the links given within the page itself.
<script type="text/javascript" language="javascript">
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("displayDiv").innerHTML = this.responseText;
}
};
xhttp.open("GET", "addUser.html", true);
xhttp.send();
}
</script>
But once I click the Add User link, the navbar alignment gets ruined.
I have attached before and after pics for reference
Before clicking on the link
After Clicking link
I have a ajax data-attribute based tab code. Tabs content loads with ajax from PHP code by data-attribute. How I can set fade in/out effect on tabs content? I tried to do, but I'm not succeed.
PHP Code: https://ideone.com/ZMmk6f
$(document).ready(function() {
$("#tab-entry").load('index.php', {
tab: 1
});
$("#tab-entry").promise().done(function() {
$("#loading").hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
$(".tab-button").click(function() {
var tab = $(this).attr("data-tab");
var dl = $("#tab-entry").attr("data-load");
if (tab !== dl) {
$(this).parent("li").parent("ul").find(".active").removeClass("active");
$(this).parent("li").addClass("active");
$("#tab-entry").each(function() {
$(this).attr("data-load", tab).hide('normal').load('index.php', {
tab: tab
}).next("#loading").delay(500).show();
});
$("#tab-entry").promise().done(function() {
$("#loading").delay(500).hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab-header0">
<ul id="tab-header">
<li class="active">
<a class="tab-button" data-tab="1">1st Tab</a>
</li>
<li>
<a class="tab-button" data-tab="2">2nd Tab</a>
</li>
<li>
<a class="tab-button" data-tab="3">3rd Tab</a>
</li>
<li>
<a class="tab-button" data-tab="4">4th Tab</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab-entry" style="display:none" data-load="1"></div>
<div id="loading">Load ... </div>
</div>
I think this is what you are trying to do. I have notated and given a JSFiddle for reference. Substitute your page names and such in the ajax:
$(document).ready(function() {
function doAjax(content)
{
$.ajax({
// Send to
'url': 'index.php',
'data':{
'html': content
},
'method':'post',
'success':function(response) {
// On done, fade out the current content
$('#loading').fadeOut('slow',function() {
// On done, fade in new content
$(this).html(response).fadeIn('slow');
});
}
});
}
// Load first content
doAjax($('.active').find('a').data('tab'));
// Onclick of the tab
$(this).on('click','.tab-button',function(){
// Remove the instance of active
$('.active').removeClass('active');
// Traverse and add active
$(this).parents('li').addClass('active');
// Load the ajax for this tab
doAjax($(this).data('tab'));
});
});
JSFiddle Example.
I have a fairly basic navigation tab on a single-page website that shows/hides divs. However, when I refresh the page, it goes back to the landing "page" div instead of staying on the current tab. I am using the following JS to switch between tabs and I would like to keep using this method if possible:
var links = document.getElementById('navs').getElementsByTagName('a');
for(var i = 0, link; link = links[i]; i++) {
link.onclick = showContent;
// Hide content divs by default
var contentdiv = getContentDiv(link)
if (contentdiv == null){
continue;
}
contentdiv.style.display = 'none';
}
// Show the first content div
if(links.length > 0) showContent.apply(links[0]);
var current;
function showContent() {
// hide old content
if(current) current.style.display = 'none';
current = getContentDiv(this);
if(!current) return true;
current.style.display = 'inline-block';
return true;
}
function getContentDiv(link) {
var linkTo = link.getAttribute('href');
console.log(linkTo);
// Make sure the link is meant to go to a div
if(linkTo.substring(0, 2) != '#!') return;
linkTo = linkTo.substring(2);
return document.getElementById(linkTo);
}
I know it refreshes to the landing div because of
if(links.length > 0) showContent.apply(links[0]);
However, I was hoping to use this method and store the link iteration number in a variable called current_link and then be able to call if(links.length > 0) showContent.apply(links[current_link]); or even if(links.length > 0) showContent.apply(current_link);
I have tried a couple ways, but it ends up just saving either the first or last tab in the navigation bar. Also the page refreshes to the default div, but the url stays the same. EX. The URL is http://example.com/#!tab1 even though the page is displaying http://example.com/#!home
This is the html:
<nav class="navbar navbar-fixed-top" id= "navs" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-brand">
<a id="logo" href="#!home"><img id="logo-pic" src="images/name.png" alt="" width="50%" height="auto"></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar" id="navbar-collapse-1">
<ul class="nav navbar-right navbar-nav">
<li class="dropdown">
tab1
</li>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">tab2</a>
<ul class="dropdown-menu dropdown-menu-right pull-center">
<li>tab21</li>
<li>tab22</li>
</ul>
</li>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">tab3</a>
<ul class="dropdown-menu dropdown-menu-right pull-center">
<li>resume</li>
<li>tab31</li>
<li>tab32</li>
</ul>
</li>
<li>
tab4
</li>
<li>
tab5
</li>
</ul>
</div>
</div>
<!-- /.container -->
</nav>
The best way to persist page state is to leverage the url history.
E.g. when the user clicks on a tab, instead of just doing the navigation:
Create a hashchange event handler
window.onhashchange = () => { ... };
or:
window.addEventListener('hashchange', () => ...);
So you might do something like:
const navigate = () => open_tab(location.hash.substr(1)); // get rid of the '#'
window.addEventListener('hashchange', navigate);
You also want to navigate when the page loads:
navigate();
Now, when the user clicks a tab, or whatever, change the hash of the page location:
location.hash = "tab1";
This is a little extra work but the benefits are huge:
Refreshing the page works as expected
If the user bookmarks the page, they bookmark the state of the UI
Forward and backward navigation now work as expected.
I have jQuery custom accordion function and I would like to bind it to url that every hash tag given in url would open desired element.
I added var hash in function and tried to assign it to active variable but it did not work. Any ideas how to modify it?
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = jQuery(this);
if($ul.data('accordiated'))
return false;
jQuery.each($ul.find('ul, li>div'), function(){
jQuery(this).data('accordiated', true);
jQuery(this).hide();
});
jQuery.each($ul.find('a'), function(){
jQuery(this).click(function(e){
activate(this);
return void(0);
});
});
var hash = window.location.hash;
var active = jQuery('.accordion .active');
if(active){
activate(active, 'toggle');
jQuery(active).parents().show();
}
function activate(el,effect){
Query(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
jQuery(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
jQuery('.accordion ul').accordion();
A here is html structure:
<div class="accordion">
<ul class="accordion">
<li class="active">
Health<span></span>
<ul>
<li>Implants<span></span>
<p>Content</p>
</li>
<li>Protetic<span></span>
<p>Content</p>
</li>
</ul>
</li>
<li>Link 2<span></span>
<p>Content</p>
</li>
</ul>
</div>
On this page http://kimcolemanprojects.com/ I need to have a drop down menu that opens on click and closes again on click of same anchor. Like it works on this site http://angela-moore.co.uk/
This is my html for the menu so far:
<div class="left" id="nav">
<ul id="menu">
<li id="light">
Lighting + Video
<ul style="display: none;">
<li>Django Django</li>
<li>Suntrap</li>
</ul>
</li>
<li id="photo">
Photograms
</li>
<li id="about">
<a class="active" href="about.html">About</a>
</li></ul>
</div><!--end nav-->
As you can see I only need it to work within one list item. I need help writing the Javascript for this.
So when on index page the user can see three links lighting + video, Photograms, About. When user clicks on lighting + video a sub menu opens beneath with more links. Then it will close again if the user clicks again on lighting + video. The same can happen with each of the initial three links on the index page.
Quite Simple..
<script src="jquery.js"></script>
<div id="navigation">
<p>Menu</p>
<ul id="menu">
<li>Menu 1<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 2<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 3<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 4<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
This will be your HTML container etc, under this you will need your javascript to control that hiding and changing!! You can add some styling also if you feel artistic!
<script>
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';
$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();
hideMenu = function() {
$('#navigation ul#menu').hide();
$('#navigation').removeClass('open');
$('#toggle').text(showMenuText);
}
$('#toggle').click(function(event){
event.stopPropagation(); event.preventDefault();
$('#navigation ul#menu').toggle();
$('#navigation').toggleClass('open');
var toggleText = $('#toggle').text();
(toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);
});
$('ul#menu > li > a').click(function(event){
$this = $(this);
if( $this.hasClass('page') ) parent.location = $this.attr('href');
if( $this.hasClass('home') ) { parent.location = '/'; }
event.preventDefault(); event.stopPropagation();
if( $this.hasClass('active') ) var justclosed = true;
$('a.active').removeClass('active').next('ul').hide();
if(!justclosed) $this.addClass('active').next('ul').show();
});
</script>
This is a simple HTML Example and you can execute it how you like.