I want to do is a Navbar is stored in a file called index.php. This is the main page which shows up. When the user clicks a tab in the Navbar, in the body part, another php shows up and the tab becomes active. When the user clicks an other tab, the "active" should Switch Places. I'm having trouble with showing the php and switching the active class. Any Help?
What I was able to do:
There's a script above the navbar code which describes the path of the .php file and tells to show it where it is bounded with.
The code:
<script type="text/javascript">
function homeshow() {
$.get("index.php");
return false;
}
function aboutshow() {
$.get("about.php");
return false;
}
</script>
One of Navbar's link or Navigation Button should enable the Javascript/jQuery code to show up between <p></p> tags located in the body. I've tried this:
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#" class onclick="homeshow();">Home</li>
<li><a href="#" class onclick="aboutshow();">About</li>
</ul>
If your trying to check the active tab in a standard click event then the active class wont have been added to the most recently selected tab until after the event.
Subscribe to the bootstrap show.bs.tab instead.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
See here for more info.
You can use jQuery or javascript code to change the active state from the previous li to the one you clicked on.
Example with jQuery:
$('ul.navbar-nav a').on('click', function () {
$('ul.navbar-nav li').removeClass('active');
$(this).closest('li').addClass('active');
})
Related
I'm building a website while also trying to keep changing code an easy task.
For that, I include the navbar with <?php require_once('./includes/navbar.php'); ?> so that I only need to change the navbar.php to see changes site-wide.
I also use Bootstrap 5 and let it take care of styling the currently active page by using <a class="active"> (and also using the recommended aria-current="page" attribute).
Now my problem is that I need to somehow dynamically apply the above mentioned class and tag to only the active page. I have no idea how to do that in an elegant way but thought that this might be possible in PHP?
Does somebody know how to do it?
Click here to see code of the navbar
I did some research and managed to fix my problem with a little bit of javascript code which you can just add with <script></script> tags anywhere in the html code:
Give every link in the navbar html a unique id (e.g. id="pricing").
Add class="active" to active page and Bootstrap.css will style that element accordingly.
Remove class="active" from the other pages/links which are not active.
Set aria-current="page" to active page and set aria-current="none" to inactive pages.
in navbar.php:
<a id="home" class="nav-link active" href="index.php">Home</a> <!-- 1. -->
<a id="pricing" class="nav-link" href="pricing.php">Pricing</a> <!-- 1. -->
in pricing.php:
<script>
var pricing = document.getElementById("pricing");
pricing.classList.add('active'); //2.
pricing.setAttribute("aria-current", "page"); //4.
var home = document.getElementById("home");
home.classList.remove('active'); //3.
home.setAttribute("aria-current","none"); //4.
</script>
Hope this may help someone else too.
I have a boostrap navbar in my pages, the inside content I have placed in another file, nav01.php, because I used to change it a lot and wanted to have it in a separate single file. The question is, I want to have the same file for all pages, and yet I'd like to mark the current page as active if possible in the navbar.
When I had the navbar code in every page, it worked, but as soon as I moved it to a seaparate file, and read it with the jquery load method into every page, it isn't working. The file loads good, but the code I used for marking the current page as active does not work anymore, does nothing.
This is the content inside my navbar, nav01.php:
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href='home.php'><span class="glyphicon glyphicon-home"></span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href='documentation.php'>Documentation</a></li>
<li><a href='admin.php'>Admin</a></li>
<li><a href='login.php'>Login</a></li>
</ul>
</div>
</div>
This is the script that worked prior to moving to new file:
<script type="text/javascript">
$(document).ready(function () {
$("li a[href='" + location.href.substring(location.href.lastIndexOf("h/") + 1, 255) + "']").parent().addClass("active");
});
</script>
This is the load call I use for writing the nav01.php into every other php page:
$(document).ready(function(){
$("#nav01").load("nav01.php");
});
Simply load call inside script/script.js
The php files only have the nav with the id, my script loaded at the bottom:
<nav class="navbar navbar-inverse" id="nav01"></nav>
<script src="script/script.js"></script>
If I understand it, the problem is, I'm trying to use a jQuery code, client side, in a php page, the server executes and then load "as it is" ? When I load the page, it cannot be changed anymore, because the code isn't there in that php page that calls ? The script code inside nav01 efectively gets current location, but when it's executed, it's inside nav01 page, so no page is active so it does nothing?
I have been looking for a lot of answers here, but none was in my situation, and I have not been able to figure out a solution, $_SERVER['REQUEST_URI'] php will only give me nav01.php, and I don't know if I can send a GET variable via the jQuery load method with the address of the page where the nav is going to be inserted.
Thanks.
The ready jQuery event only fires once, when the DOM content is ready.
What I would recommend is put your active element marking function in the load function's callback like:
$("#nav01").load("nav01.php", function() {
$("li a[href='" + location.href.substring(location.href.lastIndexOf("h/") + 1, 255) + "']").parent().addClass("active");
});
I have tried to look for this, but I am not sure exactly how to phrase what I am looking for, so please excuse me if this is a duplicate question. I have a .php page with 5 divs that are link controlled by jquery. loading the page initially has the home div displayed and the rest hidden. Clicking on a link causes the home div to fade and the new div to show in it's place using a jquery script called at the bottom of the page. It is also shown in the url as http://example.com/#visible-div. What I would like to be able to do is link to the page and have a specific section load. For example, if I link to http://example.com/#div4, then the page will load with div4 showing. I was thinking that by using a php get command at the beginning, I could get the request and load it, but I am not sure how I would go about that. Here is my existing code:
<div class="menulistbot">
<ul id="divchange">
<li><a class="homediv" href="#home">Home</a></li>
<li><a class="div1" href="#div1">div1</a></li>
<li> <a class="div2" href="#div2">div2</a></li>
<li><a class="div3" href="#div3">div3</a></li>
<li><a class="div4" href="#div4">div4</a></li>
</ul>
</div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script call>
And here is my controlling script
//Main site operation script
function fadeAll() {
$("#homediv").fadeOut(600);
$("#div1").fadeOut(600);
$("#div2").fadeOut(600);
$("#div3").fadeOut(600);
$("#div4").fadeOut(600);
}
$(".div1").click(function() {
fadeAll();
$("#div1").delay(600).fadeIn(1500);
})
$(".homediv").click(function() {
fadeAll();
$("#homediv").delay(600).fadeIn(1500);
})
$(".div2").click(function() {
fadeAll();
$("#div2").delay(600).fadeIn(1500);
})
$(".div3").click(function() {
fadeAll();
$("#div3").delay(600).fadeIn(1500);
})
$(".div4").click(function() {
fadeAll();
$("#div4").delay(600).fadeIn(1500);
})
As it is the code works fine, but like I said, I want to be able to link directly to div4. Is that possible and if so, how?
I want to create ajax updated tabs for user profile tab in frontend magento like categories tab in product management. I was use this code:
<ul id="page_tabs" class="tabs">
<li>
<a id="page_tabs_account" class="tab-item-link ajax active" href="http://localhost/magento/customer/account/" name="account">Account Dashboard</a>
</li>
<li>
<a id="page_tabs_account_edit" class="tab-item-link ajax notloaded" href="http://localhost/magento/customer/account/edit/" name="account_edit">Account Information</a>
</li>
</ul>
<script>
var FORM_KEY="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>";
var varienGlobalEvents=false;
page_tabsJsTabs = new varienTabs('page_tabs', 'tabcontainer', 'page_tabs_account',[]);
</script>
Also add js file in page.xml like:
<action method="addJs"><script>mage/adminhtml/tabs.js</script></action>
When we click on tab then ajax is call but return data is whole page data like with header, footer, left sidebar. We want only perticular tabs assigned .phtml file data (right sidebar).
So how we get that. If other method is easy then let me know.
Thanks.
You would need to create a custom controller that handles AJAX layouts.
Note that varienTabs will fetch the page set on your href links. Having http://localhost/magento/customer/account/ on your tab links will make varienTabs just fetch the content at that URL.
Also, you will need special markup where the content will be posted. There should be a div which ID consists of the ID of your tab link ID + '_content'. E.g.:
<div id="page_tabs_account_content" style="display: none;"></div>
<div id="page_tabs_account_edit_content" style="display: none;"></div>
(Edit) you would aso need the 'tabcontainer' div. It is the second parameter passed to the varienTabs function. Just wrap the divs above on it.
I am having a menu with sub menu.. this menu is coming from Data Base. on clink one of main menu a sub menu opens.. I want that when I click on any link of sub menu.. the sub menu remains open and the selected sub menu should remain selected. but problem is that when I click on any sub menu link.. I reached it's relevant link.. but sub menu get hide . I tried to using J-query to do so.. but failed due to loading new page... please tell me any way to do so.. now i want to use jquery or ajax solution of this
After reading your problem i think this may help you.
Use jQuery(include jQuery Library).
On page you want to keep selected Main menu and submenu, Do the follwoing:
Get Main menu and sub-menu ID and toggle it with jQuery.
$("#mainmenuid").toggle('fast');
$("#submenu").toggle('fast');
OR you can apply any jQuery events.
Note: Add jQuery in the header area of that particular page page.
You can try this :
$('#menu > li > a').click(function(){
if($(this).siblings('ul').length > 0){
$(this).siblings('ul').show();
return false; // This will do what you want.
}
});
This will not allow links if has any sibling "ul" elements. Otherwise, it will be go to it's href.
Test here :
http://jsfiddle.net/SXKG4/2/
You can try load if you want an ajax solution:
suppose this is the html:
<ul id='main-menu'>
<li><a href='pages/home.html'>Home</a></li>
<li><a href='pages/about.html'>About us</a>
<ul class='sub-menu'> /*initially hide it display:none;*/
<li><a href='pages/subpage1.html'>sub link 1</a></li>
<li><a href='pages/subpage2.html'>sub link 2</a></li>
</ul>
</li>
</ul>
<div id='content'></div> <!--here you have to put page contents-->
Then you can use this jQuery:
$(function(){
$('#main-menu li').click(function(){
var page = $(this).find('a').attr('href');
$('#content').load(page);
$('.submenu',this).toggle();
});
$('#main-menu a').click(function(e){
e.preventDefault(); // <-----this stops page to navigate to link href
});
$('.submenu li').click(function(ev){
ev.stopPropagation(); //<----stops the event bubbling to the parent
});
});