Member Avatar for vedmack

Hi.

I got a page on which on the left side there is a Tree with branches,
on the right side of the page i got an <EMBED> tag that shows a pdf file,
User can click on tree branches to expand them and can click on the leafs to view different pdf in on the right side of the page...

The problem is that if a user expand several branches the tree grows down and than the user scrolls down the page. to click some leaf of the tree... and by doing the scroll the <EMBED> tag with the pdf becomes invisible (because the user scrolled up)..

how can i make the <EMBED> tag stay allways on top of the page even if the user scrolls down....?


Thanks ahead...

Daniel.

  • 2 Contributors
  • 4 Replies
  • 358 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by vedmack
Member Avatar for essential

This can be done with css!

div, embed {
   margin: 0;
   padding: 0; }
div {
   position: fixed;
/* Now position your element(s) on the desired spot in your page. Try to use percentages when set you their values */
   right: 1%; top: 1%; }
div div {
   display: table;
   border: none;
   border-collapse: collapse;
   height: auto;
   min-height: 20%;
   width: auto;
   position: relative;
   table-layout: fixed; }
div embed {
   display: table-cell;
   border: none;
   height: auto;
   vertical-align: top;
   width: auto; }

now in your (x)HTML document

<div>
<div><embed></embed></div></div>
Member Avatar for vedmack

Thanks but it doesn't work :/

I did exactly as you told...
Here is the test html page

<html>
	<head>
		<title>Test Page</title>
		<style>
			div, embed {
			   margin: 0;
			   padding: 0; }
			div {
			   position: fixed;
			/* Now position your element(s) on the desired spot in your page. Try to use percentages when set you their values */
			   right: 1%; top: 1%; }
			div div {
			   display: table;
			   border: none;
			   border-collapse: collapse;
			   height: auto;
			   min-height: 20%;
			   width: auto;
			   position: relative;
			   table-layout: fixed; }
			div embed {
			   display: table-cell;
			   border: none;
			   height: auto;
			   vertical-align: top;
			   width: auto; }
		</style>
	</head>
	<body>
		<div>
			<div>
				<embed src="default.pdf#toolbar=0" type="application/pdf">
				</embed>
			</div>
		</div>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	</body>
</html>

When i scroll down the embed tag disappear on top, and does not follow the viewed area of the page....

Any other ideas?

Thanks ahead...

Member Avatar for essential

Ok, Try to set absolute width and height with your embed tag like this:

<style type="text/css" media="screen,projection">
div embed {
   display: block;
   position: fixed;
   height: 300px;
   width: 300px;
   top: 1%;
   right: 1%; }
</style>
Member Avatar for vedmack

Ok, Try to set absolute width and height with your embed tag like this:

<style type="text/css" media="screen,projection">
div embed {
   display: block;
   position: fixed;
   height: 300px;
   width: 300px;
   top: 1%;
   right: 1%; }
</style>

Thanks but this doesn't work in IE 6 ... (does work in FF) but the IE is the browser i must to work under...

Any ideas to how can I make it work in IE 6 ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.