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

Floating Image by JavaScript in asp.net

Hello, I have tried to create a webpage by VS2005 using c# for asp.net.
I already have a usercontrol that can display an image from my database.
All i want is write a javascript in default.aspx that can moving the usercontrol by scroll up or down like this demo -> http://baclunchtime.com/demo.htm

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
 
<!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" >
<head runat="server">
    <title>Untitled Page</title>
    <!-- Add script -->
    
    <script type="text/javascript" language="JavaScript">
        var Doc = document.all;
        function StartFloat() 
        {
	        Doc.floater.style.pixelLeft = 500;	// floater area (left - right)
	        Doc.floater.style.visibility = 'visible';
	        window.onscroll = Float; 	// call function when scroll
 
	        function Float() {Doc.floater.style.pixelTop = document.body.scrollTop;}	// Scroll event
        }
    </script>
    
</head>
<body onLoad="StartFloat()">
    <form id="form1" runat="server">
    <div>
        <span id="floater" style="position: absolute; visibility: hidden; top: 1px;" align="right">
            <uc1:WebUserControl ID="WebUserControl1" runat="server" /> 
        </span>
    </div>
 
    </form>
    <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
 
</body>
</html>

Open in new window

0
Sarnuz
Asked:
Sarnuz
  • 2
  • 2
1 Solution
 
baiju_nagoriCommented:
Try this and let me know if it works,


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <!-- Add script -->
    
 
    
</head>
<body onLoad="StartFloat()">
    <form id="form1" runat="server">
    
	<script type="text/javascript" language="JavaScript">
        function StartFloat() 
        {
                var floater = document.getElementById('<%=WebUserControl1.ClientID %>');
				floater.style.pixelLeft = 500;      // floater area (left - right)
                floater.style.visibility = 'visible';
                window.onscroll = Float;        // call function when scroll
 
                function Float() {document.getElementById('<%=WebUserControl1.ClientID %>').style.pixelTop = document.body.scrollTop;}        // Scroll event
        }
		
    </script>
	
	<div>
        <uc1:WebUserControl ID="WebUserControl1" runat="server"  style="position: absolute; visibility: hidden; top: 1px;"  /> 
    </div>
 
    </form>
    <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
 
</body>
</html><html>

Open in new window

0
 
SarnuzAuthor Commented:
I have fix as your code, but its not working.

and VS2005 said:
Warning      1      Validation (ASP.Net): Attribute 'style' is not a valid attribute of element 'WebUserControl'.      C:\WebSite\WebSite2\Default.aspx      29      65      C:\WebSite\WebSite2\

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
 
<!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" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <script type="text/javascript" language="JavaScript">
        function StartFloat() 
        {
                var floater = document.getElementById('<%=WebUserControl1.ClientID %>');
                floater.style.pixelLeft = 500;      // floater area (left - right)
                floater.style.visibility = 'visible';
                window.onscroll = Float;        // call function when scroll
 
                function Float() {document.getElementById('<%=WebUserControl1.ClientID %>').style.pixelTop = document.body.scrollTop;}        // Scroll event
        }
                
    </script>
    
    
    <div>
        <uc1:WebUserControl ID="WebUserControl1" runat="server" style="position: absolute; visibility: hidden; top: 1px;"  />
    
    </div>
    </form>
    <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
    <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
</body>
</html>

Open in new window

0
 
baiju_nagoriCommented:
I have replaced the control now, try this...

And dont worry about the warnings, you can ignore them...
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <!-- Add script -->
    
 
    
</head>
<body onLoad="StartFloat()">
    <form id="form1" runat="server">
    
	<script type="text/javascript" language="JavaScript">
        function StartFloat() 
        {
                var floater = document.getElementById('floaterDiv');
				floater.style.pixelLeft = 500;      // floater area (left - right)
                floater.style.visibility = 'visible';
                window.onscroll = Float;        // call function when scroll
 
                function Float() {document.getElementById('floaterDiv').style.pixelTop = document.body.scrollTop;}        // Scroll event
        }
		
    </script>
	
	<div id="floaterDiv"  style="position: absolute; visibility: hidden; top: 1px;">
        <uc1:WebUserControl ID="WebUserControl1" runat="server"   /> 
    </div>
 
    </form>
    <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
 
</body>
</html><html>

Open in new window

0
 
SarnuzAuthor Commented:
Thank you.
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

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