combine change active li and reload part of page javascript - javascript

I have two simple function on click in my page with js, first is to change css active in current li and the other is to reload content only .
change active li
$(".list li").on("click", function(){
$(".list li").removeClass('active');
$(this).addClass('active');
});
reload content only
$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function(){
var page = $(this).attr('href');
$('.content').load('Passtel/'+page);
return false;
});
the problem is, it just function reload content only works if there two are running, but I've tested each of function works as it is.
How can I make both of function works together?
this is my content structure
<!-- Menu -->
<div class="menu">
<ul class="list">
<li class="active">
<a href="dashboard">
<i class="material-icons">home</i>
<span>DASHBOARD</span>
</a>
</li>
<li>
<a href="check">
<i class="material-icons">text_fields</i>
<span>CHECK SITE</span>
</a>
</li>
<li>
<a href="datek">
<i class="material-icons">layers</i>
<span>DATA TEKNIS</span>
</a>
</li>
</ul>
</div>

You can accomplish that with only one function. Hope it helps!
jsbin.com
const ul = $(".list");
const list = ul.find('li');
ul.on("click", 'li a', function(e){
e.preventDefault();
list.removeClass('active');
$(this).parent().addClass('active');
var page = $(this).attr('href');
// replace this with your $('.content').load('Passtel/'+page);
$('.content').load('https://jgatjens.com/?' + page);
});

You can use something like this:
$(function () {
$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function () {
e.preventDefault();
$(".list li").removeClass('active');
$(this).parent().addClass('active'); //added parent() here
var page = $(this).attr('href');
$('.content').load('Passtel/' + page);
return false;
});
});
//$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function (e) {
e.preventDefault();
$(".list li").removeClass('active');
$(this).parent().addClass('active');
var page = $(this).attr('href');
//$('.content').load('Passtel/' + page);
return false;
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="active">
<a href="dashboard">
<i class="material-icons">home</i>
<span>DASHBOARD</span>
</a>
</li>
<li>
<a href="check">
<i class="material-icons">text_fields</i>
<span>CHECK SITE</span>
</a>
</li>
<li>
<a href="datek">
<i class="material-icons">layers</i>
<span>DATA TEKNIS</span>
</a>
</li>
</ul>
</div>

Related

Trying to add active class to menu item

