We help IT Professionals succeed at work.

Question about media player not reloading everytime the page changes.

fixitben
fixitben asked
on
464 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
Comment
Watch Question

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

Commented:
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!

Author

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

Commented:
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!

Author

Commented:
Well that works in IE but not mozilla.  Is there a way to get this to work in mozilla.

Thanks
Fixitben

Commented:
<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!

Author

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

Author

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
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks That last one worked like a charm!!!!


Thanks
Fixitben

Commented:
Glad we got there at last. Happy to have helped!

-Ale_Jrb-

Author

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

Author

Commented:
It only does this in Mozilla.

Thanks
Fixitben

Commented:
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?

Author

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

Commented:
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

Author

Commented:
Ok I will do that.  But thanks For your help.

Thanks
Fixitben

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.