I am hoping that this is a proper forum to post to.
I got an Ajax script from Dynamic Drive called "Dynamic Ajax Content" that loads external pages into a DIV in the Parent page. The effect is much like that of an iFrame.
I am loading videos into the target DIV.
All of that works fine, but visibility on the parent page seems to be a problem. By necessity, I must(?) place the div close to the bottom of the page. However, when I click on a link that loads the video, I would like to have the parent page "jump" to the DIV with the video.
It is probably easier to visualize this than for me to try to explain it:
http://www.inatheaternearyou.com/peak-moments/peak-moments.html
For instance, if you click on "The Natural", the video indeed loads, but it is not 100% viewable since it is at the bottom of the page.
I tried to emulate an <a name=#jump"> <a href="#jump"> scenario, but since javascript is controlling the generation of the Ajax window, it was to no avail (I am embarrassed to say my javascript skills have eroded a bit!).
Are there any lines of code that can be added to the javascript that will correct this problem?
Another alternative?
Here is the javascript:
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(containerid).style.display="none"
document.getElementById(containerid).innerHTML=page_request.responseText
document.getElementById(containerid).innerHTML=document.getElementById("clip").innerHTML
document.getElementById(containerid).style.display="block"
}
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>Here is the HTML of the Parent Page:
<html>
<body>
<div id="wrapper">
<div class="topleft">
<div class="topright">
<div id="main">
<h1>Peak Moments</h1>
<h2>In Movies</h2>
<p>
<span class="biggerfont">P</span>sychologist Abraham Maslow described "Peak Experiences" as <dfn>moments when individuals feel at their very best, moments of great awe, intense happiness, rapture, bliss, ecstasy</dfn>. These moments provide a cresting awareness of profound goodness, justice, validation, and harmony.
</p>
<p>
<span class="bigfont">W</span>hile the above definition refers to the individual
experience, a film can likewise reach a juncture wherein it escapes the bounds
of the ordinary and expected, becoming transcendent, mythical in scale, and
indeed, even spirtual in nature. Correspondingly, these 'Peak Moments' in a movie
can also instill towering feelings of elation and transport to those experiencing them.
</p>
<p>
<span class="bigfont">D</span>on't worry,
</p>
</div>
<h3>Genres:</h3>
<div id="genres">
<div class="type">
<p><a href="#Drama">Drama</a></p>
</div>
<div class="type">
<p>SciFi</p>
</div>
<div class="type">
<p>Western</p>
</div>
<div class="type">
<p><a href="#Musical">Musical</a></p>
</div>
<div class="type">
<p>Action / Adventure</p>
</div>
<div class="type">
<p>Comedy</p>
</div>
<div class="type">
<p>Animation</p>
</div>
<div class="type">
<p>Horror</p>
</div>
</div>
<div id="films">
<h4><a name="#Drama">Drama</a></h4>
<p><a href="javascript:ajaxpage('the-natural.html', 'contentarea');loadobjs('external-wide.css')">The Natural</a>
</p>
<p><a href="javascript:ajaxpage('rocky4.html', 'contentarea');loadobjs('external.css')">Rocky 4</a>
</p>
<h4>Science Fiction</h4>
<p><a href="javascript:ajaxpage('t2.html', 'contentarea');loadobjs('external.css')">Terminator 2</a>
</p>
<h4>Western</h4>
<p><a href="javascript:ajaxpage('good-bad-ugly.html', 'contentarea');loadobjs('external.css')">
The Good, The Bad, and The Ugly : End Gunfight</a>
</p>
<p><a href="javascript:ajaxpage('snowy-river.html', 'contentarea');loadobjs('external.css')">The
Man from Snowy River : The Descent</a>
</p>
<h4><a name="Musical">Musical</a></h4>
<p><a href="javascript:ajaxpage('almost-famous.html', 'contentarea');loadobjs('external-wide.css')">Almost
Famous : The Bus Scene</a>
</p>
<p><a href="javascript:ajaxpage('footloose.html', 'contentarea');loadobjs('external.css')">Footloose : "I thought this was a party!"</a></p>
<p><a href="javascript:ajaxpage('flashdance.html', 'contentarea');loadobjs('external-wide.css')">Flashdance : The Final Audition</a></p>
</div>
<div id="films2">
<h4>Action / Adventure</h4>
<h4>Comedy</h4>
<p><a href="javascript:ajaxpage('fast-times-pool.html', 'contentarea');loadobjs('external.css')">
Fast Times at Ridgemont High : The Pool Scene</a>
</p>
<h4>Animation</h4>
<p><a href="javascript:ajaxpage('lion-king.html', 'contentarea');loadobjs('external.css')">
The Lion King</a>
</p>
<h4>Horror</h4>
</div>
<div id="contentarea">
</div>
<!--<div style="clear:both;width:50%;margin:0 auto;padding-top:25px;height:20px;background-image:url(images/film-wavy.gif); background-repeat:repeat-x; background-position:bottom center;">
</div>-->
</div>
</div>
<div style="clear:both;width:50%;margin:0 auto;padding-top:25px;height:20px;background-image:url(images/film-wavy.gif); background-repeat:repeat-x; background-position:bottom center;">
</div>
</div>
</body>
</html>Finally, here is an example of the page that is loaded INTO the parent page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Natural</title>
<style type="text/css">
</style>
</head>
<body>
<div id="clip" name="clip">
<object width="660" height="405">
<param name="movie" value="http://www.youtube.com/v/Bmsfdx40eSc&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1&border=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/Bmsfdx40eSc&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed>
</object>
<br />
<p style="width:660px;">Probably the most awe inspiring movie scene I have witnessed.
<br />I have to admit I get choked up each time I watch it.
<br />
The stadium lights exploding...Roy Hobbs rounding the bases as the sparks rain down...the elation of his teammates.
<br />
Then near the end, when we see the ball still sailing across the sky - wow. </p>
<p><a style="cursor: pointer;"onclick="javascript:document.getElementById('contentarea').style.display='none';">[ Close ]</a></p>
</div>
</body>
</html>I suppose i could solve this by having drop-down menus in lieu of the line-by-line ones my page currently is going with, but I like to have all the titles laid out, because people are less likely to go searching for something (and for SEO purposes).
Any help on this? :)
Rick
