• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1772
  • Last Modified:

Directing A HREF links to target CSS DIV Layers?

Is it possible in any way to direct A HREF links to target CSS DIV Layers, such as their own layer, or another, on the same page?

I believe it can be done if I were using iFrames, but wasn't sure about CSS DIV layers.

Thanks,
Frank
0
GrungyApe
Asked:
GrungyApe
  • 4
  • 3
  • 2
1 Solution
 
tripst3rCommented:
You're right. You can load the target of an HREF into a page, a frame, or an iframe, but not into other elements. Except if you're talking about XHMTL2, which allows for HREF as an attribute of many elements (http://www.w3.org/TR/2003/WD-xhtml2-20030131/mod-attribute-collections.html#col_Hypertext). AFAICT, XHTML2 still wouldn't allow you to change remote content in a DIV from another DIV, but you would be able to set the HREF attribute of the target DIV through the DOM and scripting.

Tk
0
 
COBOLdinosaurCommented:
you can do it this way using XMLHTTP:
<html>

<head>
<script language='JavaScript'>

function include(url,target)  // must be a fully qualified URL, I don't know why.
{
   var xml = new ActiveXObject("Microsoft.XMLHTTP");
   xml.Open( "GET", url, false );
   xml.Send()
   document.getElementByid(target).innerHTML=xml.responseText;
}

</script>
</head>

<body>
<a href="#" onClick="include('http://server/external.htm','divX');return false"> load page</a>
<div id="divX">&nbsp;</div>

</body>
</html>


Cd&
0
 
GrungyApeAuthor Commented:
Let me ask so I am sure I am clear and understanding you also Cd

Can I use this to make hyper links in a layer load new content inside itself, much like you might do in an iframe of frame scenario?

Also, how might it be used to make a menu on the left load content into a center layer?  I'm not seeing something that tell me it can do this... but I'm not up on my XML(activeX) clearly.

Thanks
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
COBOLdinosaurCommented:
Yes it can overwrite itself.  Yes it can overwrite any layer in the page.  

Once the function is executed xml.responseText contains a string that is the code of the file accessed, so you can do anything with it that you could do with any code string.

The innerHTML of any element can be replaced.

There are probably some cross-domain security restrictions, but they will be less than other methods of bringing in code.

Cd&



0
 
COBOLdinosaurCommented:
The one caution those, is that when you load it in, it is going to add itself to the document object, so it can end up re-rendering the page if you don't keep it well contained.  Generally when I am going to do this, I use a fixed sized scrolling div so it does not spread out all over the place.

Cd&
0
 
GrungyApeAuthor Commented:
I am going to try putting this into a page and testing it today, I'll let you know how I fair.
0
 
GrungyApeAuthor Commented:
I took the code, semi-as is, and threw it into a test page.  It complained the "object doesn't support this property or method".

I discovered it required MSXML Parser, or so it said when I looked up the XMLHTTP.  Grabbed it and loaded it to be sure I had it and the most recent.

Now, in order to use this, must my page by anything specific, asp, htm, etc..  does it require execute perms or anything beyond what a standard html page requires?
0
 
tripst3rCommented:
The page has to be an ASP page.

Tk
0
 
GrungyApeAuthor Commented:
ah, ouch... that won't work then.  crud!  :(

One, many of the pages I work in are cfm based, but beyond that, this specific site is html.

I can obviously create a unique page for each needed, I just was hoping not to chunk the site up by doing so.

Let me see about assigning points, I will credit Cd on this one and I'll make a new post with a similar title.

Tk, just reply to it and I'll toss you the points as well.  

Thanks, both of you.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now