Text hidden by a non-scrolling region

Brian Wheeldon · Post by **Brian Wheeldon** » Fri Feb 24, 2012 8:15 am

I have created a project that contains a non-scrolling region at the top of each topic. I have added a top margin to the body tag so that the topic's content can be seen below the non-scrolling region. The project also includes sections of drop down text that include bookmarks.
The problem is that when I jump to one of the bookmarks, I cannot see all of the text because it is hidden by the non-scrolling region.
Can anybody help me to fix this problem.

i-tietz · Post by **i-tietz** » Fri Feb 24, 2012 9:02 am

What you need is to have an onload/onresize javascript rewrite the links that have bookmarks.
I have on for you that I wrote for a HTML Help - I parse the path of the document which, in a HTML Help, looks like this:

Code: Select all

mk:@MSITStore:D:\RS_Hilfe\wawi\Output\it\Wawi\wawi.chm::/start.htm

For rewriting the links I completely neglect up to the "::" ... you would have to adapt that for Webhelp ...

AND:
The problem is, that for Webhelp it probably only works for the Internet Explorer, becasue of the "document.all" bits in the code.
Masterpage:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <head>
        <script type="text/javascript">
            <!--
window.onload = adaptbodyLong;
window.onresize = adaptbodyShort;

function scroll(wert) { window.scrollBy(0, wert); }

function adaptbodyLong()
{
	if (document.all)
	{
		if (document.all.headerdiv.style.getAttribute)
		{
			var varheight = document.all.headerdiv.offsetHeight + 38;
			if (document.all.topic.style.setAttribute)
			{
				document.all.topic.style.setAttribute("paddingTop", varheight);
				document.all.headerdiv.style.setAttribute("top", 28);
				document.all.headerdiv.style.setAttribute("zIndex", 1);
				var varwidth = document.body.offsetWidth;
				document.all.headerdiv.style.setAttribute("width", varwidth);
				document.all.toolbardiv.style.setAttribute("visibility", "visible");
				document.all.toolbardiv.style.setAttribute("left", 0);
				document.all.toolbardiv.style.setAttribute("top", 0);
				document.all.toolbardiv.style.setAttribute("right", 0);
				document.all.toolbardiv.style.setAttribute("zIndex", 2);
				document.all.toolbardiv.style.setAttribute("width", varwidth);
			}
		}

// Parse current document URL to compare with link paths 
		var adress = document.URL;
		var hasbookmark = adress.split("#");
		var wholepath = hasbookmark[0].split("chm::");
		var pathinchm = wholepath[1];
		var varpath = hasbookmark[0].split("/");
		var numberofelements = varpath.length;
		var lastelement = numberofelements - 1;
		var varfile = varpath[lastelement];

// Change links to bookmarks
// *******************
// LOOP OVER ALL LINKS
// *******************
		var aadress = "";
		var avarpath = "";
		var alastelement = 0;
		var avarfile = "";
		var numberoflinks = document.links.length;
		for (var counter=0;counter<numberoflinks;counter++)
		{
// parse href of link 
			aadress = document.links[counter] + "";
			ahasbookmark = aadress.split("#");
// link has bookmark?
			if (ahasbookmark[1] != null)
			{
// bookmark in curent document?
				avarpath = ahasbookmark[0].split("/");
				alastelement = avarpath.length - 1;
				avarfile = avarpath[alastelement];
				if (varfile == avarfile)
				{
// delete href and insert onclick
					newtarget = pathinchm + document.links[counter].hash;
					newtext = "javascript:void(window.location.href = '" + newtarget + "');location.reload();";
					document.links[counter].href = newtext;
				}
			}
		}

// if a bookmarks is jumped to
// scroll up to make the relevant text visible
// *********************
// LOOP OVER ALL ANCHORS
// *********************
		var bmindoc = 0;
		if (hasbookmark[1] != null)
		{
			var numberofanchors = document.anchors.length;
			for (var counter1=0;counter1<numberofanchors;counter1++)
			{
				if (hasbookmark[1] == document.anchors[counter1].name)
				{
					document.anchors[counter1].scrollIntoView(true);

// find out if I have to scroll up at all because
// maybe the text with the bookmark is so far down the document that 
// scrolling back up isn't necessary

					scrollpos = 0;
					distancefrombottom = document.all.endofpage.offsetTop - document.anchors[counter1].offsetTop;
					fromtop = document.all.topic.offsetHeight - varheight - 50;
					if (fromtop < distancefrombottom)
					{
						difference = distancefrombottom - fromtop;
						if (difference < varheight)
						{ scrollpos = 0 - difference; }
						else
						{ scrollpos = 0 - varheight; }
					}
					window.setTimeout("scroll(scrollpos)", 500);
					counter1 = numberofanchors;
				}
			}
		}
	}
}


function adaptbodyShort()
{
	if (document.all)
	{
		if (document.all.headerdiv.style.getAttribute)
		{
			var varheight = document.all.headerdiv.offsetHeight + 38;
			if (document.all.topic.style.setAttribute)
			{
				document.all.topic.style.setAttribute("paddingTop", varheight);
				document.all.headerdiv.style.setAttribute("top", 28);
				document.all.headerdiv.style.setAttribute("zIndex", 1);
				var varwidth = document.body.offsetWidth;
				document.all.headerdiv.style.setAttribute("width", varwidth);
				document.all.toolbardiv.style.setAttribute("visibility", "visible");
				document.all.toolbardiv.style.setAttribute("left", 0);
				document.all.toolbardiv.style.setAttribute("top", 0);
				document.all.toolbardiv.style.setAttribute("right", 0);
				document.all.toolbardiv.style.setAttribute("zIndex", 2);
				document.all.toolbardiv.style.setAttribute("width", varwidth);
			}
		}
	}
}

// -->
        </script>
    </head>
    <body id="topic">
        <div id="toolbardiv" class="toolbardiv">
<MadCap:topicToolbarProxy class="aw_toolbar" />
        </div>
        <MadCap:bodyProxy />
<span id="endofpage"> </span>
    </body>
</html>

The stylesheet (relevant parts):

Code: Select all

html {
	padding: 0px;
	margin: 0px;
	overflow: auto; }

body {
	font-family: Verdana, Sans-Serif;
	font-size: 80%;
	background-color: white;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 10px;
	padding-bottom: 40px;
	margin: 0px;
	z-index: 1;
	position: absolute;
	line-height: 140%; }

#headerdiv {
	background-color: white;
	position: fixed;
	top: 30px;
	left: 0px;
	right: 0px;
	margin: 0px;
	padding: 10px;
	padding-right: 50px;
	border: none;
	border-bottom: 1px solid #2a6824;
	z-index: 2; }

div #toolbardiv,
div.toolbardiv {
	background-color: white;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	margin: 0px;
	padding: 0px;
	padding-left: 3px;
	width: 100%;
	height: 28px;
	border: none;
	z-index: 2;
	visibility: visible;
	border-bottom: 1px dotted #2a6824; }

MadCap|topicToolbarProxy.aw_toolbar {
	z-index: 3;
	background-color: white; }

Part of topics (is already in templates):

Code: Select all

...
<body id="topic">
        <div id="headerdiv">
            <h1>Heading here</h1>
        </div>
        ...

Brian Wheeldon · Post by **Brian Wheeldon** » Tue Feb 28, 2012 12:52 am

Thanks very much for your help. I will try that.

MadCap Software Forums

Text hidden by a non-scrolling region

Text hidden by a non-scrolling region

Re: Text hidden by a non-scrolling region

Re: Text hidden by a non-scrolling region