Add id css to first ul in Zend Navigation Menu - php

I'm using .ini files to render my menu.
Bootstrap
$config = new Zend_Config_Ini(APPLICATION_PATH . '/configs/menu.ini', 'nav');
$nav = new Zend_Navigation($config);
$view->navigation($nav);
layout.phtml
<?php echo $this->navigation()->menu()->setMaxDepth(3) ?>
My target to reach:
<ul class="navigation" id="navigation">
<li>
<a id="menu-1" href="/">Home</a>
</li>
</ul>
How to set id="navigation" for the first <ul> occurence instead of class="navigation"?
Now I've got only <ul class="navigation"> and i want to <ul id="navigation"> or <ul class="navigation" id="navigation">

You would need to setup a custom view helper, in your code library, not under Zend_.
Maybe something like GZ_View_Helper_Navigation_Menu2
And then depending on how you want to configure the addition of this new view helper path, something like this in your bootstraps initView:
$view->addHelperPath('GZ/View/Helper/', 'GZ_View_Helper');
Or, if using Application and Resources you can setup that via the ini too with:
resources.view.helperPath.GZ_View_Helper = "GZ/View/Helper"
Your lib GZ of course needs to be on PHP's include path.
When rendering you would change the call to:
<?= $this->navigation()->menu2()->setMaxDepth(3) ?>
Although I think you can also assign a default view helper (can't find it in docs right now) to Navigation and just call
<?= $this->navigation ?>
Related: How do I extend the Zend Navigation Menu View Helper?

You can do this with jQuery:
$('document').load(function(){
$("body > ul:first-child").attr('id', 'navigation');
})
EDIT:
After reading your comments, I noted that you are using Mootols library, so you can do the jQuery equivalent, something like this:
window.addEvent('domready', function() {
var myMenu = new MenuMatic({ orientation:'vertical' });
myMenu.getElement('ul').set('id', 'navigation');
});

I've thought about doing this method a lot myself. I often create multiple navigation objects in my Zend Framework projects.
Instead, I would submit a different answer. In your view, enclose your call to the navigation output inside of the HTML5 nav element. This makes it both semantically clearer AND allows you to add your own ID to each section easily. So, try this:
<nav id="navigation"><?php echo $this->navigation()->menu()->setMaxDepth(3) ?></nav>
An interesting thing to note - if you only have 1 navigation element on the page, you won't even need the ID then. You can target it using the nav element in your css... for example, to make all ul's in the navigation have zero margin, you might do this in css:
nav ul { margin: 0px }

In ZF 1.12 (don't know from which version exactly) there is one methode for that:
$this->navigation()->menu()->setUlId('navigation')->setMaxDepth(0);

Related

How do I link to a specific section on another page on Wordpress

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.

How to display php image gallery inside a div?

My website has two div columns: a vertical navigation menu and main content. I used php to navigate different pages of my website to the main div (similar to this php example)...(eg. index.php?pg=about_us --> get content from /page/about.html). But one of the pages I want to display this gallery (http://sye.dk/sfpg/) on the main div.
How to display my gallery correctly in the main div (installed under /pages/gallery/index.php) (eg. width about 700px)? I have the same problem if the navigation menu is pointed to an external website. (let's say google) The size and charset are not displayed correctly while using div. Thank you.
<?php
// ...blah blah blah
$pgname = isset($_GET['pg']) ? trim(strip_tags($_GET['pg'])) : 'index';
//....
?>
// starts html, header and body
<div class="left_col">
<nav id="navigation">
<ul>
<li>Home</li>
<li>News</li>
<li>Gallery</li>
<li>Donate</li>
<li>About Us</li>
</ul>
</nav>
</div>
<section class="main_col clearfix">
<?php
if ($pgname != 'gallery'){
echo file_get_contents('pages/'. $pgname. '.html');
} else {
echo file_get_contents('http://google.com/'); // this doesn't work, and neither work with '/pages/gallery/index.php'
}
?>
</section>
Simplified, the above becomes:
gallery.php:
<?php
$name = 'gallery'; // Fixed for this example.
$html_gallery = 'pages/'. $name . '.html';
?>
<html>
<section>
<?php include $html_gallery ?>
</section>
</html>
pages/gallery.html:
<img src="/images/foo.jpg">
<img src="/images/bar.jpg">
<img src="/images/baz.jpg">
gallery.php would render much like this:
<html>
<section>
<img src="/images/foo.jpg">
<img src="/images/bar.jpg">
<img src="/images/baz.jpg">
</section>
</html>
So as you can see, it is up to you to style the output.
I like your idea a lot... but I think it would be much easier for you to use JavaScript and AJAX for this. Also, this approach will prevent the page from reloading!
EDIT - So, if you say you have both HTML and PHP files to use, an ext parameter (extension) in your events will do the trick. - EDIT
My idea would be to give an onclick event on each li calling a JavaScript function, let's say onclick="getContent(page, ext)". So of course you need to replace page to whatever string you like, let's say gallery; and ext to any extension you need as a string, let's say php.
Sample result:
<li onclick="getContent('news', 'html')" title="News">News</li>
<li onclick="getContent('gallery', 'php')" title="Gallery">Gallery</li>
Now, let's build our JavaScript-AJAX stuff. What we first need to do is create the function and place it right after the <body> tag inside a <script> tag, of course. Then remember to add an id to your main column, in the following example it will be content.
<script type="text/javascript">
function getContent(pageName, ext){
var url = "pages/"+pageName+"."+ext, // gallery.php - news.html
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
So now this function creates the request and gets the data from your URL and then places all the HTML in it inside your section. Of course, make sure that the HTML file contains only what you need inside the section.
Your main column in HTML should look like this:
<section class="main_col clearfix" id="content"></section>
- EDIT -
About the pre-made single file PHP gallery and resizing problem... I saw the demo and I think I know how it works... my advice is to make sure you set a width to your main_col section because the content given by the demo seems to be lots of div's with a class thumbbox which happens to be arranged by CSS display:inline-block so it should just work fine like that.
But the biggest problem I see is that once you load the content on your page, it will not work unless you include(); (PHP) the file or at least the source code for your single page PHP gallery, because you will only load the HTML and I also see that it uses the JavaScript onclick event just like my idea.
What I can say is that to help you solve this thing entirely, I should be able to see how you're implementing this library and many other things. I think you can work it out tho if you include the file like I said (so that the PHP code loads and hopefully prints the necessary JavaScript).
Also, the charset might be solved using PHP utf8_encode(); or utf8_decode();. Use the first one to encode from ISO-8859-1 to UTF8 and the second one for the other way round.

Dynamic Navigation?

Currently for my projects I create the navigation for each page manually and it looks something similar to:
<nav>
<ul id="mainMenu"><!--Main Menu-->
<li><a class="active" href="index.php">Home</a></li>
<li>Contact</li>
</ul>
</nav>
This works fine, however for projects that has many many pages it is not a really good practice or even efficient to do it manually. So I was wondering if there is anyone who can direct me to the right path and advice me on how to make my navigation dynamic? I know about PHP include and the .inc files - they are good. BUT I want to add class .active to the <a> of the page that is currently open. How can I do that?
BTW: I don't know if this s the right place to post this sort of questions here, but the moderator told me to post it here.
Use include to add a central php file, that contains a function which can take the current page as a parameter:
nav.inc:
function renderNavigation($current_page) {
//render you navigation
}
main.php:
require_once("nav.inc");
renderNavigation("Subpage 1")

Changing class with external file elements

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.

How to make a menu editable in Concrete5?

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".

Categories