I wish to be able to open page on a specific tab by sending a message via GET variable. I was thinking something like:
http://mydomain/mytimecards.php?tab=vte
Here is the code for the jQuery tabs:
<div id="tabs">
<ul>
<li>Submit Time Cards</li>
<li>View Time Entries</li>
</ul>
<div id="mytimecards">
etc ....
Is it possible to force the page to display the 2nd tab (#timecardReports) instead of the first ONLY IF ?tab=vte is received as a GET (or better yet POST) variable?
Assuming the plugin you are using allows you to set an active tab on load, you could do something like:
<li><a href="#timecardReports" id="vte" <? if(isset($_GET['tab']) && $_GET['tab'] == 'vte'){ echo 'class="active"'; } ?>>View Time Entries</a></li>
Replacing class="active" with whatever the plugin requires you to set.
Thanks, guys, Ben and itachi were onto the right solution. This worked:
http://mydomain.com/mytimecards.php?tab=vte#timecardReports
I found this by using firebug and watching what changed as the tabs were clicked. Thanks itachi.
Ben's suggestion enabled me to test for this condition and set it on page load.
Credit to them both.
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.
How do I format a link that will go to an anchor within a PHP document?
For example:
http://chambervu.com/lososos/index.php#p=10 - does not display the intended result, however if I go to http://chambervu.com/lososos/index.php then once that page is displayed if I append "#p=10" then everything displays as intended. How would I form the link to display page 10 directly?
The "pages" in my index file are setup like this:
<li class="page" data-name="5">
<div class="blah....blah"
</div>
</li>
</div>
</li>
<li class="page" data-name="6">
<div class="blah..blah"
</div>
</li>
Fragments point to an ID on the page, when you visit an HTML page with a fragment in the URL, the browser tries to find an element with a matching ID and scroll to it.
The javascript you have running on the page takes the fragment when it changes (after the page has loaded) and parses it to determine which page to show.
Linking directly to that page like you want would require some editting of the javascript at the very least.
I'm working on a scrollable one-page website, in which each div represents a different section. For example, url is dynaone.com/index.php, and when I click on the menu's different buttons, it changes to /index.php#s1, #s2, #s3, and so on. In section nº 2 I added another menu that works with php GET, in a way that when you click on one of the buttons, it redirects you to index.php?id=1 and so on. Of course when I first tried it, it scrolled me back to the top of the page, 'home', as I wasn't specifying the section. But when I did, assigning "index.php?id=1#s2" to the first element in the inner menu, it redirected me to section 1. It doesn't matter which number I write after "#s", it will keep putting section nº 1 on top of the page.
I'm using SMINT's demo as a base, adjusting it to my website's needs, but I couldn't find anything related to GET method issues on the plugin's page.
I would really appreciate some help with this, as it's very annoying having to go back everytime I click to correctly view section nº 2.
This is part of my inner menu:
<div id="botonera_productos"><ul>
<li> Quemadores </li>
<li> BCAAs</li> </ul> </div>
This is my php section:
if(#$_GET['id']==1) {
?>
<figure><img src="imagenes/quemadores/1.jpg"><figcaption> ULTIMATE L-CARNITINA 500 60 TABS - <b>$330</b> </figcaption></figure>
<?php } ?>
And this is the site's main menu:
<nav class="subMenu" >
<div class="inner">
Home
Nosotros
Productos
Local
Envíos
Consultas
Facebook
</div>
</nav>
Thank you.
The question isn't very clear but basically:
The anchor is an HTML construct. So once the page is already loaded, you can use #whatever to take you to wherever on that page that the anchor has been defined; ala <a id="whatever">
The PHP arguments, like ?id=1 - a new page will be loaded depending on what you use here.
You can use anchors in conjunction with a PHP page (ie. a PHP page may have multiple anchors) but you cannot load a new page with anchors alone.
Maybe Javascript will help you achieve what you want to do. With AJAX calls and the like then there are far less restrictions on how you load data.
I'm have a problem and I don't really know how to fix it. I'm trying to style the Tabs above my forum made with Drupal(see picture)
For some reason it always renders the tabs like on the picture. This is because I'm using the render function (print render($tabs)). I don't know how to get the names of the tabs. They are in a Array called $tabs, but this array returns this(See picture)
Here is everything summarized:
I want to design Drupal's default tabs, but there is one problem, I can't get the names of the tabs without using print render($tabs). But this function already styles the tabs.
Current code:
<?php if ($tabs): ?>
<ul class="nav nav-pills nav-justified">
<li class="active"><?php print_r render($tabs);?></li>
</ul>
<?php endif ?>
EDIT
When you click the tab, it has to redict to a URL. with the render function, it does this automatically. Is it also possible to do this?
This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 9 years ago.
Ok, so lets say that I have navbar eg.
<ul>
<li class="selected">home</li>
<li>about me</li>
<li>contact</li>
<ul>
and I have a content on a page that I want to change depending on which <li> is selected without reloading the whole page. It seems a bit pointless to reload the whole page just to update 2 divs.
eg. when home is selected I want to load home.php included in <div class='content'> + change class of <li> home</li> to selected etc.
should I use AJAX for this? or should I use $_GET -> altering the URL?
I am a beginner -> sorry for basic questions.
Thx for any kind of help!
You can use Ajax.
But if you're total beginner, another solution without Ajax :
• put all your content in a single file
• put IDs on your div, related to the content (div containing "about" content = div#about)
• just toggle the div on click, related to the content
Like this (JS with jQuery) :
$(document).ready(function(){
$('nav a').click(function(){
var dest = $(this).attr('href');
$('div.content').fadeOut(); // Hide all content divs
$(dest).fadeIn(); // Show the requested part
// You can do all of this using addClass / removeClass and use CSS transition (smoother, cleaner);
return false;
});
});
HTML updated:
<ul> <li class="selected">home</li> <li>about me</li> <li>contact</li> <ul>
If you had no idea of what is Ajax, I guess this solution is better for you.
To change part of your page from a new request, use Ajax. You can find a lot about it online.
That said, using ajax for basic navigation of a simple website is bad taste. Just do a normal navigation.