Question about media player not reloading everytime the page changes.

Ok I have this page I use includes to include other pages in the main page.  

What I want to know how to do is maybe update the main content with out reloading the whole page. Because I have a media player and it restarts everytime someone clicks a link

Here is my page http://trainingdayclan.com/main2.php

Under the Div main is where I would like to update the content.  Is there a way to do this?  


Here is my main page code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Training Day The Clan</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="Seven" content="Design" />
<meta name="Description" content="Training Day's website, stats, roster, and more " />
<link rel="stylesheet" href="content.css" type="text/css"  media="screen"/>
<link rel="shortcut icon" href="favicon.ico" >
 <link rel="icon" href="animated_favicon1.gif" type="image/gif" >
<script type="text/javascript" language="JavaScript">
<!--
      var smiletagURL = "http://WWW.trainingdayclan.COM/smiletag/";
//-->
</script>
<script type="text/javascript" language="JavaScript" src="smiletag/smiletag-script.js"></script>
</head>
<body>

<div id="container">
      
  <div class="nav"><img src="images/socom2_01.jpg" width="150" height="23" alt=""><img src="images/socom2_03.jpg" width="550" height="23" alt=""><img src="images/Extras/TrainingDayBannerBLUE.jpg" width="700" height="194" alt=""><a href="main2.php?id=home"><img src="images/socom2_05.jpg" alt="" width="89" height="26" border="0"></a><a href="main2.php?id=roster"><img src="images/socom2_07.jpg" alt="" width="90" height="26" border="0"></a><a href="main2.php?id=rss"><img src="images/socom2_08.jpg" alt="" width="90" height="26" border="0"></a><a href="main2.php?id=links" ><img src="images/sponsers.jpg" alt="" width="97" height="26" border="0"></a><a href="main2.php?id=contact" ><img src="images/socom2_10.jpg" alt="" width="98" height="26" align="bottom" border="0"></a><a href="main2.php?id=about" ><img src="images/about.jpg" alt="" width="97" height="26" border="0"></a><a href="main2.php?id=join" ><img src="images/socom2_11.jpg" alt="" width="55" height="26" border="0"></a><a href="/phpbb2/" target="_blank"><img src="images/socom2_06.jpg" alt="" width="84" height="26" border="0"></a>
      </div>
        
      
     <div id="main">
                                        <img src="images/socom2_14.jpg" width="490" height="24" alt="">
                                                            <center><p><? $ext = ".php";
$id = "".$id."".$ext."";
if (file_exists($id))
{
include($id);
} else {
include("home.php");} ?></p></center>
     </div>
     
     
     <div id="right_panel">
         
              <div class="imgbox">
          <img src="images/socom2_16.jpg" width="169" height="24" alt="">
         </div>
          <div class="box">
             <?php include("radio.php"); ?>
         
          </div>
              <div class="imgbox">
          <img src="images/socom2_16.jpg" width="169" height="24" alt="">
         </div>
          <div class="box">
              <?php include("newmember.php"); ?>
         
          </div>
              <div class="imgbox">
               <img src="images/socom2_35.jpg" alt="" height="24" width="169">
         </div>
                              <div class="box">
         
               <p><?php include("rss2.php"); ?> </p>
         
          </div>
         
            <div class="imgbox">
                                  <img src="images/shoutbox.jpg" alt="" height="24" width="169">
         </div>
                              <div class="box">
         
               <p><iframe name="iframetag" marginwidth="0" marginheight="0" border="0" frameborder="0" src="/smiletag/view.php" width="125" height="200">
                  Your Browser must support IFRAME to view
                  this page correctly
              </iframe>
      
                    <form name="smiletagform" method="post" action="smiletag/post.php" target="iframetag"><br />
              Name<br /><input type="text" name="name" size="13"/><br />
              URL or Email<br /><input type="text" name="mail_or_url" value="http://" size="13"/><br />
              Message<br /><textarea name="message_box" rows="3" cols="13"></textarea><br />

              <input type="hidden" name="message" value="" />
              <input type="submit" name="submit" value="Tag!" onclick="clearMessage()" />
                    <input type="reset"  name="reset" value="Reset" /><br />
            </form> </p>
         
          </div>
         
     </div>
     
     <div class="clear"></div>
             
                  
</div>

</div>


</body>
</html>





Thanks
Fixitben
LVL 7
fixitbenAsked:
Who is Participating?
 
ale_jrbConnect With a Mentor Commented:
Try this one then:

<script type="text/javascript">
function R(n){
return Math.floor(Math.random()*n);
}

function writeSomeText(){
var s="";
for(var ii=0; ii<2000; ii++)
s+=ii + (R(30)<2 ? "<br>" : "")
return s;
}

function getInnerHeight(iframe){
var d=iframe.contentWindow ?
iframe.contentWindow.document :
iframe.contentDocument;
var h=0;
if(d){
if(d.documentElement && d.compatMode &&
d.compatMode=="CSS1Compat")
h=d.documentElement.scrollHeight;
else if(d.body)
h=d.body.scrollHeight;
if(h) h+=getInsets(d);
}
return (h||300)+"px"; //300 is a default value
}

