need help with iframe script and several other things... [Archive]

View Full Version : need help with iframe script and several other things...

rmsanagustin

01-17-2008, 09:19 AM

I'm new to the language of DHTML and am in desperate need of help as I am pretty much to my own devices (almost) with several issues. To preface, I'm simply a photographer trying to jumpstart my website - I've got the design part down pat, it's just that I need help with the more technical aspect of putting my website together. I appreciate all the pointers I can get

One: I tried referring to the dynamic ajax content instructions but got lost and about to give up hope. I basically have a section in my index page where I would like to open up my external linked pages by way of the rollover images on my menu. Can anyone tell me where I can find instructions on this that even a monkey can follow?

Two: The interface of my audio controls are standard. Are there any ways of changing the look of this at all?

Three: I have a fading image gallery as soon as you open my index page but runs continuously. I basically need it to stop and land on a certain page. Is there such a code for this?

Thanks much!

ddadmin

01-17-2008, 09:39 AM

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

rmsanagustin

01-17-2008, 09:55 AM

Oops....here is the link: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

codeexploiter

01-17-2008, 10:53 AM

Check the following code. It is a test implementation based on Iframe and Javascript.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#left-side{
width: 100px;
height: 550px;
float:left;
border: 1px solid grey;
padding:2px;
}
#right-side{
width: 900px;
height: 550px;
float: right;
border: 1px solid blue;
padding: 0px;
}
.links{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:small;
border: 1px solid red;
text-align:center;
padding:1px;
}
.links1{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:small;
border: 1px solid red;
text-align:center;
padding:1px;
background-color: #e7cdae;
}
</style>
<script type="text/javascript">
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\\\s)"+searchClass+"(\\\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

function eventInit(){
var nodes = document.getElementById('left-side').childNodes;
for(var i = 0; i < nodes.length; i++){
nodes[i].onclick = function(){
var actLnk = getElementsByClass('links1')[0];
actLnk.className = 'links';
this.className = 'links1';
var url = 'http://www.' + this.id + '.com';
if(document.getElementById('ifr').src == url)
return false;
else
document.getElementById('ifr').src = url;
};
}
}
window.onload = eventInit;
</script>
</head>
<body>
<div id="left-side">
<div id="google" class="links1">Google</div>
<div id="yahoo" class="links">Yahoo!</div>
<div id="microsoft" class="links">Microsoft</div>
</div>
<div id="right-side"><iframe id="ifr" src="http://www.google.com" width="900" height="550" frameborder="0"></iframe></div>
</body>
</html>

The same thing can be achieved using AJAX without much trouble but if you are trying to load the pages from other domains in your site then AJAX will not be an ideal solution.