I am working on a single page website, I have following navigation bars:
<ul class="nav navbar-nav navbar-right">
<li><i></i>HOME</li>
<li><i></i>Accommodation</li>
<li><i></i>activities</li>
<li><i></i>>gallery</li>
<li><i></i>>contact</li>
</ul>
its working on the section id in the section tag. like
<section id="home">
<section id="accommadation">
how to give class="active" for navigation?
Try this
<ul class="nav navbar-nav navbar-right">
<li><i></i>HOME</li>
<li><i></i>Accommodation</li>
<li><i></i>activities</li>
<li><i></i>>gallery</li>
<li><i></i>>contact</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.nav_menu').click(function(){
$('.nav_menu.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
Its not dependent on Codeigniter or PHP as it is Single page website you need some client side javascript code or use jQuery like,
$(function(){
$('.navbar-nav a[href^=#]').on('click',function(e){
$('.navbar-nav a.active').removeClass('active');
$(this).addClass('active');
// if you want some animation for the element to scroll then use animate()
$('html,body').animate({scrollTop:$(this.href).offset().top},900);
});
});
Related
I am using the following code snippet from John Morris to investigate how Ajax might work for dynamically updating my menu:
<script>
$(document).ready(function(){
var trigger = $('#bs-example-navbar-collapse-1 ul li a'),
container = $('#navbar_content');
trigger.on('click', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
I also have this html code:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id='navbar_content'>
<li class="active">object1</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
which I would like to dynamically replace with this code when object 2 is clicked (to change the class of the selected hyperlink) - there is simlar code in object3.php and object4.php:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id='navbar_content'>
<li>object1</li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
Everything works well on my first click of object 2, but subsequent clicks of other links will not update the navbar. I think this is related to bindings but I can not figure out what needs to be done to fix this. All suggestions appreciated.
Since you are overwriting the links inside #navbar_content, you need to use event delegation - see https://learn.jquery.com/events/event-delegation/
So instead of binding to
var trigger = $('#bs-example-navbar-collapse-1 ul li a')
you need to bind to your container and use event propagation. Try with something like -
<script>
$(document).ready(function(){
var container = $('#navbar_content');
container.on('click', 'li a', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
i want to change the active class when each page loaded. my jquery code is
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li a.active').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
and my html code is
<ul class="nav nav-stacked bg-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li>Student</li>
<li>Teacher</li>
<li>Parent</li>
<li>Subject</li>
<li>Class</li>
<li>Exam</li>
<li>Marks </li>
<li>Exam Grade</li>
<li>Class Routine</li>
<li>Payment</li>
<li>Library</li>
<li>Transport</li>
<li>Notice Board</li>
<li>Settings</li>
<li>Profile</li>
</ul>
the problems are
1. it does not shows the first page ie. home.. as active. others are okey
2. it does not redirect to the url defined in the href.
The logic can be used in Codeigniter using PHP, I think you don't need to use jquery here like,
if you are calling admin_student function in controller then pass active class for that li like,
// in controller
$activeClass='admin_student';
And in the view page use a switch-case like,
$activeClass=isset($activeClass) ? $activeClass : 'admin_home';
$admin_student='';//make variables for all li
$admin_home='';
switch($activeClass){
case 'admin_student':
$admin_student='active';
break;
....
default:
$admin_home='active';
break;
}
And add this variable to your li like,
<li class="<?php echo $admin_home;?>">Home</li>
<li class="<?php echo $admin_student;?>">Student</li>
This will solve your first problem, and the second problem occurs because of using e.preventDefault() so don't use it if you want redirection of URLs.
Got a problem with my WordPress menu. After I insert the jquery my links (in the menu and in sidebars won't work. What to do? Thank you!
My code:
HTML
<ul class="menu">
<li class="menu-item">
Link text
<ul class="sub-menu">
<li><a>Text</a></li>
<li><a>Text</a></li>
<li><a>Text</a></li>
</ul>
</li>
</ul>
jQuery
$(document).ready(function(){
$('li.menu-item').each(function() {
var $dropdown = $(this);
$($dropdown).click(".menu-item a", function(e) {
e.preventDefault();
$ul = $("ul.sub-menu", $dropdown);
$('ul.sub-menu').toggle();
$("ul.sub-menu").not($ul).hide();
return false;
});
});
$('html').click(function(){
$("ul.sub-menu").hide();
});
});
There might be a problem with the event propagation. If a link within a sub-menu is clicked the click event propagates to the surrounding menu-item and triggers your JS code.
Please try to add this code to prevent the propagation effect:
$( "ul.sub-menu a" ).click(function( event ) {
event.stopPropagation();
});
please fix the issue by replacing below script
<li class="menu-item> to <li class="menu-item">
In my code which is using bootstrap, I got a problem.
I am using JS code shown as below.
$( "li:eq(1)" ).click(function() {
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
It is to control the div.
<div class="container" id=header-nav>
<a class="brand" href="index.php"></a>
<div class="nav-collapse collapse" >
<ul class="nav">
<li class="active">Home</li>
<li>test</li>
.......
<div class="container" id="middle"> </div>
When I click the test button, the link will change to test.php# but nothing change. Click again, it can load into the test.php.
The problem is the link is test.php, the code not work. when test.php# , it work. And I would like to know why.
Thanks a lot.
The problem is because you have attached the handler to the li element, but the a element is clicked, and then transfers the page. Try this instead:
$("li:eq(1) a").click(function(e) {
e.preventDefault();
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
});
The preventDefault() stops the default behaviour of the link, meaning your AJAX request gets executed as required.
since you want to use $.get (AJAX), you don't have to give the url to <a> element inside your <li> element,
you have to give the attribute href inside <a> element this value: javascript:void(0) Or #,
your html code would be:
<div class="container" id=header-nav>
<a class="brand" href="index.php"></a>
<div class="nav-collapse collapse" >
<ul class="nav">
<li class="active">Home</li>
<li>test</li>
.......
<div class="container" id="middle"> </div>
or you have to prevent default action for the element to prevent reloading url by adding:
event.preventDefault() in you onclick event and your js code would be:
$( "li:eq(1)" ).click(function(e) {
event.preventDefault();
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
I asign class to element but after loading page the class is removed.
I use this function in my script.js
$('#main-nav li ul li a').click(function(){
$('#main-nav li ul li').children().removeClass('current');
$(this).addClass('current');
});
and this in my PHP view:
<ul id="main-nav"> <!-- Accordion Menu -->
<li>
<a href="#" class="nav-top-item no-submenu"> <!-- Add the class "no-submenu" to menu items with no sub menu -->
On site
</a>
</li>
<li>
<a href="#" class="nav-top-item current"> <!-- Add the class "current" to current menu item -->
Programs
</a>
<ul>
<li>Manage country</li>
<li>Manage channel</li>
<li>Manage Comments</li>
<li>Manage Categories</li>
</ul>
</li>
</ul> <!-- End #main-nav -->
If I use this <li>Manage</li> the class current is added but after load is removed.
How can I add class if I use php code after load page or have you any solution ?
jQuery is scripting language ... When loading the page it will definitely remove your previous functionality as click event doesn't fired so it won't work....
After loading the page just put some logic through PHP ....
with JQuery you can execute code when page is loaded :
$(document).ready(function(){
// your code here
});
this should work:
$(document).ready(function(){
$('#main-nav li > a').click(function(e){
$('#main-nav a').removeClass('current');
$(e.target).addClass('current');
});
});
if it doesn't work, try this block of script before </body> at the end of your document:
<script type="text/javascript">
$(function(){
$('#main-nav li > a').click(function(e){
$('#main-nav a').removeClass('current');
$(e.target).addClass('current');
});
});
</script>
this will force the execution after all the html is rendered by the php
First of all wrap your function in a $(document). ready(function () {}) and use the $('#main-nav'). on('click', 'li > a', function () {} ) approach inside of it. . on() is better to attach event listener to an dynamically loaded elements.