I've spent 2 hours trying to create an active menu with no success, so I figured I would ask for help. I have an html menu, some js & css...
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$("#index li a").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});
.active { font-weight:bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='index'>
<div class='container'>
<div class='top'>
<h1><a href='/' title='The Maths Project'>The Maths Project</a></h1>
</div>
<ul class='section active_section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span>
<ul>
<li id='exhibit_106' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_3'>
<li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a>
</li>
<li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
When the user is on a specific page, the "a" link which they have clicked should become bold. However, for whatever reason it's not working.
I would greatly appreciate any help,
Regards,
Jack
I am not clear with your question but do you want set active class to menu, so you try the below code
$('#navlist a').click(function(e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$(this).addClass('selected');
});
.nav {
color: green;
}
.selected {
color: red;
}
.san ul li{
float:left;
margin-right: 25px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<div class="san">
<ul id="navlist">
<li><a class="nav" href="">Home</a></li>
<li><a class="nav" href="">About Us</a></li>
<li><a class="nav" href="">Services</a></li>
<li><a class="nav" href="">Contact</a></li>
</ul>
</div>
This line gets the page name:
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
you need to apply the same logic to each of your links to see if they match:
$("#index li a").each(function() {
var aurl = $(this).attr("href").substr($(this).attr("href")
.lastIndexOf("/")+1);
if (aurl == pgurl || aurl == '')
$(this).addClass("active");
})
Snippet below (tweaked to match as location.href won't match)
$(function() {
//var pgurl = window.location.href.substr(window.location.href
// .lastIndexOf("/") + 1);
var locationhref = "mysite.com/against-the-odds/introduction"
var pgurl = locationhref.substr(locationhref.lastIndexOf("/")+1);
$("#index li a").each(function() {
var aurl = $(this).attr("href").substr($(this).attr("href")
.lastIndexOf("/")+1);
//console.log(aurl)
if (aurl == pgurl || aurl == '')
$(this).addClass("active");
})
});
.active { font-weight:bold;color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='index'>
<div class='container'>
<div class='top'>
<h1><a href='/' title='The Maths Project'>The Maths Project</a></h1>
</div>
<ul class='section active_section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span>
<ul>
<li id='exhibit_106' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_3'>
<li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a>
</li>
<li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
Try following and check if it works.
$(function() {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$("#index li a").each(function() {
var href = "";
if($(this).attr("href") != '')
href = $(this).attr("href").substr(($(this).attr("href").lastIndexOf("/")+1);
if (href == pgurl || href == '')
$(this).addClass("active");
})
});
Just traverse the whole links and when any link will clicked then change the font-weight:normal to all links and then apply the font-weight:bold to currently clicked link.
$().ready(function () {
$("ul>li").click(function () {
$("ul>li").css("font-weight", "normal");
$(this).css("font-weight", "bold");
});
});

How to prevent auto scrolling when click tab

I'm working on a project and stuck on the tabs. No matter what I do the page scrolling down when I click a tab. This is my HTML:
<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
Quick Reports
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
My Folders
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
My Team Folders
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
Public Folders
</li>
</ul>
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
window.location.hash = target_panel_selector ;
});
});
};
And the style of .active-panel is display: block. I tried to use:
e.preventDefault();
or
tab.find('a').on('click', function(e){
alert("finally!!");
e.preventDefault();
});
and other stuff I found on the web but nope, not working.
<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
<a data-href="#quick-reports" class="tab" href="javascript:void(0)">Quick Reports</a>
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
<a data-href="#my-folders" class="tab" href="javascript:void(0)">My Folders</a>
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
<a data-href="#my-team-folders" class="tab" href="javascript:void(0)">My Team Folders</a>
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
<a data-href="#public-folders" class="tab" href="javascript:void(0)">Public Folders</a>
</li>
</ul>
<script>
function maketabActive($strElement)
{
$('.list li.active').removeClass('active');
$strElement.addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $strElement.find('a').data('href');
$(target_panel_selector).addClass('active-panel');
// Save selected tab index in session stroage.So after page refresh active tab will be maintained
sessionStorage.setItem('selected-tab', $strElement.index());
}
$(document).ready(function () {
// Check if selected tab is stored in session stroage
if (sessionStorage.getItem('selected-tab'))
{
//Make tab active based on index got from session stroage
maketabActive($(".tab1:eq(" + sessionStorage.getItem('selected-tab') + ")"));
}
});
var open_tab = function () {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function () {
maketabActive($(this));
});
});
};
</script>
I think that it's scrolling when you are setting the hash here
window.location.hash = target_panel_selector ;
Take a look at: https://stackoverflow.com/a/14690177/5612557
UPDATE
Try to add a return false into the click event and as suggest Diego change the hash method (but work only in a newer browser) like this:
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
//window.location.hash = target_panel_selector ;
if(history.pushState) {
history.pushState(null, null, target_panel_selector);
} else {
window.location.hash = target_panel_selector;
}
return false; // <-- add this line
});
});
};
You may try
event.stopPropagation();

Add/Remove class based on active URL

My HTML code looks like this:
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<ul class="nav side-menu">
<li>
<a>
<i class="fa fa-home"></i>home
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu" style="display: none">
<li>
Dashboard
</li>
<li>
dashbord2
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-edit"></i>form
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu" style="display: none">
<li>
general form
</li>
<li>
form validation
</li>
</ul>
</li>
</ul>
</div>
</div>
to add/remove class based on current url, i am using this:
$(function () {
var url = window.location.href;
$('#sidebar-menu a[href="' + url + '"]').parent('li').addClass('current-page');
$('#sidebar-menu a').filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
});
It works, but when i click this link
dashbord2
the class="current-page" doesn't change to current path url
How i fix this?
Your issue arises from the page not being reloaded when you click on the link with hash in it, while your code only executes on page load, or dom ready to be exact. The solution is to whether use window's hashchange event (not supported in < IE8) or, like #sirrocco mentioned, use click event with setTimeout to detect the change of hash:
function setCurrentMenuPage() {
var url = window.location.href;
var anchors = $('#sidebar-menu a');
anchors.parent('li').removeClass('current-page');
anchors.filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
}
$(function () {
setCurrentMenuPage();
$('#sidebar-menu a').on('click', function (e) {
if ($(this).attr('href').indexOf("#") >= 0) {
setTimeout(function () {
setCurrentMenuPage();
}, 100);
}
});
});
Hope that helps.

Clickable li but another li not clickable

