Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Question about media player not reloading everytime the page changes.

Posted on 2006-06-24
17
416 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Cookie not unsetting 7 27
Dynamic Dropdowns 15 32
Echo Multiple values from multiple records 19 39
Php logic to add to date card 9 18
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
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.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

839 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