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

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

0
whspider
Asked:
whspider
  • 7
  • 6
1 Solution
 
Graceful_PenguinCommented:
Just set the target of the link to the frame.
0
 
quincydudeCommented:
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
0
 
whspiderAuthor Commented:
i tried that option also even then its openin in a new page
0
Independent Software Vendors: 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!

 
quincydudeCommented:
which browser are u using?
And can u show me the code of the main page(the one with <frame> tags)?
0
 
whspiderAuthor Commented:
am using firefox 3.0

my main page is css1.htm.i have pasted the code above...
0
 
quincydudeCommented:
but I cannot see any frame in the code, which you are talking about.
0
 
whspiderAuthor Commented:
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
0
 
whspiderAuthor Commented:
with the code i posted below can you tell me how to modify so that i get the desired output
0
 
quincydudeCommented:
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"
0
 
quincydudeCommented:
Well I suddenly think you are asking for something like this.
But it's totally not relevant to what you mentioned the problem to be.
Correct me if I am wrong.
<!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="http://www.dynamicdrive.com/dynamicindex1/dropdowntabfiles/dropdowntabs.js"></script>
 
<!-- CSS for Drop Down Tabs Menu #1 -->
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/dynamicindex1/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>
 
  <iframe id="frame1" name="frame1"
	src="" 
	width="750"
    height="500"
	frameborder="0" 
	scrolling="auto"> 
	</iframe> 
</div>
</div>
 
 
 
<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="hi.html" target="frame1">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>
 

Open in new window

0
 
whspiderAuthor Commented:
thank you very muchexactly what i wanted
0
 
whspiderAuthor Commented:
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
0
 
quincydudeCommented:
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.
0
 
whspiderAuthor Commented:
thank you i fixed it i made a small mistake
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now