Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DHTML Floating Content

Status
Not open for further replies.
elhaix

elhaix

Programmer
Jul 31, 2006
115
0
0
CA
On my ASPX page I want a floating div that stays stationary as I scroll the content down.

I've grabbed the code and .js from - great script. Works fine if I change my file extension to .htm but craps out when it's .aspx!

I even changed the js to use getElementByID - still no go. Works fine in .htm, not .aspx.

The content does drop down, properly, but it's as though the window scroll event isn't getting picked up.

I tried the same with the code at . Same issue. The floating content does move up and down, but does not reposition when I scroll the screen.

Any tips please?


Thanks!
 
Sort by date Sort by votes
hmm,

thats strange, i would like to know if:
1. the DIV is a server control?
2. Does it use any JS functions that are used by ASP.NET (e.g: __doPostBack() etc).
3. Any global variables used by ASP.NET?

it would be great if you can give us a demo URL (of your code)...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Use the .js from the link above for this...

Run as .html then try as .aspx. See the difference.


Code: 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script SRC="dhtmllib2.js"></script>
    <SCRIPT>
    <!--
    // How many pixels from the top to display the content
    var topOffset = 480

    function keepAlive() {
	    // Move the content into view
	    document.all.navBar.style.pixelTop = document.body.scrollTop + topOffset
    }

    function doLoad() {
	    // Initialize DHTMLLib
	    setup()
	    // When the page scrolls, move the content
	    window.onscroll = keepAlive;
	    // Initialize the position
	    keepAlive()
    }
    window.onload = doLoad;
    // -->
    </script>




    <STYLE>
      #navBar {position: absolute;
        top: 550px; left: 150px; width: 170px}
    </STYLE>

</head>
<body bgcolor="aaaaff">

        <h1>.aspx</h1>
        
    <DIV ID=navBar>
    <TABLE BGCOLOR=lightgrey WIDTH=170 cellspacing=0 cellpadding=0 border=0>
      <TR BGCOLOR=black>
        <TD NOWRAP WIDTH=170 BGCOLOR=black>
          &nbsp;<B><FONT COLOR=white SIZE=-2 FACE='geneva,arial,sans-serif'>
            Main Menu
          </FONT></B>
        </TD>
      </TR>
      <TR>
        <TD VALIGN=TOP BGCOLOR=#EEEEEE WIDTH=170 NOWRAP>
          ...Contents...
        </TD></TR>
      </TABLE>
    </DIV>

        

        <table>
            <tr>
                <td>
                    here <br /><br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    &nbsp;<br />
                    <br />
                    <br />
                    c<br />
                    c<br />
                    c<br />
                    c<br />
                    c<br />
                    c<br />
                    c<br />
                    <br />
                    c<br />
                    <br />
                    c<br />
                    c<br />
                    c<br />
                </td>

            </tr>

        </table>
<script>
<!--
var topOffset = 80

function smoothMove() {
	var Dif = parseInt((document.body.scrollTop+topOffset-document.all.navBar.offsetTop)*.1)
	// Work-around wierd Netscape NaN bug when Dif is 0
	if (isNaN(Dif)) Dif=0
	document.all.navBar.style.pixelTop+=Dif

}

function doLoad() {
	setup()
	window.setInterval("smoothMove()",20)
}
window.onload = doLoad;
// -->
</script>
        
</body>
</html>
 
Upvote 0 Downvote
hi,

I had no problems at all.

Browser used:
IE 6.0.2900 (SP2)

I converted the same into an ASPX.


Code of my ASPX page:
Code: 
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TestMenu.aspx.vb" Inherits="TestApp.TestMenu"%>
<HTML>
	<HEAD id="Head1">
		<title>Untitled Page</title>
		<script SRC="dhtmllib2.js"></script>
		<SCRIPT>
    <!--
    // How many pixels from the top to display the content
    var topOffset = 480

    function keepAlive() {
        // Move the content into view
        document.all.navBar.style.pixelTop = document.body.scrollTop + topOffset
    }

    function doLoad() {
        // Initialize DHTMLLib
        setup()
        // When the page scrolls, move the content
        window.onscroll = keepAlive;
        // Initialize the position
        keepAlive()
    }
    window.onload = doLoad;
    // -->
		</SCRIPT>
		<STYLE>
      #navBar { LEFT: 150px; WIDTH: 170px; POSITION: absolute; TOP: 550px }
		</STYLE>
	</HEAD>
	<body bgcolor="#aaaaff">
	<form runat=server>
		<h1>.aspx</h1>
		<DIV ID="navBar">
			<TABLE BGCOLOR="lightgrey" WIDTH="170" cellspacing="0" cellpadding="0" border="0">
				<TR BGCOLOR="black">
					<TD NOWRAP WIDTH="170" BGCOLOR="black">
						&nbsp;<B><FONT COLOR="white" SIZE="-2" FACE='geneva,arial,sans-serif'> Main Menu </FONT>
						</B>
					</TD>
				</TR>
				<TR>
					<TD VALIGN="top" BGCOLOR="#eeeeee" WIDTH="170" NOWRAP>
						...Contents...
					</TD>
				</TR>
			</TABLE>
		</DIV>
		<table height="8000">
			<tr>
				<td>
					here
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					&nbsp;<br>
					<br>
					<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					<br>
					c<br>
					<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
					c<br>
				</td>
			</tr>
		</table>
		<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
		<script>
<!--
var topOffset = 80

function smoothMove() {
    var Dif = parseInt((document.body.scrollTop+topOffset-document.all.navBar.offsetTop)*.1)
    // Work-around wierd Netscape NaN bug when Dif is 0
    if (isNaN(Dif)) Dif=0
    document.all.navBar.style.pixelTop+=Dif

}

function doLoad() {
    setup()
    window.setInterval("smoothMove()",20)
}
window.onload = doLoad;
// -->
		</script>
</form>
	</body>
</HTML>

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

G12Consult
  • Locked
  • Question
Javascript from Content Pages
Replies
0
Views
126
G12Consult
G12Consult
dvannoy
  • Locked
  • Question
Main Content in Master Page
Replies
7
Views
43
jbenson001
jbenson001
Halliarse
  • Locked
  • Question
Accessing Button Click from Master page on Content page 1
Replies
9
Views
86
jbenson001
jbenson001
sds814
  • Locked
  • Question
Accessing a control on Content Page from Site.Master
Replies
1
Views
31
jbenson001
jbenson001
sirnose1
  • Locked
  • Question
Defualt button in different content on asp.net page
Replies
3
Views
19
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top