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.
Related
I'm new to Wordpress and PHP and this might be a dumb question, but I'm trying to link one of my menu items to one of the sections on my index page.
I know that if I just wanted to link it to the index I should use this:
<?php echo home_url(); ?>
But I want the link to send the user to the "About" section. Basically, I need to know how to do this:
index.php#about
but with PHP.
Thank you!
You're on the right track.
The ideal way to do this would be to add a <a name="about></a> tag to the appropriate section of your template. This is called an HTML anchor and is how those #tags know where to point to.
Given that this is Wordpress, you could probably also get away with just appending that to the title of the appropriate section. So wherever you specified 'call this section "About"', you could probably redo it as 'call this section "<a name="about">About</a>"' and then you'll be able to link to it using anchors like in your example-- About
If you are new to php, maybe you should use wordpress's editor ?
In your page (in the admin page), you can put any html you want.
In the editor, you can add custom links (with anchors or not) and you can put a div tag in the "html" tab.
So if you put your link at the top of your page and put your section in a div id="myanchor", it should do it !
You shouldn't do this with HTML or PHP but rather with JS. Specifically for long pages and require in-page navigation, I really like the scrollTo jQuery plugin.
In practice, you'll have some HTML containers that look something like this:
<!-- Your menu -->
<ul>
<li id="about-button"></li>
<li id="product-button"></li>
<li id="something-button"></li>
<li id="else-button"></li>
</ul>
<!--Your page sections-->
<main class="my-page">
<section id="about"></section>
<section id="product"></section>
<section id="something"></section>
<section id="else"></section>
</main>
Once you've included jQuery and the scrollTo plugin, you'll have some JS that looks like this:
$('#about-button').click(function() {
$.scrollTo($('#about'), {
duration: 800,
offset: -50
});
return false;
});
The JS is saying that once you click on the #about-button, take 800 milliseconds and animate the page down to -50px before the position of the #about HTML element. You could just setup a series of click functions for each button and you'd have a slick in-page nav system.
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.
Im trying to add a simple class/id on my <li> element which is in my menu, by using jquery.
However, when I click on a menu-option my class/id is added by jquery successfully but my site of course is gonna update because it redirects to the choicen site.
The result I end up with is that my class/id is removed because of this update..
How can I bypass this so my class/id stays on the selected menu <li> element.
My code looks like this:
$(document).ready(function()
{
$('li').click(function()
{
$(this).addClass('selected');
});
});
This is the site: http://insatsplutonen.xedge.nu/
Click yourself thru the menu-options. If you click on ex: Blogg the class 'selected will be added on the <li> element but will disappear because of page-load...
Thing is i want selected menu-option to turn white and others stay gray :)
Kind regards /Haris
It seems like you are loading the page based on the query string. When I select "Blogg", I get http://insatsplutonen.xedge.nu/?Blogg
When you load the page and check your query string and find a menu variable there, set a variable to the menu item value, and use it to set the class for the menu item accordingly. Ex. for Blogg item:
<li <?php echo ($queryStrVal == 'Blogg') ? 'class="selected"' : ''; ?>>
If I understand what you're asking, one way to solve this is to have a page class, for example on the body, that you use to identify which menu option is currently "selected". So something like this:
<body class="home">
<ul>
<li id="homeNav"></li>
<li id="aboutNav"></li>
<li id="contactNav"></li>
</ul>
</body>
then your css looks like this:
.home #homeNav,
.about #aboutNav,
.contact #contactNav {
// whatever styles represent "selected" here
}
This way, the "selected" nav item always appears selected on the page it represents.
To do in jQuery, find the <a> with the href of the window location and give its parent, which is li that class. This is happening once they reach the page they wanted, not when they click the link, so even pasting the URL in the browser add .selected to the correct li
var urlend= window.location.href.replace(window.location.origin + window.location.pathname, '');
$('a[href="' + urlend + '"]').parent().addClass("selected");
I've been looking around for some guide that could tell me how to make an existing menu editable when added in Concrete 5.
Here's the menu I'm using now, I'd like to be able to edit it in c5:
<div class="menu">
<ul>
<li><span>Hem</span></li>
<li><span>Om oss</span></li>
<li><span>Tjänster</span></li>
<li><span>Referenser</span></li>
<li><span> Kontakt</span></li>
</ul>
</div>
The links doesn't work at all in c5, so if anyone could help me a little that would be greatly appreciated!
Thanks!
One of the nice benefits of using any CMS is that it will automatically create the nav menu for you -- so that when users add new pages they automatically show up in the menu.
In Concrete5 specifically, the way you do this is with the "AutoNav" block. As with any block, this can be added to areas on your page, but since you generally want the nav menu to appear on EVERY page in the same place, you can also add the block directly in your template code.
So, for your menu (which is a one-level menu without a dropdown), replace your nav menu html with this code:
<?php
$nav = BlockType::getByHandle('autonav');
$nav->controller->orderBy = 'display_asc';
$nav->controller->displayPages = 'top';
$nav->controller->displaySubPages = 'none';
$nav->render('templates/header_menu');
?>
Now you will need to make a change to your CSS, because that code will generate HTML that is slightly different than what you have -- it looks more like this:
<ul class="nav-header">
<li>Hem</li>
<li>Om oss</li>
<li>Tjänster</li>
<li>Referenser</li>
<li>Kontakt</li>
</ul>
The differences are that there's no surrounding div (although you could leave that if you wanted by surrounding the php code above in the opening and closing div tags), there's no span around the nav items, and the class for a selected item is "nav-selected" instead of "current".
I am using drupal 7
views-view--myview.tpl.php sample code
<?php if ($rows): ?>
<?php print $rows; ?>
When i see this in firebug i see the structure
<div class="item-list">
<ul>
<li class="views-row views-row-1 views-row-odd views-row-first"> </li>
<li class="views-row views-row-2 views-row-even "> </li>
Now how do i inject a div in each of these li.. Is this possible without using jquery?
If you go the the "Edit" page for the view, you should see a link called "Theme: Information". It's under the "Style Settings" section. If you click this, you can see a list of all the possible template that your theme will look for when displaying the view. In bold will be the file it is currently using.
views-view--myview.tpl.php is to high up the chain to do what you want. If you want to inject a div (the same div) around each field you output, then I think the file views-view-field.tpl.php is what you are looking for.
The file contains just the line
<?php print $output; ?>
So there you can insert the desired div (after you copy it from views/themes into the template directory for your theme, of course).
If you investigate the Theme Information link some more it describes how to be even more specific in naming the view template files, for example if you wanted to theme a specific row differently you could use the file views-view-field--entity-id-X.
Hope that helps!
EDIT for comment
To go a different route, you can also edit the field settings for your view. Under the Field tab on the edit view page, you can click the links for each field. There is a Suffix setting available you could use to inject a div after the field is displayed.