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.
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 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);
});
});
I want to add class active by clicking on li elements for that I have used jquery but it is not working. Here is the jquery
$('ul li a').click(function(){
$('ul li.active').removeClass('active');
$('ul li').addClass('active');
});
and here is my html,php code
<nav class="primary navbar navbar-default">
<ul class="term_list nav navbar-nav">
<li class="active">ALL</li>
<?php
foreach($terms as $k=>$tv) :
$termname = strtolower($tv->name);
$termname = str_replace(' ', '-', $termname);
?>
<li class="">
<?php echo $tv->name;?></li>
<?php endforeach; ?>
</ul>
</nav>
I am new in jquery. Thanks in advance.
$('ul li').addClass('active') adds the active class to all li.
Since you click a a tag, you want its li parent to get the active class, so :
$(this).parent().addClass('active') should work.
$('ul li a').click(function(){
$('ul li').removeClass('active');
$(this).parent().addClass('active');
});
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.
I have this div tags :
<div id="target-share">
<span class="to-admin">Admin</span>
<ul id="select-shareto">
<li data-val="0-1">
<span class="to-Finance">Finance</span>
</li>
<li data-val="1-1">
<span class="to-admin-private">Admin Private</span>
</li>
<li data-val="1-0">
<span class="to-ceo">CEO</span>
</li>
<li data-val="0-0">
<span class="to-ceo-private">CEO Private</span>
</li>
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->
and this JavaScript :
<script type="text/javascript">
$(document).ready(function($) {
$('ul li').click(function() {
$('input#shareto').val($(this).data('val'));
});
});
</script>
that JavaScript actually works when I'm using it with that div alone. but when I put it on my full code, that JavaScript doesn't work. I think that because there are more than one UL and LI tags on my code.
Now, the question is... how to apply that Javascript so that it can works ONLY for that div, even though there are other UL and LI tags.
Just use this instead targeting the div first then its contents
$('#target-share ul li')
JavaScript (not just Jquery) is all about scoping:
$('ul li').click(function() {
Causes that click to bind to every li in a ul so what you wanna do is scope the click down to a specific area of your page or set of elements across the page.
To scope it down to a specific element the best idea is to use a id like so:
$('#target-share ul li')
But to scope it down to a number of elements it is better to use a class like:
$('.target-share ul li')
Edit:
Also on() could be a good replacement here for click but it depends on where the HTML is being sourced and how it is being used, but thought I would make you aware of that function in case you didn't already know about it.
Select those ul li that have your data-val attribute:
$(function($) {
$('ul li[data-val]').click(function() {
$('input#shareto').val($(this).data('val'));
});
});