Forum Moderators: open
(note, the
[/code] tags don't seem to be doing anything in the preview, so i don't know if they'll work in my post. sorry :/)[code]
<script>
function loadTwo(PictureFrameURL, PageFrameURL) {
window.document.getElementById('PictureFrame').src = PictureFrameURL;
window.document.getElementById('PageFrame').src = PageFrameURL;
}
function changeImgContent()
{
document.getElementById('imageDIV').innerHTML = window.frames['PictureFrame'].document.getElementsByTagName('jpg')[0].innerHTML;
}
function changeTxtContent()
{
document.getElementById('contentDIV').innerHTML = window.frames['PageFrame'].document.getElementsByTagName('html')[0].innerHTML;
}
</script>
</head>
<body>
<div id="viewport" align="center">
<div id="box">
Banner Goes Here.<br />
<div id="main" align="right">
<div id="sub-banner" align="center">
20th ANNIVERSARY CELEBRATION
</div>
<div id="nav">
<a class="navtext" onFocus="if(this.blur)this.blur()" href="javascript:loadTwo('images/BigThwacket.jpg', 'pages/home.html')" target="PageFrame">Home</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="javascript:loadTwo('images/bkg_grey.jpg', 'pages/sponsors.html')" target="PageFrame">Sponsors</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/donate.html" target="PageFrame">Donate</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/locations.html" target="PageFrame">Locations</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/gallery_anniversary.html" target="PageFrame">Gallery</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/registeronline.html" target="PageFrame">Register Online</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/contact.html" target="PageFrame">Contact Us</a><br />
<hr />
<span class="normal"><b>CONFERENCE</b></span><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/speakerlist.html" target="PageFrame">Speaker List</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/agenda.html" target="PageFrame">Agenda</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/keynotespeakers.html" target="PageFrame">Keynote Speakers</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/downloads.html" target="PageFrame">Downloads</a><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/gallery_conference.html" target="PageFrame">Gallery</a><br />
<hr />
<span class="normal"><b>GALA</b></span><br />
<a class="navtext" onFocus="if(this.blur)this.blur()" href="pages/auctionitems.html" target="PageFrame">Auction Items</a><br />
</div>
<div id = "imageDIV" class="normal"><br></div>
<div id = "contentDIV" class="normal"><br></div>
<iframe id = "PictureFrame" name = "PictureFrame" src ="images/BigThwacket.jpg" onLoad = "changeImgContent()" style = "height:0; width:0; border-width:0;"></iframe>
<iframe id = "PageFrame" name = "PageFrame" src ="pages/home.html" onLoad = "changeTxtContent()" style = "height:0; width:0; border-width:0;"></iframe>
</div>
</div>
</div>
Pretty standard navigation column floated left, with a pretty standard content section (iFrame) filling in to the right. There are thirteen (13) pages, and each of them has a picture at the top of the content section - two pages have a large image, the rest have smaller images and a title. Beneath that, I'm currently just filling in lorem ipsum until the client finalizes the content.
Originally, the iFrame was cutting off the content halfway down, and no matter what I did with height, etc., it wasn't working. I searched about and found some Javascript to load the content in a hidden iFrame and then pop it into a <div>, which worked quite well until I tried to place the images ... cos they don't show up. I've tried doubling up on that "load and switch" thing, but to no avail. I only get the text twice. I admit, I'm not good with Javascript, so my best guess is that "getElementByTagName" doesn't work so well with an image? This site ultimately needs to be maintained by someone even less knowledgeable than myself, so I'm trying to keep things separate and clean.
Any suggestions will be greatly appreciated, either for cleaning up what I've got or doing it another way. Thanks in advance!
If I understand correctly you have only one url visible, so search engines will see only the first page navigation and possibly the first iframe ?
avoid as much content-refreshing as possible
What is the ratio of the navigation + other boiler plate content to the iframe content, is there any real savings to be had ? Perhaps more could be gained by pre loading some of other images in anticipation ?
Also consider using httpRequist style AJAX instead of Iframes, use of jQuery or other library make that option easy these days.
i had considered the "one url" aspect of this design earlier, but decided that it really wasn't going to make much of a difference to break all of them out and make them visible. The first iteration of the site was all one big flash movie, which would have had basically the same limitation, and the client seems pretty interested in the site maintaining that sort of look. at the same time, search engine visibility probably isn't a huge need for them.
pre-loads are a great idea, and i'll definitely incorporate that. unfortunately, the problem still remains that the images in the pages called by the iframe aren't displaying. perhaps i should have emphasized that in the original post :/
those pages are set up as simple html between <html> tags ... no header, no body tags ... which was the suggestion of the person who posted the "changeImgContent" code.
i wasn't clear on whether i could or should post the url in question, so is there anything else i can include that would help show the problem?
thanks again!
<iframe id = "PictureFrame" name = "PictureFrame" src ="images/BigThwacket.jpg" onLoad = "changeImgContent()" style = "height:0; width:0; border-width:0;"></iframe>
is an image file is a valid source for an iframe ?
also getElementsByTagName('jpg') will not work as there is no jpg Tag.
There seems no need to use intermediate iframe to update image,
TRY
<div id = "imageDIV" class="normal"><image id="imageEl" src="?.jpg" /></div>
function loadTwo(PictureFrameURL, PageFrameURL) {
window.document.getElementById('imageEl').src = PictureFrameURL;
window.document.getElementById('PageFrame').src = PageFrameURL;
}
