PDA

View Full Version : Give a DIV a target name


PrimeNewsCenter
05-19-2008, 11:01 PM
I am using a DIV and have links that are in iFrames but for what I am going, iFrames do not work and I have links from other iframes and when clicked I want it to open where the div is but since the div does not have a target name, it will not open in that area, it opens in a new window. So does anyone no how to give a DIV a target name? Thanks!:)

Horus_Kol
05-19-2008, 11:52 PM
Hello again :)

target is a deprecated attribute that only ever worked with frames and iframes...

if you want to load information into a DIV, then you are going to have to look into Ajax

I recommend that you get the prototype scripts from http://www.prototypejs.org/ and include that into your page... then you can use their Ajax classes to change the content of a DIV...

the simplest thing would be to have a file with a block of HTML, and use onclick events to trigger an Ajax update:


<script type="text/javascript" src="protoype.js"></script>

<script type="text/javascript">
function change_content(elementname, filename)
{
new Ajax.Updater(elementname, filename);
}
</script>

<div id="not_a_frame">
</div>

<a href="" onclick="change_content('not_a_frame', 'some_content.html')">content 1</a>

<a href="" onclick="change_content('not_a_frame', 'other_content.html')">content 2</a>

As far as I'm aware - the filename can take any path relative to the current pages location on the server...

Also, links which are included inside the <div> will also work - even after the content has changed, as long as they reference the correct ID attribute

Finally, you do not need (actually, you do not want) these "included" files to be full HTML documents (so no <head> or <body> - just the section of content to go between the <div> tags).

PrimeNewsCenter
05-20-2008, 12:02 AM
Thank you for helping me! I am still having a little problem. I will post the code and maybe I am explaining it wrong. Thanks again for helping me out, I really appreciate it! What is happening with the code below is that it is opening in the whole page and not just in the area specified by the DIV. Thanks :)


<script type="text/javascript" src="protoype.js"></script>
<script type="text/javascript">
function change_content(elementname, filename)
{
new Ajax.Updater(elementname, filename); }
</script>

<div id="election" style="position:absolute; top:375px; left:65px; width:690px; height:1500px; text-align:left;">

<script type="text/javascript" src="http://urltoaccount.com" ></script>

<div align="center" class="badgePower" style="width:100%;">
<p style="margin-top: 2px; margin-bottom: 5px;">
<a href="http://www.mochila.com" target="_blank">Powered by Mochila</a></p>
</div>

</div>

<a href="http://www.primenewscenter.com/maptest.html" onclick="change_content('election', 'http://www.primenewscenter.com/maptest.html')">content 1</a>

<a href="" onclick="change_content('election', 'other_content.html')">content 2</a>

Horus_Kol
05-20-2008, 09:22 AM
sorry - i have missed a piece of code which stops the normal behaviour of the <a> tag


<a href="" onclick="change_content('election', 'http://www.primenewscenter.com/maptest.html');return false">content 1</a>

PrimeNewsCenter
05-20-2008, 03:13 PM
I'm sorry, I am sure you dont have time for people like me so if you dont, I understand. I have edited the code like you said in the last post and now nothing happens when i click the link. I will post my code below. Thank you so much!


<script type="text/javascript" src="protoype.js"></script>

<script type="text/javascript">
function change_content(elementname, filename)
{
new Ajax.Updater(elementname, filename);
}
</script>

<div id="election" style="position:absolute; top:375px; left:65px; width:690px; height:1500px; text-align:left;">
<script type="text/javascript" src="http://admatch-syndication.mochila.com/viewer/channel/loader?template=channelArticle&buyerId=#######"></script>

<div align="center" class="badgePower" style="width:100%;">
<p style="margin-top: 2px; margin-bottom: 5px;">
<a href="http://www.mochila.com" target="_blank">Powered by Mochila</a>
</p>
</div>

</div>

<a href="http://www.primenewscenter.com/maptest.html" onclick="change_content('election', 'http://www.primenewscenter.com/maptest.html'); return false">content 1</a>

Horus_Kol
05-20-2008, 08:05 PM
sorry - typo:


<script type="text/javascript" src="prototype.js"></script>


also - just checking - you did download the prototype library and place that JS file in the same directory as this page?

PrimeNewsCenter
05-20-2008, 08:19 PM
Hmm. Ya I installed the prototype and still not working. Am I suppose to change

function change_content(elementname, filename)
{
new Ajax.Updater(elementname, filename);

elementname, filename? Thank so much!

Horus_Kol
05-25-2008, 06:58 PM
no... that bit should be right...

i'm sorry - but I don't know why this wouldn't be working right now... hopefully someone else will drop by and offer some insight...