So I am using Twitter Bootstrap 3 to build my front-end, in this case simple tabbed menu. I was struggling a lot to make it work, because menu links didn't want to highlight properly when you click on them. By that I mean, if you for example click on the page about.php that link should be marked as active and therefore have some CSS styling applied on it. I saw many posts here on stackowerflow but they only partially worked for me. For example some jQuery code that people posted would do proper highlighting but would prevent links from working.
Finally I have found a solution that is working great except when I use pagination. Let me explain:
Here is the bootstrap html code of my menu:
<nav class="row">
<ul class="nav nav-tabs nav-justified">
<li> Home </li>
<li> About Us </li>
<li> Contact Us </li>
<li> Our Services</li>
<li> Portfolio </li>
</ul>
<nav>
In order to make menu highlighting working I am using this javaScrpt code:
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
So when I start the app index.php is marked as active and that is great, if I click on about.php I will go to that page and it is also marked as active, that is great too. But since I have pagination on index.php, and I click on Pagination link 2 url will change to: index.php?page=2, and highlighting will break, index.php will not be marked as active anymore.
Do anyone know what is going on here, and what can we do to fix this ? I'm not that good with JS.
Rather than just using window.location for your url, try using:
var url = window.location.pathname;
If your current url is www.mywebsite.com/index.php?page=2 the above should output /index.php.
You can use url.replace('/', '') to get rid of that first slash.
EDIT:
Since your pathname may have multiple parts, such as /something/index.php we need to deal with that. Another way of doing it is:
var urlpath = window.location.pathname;
In your code you have:
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
You can change the selector to:
$('ul.nav a[href="' + urlpath.split('/').pop() + '"]').parent().//...etc
This is doing the splitting and isolating the index.php portion in one go. index.php will of course be contact.php or whatever.php on other pages.
Try this JSFiddle I just created, showing the above line in action: http://jsfiddle.net/N9SHq/
Related
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 creating a "web store". I've created a navbar using Bootstrap. I have 3 php files: index, category and article, all .php
<li class="dropdown">
Categories<span class="caret"/>
<ul class="dropdown-menu">
<li>Compu</li>
<li><a href="categorias.php?categoria=Mascotas" >Animals & Pets</a></li>
<li>Office</li>
<li>Music & Movies</li>
</ul>
</li>
The "Category" link works only as a dropdown, you click it and it shows the submenu.
Categorías<span class="caret"/>
This code is in all 3 files, but it only works on index and category. When I click it on the article.php file it only adds a "#" to the current URL.
localhost/store/article.php?id=1 -> localhost/store/article.php?id=1#
I'm using the id to show the selected article's info from a database. I use it too on the category.php file but the dropdown link works there. Everything else works fine, except that link.
Am I missing something?
PS. I'm only using HTML and PHP in my files.
Sounds like you forgot to import the necessary bootstrap dependents on the article page.
Necessary Dependents
CSS
bootstrap.min.css , or theme if you are using
JavaScript files
jQuery
bootstrap.min.js
Sounds like a JS issue.
I have a file index.php containing mostly HTML and a bit of PHP. I have declared ids for some elements (e.g., <h2 id="contact">Contact</h2>) and provide links to them (cf. below).
<ul>
<li>Contact</li>
</ul>
The links work fine when clicked (i.e., the user is taken to the anchor point), but they point to, e.g., index.html#contact, so that when the page is reloaded, you get a 500 error.
How can this behaviour be avoided? And why does it occur anyhow?
I'm using the YAML CSS framework btw.
You can use javascript to scroll on your element so URL doesn't change and when you reload the page has the starter URL.
Try to use this :
<ul>
<li>Contact</li>
</ul>
<h2><a id="contact">Contact</a></h2>
or
<script>
function getPosition(element){
var e = document.getElementById(element);
var left = 0;
var top = 0;
do{
left += e.offsetLeft;
top += e.offsetTop;
}while(e = e.offsetParent);
return [left, top];
}
function jumpTo(id){
window.scrollTo(getPosition(id));
}
</script>
<ul>
<li>Contact</li>
</ul>
<h2>Contact</h2>
UPDATE:
Why don't you hack it with js :)
location.replace("http://www.w3schools.com");
UPDATE END
The hash (#) inside link means an "ID" of an element within the same page.
href="#id" .. means index.php/#id <-- scroll to an id element
href="link" .. means index.php/link <-- redirect to file called 'link'
Also you need in htaccess enable to redirect to file without file extension. e.g. php / html
Your problem
Check your existing htaccess
That's weird because it is supposed to work. As others suggest, have a look at your error logs. In the mean time you can try this quick fix:
Instead of having #contact in your <a> you can put the full url using the help of php like this:
<html>
<head>...</head>
<body>
<ul>
<li>Contact</li>
</ul>
<h2 id="contact">Contact</h2>
</body>
</html>
<?php
function getPageUrl(){
return 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
}
?>
This should make your <a> look like this
Contact
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.
I have my navigation in a separate file that is linked to my regular pages with a <?php require statement. I have a class on the <li> in the menu that will change the word to a white rather than gray. So In short I have:
<li class="active">
Home
</li>
<li class="">
About
</li>
I need to change the class to active when the each page is being viewed but to "" when it is not being viewed. I'm not sure how to do it though?
I hope this makes sense.
Update:
As per the comments, I thought it would be a good idea to outline what I am wanting to do maybe a little better.
The Navigation itself is inside a separate file called navigation.php
The actual pages are at the base of the files ex: home, about, contact
When the page Home is being viewed the class active needs to be on the <li> of that menu item. When the about page is being viewed the class needs to be on that menu item and the menu items class for home needs to be blank.
You're looking to do stuff when window.onfocus triggers - use JQuery class manipulation here, which is the easiest way to do it.
https://developer.mozilla.org/en-US/docs/Web/API/window.onfocus
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/
EDIT: If I understand your design, you have a navbar with links over an iframe holding the sub-pages (home, about, etc). In this case, just bind click handlers to the navbar divs that set and unset class and load the proper page into the iframe.
This is actually really simple.
Add Unique Id's to each one of the <li> in the menu
and then use the jQuery window.onfocus triggers and place this script on each one of the pages (home, about, contact)
window.onfocus = document.getElementById('indexNav').className=" active";
Changing the element ID to match each page.
So on the Home page you would have something like: indexNav for the ID
and then on the About page you would have something like: aboutNav for the id.
I think this is what you were looking for, I've tested it out,
<style>
.active{
color:white !important;
}
<style>
<script>
var links = document.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
if(links[i].href==this.location) links[i].parentNode.setAttribute('class','color');
};
</script>
This dosen't require the link titles to have the same names as locations.