Currently i'm using AdminLTE template for my dashboard, but for the second drop down after i click the the second menu, that menu is not stay but it's closing.
When Cascade
After Click
Below is my html code. I'm using codeigniter so i use this anchor for .
<?php if($this->session->userdata('usergroup') == '1' or $this->session->userdata('usergroup') == '4') { ?>
<li class="treeview">
<i class="fa fa-link"></i> <span>Ticketing</span> <i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu">
<li><?php echo anchor('Bticketing/Ballticket',"<i class='fa fa-circle-o'></i> All Ticket") ?></li>
<li><?php echo anchor('Bticketingcalendar',"<i class='fa fa-circle-o'></i> Calendar") ?></li>
</ul>
</li>
<?php } ?>
What i want is after i click the all ticket, that menu is stay and show the page. how to do that ?
Note : the default one for active is <li class="treeview active"> but how to make it dynamic to all menu.
Here is code if you want to create active state on AdminLTE menu
var url = window.location;
// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
return this.href == url;
}).parent().addClass('active');
// for treeview
$('ul.treeview-menu a').filter(function() {
return this.href == url;
}).closest('.treeview').addClass('active');
Hope it will help
use this
<li class="treeview ticketing-tree">
<i class="fa fa-link"></i> <span>Ticketing</span> <i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu">
<li><?php echo anchor('Bticketing/Ballticket',"<i class='fa fa-circle-o'></i> All Ticket") ?></li>
<li><?php echo anchor('Bticketingcalendar',"<i class='fa fa-circle-o'></i> Calendar") ?></li>
</ul>
</li>
Add following JQuery code in your page
<script>
$(document).ready(function(){
var href = $(this).attr("href");
var segment = href.substr(href.lastIndexOf('/') + 1);
if(segment == 'Ballticket'){
$('.ticketing-tree').addClass('active');
}
}
</script>
On reference website you can see what you are missing actually...
Here onclick of sub-menu you need to add active class
$(document).ready(function() {
var url = window.location;
// Will only work if string in href matches with location
$('.treeview-menu li a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('.treeview-menu li a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
});
i am using
<li class="treeview <?php if($page == 'YourPage'){echo 'active';}?>" >
<ul class="treeview-menu">
<li></li>
<li></li>
</ul>
</li>
this is work in my project.
$page is variable from your page displayed.
Related
Using JQuery I want to check that each list item has the css class Complete. If so, i want to display a button, if not I want to keep the button hidden.
The classes are currently inserted dynamically using PHP when the page loads.
My code so far is;
<button id="steps-complete" hidden>Download Now</button>
<ul class="wb-steps">
<li class="<?php echo $class ?>">Step 1</li>
<li class="<?php echo $class ?>">Step 2</li>
<li class="<?php echo $class ?>">Step 3</li>
</ul>
<script>
jQuery( document ).ready(function() {
var steps = [];
jQuery( ".wb-steps li" ).each(function( index ) {
// successfully displays complete for each list item
console.log( index + ": " + jQuery( this ).attr('class') );
// if all stepa have 'complete' show button
$("#steps-complete").show();
});
});
</script>
You have the $class variable, and its value is set as the class of all list items.
Since you are using PHP to render the page, you can use the same variable to test if the button should be shown or not. So you wouldn't need jQuery in this case, you can just remove that part.
Here's what it would look like:
<?php
if (strpos($class, 'Completed') !== false) {
?>
<button id="steps-complete" hidden>Download Now</button>
<?php
}
?>
This works in your case because you set the same class to all items.
Hope this helps.
i've made a function to check of the children of the wb-steps have a class named john, if not then we show the steps complete
jQuery( document ).ready(function() {
if($(".wb-steps").children().not('.john').length = 0){
console.log("there was a div found with a class named john");
}else{
$("#steps-complete").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="steps-complete" hidden>Download Now</button>
<ul class="wb-steps">
<li class="<?php echo $class ?>">Step 1</li>
<li class="<?php echo $class ?>">Step 2</li>
<li class="<?php echo $class ?>">Step 3</li>
</ul>
You can simply count the elements to see if all of them have the complete class:
jQuery(document).ready(function() {
var $steps = $(".wb-steps li");
var show = $steps.length === $steps.filter('.complete').length;
$("#steps-complete")
.toggle(show)
.get(0)
.toggleAttribute('hidden', show);
});
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.
Here is my site (click here) I 'm trying to get the background image to change on hover of a menu item, and I'm getting close! However, when I hover, the menu disappears and the swap back to the original image is not smooth like I'd like. Any ideas on how I can improve this??
<?php
/*
Template Name: Page - All Projects
*/
?>
<?php get_header(); ?>
<?php
/* #Start the Loop
======================================================*/
if (have_posts()) : while (have_posts()) : the_post();
?>
<?php
/* #Get Fullscreen Background
======================================================*/
$pageimage = get_post_meta($post->ID,'_thumbnail_id',false);
$pageimage = wp_get_attachment_image_src($pageimage[0], 'full', false);
ag_fullscreen_bg($pageimage[0]);
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
//rollover swap images with rel
var img_src = "$pageimage";
var new_src = "";
$(".rollover").hover(function(){
//mouseover
img_src = $(this).attr('src'); //grab original image
new_src = $(this).attr('rel'); //grab rollover image
$(this).attr('src', new_src); //swap images
$(this).attr('rel', img_src); //swap images
},
function(){
//mouse out
$(this).attr('src', img_src); //swap images
$(this).attr('rel', new_src); //swap images
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
})(jQuery);
</script>
<div class="contentarea">
<div id='cssmenu'>
<ul>
<li class='has-sub '><a href='#'>Center Consoles</a>
<ul>
<li class='sub'><a href='http://takeitto11.com/striper2015/portfolio/2oo-cc/'><img class="rollover" width="1500px" height="1000px" rel="http://takeitto11.com/striper2015/wp-content/uploads/2014/10/Striper_HPS_1500x150010.jpg" />200 CC</a></li>
<li class='sub'><a class="220CC" href='#'>220 CC</a></li>
<li class='sub'><a class="2605CC" href='#'>2605 CC</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>Dual Consoles</a>
<ul>
<li class='sub'><a class="200DC" href='#'>200 DC</a></li>
<li class='sub'><a class="220DC" href='#'>220 DC</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>Walk Arounds</a>
<ul>
<li class='sub'><a class="200WA" href='#'>200 Walk Around</a></li>
<li class='sub'><a class="220WA" href='#'>220 Walk Around</a></li>
<li class='sub'><a class="2601WA" href='#'>2601 Walk Around</a></li>
<li class='sub'><a class="2901WA" href='#'>2901 Walk Around</a></li>
</ul>
</li>
</div>
<div class="clear"></div>
</ul>
Thank You!!
I wrote my site with php. I have the index file dynamically loading my pages from a pages folder. I have the nav menu in a separate file as well.
so I'm trying to have the text color highlighted when clicked, since I can't get the windowlocation to work. Because of the way I have it setup, the windowlocation returns /index.php with javascript or jquery. So I tried to keep it simple by just targeting the link.
<nav>
<ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--Script to add selected class to highlight active link-->
<script>
$(document).ready(function(){
$("ul li a").click(function(){
$("ul li a").removeClass('selected');
$("ul li a").addClass('selected');
});
});
</script>
my css is setup like this:
a.selected{color:#0066ff;}
I've tried throwing this code in every php file I created. Still nothing works. When I want an alert box to pop up with a message when a link is clicked, that works fine. why does this not work? Nothing changes when I run the code... Any suggestions?
If you reload the page by clicking each link then try
<nav>
<ul>
<li><a href="index.php?p=home" <?php (empty($_GET['p']) || $_GET['p'] == 'home') ? echo 'class="selected"' : ''?> >Home</a></li>
<li><a href="index.php?p=skills" <?php $_GET['p'] == 'skills' ? echo 'class="selected"' : ''?>>Skills</a></li>
<li><a href="index.php?p=about" <?php $_GET['p'] == 'about' ? echo 'class="selected"' : ''?>>About</a></li>
<li><a href="index.php?p=contact" <?php $_GET['p'] == 'contact' ? echo 'class="selected"' : ''?> >Contact</a></li>
</ul>
</nav>
Though you won't need the jQuery function.
If you don't want to reload the page then try this in your jQuery:
$(document).ready(function(){
$("ul li a").click(function(){
$("ul li a").removeClass('selected');
$(this).addClass('selected');
return false;
});
});
$('#menu li a').on('click', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
You need to add selected class in the clicked li element.
try like this:
$(document).ready(function(){
$("ul li a").click(function(){
$(".selected").removeClass('selected');
$(this).addClass('selected');
});
});
Actually you are redirecting when you are clicking in the li element. so jquery wil not be worked in this scenario.
it will work if you use one page application with out page reloading.
You can to do it by php like this:
// index.php
<?php
$page = isset($_REQUEST['p']) ? $_REQUEST['p'] : '';
switch($page) {
case 'skills' :
echo ' <ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
break;
case 'about' :
echo ' <ul>
<li><a href="index.php?p=home" >Home</a></li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
break;
case 'contact' :
echo ' <ul>
<li><a href="index.php?p=home" >Home</a></li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
break;
default:
echo ' <ul>
<li>Home</li>
<li>Skills</li>
<li>About</li>
<li>Contact</li>
</ul>';
}
Considering the case, that I have the following menu:
<ul>
<li>Index</li>
<li>About</li>
<li>Test<li>
</ul
And the menu is located in header.php . For each page (Index, About, Test), I have index.php, about.php and test.php, and all these files include the header.php !
What I need is adding a class to the li when we are on different pages. So if we are on the about.php, the class should be added on the second li.
Is there any way to do with jQuery, or what are the ways to handle this problem?
<ul>
<li><a href="index.php" <?php if($_SERVER['PHP_SELF']=="/index.php") echo 'class="someclass"'; ?> >Index</a></li>
<li><a href="about.php" <?php if($_SERVER['PHP_SELF']=="/about.php") echo 'class="someclass"'; ?> >About</a></li>
<li><a href="test.php" <?php if($_SERVER['PHP_SELF']=="/test.php") echo 'class="someclass"'; ?> >Test</a><li>
</ul>
This might not be the best method, but it does the task serverside.
I use something like this on one of my static HTML websites, which you can adapt:
<div id="navigation">
<?php $currentPath = $_SERVER['REQUEST_URI']; ?>
<?php $currentClass = ' class="current"'; ?>
<ul id="nav">
<li<?php if( $currentPath == "/" ) { echo $currentClass; } ?>>Home</li>
<li<?php if( $currentPath == "/market-challenge/" ) { echo $currentClass; } ?>>Market <br />Challenge</li>
<li<?php if( $currentPath == "/environmental-benefits/" ) { echo $currentClass; } ?>>Environmental <br />Benefits</li>
<li<?php if( $currentPath == "/technology/" ) { echo $currentClass; } ?>>Technology</li>
<li<?php if( $currentPath == "/contact/" ) { echo $currentClass; } ?>>Contact</li>
</ul>
</div>
Enjoy!
Create unique id for each of the li tags, the when the link is click on change the class if using jquery .attr function
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jQuery('.nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('active');
}
});
});
</script>
Replace '.nav li' with something more appropriate to your DOM structure. Such as if your wrapper div has a class of menu, do:jQuery('.menu li')
Add a session variable that stores current page (before including header file). Check this value in header file and assign class.
$_SESSION['currentPage'] = 'index';
$_SESSION['currentPage'] = 'about';
$_SESSION['currentPage'] = 'test';
in header,
<ul>
<li><a href="index.php" <?php if($_SESSION['currentPage']=="index") echo 'class="selected"' ?>>Index</a></li>
<li><a href="about.php" <?php if($_SESSION['currentPage']=="about") echo 'class="selected"' ?>>About</a></li>
<li><a href="test.php" <?php if($_SESSION['currentPage']=="test") echo 'class="selected"' ?>>Test</a><li>
</ul>
Using shorthand if for in my opinion cleaner code.
<?php $self = $_SERVER['PHP_SELF']; ?>
<ul>
<li><a href="index.php" <?php echo ($self == "/index.php" ? 'class="selected"' : ''); ?>>Index</a></li>
<li><a href="about.php" <?php echo ($self == "/about.php" ? 'class="selected"' : ''); ?>>About</a></li>
<li><a href="test.php" <?php echo ($self == "/test.php" ? 'class="selected"' : ''); ?>>Test</a></li>
</ul>
For Above issue, i have done solution on codebins using jQuery.
DEMO: http://codebins.com/bin/4ldqpa4
Here i have mentioned steps for executing above solution.
1) Include latest jQuery.js and querystring-0.9.0.js javascript files in header tag.
2) HTML
<div id="panel">
<ul class="menu">
<li>
<a href="#?page=0">
Index
</a>
</li>
<li>
<a href="#?page=1">
About
</a>
</li>
<li>
<a href="#?page=2">
Test
</a>
<li>
</ul>
</div>
3) CSS
ul.menu{
border:1px solid #112266;
background:#ccc;
}
ul.menu li{
list-style:none;
display:inline-block;
margin-left:10px;
padding:0px;
width:60px;
text-align:center;
}
ul.menu li:hover{
background:#343434;
}
ul.menu li a{
padding:0px;
color:#113399;
text-decoration:none;
}
ul.menu li:hover a{
color:#c6b744;
text-decoration:underline;
}
ul.menu li.active{
background:#343434;
}
ul.menu li.active a{
color:#c6b744
}
4) jQuery:
$(function() {
$(".menu li").click(function() {
setTimeout(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
}, 200);
});
});
On above solution, i have to set href link like #?page= because on bins to run java script with new page redirection is not possible on bins as well as i have to use setTimeout function because currently page is not redirected just change its query string on same page by #?page=.
If you want to use above solution in your project then put above jQuery script on common place so that it will executes on each menu links and sets current page link with active class.
Note: Remove setTimeout function Wrapper just keep there code line scripts inside it. It's look like as below:
$(function() {
$(".menu li").click(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
});
});