Solved

Question about media player not reloading everytime the page changes.

Posted on 2006-06-24
17
405 Views
Last Modified: 2013-12-13
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
0
Comment
Question by:fixitben
  • 9
  • 7
17 Comments
 
LVL 7

Expert Comment

by:ljubiccica
ID: 16977668
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
 
LVL 4

Expert Comment

by:ale_jrb
ID: 16979065
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
 
LVL 7

Author Comment

by:fixitben
ID: 16979119
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
 
LVL 4

Expert Comment

by:ale_jrb
ID: 16979165
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
 
LVL 7

Author Comment

by:fixitben
ID: 16979215
Well that works in IE but not mozilla.  Is there a way to get this to work in mozilla.

Thanks
Fixitben
0
 
LVL 4

Expert Comment

by:ale_jrb
ID: 16979227
<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
 
LVL 7

Author Comment

by:fixitben
ID: 16979264
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
 
LVL 7

Author Comment

by:fixitben
ID: 16979295
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 4

Accepted Solution

by:
ale_jrb earned 500 total points
ID: 16979300
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
 
LVL 7

Author Comment

by:fixitben
ID: 16979319
Thanks That last one worked like a charm!!!!


Thanks
Fixitben
0
 
LVL 4

Expert Comment

by:ale_jrb
ID: 16979357
Glad we got there at last. Happy to have helped!

-Ale_Jrb-
0
 
LVL 7

Author Comment

by:fixitben
ID: 16981223
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
 
LVL 7

Author Comment

by:fixitben
ID: 16981236
It only does this in Mozilla.

Thanks
Fixitben
0
 
LVL 4

Expert Comment

by:ale_jrb
ID: 16981709
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
 
LVL 7

Author Comment

by:fixitben
ID: 16983474
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
 
LVL 4

Expert Comment

by:ale_jrb
ID: 16985596
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
 
LVL 7

Author Comment

by:fixitben
ID: 16985616
Ok I will do that.  But thanks For your help.

Thanks
Fixitben
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now