I'm trying to figure this out, but for the life of me I'm confused. I have this:
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<li class="header">HEADER</li>
<!-- Optionally, you can add icons to the links -->
<li class="active"><a href="res/link.php"><i class='fa fa-link'></i>
<span>Links</span></a></li>
<li><i class='fa fa-link'></i> <span>Another Link</span></li>
<li class="treeview">
<a href="#"><i class='fa fa-link'></i>
<span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li>Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->
and my javascript:
var hash = window.location.hash.substr(1);
var href = $('.sidebar-menu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-10)){
var toLoad = hash+'.php #content';
$('#content').load(toLoad)
}
});
$('.sidebar-menu li a > .treeview li a').click(function(){
and I'm having trouble with this line:
$('.sidebar-menu li a > .treeview li a').click(function(){
I want the sidebar-menu menu clickable for all li's with a tags however when I click on the treeview menu, it fires up as an href link. I don't want that clickable.
Am I using the greater than less than symbols correctly in my JavaScript?
use this to prevent default href action
$(your selector).click(function(e) {
e.preventDefault();
// e for event
// preventDefault will stop default href action
});
edit: or you can handle all # links with this selector and preventDefault
$('.sidebar-menu a[href="#"]').click(function(e){
e.preventDefault();
});
selector a[href="#"] will select only A-tags with param href == "#", then just use preventDefault() on them to stop default href action
If you want only elements directly under your selector, use >.
This will select only a tags directly in the li tags that are directly in the sidebar-menu:
$('.sidebar-menu > li > a')
Your first onclick can look like this:
var href = $('.sidebar-menu > li > a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-10)){
var toLoad = hash+'.php #content';
$('#content').load(toLoad)
}
});
Your second one can just look like this:
$('.treeview li a').click(function(){
// do stuff.
});
It depends on how much nesting you'll do, but this will apply to all a tags in your treeview, regardless of nesting level.
EDIT:
I see you didn't want the tree clickable at all. In that case, you shouldn't use the a tag at all. Use something like a span with styling that makes it look like a link. Links (a) go somewhere. If you aren't going somewhere, don't use the a.
fiddle: https://jsfiddle.net/6njj7L9g/2/
snippet:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.sidebar-menu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-10)){
var toLoad = hash+'.php #content';
$('#content').load(toLoad)
}
});
$('.sidebar-menu > 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-4);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
.treeLink{
text-decoration: underline;
color: blue;
cursor: pointer;
}
<!-- Sidebar Menu -->
<section>
<ul class="sidebar-menu">
<li class="header">HEADER</li>
<!-- Optionally, you can add icons to the links -->
<li class="active"><a href="res/link.php"><i class='fa fa-link'></i>
<span>Links</span></a></li>
<li><i class='fa fa-link'></i> <span>Another Link</span></li>
<li class="treeview">
<a href="#"><i class='fa fa-link'></i>
<span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><span class="treeLink">Link in level 2</span></li>
<li><span class="treeLink">Link in level 2</span></li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->
Make href="" and not href="#" if you don't want it to be click-able.

Add active/selected state to link when click

I have a list of links i would like to add css class of "active" to, to show what is being displayed ie styled different
Fiddle:http://jsfiddle.net/zangief007/rj8g0yh4/7/
HTML:
<ul class="filter-desk" id="selectMe-desk">
<li class="category-1"><a class="active" href="#" data-page="category-1">Partners</a></li>
<li class="category-2"><a class="" href="#" data-page="category-2">Consultants</a></li>
<li class="category-3"><a class="" href="#" data-page="category-3">PA's</a></li>
</ul>
<ul class="category-1 group">
<li class="name">JOHN Smithe QC</li>
<li class="call">DDI <span>09 333 45335</span></li>
<li class="call">MOB <span>027 545 69873</span></li>
<li>david.heaney#heaneypartners.com</li>
</ul>
<ul class="category-3 group">
<li class="name">Barry White</li>
<li class="call">DDI <span>021 487 5896</span></li>
<li class="call">MOB <span>024 387 9854</span></li>
<li>susan.thodey#heaneypartners.com</li>
</ul>
<ul class="category-2 group">
<li class="name">Peter Pan</li>
<li class="call">DDI <span>231234</span></li>
<li class="call">MOB <span>234234</span></li>
<li>23423423423</li>
</ul>
JS:
$(function() {
var curPage = "";
$('.group').hide();
$('.category-1').show();
$("#selectMe-desk li a").click(function() {
var $a = $(this);
curPage = $a.data("page");
$(".group").hide().filter("."+curPage).show();
});
});
CSS
.active{
color:red;}
You have it almost working just add the lines in below see the fiddle
http://jsfiddle.net/rj8g0yh4/9/
$(function() {
var curPage = "";
$('.group').hide();
$('.category-1').show();
$("#selectMe-desk li a").click(function(e) {
var $a = $(this);
// hide currently active
$(".filter-desk .active").removeClass("active");
// make this one active
$a.addClass("active");
curPage = $a.data("page");
$(".group").hide().filter("."+curPage).show();
});
});

Categories

Resources