I have to pass the id of selected tab when another action occurs
<ul class="nav nav-tabs" id="myTab">
<li <?php if($all_index== 1){?> class="active" <?}?> >All</li>
<li <?php if($select_index== 1){?> class="active" <?}?>>Selected</li>
<li <?php if($reject_index== 1){?> class="active" <?}?> >Rejected</li>
</ul>
I have a dropdown to filter the tab data..First tab is always active.
If i want to filter the second tab,then i click the dropdown the action occur..but the tab selected is first one..I want the Second one
If you are looking to capture the value on form submit, create a hidden field in your form. So every time on click, capture the id of the tab and store in hidden field.
<input type="hidden" id-"hidden" name="tab-selected" />
In script
$(document).on("click","#myTab a",function() {
var sel = $(this).attr("href");
$("#hidden").val(sel);
});
so on form post, you will get the selected tab's value.
Here is the fiddle demo
In View
<ul class="nav nav-tabs" id="myTab">
<li <?php if($tab_index== 1){?> class="active" <?}?> >All</li>
<li <?php if($tab_index== 2){?> class="active" <?}?>>Selected</li>
<li <?php if($tab_index== 3){?> class="active" <?}?> >Rejected</li>
</ul>
in Controller
public function FunctionName($value)
{
# code...
// pass which id should be active alone with data
}
Related
I have 5 menu in my page,first time when login its redirecting to my dashboard, the #menu1(ABOUT) is the my current class, its fine but i have #menu4(CONTACT) where i have one html form and in form submit it must redirect to the same menu but the problem after submitting the form its going back to 1st menu(ABOUT) because 1st menu is the active class.
So how to make my The menu(CONTACT) is also active, means if user submit the form it must be in the same page/menu,it should not redirect to the 1st menu(CONTACT)
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#home">home</a></li>
<li class="active"><a data-toggle="tab" href="#menu1">ABOUT</a></li>
<li><a data-toggle="tab" href="#menu2">test</a></li>
<li ><a data-toggle="tab" href="#menu4" >CONTACT</a></li>
<li><a data-toggle="tab" href="#menu3" >Analytics</a></li>
</ul>
try this:
$('form').submit(function(){
var Location = $(location). attr("href");
Location += $('.nav li.active a').attr('href');
window.location.href = "Location";
});
Html:
<form method="post">
<input type="submit" name="sub" value="Enter">
</form>
you can try <?php echo $_SERVER['PHP_SELF']; ?> in action and add active class on menu, if possible
I'm adding an 'active' class to clicked menu bar items but it is removing when page goes to other link after click.
This is my HTML:
<ul class="nav navbar-nav">
<li class="active">
News / Article
</li>
<li>
Players
</li>
<li>
Forum
</li>
<li class="dropdown">
Rules <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
</ul>
</li>
<?php if(!empty($session)){ ?>
<li>
Profile
</li>
<?php } ?>
<li>
Gallery
</li>
<?php if(empty($session)){ ?>
<li>
Register
</li>
<?php } ?>
</ul>
Javascript:
$(".nav li").click(function () {
$(".nav li").removeClass('active');
$(this).addClass('active');
});
You cannot do that with only that javascript. You need to get data from url and decide which menu to be active.
First get current url in page. And do following operation;
$(".nav li").removeClass('active');
var urlType = document.URL.split("/");
$("a[href*='/" + urlType + "']").addClass("active"); // contains /players
When you go this url;
http://yourdomain.com/players;
the js will be;
$(".nav li").removeClass('active');
$("a[href*='players']").addClass("active");
And Players menu will be active
You are re-loading the site, so it load the HTML like the first time.
So you only will have the 'active' class until you don't leave or reload that website.
A way to fix it , load the content by Ajax, and the menu will not change.
I hope it will help you.
The active class probably removes because you're loading a new view when you click on a link and this loads some other HTML.
I'm looking for a method to use CSS to change the display properties to the nav element related to the page that is currently active.
For example, if the user is on the Home page, the 'Home' button in the navigation is styled differently.
I use the following code:
<li class="active">
Home
</li>
<li>
page1
</li>
<li>
page2
</li>
when I selecte page1 or page2, the home button remain active!
Use this
var $links = $('li');
$links.click(function(){
$links.removeClass('active');
$(this).addClass('active');
});
DEMO
<li <?php if($page=='home'){?> class="active"<?php }?>>
Home
</li>
<li <?php if($page=='page1'){?> class="active"<?php }?>>
page1
</li>
<li <?php if($page=='page2'){?> class="active"<?php }?>>
page2
</li>
As I understand - You have a static pages.
If so - just add class="active" for corresponding <li> in page1.html and page2.html
In page1.html it will be 2nd <li> element but in page2.html - last one
I'm using a form with multiple submits to detect which button is clicked, but the list does not appear properly in a jQuery Mobile menu. I want it to appear nicely like in the JQM docs (click the "Menu" button), but it instead appears like in this picture. (In case it isn't obvious, the black boxes were me editing the names out.) What do I need to do to get it to collapse the submit buttons into a nice list like in the docs?
Navigate to different section
<div data-role="popup" id="navmenu">
<form name="navmenuform" action="X.php" method="post">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<?php foreach ($array as $category) { ?>
<li><input type="submit" name="nav<?php echo $category[0]; ?>" value="Section <?php echo $category[0] . ": " . $category[1]; ?>"></li>
<?php } ?>
</ul>
</form>
</div>
The short answer is don't put submit buttons (at least visible) in listview items.
The problem is that buttons and lisview item's content area have their styling padding, margin, border, etc. Instead of fighting with styling you can just leverage what jQM gives you.
IMHO the simplest way to achieve what you want, if you can live with GET instead of POST, is to ditch the form and populate list items with anchors that href to appropriate urls with parameters and use rel="external" like this:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li><a rel="external" href="X.php?nav1=Section 1:1">Section 1:1</a></li>
<li><a rel="external" href="X.php?nav2=Section 1:2">Section 1:2</a></li>
<li><a rel="external" href="X.php?nav3=Section 1:3">Section 1:3</a></li>
<li><a rel="external" href="X.php?nav4=Section 1:4">Section 1:4</a></li>
</ul>
</div>
If you want to be able to POST your form you can utilize a hidden input and a bit of JS code.
Given that you'll produce the following markup:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<form name="navmenuform" action="X.php" method="post" data-ajax="false">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li>Section 1:1</li>
<li>Section 1:2</li>
<li>Section 1:3</li>
<li>Section 1:4</li>
</ul>
<input id="param" type="hidden" name="" value="">
</form>
</div>
Don't forget to put data-ajax="false" on your form tag, otherwise jQM by default will try to submit the form via ajax.
You then use click event on a list item, change name and value in your hidden input and submit the form:
$(document).on("pageinit", "#page1", function(){
$("#navmenu ul li a").click(function(e){
//Prevent default behavior since we need to submit the form instead of following the link
e.preventDefault();
//Change name and value attributes in out hidden input
$("#param").attr("name", $(this).attr("href")).val($(this).text());
//Submit the form
$("form[name=navmenuform]").submit();
});
});
Here is jsFiddle
I'm still new to Front End Development and working on my first really big site / wordpress blog.
So my question is this, I have a Menu that will be the same on all pages on the site. However each section will have it's name highlighted in the Menu Nav.
Current Nav_Bar markup:
<div id="nav_bar">
<ul class="nav">
<li class="nav_li">Home</li>
<li class="nav_li">About</li>
<li class="nav_li selected">Blog</li>
<li class="nav_li">Book</li>
<li class="nav_li">Media</li>
<li class="nav_li">Events</li>
<li class="nav_li">Services</li>
<li class="nav_li">Contact</li>
<li class="search">
<input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />
</li>
<li class="search_btn">
<div class="search_button">Go</div>
</li>
</ul>
</div><!-- nav_bar -->
Now I've build pages before using this simple PHP code: <?php include("menu.php"); ?>
However, how would you guys 1st: organize this menu to accept and incoming value, like menu.php+select="home" and 2nd how would you pass in that value to add a class of selected to one of the Menu items?
First off your class on li "nav_li" is redundant and could be removed. Use .nav li in place to ref these list items with less lines of code. This works both as a JQuery selector and CSS selector. Second, to answer you actual question; I would use the active class as follows:
// Assuming the following html. <ul class="nav"><li>About</li></ul>
$('.nav li').click(function() {
$('.nav li.active').removeClass('.active');
$(this).addClass('.active');
window.location = $(this).children('a').attr('href');
return;
});
Now in the area where you keep your navbar you check to see if the current url is active by the following:
<?php
$currentUri = $_SERVER['REQUEST_URI'];
<ul class="nav">
<li class="<?php if($currentUri == '/about.php') {echo 'active';} ?>">About</li>
</ul>
Add the condition in the php script to each list item.
Sincerely,
Kevin
I assume you want your 'incoming value' for the purpose of highlighting a menu item (rather than displaying a particular page)? It's unnecessary, because the browser already knows what page it's on.
This is one way of highlighting the current page in jQuery:
$('.nav li a').each(function(){
var link = $(this).attr('href'),
current_page = location.href;
if(current_page.indexOf(link) != -1) {
$(this).addClass('current-page');
}
});
Before the include, set a value in some parameter, like $page = 'blog' and then in the menu.php
<li class="nav_li<?php echo $page === 'blog' ? " selected='selected'" : "" ?>">Blog</li>
This can be done using javascript
var url=document.location.toString();
if(url=="http://www.something.com/some.php")
{
//code to add class to specific link
}
else if(url=="http://www.something.com/someelse.php")
{
//code to add class to specific link
}
You can also do this on server side in menu.php
$url=$_SERVER['REQUEST_URI']
Then check the url and add class name accordingly
If I'm understainding what you're after, maybe something like:
index.php:
<?php
$page = 'home';
// page code ...
?>
about.php:
<?php
$page = 'about';
// page code ...
?>
etc, etc...
Then menu.php tweaked slightly:
<div id="nav_bar">
<ul class="nav">
<li class="nav_li home">Home</li>
<li class="nav_li about">About</li>
<li class="nav_li blog">Blog</li>
<li class="nav_li book">Book</li>
<li class="nav_li media">Media</li>
<li class="nav_li events">Events</li>
<li class="nav_li services">Services</li>
<li class="nav_li contact">Contact</li>
<li class="search">
<input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />
</li>
<li class="search_btn">
<div class="search_button">Go</div>
</li>
</ul>
</div><!-- nav_bar -->
and finally some javascript:
<script>
$(function () {
$('#nav_bar li.<?=$page?>').addClass('selected');
});
</script>
That assumes jQuery is being used, but it isn't necessary obviously, the same could be done with straight javascript.