function getInsets(d){
if(d.body.currentStyle)
with (d.body.currentStyle)
return (parseInt(marginTop)||0) +
(parseInt(marginBottom)||0) +
(parseInt(paddingTop)||0) +
(parseInt(paddingBottom)||0);
if(d.defaultView && d.defaultView.getComputedStyle)
with (d.defaultView)
return parseInt(getComputedStyle(d.body,"").
getPropertyValue("margin-top"))+
parseInt(getComputedStyle(d.body,"").
getPropertyValue("margin-bottom"))+
parseInt(getComputedStyle(d.body,"").
getPropertyValue("padding-top"))+
parseInt(getComputedStyle(d.body,"").
getPropertyValue("padding-bottom"));
return 0;
}
</script>




<iframe src="javascript:top.writeSomeText()"
width="559"
onload="this.style.height=getInnerHeight(this)"></iframe>
<table>
<tr>
<td height="300">
<iframe
height="100%" width="559"
src="javascript:top.writeSomeText()"
onload="
if(this.parentNode)
this.parentNode.style.height=getInnerHeight(this)">
</iframe>
</td>
</tr>
</table>


For further reading, see here:
http://www.thescripts.com/forum/thread89030.html

Hope this helps!
0
 
ljubiccicaCommented:
Hey...

i had the same problem... i have a flash radio on this site... And the only way i could do it is with frames...

the idea is that you have "main window" and the menus...

tha main window is in other frame so when the user ckicks on some link, the menu is not reloaded just your main window...

If you have any questions i will be happy to answer...

P.S.: i am able to "lock" other frames so user cannot see just one frame (which was a critic to my sollution)...

Ljubiccica
0
 
ale_jrbCommented:
The best idea would be to use an iframe. Set the iframe to display your main content, and make all your links only alter the frame.

As long as your player is not in the iframe, it will not keep refreshing.

Hope this helps!
0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
fixitbenAuthor Commented:
Well see I had I frames before.  which worked well but I really hated having the people scroll in the middle of the page.  The way I have it set up now each part of the page is a separate div that expands or contracts according to the hieght of the content.  Do you know of a way to allow the the size of the Iframe change. But now that the people have wanted a media player now I have come up with something.  And I really don't want to go back to Iframes because of the scrolling.


Thanks
Fixitben
0
 
ale_jrbCommented:
Sure you can change an iFrame's size! You use JavaScript, here's how:

function change_height() {
    if(document.getElementById && !(document.all)) {
      height =
document.getElementById('myiframe').contentDocument.body.scrollHeight;
       document.getElementById('myiframe').style.height = height;
    }
    else if(document.all) {
        height = document.frames('myiframe').document.body.scrollHeight;
        document.all.myiframe.style.height = height;
    }
}
</script>


<iframe id="myiframe" onLoad="change_height()" src="src.html"
scrolling="auto" height="100"></iframe>


For some further reading, see here:
http://www.faqts.com/knowledge_base/view.phtml/aid/18641

Hope this helps!
0
 
fixitbenAuthor Commented:
Well that works in IE but not mozilla.  Is there a way to get this to work in mozilla.

Thanks
Fixitben
0
 
ale_jrbCommented:
<head>
<title>Title</title>
<script language="JavaScript">

function setHeight() {
if(document.getElementById && !(document.all)) {
h = document.getElementById('iframename').contentDocument.body.scrollHeight;
document.getElementById('iframename').style.height = h;
}
else if(document.all) {
h = document.frames('iframename').document.body.scrollHeight;
document.all.iframename.style.height = h;
}
}
</script>
</head>

<body>
<iframe onLoad="setHeight();" src="yoururlhere.com" scrolling="no" scroll="no" id="iframename" marginwidth="0" marginheight="0" frameborder="0" style="width:100%;"></iframe>
</body>
</html>

That should work with Mozilla.

Hope this helps!
0
 
fixitbenAuthor Commented:
Nope Still doesn't work in mozilla only IE.

Here is the page if you want to peak at my code and see if I did something wrong.

http://trainingdayclan.com/main3.php


Thanks
Fixitben
0
 
fixitbenAuthor Commented:
It might help to tell you that I am loading these pages VIA php and a database.  So the page sizes my vary.  

Thanks
Fixitben
0
 
fixitbenAuthor Commented:
Thanks That last one worked like a charm!!!!


Thanks
Fixitben
0
 
ale_jrbCommented:
Glad we got there at last. Happy to have helped!

-Ale_Jrb-
0
 
fixitbenAuthor Commented:
Ok I have a question Look at this page http://trainingdayclan.com/main3.php

Once the page is stretched out it won't go back once the next smaller page is clicked.  

Is there a simple solution for this.

Thanks
Fixitben
0
 
fixitbenAuthor Commented:
It only does this in Mozilla.

Thanks
Fixitben
0
 
ale_jrbCommented:
It works fine for me in Mozilla Firefox. Is that what you mean?

I can go from your matches page, which is very large, to your About Us page - which is much smaller - and it resizes as it is meant to. If I then go to the roster, it gets bigger again and then smaller if I return to the index.

What exactly is it not doing as you wanted?
0
 
fixitbenAuthor Commented:
Well go in mozilla  and click roster then click about the page won't go back up.   It will stay way down there.

Thanks
Fixitben
0
 
ale_jrbCommented:
Ah - I have the problem now.

I'm sorry, but I can't really help you much more - PHP is my language rather than Javascript, and as far as I can make out, it should be working! You could try posting a new question in the Javascript section containing this script and your problem, or you could point to it from there and send people here.

Regards,
Ale_Jrb
0
 
fixitbenAuthor Commented:
Ok I will do that.  But thanks For your help.

Thanks
Fixitben
0
All Courses

From novice to tech pro — start learning today.