Solved

Floating Image by JavaScript in asp.net

Posted on 2009-05-13
4
302 Views
Last Modified: 2012-06-27
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
Comment
Question by:Sarnuz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 4

Expert Comment

by:baiju_nagori
ID: 24381950
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
 

Author Comment

by:Sarnuz
ID: 24382003
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
 
LVL 4

Accepted Solution

by:
baiju_nagori earned 125 total points
ID: 24382062
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
 

Author Closing Comment

by:Sarnuz
ID: 31581329
Thank you.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
VB.NET Textbox input validation 4 74
Validation for a field in asp.net 3 29
asp.net repeater 2 33
Need help for captcha 2 40
In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…
Suggested Courses

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question