asked on

How to load html pages inside the css frame

Hi,

I have creeated a css frame and embedded a css menu in on of the frames. now each menu has submenu.when i click the sub menu the html page is opened in a new browser. i want the contents of the html page inside the frame .pls help

in the code when i click order->list all orders the page is redirected to hi.htm...i want to load the contents inside the frame

i have also attached the js and css files

----css1.htm------l
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Dynamic Drive DHTML Scripts- Drop Down Tabs demos</title>
<style type="text/css">
 
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}
 
#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}
 
#maincontent{
position: fixed;
top: 0; 
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}
 
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
 
* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
 
* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}
 
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
 
<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js"></script>
 
<!-- CSS for Drop Down Tabs Menu #1 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />
 
</head>
 
<body>
 
<div id="framecontent">
<div class="innertube">
 
<h1>TRAVEL </h1>
<h1>AND</h1>
<h1>STAY</h1>
<p>&nbsp;</p>
<h1>ADMIN</h1>
<h1>PANEL</h1>
<p>&nbsp;</p>
 
<p>&nbsp;</p>
<p>&nbsp;</div>
</div>
 
<div id="maincontent">
<div class="innertube">
 
<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="#" title="Home"><span>Home</span></a></li>
<li><a href="#" title="New"><span>Set Properties</span></a></li>
<li><a href="#" title="CSS" rel="dropmenu1_a"><span>Orders</span></a></li>
<li><a href="#" title="Partners" rel="dropmenu2_a"><span>Reports</span></a></li>	
<li><a href="#" title="Useful Tools"><span>Clients</span></a></li>	
</ul>
</div>
 
<div class="ddcolortabsline" style="width: 775px; height: 9px">&nbsp;</div>
 
</div>
</div>
 
 
 
<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="hi.html" >List All Orders</a>
<a href="#">Active Orders</a>
<a href="#">Pending Orders</a>
<a href="#">Complete Orders</a>
</div>
 
 
<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="#">Daily Income</a>
<a href="#">Monthly Income</a>
<a href="#">Annual Income</a>
</div>
 
 
 
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>
 
</body>
 
</html>
 
 
 
------dropdowntabs.js----------
 
//Drop Down Tabs Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Created: May 16th, 07'
 
var tabdropdown={
	disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
	disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
	enableiframeshim: 1, //1 or 0, for true or false
 
	//No need to edit beyond here////////////////////////
	dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
	currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)
 
	getposOffset:function(what, offsettype){
		var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
		var parentEl=what.offsetParent;
			while (parentEl!=null){
				totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
				parentEl=parentEl.offsetParent;
			}
		return totaloffset;
	},
 
	showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
		if (this.ie || this.firefox)
			this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
		if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
			if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
				obj2.parentNode.className="selected"
			obj.visibility="visible"
			}
		else if (e.type=="click")
			obj.visibility="hidden"
	},
 
	iecompattest:function(){
		return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	},
 
	clearbrowseredge:function(obj, whichedge){
		var edgeoffset=0
		if (whichedge=="rightedge"){
			var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
			this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
		if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
			edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
		}
		else{
			var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
			var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
			this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
			if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
				edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
				if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
					edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
			}
			this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
		}
		return edgeoffset
	},
 
	dropit:function(obj, e, dropmenuID){
		if (this.dropmenuobj!=null){ //hide previous menu
			this.dropmenuobj.style.visibility="hidden" //hide menu
			if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
				if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
					this.previousmenuitem.parentNode.className=""
			}
		}
		this.clearhidemenu()
		if (this.ie||this.firefox){
			obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
			obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
			this.dropmenuobj=document.getElementById(dropmenuID)
			this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
			this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
			this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
			this.showhide(this.dropmenuobj.style, e, obj)
			this.dropmenuobj.x=this.getposOffset(obj, "left")
			this.dropmenuobj.y=this.getposOffset(obj, "top")
			this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
			this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
			this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
			this.positionshim() //call iframe shim function
		}
	},
 
	contains_firefox:function(a, b) {
		while (b.parentNode)
		if ((b = b.parentNode) == a)
			return true;
		return false;
	},
 
	dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
		var evtobj=window.event? window.event : e
		if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
			this.delayhidemenu(obj2)
		else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
			this.delayhidemenu(obj2)
	},
 
	delayhidemenu:function(obj2){
		this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
	},
 
	clearhidemenu:function(){
		if (this.delayhide!="undefined")
			clearTimeout(this.delayhide)
	},
 
	positionshim:function(){ //display iframe shim function
		if (this.enableiframeshim && typeof this.shimobject!="undefined"){
			if (this.dropmenuobj.style.visibility=="visible"){
				this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
				this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
				this.shimobject.style.left=this.dropmenuobj.style.left
				this.shimobject.style.top=this.dropmenuobj.style.top
			}
		this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
		}
	},
 
	hideshim:function(){
		if (this.enableiframeshim && typeof this.shimobject!="undefined")
			this.shimobject.style.display='none'
	},
 
