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
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 used 'include' php to separate header of my website.
So, I can easily fix if I need to change the navigation menu part in the header, instead fixing more than 20 pages each.
My question is I like to add a class, 'current' in the one of navigation button.
For example, if I am in 'Home' page, then I want to change font color of 'Home' button to red.
If I move to 'Contact' page, I want 'Contact' button to be changed to red and want 'Home' button to normal color.
Since all navigation button codes are in the header.html.
How can I add class 'current', so users can know which page they are looking at?
Thanks in advance.
If you are using php then you can set it like this.
1) Give class to each link
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">About</li>
Note : Give filename & classname same (If filename is home.php then class for this menu is "home")
2) In header.php use this code.
<?php
$class = basename($_SERVER['REQUEST_URI'], '.php?' . $_SERVER['QUERY_STRING']);
/* This basename function returns filename from url. For example if url is http://www.example.com/home.php?id=15, then this will return "home" only. */
?>
<script type="text/javascript" src="jquery.min.js"> <!-- Link your jquery library -->
<script type="text/javascript">
$(document).ready(function(){
$(".<?php echo $class; ?>").addClass('current');
});
</script>
This is a very basic and unsafe example, just so that you hopefully get the idea.
Find out first what page you're on, maybe you have a URL parameter called page that you call like index.php?page=home or index.php?page=contact.
<?php $page=$_REQUEST['page']; ?>
Then write your HTML:
Home<br>
Contact
Now add the class-checks to your links:
Home<br>
Contact
(This uses fancy inline IF statements, just because they fit the purpose so nicely. If you don't know them yet, I recommend to read up on them.)
If your $page variable is set to "home", this will generate the HTML source like so:
Home<br>
Contact
You could also include the entire class assignment into the PHP check:
<a href="index.php?page=home"<?=($page=='home'?' class="current"':'');?>>Home</a><br>
<a href="index.php?page=contact"<?=($page=='contact'?' class="current"':'');?>>Contact</a>
And that would generate the HTML source like this:
Home<br>
Contact
The most practical way would be to quite simply make a little function that generates everything for you, like for example this one:
<?php
function makeNavLink($pageName){
global $page;
$link='<a href="index.php?page='.$pageName.'"';
$link.=($page==$pageName?' class="current"':'').'>';
$link.=ucwords($pageName).'</a>';
return $link;
}
?>
That would allow you to call the function in your page like this:
<?=makeNavLink("home");?><br>
<?=makeNavLink("contact");?>
And it would also make the HTML output look like this if your page is "contact":
Home<br>
Contact
I can't comment because I don't have 50 rep, but I did some research and found this link How to have the class=“selected” depending on what the current page/url is. $_SERVER['REQUEST_URI'] is the approach that is used in this example. So if you need further clarification, you can look that up too.
Edit: This example does not require JQuery. Or you could try this:
<div class="menu">
<div id="whatever" class="whatever">
<ul>
<li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="current" <?php } ?>>Home</a></li>
<li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="current" <?php } ?>>About</a> </li>
</ul>
</div>
</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.
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/
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);