How to make header or footer remain static? No Iframes please!

  • inlineskater
  • Newbie
  • Newbie
  • inlineskater
  • Posts: 6

Post 3+ Months Ago

I have the following:

header.php
footer.php
index.php

about.php
gallery.php
contact.php

I want to embed a live audio clip in the header.php or footer.php – meaning I want the about.php, gallery.php and contact.php to open where the index.php is when chosen (in the middle of the header.php & footer.php) and I do want to loose the stream. So how can I make one of the 2 remain static??


Help
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

Have you checked this tutorial?
  • hgun77
  • Graduate
  • Graduate
  • User avatar
  • Posts: 164
  • Loc: Malaysia

Post 3+ Months Ago

PHP Code: [ Select ]
<?php
 include('header.php');
 include('index.php');
 include('footer.php');
?>
 
<?php
 include('header.php');
 include('about.php');
 include('footer.php');
?>
 
  1. <?php
  2.  include('header.php');
  3.  include('index.php');
  4.  include('footer.php');
  5. ?>
  6.  
  7. <?php
  8.  include('header.php');
  9.  include('about.php');
  10.  include('footer.php');
  11. ?>
  12.  


sorry, i dont know if this help.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Two solutions come to mind ... iFrames and AJAX.

I would suggest ajax though ... Here is how to achieve what you need in ajax (using jQuery):

Code: [ Select ]
<html>
<head>
 <title>AJAX Test</title>
 <script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
   $('.link').click(function(){
    var id = $(this).attr('id');
    $.ajax({
     type:'post',
     url:id + '.php',
     data:'',
     success:function(returnText){
      $('#body').html(returnText);
     },
     error:function(){
      alert('There was an error while changing the page, please try again.');
     }
    });
   });
  });
</script>
</head>
<body>
 <?php include('header.php'); ?>
 <div id="body">
 </div>
 <?php include('footer.php'); ?>
</body>
</html>
  1. <html>
  2. <head>
  3.  <title>AJAX Test</title>
  4.  <script type="text/javascript" src="/javascript/jquery.js"></script>
  5. <script type="text/javascript">
  6.   $(document).ready(function(){
  7.    $('.link').click(function(){
  8.     var id = $(this).attr('id');
  9.     $.ajax({
  10.      type:'post',
  11.      url:id + '.php',
  12.      data:'',
  13.      success:function(returnText){
  14.       $('#body').html(returnText);
  15.      },
  16.      error:function(){
  17.       alert('There was an error while changing the page, please try again.');
  18.      }
  19.     });
  20.    });
  21.   });
  22. </script>
  23. </head>
  24. <body>
  25.  <?php include('header.php'); ?>
  26.  <div id="body">
  27.  </div>
  28.  <?php include('footer.php'); ?>
  29. </body>
  30. </html>


in header.php you should have something like follows:

Code: [ Select ]
<div id="menu">
<a class="link" id="gallery">Gallery</a>
<a class="link" id="about">About</a>
</div>
  1. <div id="menu">
  2. <a class="link" id="gallery">Gallery</a>
  3. <a class="link" id="about">About</a>
  4. </div>
  • inlineskater
  • Newbie
  • Newbie
  • inlineskater
  • Posts: 6

Post 3+ Months Ago

I need help.

Where is jquery.js file? I think this is why its not working...Plus where do i do the Iframes?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

No need for iFrames ... This solution I gave was with ajax ...

You just need to download jquery ... from the link in my previous post ...

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 77 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.