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
  • 379 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by vedmack

Dani AI

Generated

Short summary: wants the PDF embed to stay visible while the user scrolls. is right to use position:fixed for modern browsers (that is why it worked in Firefox), but IE6 does not support position:fixed. Below is a practical, backward-compatible approach plus troubleshooting notes.

IE6 fallback (concept)

  • Use position:fixed in your normal stylesheet for modern browsers.
  • For IE6 (or any browser that lacks fixed), make the container position:absolute and update its top on scroll with JavaScript so it visually follows the viewport.
  • Give the container an explicit size and a high z-index. Note: some PDF plugins render as native windowed controls and may ignore stacking; if that happens try an iframe wrapper or a different embedding approach.

Example script (put an element with id "stickyPdf" around your embed/object, then add this script):

<!-- wrapper: put your embed/object/iframe inside this -->
<div id="stickyPdf" style="right:10px; width:320px; height:400px; z-index:9999;">
  <!-- embed/object/iframe goes here -->
</div>

<script>
(function(){
  var box = document.getElementById('stickyPdf');
  if(!box) return;

  // feature detect fixed position
  var t = document.createElement('div');
  t.style.cssText = 'position:fixed;top:10px;';
  document.body.appendChild(t);
  var fixedOK = (t.offsetTop === 10);
  document.body.removeChild(t);

  if(!fixedOK){
    box.style.position = 'absolute';
    function move(){
      var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop || 0;
      box.style.top = (scrollTop + 10) + 'px';
    }
    move();
    if(window.attachEvent) window.attachEvent('onscroll', move);
    else window.addEventListener('scroll', move, false);
  }
})();
</script>

Troubleshooting tips

  • If the PDF still misbehaves, test with a simple div or img inside #stickyPdf to rule out plugin drawing quirks.
  • If scroll repositioning is janky, throttle the handler (or use requestAnimationFrame in modern browsers).
  • If z-order problems persist with the Acrobat plugin, try serving the PDF in an iframe, or use a HTML-based renderer (PDF.js) so the preview obeys normal stacking.

Recommended Answers

All 4 Replies

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.