Solved

Floating Image by JavaScript in asp.net

Posted on 2009-05-13
4
294 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
  • 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

708 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now