I have a php page that has many includes. The whole page runs fine, but for my navigation bar, it does not open any page when I click on it. Please, what is missing here. Any help will be appreciated. many thanks
Here are my codes for the includes
<div id='cssmenu'>
<ul>
<li class='active'><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Packages</span></li>
<li><span>Partners</span></li>
<li><span>Gallery</span></li>
<li class='last'><span>Contact Us</span></li>
</ul>
</div>
And here is my main page code:
<body>
<div id="wrapper">
<div>
<img src="images/banner.png" width="940" height="200" />
</div>
<?php include('includes/nav.php'); ?>
<?php include('includes/slider.php'); ?>
<?php include('includes/nav.php'); ?>
<?php include('includes/contents.php'); ?>
<?php include('includes/sidebar.php'); ?>
<?php include('includes/footer.php'); ?>
</div> <!-- End #wrapper -->
</body>
Not sure of your file structure, but try removing the '../' on all you links
Change this:
<li class='active'><span>Home</span></li>
to this:
<li class='active'><span>Home</span></li>
Take the ../ out of your path.
When you include the nav.htm to your main page it acts as if it is in the main folder
Therefore if you use '../' it won't find it.
Related
I have looked at prevous questions about this and people say php and have not found an answer. how do I convert my navbar to php and use it in multiple html pages. Could someone tell me how to do so? I am currently taking a codecademy course on php and it is really hard for me to understand so please be patient.
<div class="tabs">
<ul>
<a href="http://degraphic-design.dunked.com/contact-me" style="text-decoration:none">
<li class="contact">Contact</li>
</a>
<li class="dropdown">Shop</li>
<li class="forum">Forum</li>
<a href="index.html" style="text-decoration:none">
<li class="about">About</li>
</a>
<li class="team">Team</li>
<a href="http://degraphic-design.dunked.com/" style="text-decoration:none">
<li class="portfolio">Portfolio</li>
</a>
</ul>
</div>
Say you have about.php and home.php in the root of your website. Create a directory called partials (or whatever), go into partials and put the contents of your navigation HTML in a file called nav.php. Then in about.php and home.php, use this where you want to include the navigation code
<?php include 'partials/nav.php'; ?>
Here is one way (extremly basic):
Create a PHP file called index.php
<!DOCTYPE html>
<html>
<body>
<header>
<?php
include 'header.php';
/**
* say you wanted a different header for shop
* if($_GET['page'] === 'shop') {
* include 'header-shop.php';
* } else {
* include 'header.php';
*}
*/
?>
</header>
<div id="main">
<?php
include $_GET['page'].'.php'; // assuming your storing your pages in same path as index
?>
</div>
<footer>
<?php
include 'footer.php';
?>
</footer>
</body>
</html>
Then a header.php
<div class="tabs">
<ul>
<li>Contact</li>
<li>Shop</li>
</ul>
</div>
And create your page files contact.php, shop.php ect.
Updated to a slightly more elaborate example to give you the idea.
my code only shows one image from the database. I dont know whats the problem. I tried looping it with allthe divs and ul but nothing it only shows one image. my code is
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<?php
$about = slider();
while($about_fetch=mysql_fetch_array($about)){
?>
<ul>
<li data-transition="fade" data-slotamount="7">
<img src="images/<?php echo $about_fetch["slide"];?>" alt="">
<?php
}?>
</li>
</ul>
<!--<div class="tp-bannertimer"></div>-->
</div><!-- end .banner -->
</div><!-- end .bannercontainer -->
for the code-part, try this please:
(i assume, you dont want to have several <ul> elements and only the <li>'s)
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<ul>
<?php
$about = slider();
while($about_fetch=mysql_fetch_array($about)){ ?>
<li data-transition="fade" data-slotamount="7">
<img src="images/<?php echo $about_fetch["slide"];?>" alt="">
</li>
<?php } ?>
</ul>
</div><!-- end .fullwidthbanner -->
</div><!-- end .fullwidthbanner-container -->
Well, your HTML isn't valid. You're looping over the start of a <ul> and <li> and not closing either until after the loop.
If that isn't the problem, then we can't help you since there is no debugging information available. Break your problem up into pieces. Is the issue server-side or client-side? Look at your output HTML to be sure. What are the return values of mysql_fetch_array() for each iteration? var_dump() is your friend.
I have a series of php includes on a web page that look like this...
<?php include 'folder1/file.php'; ?>
<?php include 'folder2/file.php'; ?>
<?php include 'folder3/file.php'; ?>
They look like the above in my code editor but when I upload to my server it views like this when I look at the source code...
<?php include 'folder1/file.php'; ?>
<?php include 'folder3/file.php'; ?>
<?php include 'folder3/file.php'; ?>
So I thought maybe the file wasn't uploading....so I changed the code to this and uploaded the page....
<?php include 'folder1/file.php'; ?>
<?php include 'folder3/file.php'; ?>
And when viewing that in any browser it viewed as expected, showing just the two includes. Telling me that the web page is uploading properly to the server. I've emptied my cache, refreshed the page and nothing. So then when I change the code back to this and upload....
<?php include 'folder1/file.php'; ?>
<?php include 'folder2/file.php'; ?>
<?php include 'folder3/file.php'; ?>
It stills shows this in the live page
<?php include 'folder1/file.php'; ?>
<?php include 'folder3/file.php'; ?>
<?php include 'folder3/file.php'; ?>
I have PHP installed on the server and all other PHP codes/includes work correctly. The following PHP code does run correctly.
<?php phpinfo(); ?>
Here is the code for folder2/file.php
<div class="propertylistingbox" id="propertylistingbox">
<div class="proplistingleft" id="proplistingleft"><img src="/second-base/images/FirstBase01.png" alt="Second Base Exterior" width="284" height="193" border="0" />
<div class="reservation-request-button">
</div>
</div>
<div class="propertylistingmain" id="propertylistingmain">
<div class="propheader" id="propheader">
<h3>SECOND BASE</h3>
</div>
<div class="propbulletlist" id="propbulletlist">
<ul>
<li>Located In Oneonta, NY</li>
<li>Accommodates 4</li>
<li>High Speed Internet</li>
<li>2 Bedrooms</li>
<li>Close to 3 bedroom apartment "First Base"</li>
<li>1.25 Miles to Cooperstown Baseball World</li>
<li>2.75 Miles to Cooperstown All Star Village</li>
<li>19 Miles to Cooperstown Dreams Park</li>
</ul>
</div>
<div class="propdetails" id="propdetails">
<div class="details-button">
Click For More Details
</div>
</div>
<div class="propspecialsbanner" id="propdetails2"></div>
<div class="propcalendarmaplink" id="propcalendarlink"><strong>CALENDAR OF AVAILABILITY</strong><br />
<strong>GOOGLE MAP</strong></div>
</div>
</div>
I am designing my own site. First I created a template with header.php and footer.php I put them in the includes folder. So, everytime I am going to make a new page like "about page" all I have to do is to call them using the code below:
<body>
<?php include("includes/header.php"); ?>
<?php include("includes/footer.php"); ?>
</body>
</html>
Here is the code in my header.php
<div id="headwrapper">
<header>
<div id="logo"><img src="images/adlogo.png"/></div>
<div id="homefeature">622x82</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>portfolio</li>
<li>Blogs</li>
<li>Contact</li>
</ul>
</div>
</header>
</div><!--end of headwrapper-->
But my index.php and my about page have the same header image. Is there a way or code that can accomplish the work for different header images for every page? Example on index.php I want to have image1 and to my about page I want to have image2. That's all thank you by the way I am not using a wordpress my site is not a wordpress.
Another solution.
In header.php you call function $_SERVER['PHP_SELF'] for get page name and then selected image for that page. You could modify like this
<?php
$imageName = "";
if($_SERVER['PHP_SELF'] == "index.php")
{
$imageName = "images/1.png";
}
elseif($_SERVER['PHP_SELF'] == "aboutus.php")
{
$imageName = "images/2.png";
}
?>
<div id="headwrapper">
<header>
<div id="logo"><img src="'".<?=$imageName?>."'"/></div>
<div id="homefeature">622x82</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>portfolio</li>
<li>Blogs</li>
<li>Contact</li>
</ul>
</div>
</header>
</div><!--end of headwrapper-->
Given your structure, I think you can set your header file like this:
<body>
<?php $header_image = "about_us_header.jpg"; ?>
<?php include("includes/header.php"); ?>
<?php include("includes/footer.php"); ?>
</body>
and reference the variable in your header:
<div id="headwrapper">
<header style="background: url(<?php echo $header_image; ?>);">
But wait I thought of a better way
you can do it in css like this:
<body class="aboutus">
<?php include("includes/header.php"); ?>
<?php include("includes/footer.php"); ?>
</body>
and in your css stylesheet:
body.aboutus header {
background: url(whatever.jpg);
}
I am using yahoo weather feed and simplepie to get weather for my digital display. Since it is a website run on a screen, I can't refresh the browser all the time manually.
I am just wondering is there anything eg jquery or php doc can help me update the weather information periodically as the weather changes?? If so would you be able to give me some directions on how to implement? your help is greatly appreciated.
Here is some of my code just in case it is useful
<div id="weather">
<div id="title">
<ul>
<!--<li> Outside Temp </li>-->
<li> Today </li>
<li> Tomorrow </li>
</ul>
</div> <!--title-->
<div id="forecast">
<div id="images">
<ul>
<?php foreach ($weather->get_forecasts() as $forecast): ?>
<li><img src="<?php echo $forecast->get_image(); ?>" alt="Weather" /></li>
<?php endforeach; ?>
</ul>
</div> <!--images-->
<div id="degrees">
<ul>
<?php foreach ($weather->get_forecasts() as $forecast): ?>
<li><?php echo $forecast->get_low(); ?>° <?php echo $forecast->get_high(); ?>° </li>
<?php endforeach; ?>
</ul>
</div><!--degrees-->
</div> <!--forecast-->
<!--</div> <!--second-->
Some header part info:
<php
require_once('simplepie/simplepie.inc');
require_once('simplepie/simplepie_yahoo_weather.inc');
$feed = new SimplePie();
$feed->set_feed_url('http://weather.yahooapis.com/forecastrss?w=1234567&u=c');
$feed->set_item_class('SimplePie_Item_YWeather');
$feed->init();
$weather = $feed->get_item(0);
?>
Thank you very much!
S:)
Since you're not already using JavaScript, a really simple way for you to periodically refresh the page might be to use the meta refresh tag. Although deprecated, it might be a quick way for you to get dynamic pages. Simply add the tag to the <head> of the page:
<meta http-equiv="refresh" content="5"> <!--Refresh the page every 5 seconds-->
However, you might want to consider using ajax to load your content into the page instead. This might not be the best possible approach to this but here's some quick and dirty code.
In the main page, you could use jQuery load to periodically hit the URL for your PHP script and load the content into a div for display:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(loadWeather, 5000); //using setTimeout instead of a setInterval to avoid having multiple queries queue up when the first one fails to return within the timeout period
});
function loadWeather(){
$('#weather').load('weather.php);
setTimeout(loadWeather, 5000);
}
</script>
</head>
<body>
<div id="weather" />
</body>
</html>
where weather.php might look something like this:
<div id="weather">
<div id="title">
<ul>
<!--<li> Outside Temp </li>-->
<li> Today </li>
<li> Tomorrow </li>
</ul>
</div> <!--title-->
<div id="forecast">
<div id="images">
<ul>
<?php foreach ($weather->get_forecasts() as $forecast): ?>
<li><img src="<?php echo $forecast->get_image(); ?>" alt="Weather" /></li>
<?php endforeach; ?>
</ul>
</div> <!--images-->
<div id="degrees">
<ul>
<?php foreach ($weather->get_forecasts() as $forecast): ?>
<li><?php echo $forecast->get_low(); ?>° <?php echo $forecast->get_high(); ?>° </li>
<?php endforeach; ?>
</ul>
</div><!--degrees-->
</div> <!--forecast-->
<!--</div> <!--second-->