help - load HTML into DIV using JavaScript

  • solarstone
  • Born
  • Born
  • solarstone
  • Posts: 2

Post 3+ Months Ago

hello
i was wondering if someone can help me with
problem i have...

i have web page that has few links
and DIV layer in which i would like to load
another pages depending on link clicked

i do not wish to use iframe since it breaks compatibility
with some browsers

i was searching via google, found few scripts
but none of them worked, atleast not for loading html content
into DIV layer, just text and pictures and i dont need that :P

so best code i found was this:

Code: [ Select ]
<a href="javascript:loadPage('DIV_layer',null,'web-page.html')">Link-1</a>


but it didn't work

so any help would be welcomed (simple if possible)
since i don't know JS, only HTML/CSS :P
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

From the code you supplied above you appear to be calling a JavaScript function called "loadPage". Did you put more JavaScript on your page that also contains the loadpage function? Wherever you obtained that code make sure you grab everything needed to make it work.
  • solarstone
  • Born
  • Born
  • solarstone
  • Posts: 2

Post 3+ Months Ago

yes it is partial code for "on link click"
the code i took it actualy through JS loads content
in iframe which as i said i don't wish to use

so i pasted that little part to see if anyone here could
(as rude as it sounds) "make" or "fill-in"
part of code that could make it "on click of link" to
load another HTML in DIV layer

here is full code i found but as said with iframe use
Code: [ Select ]
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var nn4 = (document.layers);
var nn6 = (document.getElementById && !document.all);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
function loadPage(id,nestref,url) {
if (nn4) {
var lyr = (nestref)? eval('document.'+nestref+'.document.'+id) : document.layers[id]
lyr.load(url,lyr.clip.width)
}
else if(ie4) parent.contentFRM.location = url;
else if(ie5 || nn6) document.getElementById('contentFRM').src = url;
}
function showPage(id) {
if (ie4) {
document.all[id].innerHTML = parent.contentFRM.document.body.innerHTML;
}
else if(nn6 || ie5) {
document.getElementById(id).innerHTML = window.frames['contentFRM'].document.getElementById('theBody').innerHTML;
  }
}
// End -->
</script>
</HEAD>

<!-- into your BODY tag -->

<BODY onload="parent.showPage('contentLayer')">

<a href="javascript:loadPage('contentLayer',null,'load-html-demo.html')">Load Page</a>
<iframe name="contentFRM" id="contentFRM" width="0" height="0" frameborder="0">
</iframe>
<div id="contentLayer" style="position:absolute; width:345px; height:115px; z-index:1; left: 186px; top: 304px"></div>
  1. <HEAD>
  2. <SCRIPT LANGUAGE="JavaScript">
  3. <!-- Begin
  4. var nn4 = (document.layers);
  5. var nn6 = (document.getElementById && !document.all);
  6. var ie4 = (document.all && !document.getElementById);
  7. var ie5 = (document.all && document.getElementById);
  8. function loadPage(id,nestref,url) {
  9. if (nn4) {
  10. var lyr = (nestref)? eval('document.'+nestref+'.document.'+id) : document.layers[id]
  11. lyr.load(url,lyr.clip.width)
  12. }
  13. else if(ie4) parent.contentFRM.location = url;
  14. else if(ie5 || nn6) document.getElementById('contentFRM').src = url;
  15. }
  16. function showPage(id) {
  17. if (ie4) {
  18. document.all[id].innerHTML = parent.contentFRM.document.body.innerHTML;
  19. }
  20. else if(nn6 || ie5) {
  21. document.getElementById(id).innerHTML = window.frames['contentFRM'].document.getElementById('theBody').innerHTML;
  22.   }
  23. }
  24. // End -->
  25. </script>
  26. </HEAD>
  27. <!-- into your BODY tag -->
  28. <BODY onload="parent.showPage('contentLayer')">
  29. <a href="javascript:loadPage('contentLayer',null,'load-html-demo.html')">Load Page</a>
  30. <iframe name="contentFRM" id="contentFRM" width="0" height="0" frameborder="0">
  31. </iframe>
  32. <div id="contentLayer" style="position:absolute; width:345px; height:115px; z-index:1; left: 186px; top: 304px"></div>

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 160 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.