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 &quot;Peak Experiences&quot; 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

The anchor tag will actually work, you just don't know how to implement it.

Add this tag INSIDE your AJAX <object> element.

<object height="405" width="660">
	<a style="padding-right: 660px; position: relative; bottom: -15px; visibility: hidden;" name="jump">Video</a>
	<!-- The rest of your params and embed code -->
</object>

Then, when you use AJAX to load a video, add this to your JavaScript:

document.location.href = document.location.href.replace(/(?:#(?![^#]*\.)).*$/, "") + "#jump";

The reason for the extra regular expression is so that it removes the current anchor with the new one, and you don't get a URL searching for <a name="jump#jump">

commented: Thanks for the help - I appreciate it :) +4

Spycat,

Itsjareds has just beaten me to it. My advice is just about the same, maybe a bit simpler (no RegExp needed).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<script>
function goToVideo(){
	location.hash = 'video';
}
</script>
</head>
<body>
<a href="" onclick="goToVideo(); return false;">Go to Video</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="video">Video</a>
<div style="width:150px;height:150px;background-color:#d9f4d2;border:3px solid #000000;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

Note: <br>s (or other content) after the video ensure that the window can scroll far enough.

Tested in IE6, Firefox 3.0.10 ands Opera 9.01

Airshow

Spycat,

A small word of warning. Whether you use Itsjareds' code or mine, you have to pay attention to a subsequent form submission from the page. It may be better to set the form's action explicitly rather than rely on action="" to re-serve the same url (which the browser will request by default). The requested url may have its #video fragment still intact so the re-served document may jump to the video again (unless you take measures server-side, such as a redirect).

Of course:

  • If you submit a form with action="explicitlyThisDocumentWithoutTheHash" then you avoid the jump.
  • If you submit a form with action="anotherDodument" then this is all academic.
  • If you don't perform a form submission from the page then this is all academic.

Airshow

commented: I appreciate your help - thanks sos much! :) +4

Ah, I didn't know there was such a thing as location.hash. I think your method is better :P

Hi Jared,

Brilliant solution -- this seems to work really well.
The only alteration I did was increase the bottom margin from -15px to 50px to insure it picked up my writing below the video:

<object width="660" height="405">
  <a style="padding-right: 660px; position: relative; bottom: -50px; visibility: hidden; clear:both;" name="jump">Video</a>
    <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>

BTW, here is where I placed your regular expression.
I am assuming I put it in its proper place, seeing as it works well :)

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"
document.location.href = document.location.href.replace(/(?:#(?![^#]*\.)).*$/, "") + "#jump";
}

Here is the page in question.
All links are not set up yet, but the one for "The Natural" is:
http://www.inatheaternearyou.com/peak-moments/peak-moments.html

Rick

Hi Airshow,

How's it goin'?
Thanks for your fast response.
I am intrigued as to the many ways the same goal can be reached thru multiple means.
I like your solution as well, but seeing as how I have been negligent in maintaining any javascript skills I may have had at one time, I am a bit confused as to which pages I should put your code on.
As the parent page calls the child page containing the video, I ask:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
The below goes into the Parent page, correct?
<script>
function goToVideo(){
	location.hash = 'video';
}
</script>
</head>
<body>
Which document does the below go into?
<a href="" onclick="goToVideo(); return false;">Go to Video</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

I am guessing the code below with the named anchor would be the target for the above link, and would be placed on the Child Page, no?

<a name="video">Video</a>
<div style="width:150px;height:150px;background-color:#d9f4d2;border:3px solid #000000;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

Note: <br>s (or other content) after the video ensure that the window can scroll far enough.

Tested in IE6, Firefox 3.0.10 ands Opera 9.01

Airshow

Again, thanks :)

Spycat,

Mine was a very crude demo of how you can use javascript to go to a named anchor on the same page. It is virtually identical to Itsjareds' solution, which he kindly wrote in the context of your original code. (I was lazy).

There's no need to change Itsjareds' code but if you want to try, then change his line document.location.href = document.location.href.replace(/(?:#(?![^#]*\.)).*$/, "") + "#jump"; to document.location.hash = "jump" . Everything else in my demo page is just padding. .hash is a built-in property of URL objects, thus making the hash fragment individually read/writable.

Airshow

Yep, basically Airshow's method was much cleaner and involved writing no regular expressions. The way I went about it just re-invented the wheel -- I didn't know about the other way :P. I would advise you to replace my code with his, since his is much less (if not at all) error prone.

So, change my line:

document.location.href.replace(/(?:#(?![^#]*\.)).*$/, "") + "#jump";

To:

document.location.hash = "jump";

Both would be fine as long as your page isn't similar to facebook where it navigates through hash urls (does not change the page but adds #/newPage.html to the URL). Good luck with the rest of your site :)

itsjareds & Airshow,

I want to thank the two of you for taking the time to provide
solutions to my dilemma - I sincerely appreciate it! :)
Here is the page:
http//www.inatheaternearyou.com/
Getting closer to completion.

Take care & best wishes!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.