isSelected:function(menuurl){
	var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
	return (tabdropdown.currentpageurl==menuurl)
},
 
	init:function(menuid, dselected){
		this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
		var menuitems=document.getElementById(menuid).getElementsByTagName("a")
		for (var i=0; i<menuitems.length; i++){
			if (menuitems[i].getAttribute("rel")){
				var relvalue=menuitems[i].getAttribute("rel")
				document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
				menuitems[i].onmouseover=function(e){
					var event=typeof e!="undefined"? e : window.event
					tabdropdown.dropit(this, event, this.getAttribute("rel"))
				}
			}
			if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[i].href)){
				menuitems[i].parentNode.className+=" selected default"
				var setalready=true
			}
			else if (parseInt(dselected)==i)
				menuitems[i].parentNode.className+=" selected default"
		}
	}
 
}
 
 
-----ddcolortabs.css-------
 
 
.ddcolortabs{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
 
.ddcolortabs ul{
font: normal 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
 
.ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}
 
 
.ddcolortabs a{
float:left;
color: white;
background: black url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}
 
.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 4px 8px 2px 7px;
}
 
.ddcolortabs a span{
float:none;
}
 
.ddcolortabs a:hover{
background-color: #591f20;
}
 
.ddcolortabs a:hover span{
background-color: #591f20;
}
 
.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
background-color: #591f20;
}
 
.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: black;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
 
/* ######### Style for Drop Down Menu ######### */
 
.dropmenudiv_a{
position:absolute;
top: 0;
border: 1px solid black; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
 
 
.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #678b3f;
border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: black;
}
 
* html .dropmenudiv_a a{ /*IE only hack*/
width: 100%;
}
 
.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background-color: #8a3c3d;
color: white;
}

Open in new window

Graceful_Penguin

Just set the target of the link to the frame.

quincydude

try changing the line

<a href="hi.html" >List All Orders</a>

to

<a target="_self" href="hi.html" >List All Orders</a>

or change the _self to any frame name that you want the page to be opened

whspider

ASKER

i tried that option also even then its openin in a new page

quincydude

which browser are u using?
And can u show me the code of the main page(the one with <frame> tags)?

whspider

ASKER

am using firefox 3.0

my main page is css1.htm.i have pasted the code above...

quincydude

but I cannot see any frame in the code, which you are talking about.

whspider

ASKER

act am new to css..i just integrated some of the css coding...i mistook of the frame content and classes.
pls tell me how to do this

whspider

ASKER

with the code i posted below can you tell me how to modify so that i get the desired output

quincydude

I know you are using the dnyamic drive's drop down menu from your code.
The problem is I copied your code and tested on my machine. I cannot see anything you mentioned as "opened in a new browser"

ASKER CERTIFIED SOLUTION

quincydude

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

whspider

ASKER

thank you very muchexactly what i wanted

whspider

ASKER

i have one more issue...

with html its working fine....if i link a php file i do not get the contents..it giving a pop up saying do wish to open or save file..how do i fix this

quincydude

This is a strange issue...I think it's not related to the code.
I think I have seen problem like that here before.
You may try searching in this site.

Ask here if there's further problem on it.

whspider

ASKER

thank you i fixed it i made a small mistake