Jquery,JavaScript, vb net Fixed in y and scrollable in x Header

Question

I am developping an ASP .NET application in vb with Master pages and ContentPages. I need to have a fixed top header but to be able to scroll sideways on the x-axis I have found a solution to my problem here Solution i'd like having without the red left border

But my real problem is the fact that I dont know where to put this code since I am using Masterpages and contentpages

 $(document).ready(function() {
 $('#parent')
 .bind('jsp-scroll-y',
  function(event, scrollPositionY, isAtTop, isAtBottom) {
    $(".header").css("top", scrollPositionY);
   }
  )
  .bind('jsp-scroll-x',
  function(event, scrollPositionX, isAtLeft, isAtRight) {
     $(".lefter").css("left", scrollPositionX);
   }
 )
  .jScrollPane();
 });

Right now I have it on my Site.Master page and when i run the app nothing happens

My header is located in a contentpage

This is my contentpage: <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TestPage.aspx.vb" Inherits="Test.WebForm1" %>

  <p>Test</p>
     <div id="parent">
 <div class="headerx">header</div>
    <div class="wrapper">
 <div class="lefter">leftpane</div>
 <div class="content">mycontent</div>
     </div>
  <div class="scrollarea">

    </div>
    </div>

   </asp:Content>

This is my master page.aspx with no code behind

  <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="Test.Site" %>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head runat="server">
<title>APPLICATION WEB POUR TESTER</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
   $(document).ready(function() {
  $('#parent')
        .bind('jsp-scroll-y',
            function(event, scrollPositionY, isAtTop, isAtBottom) {
                $(".header").css("top", scrollPositionY);
    }
         )
        .bind('jsp-scroll-x',
            function(event, scrollPositionX, isAtLeft, isAtRight) {
                $(".lefter").css("left", scrollPositionX);
    }
   )
    .jScrollPane();
   });

 </script>
  <script type="text/javascript">
      function invokeMeMaster() {
          alert('I was invoked from Master');
       }
    </script>



     <script type="text/javascript">
    function invokeMeMasterOnclick() {
        alert('I was invoked from a ButtonClick');
    }
    </script>
  <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
    </asp:ContentPlaceHolder>
      </head>
     <body>

Where and How am I supposed to call the jscript? I have installed jscrollpane via nugent

Thank you in advance

score 0 · Accepted Answer · answered Oct 04 '13 at 18:24

I managed to find the solution:

I had to add my script in the content page in the maincontent And at the same time i was missing

     <!-- styles needed by jScrollPane -->
   <link type="text/css" href="Styles/jquery.jscrollpane.css" rel="stylesheet" media="all" />

     <!-- latest jQuery direct from google's CDN -->
   <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
     </script>

   <!-- the mousewheel plugin - optional to provide mousewheel support -->
  <script type="text/javascript" src="Scripts/jquery.mousewheel.js"></script>

      <!-- the jScrollPane script -->
     <script type="text/javascript" src="Scripts/jquery.jscrollpane.min.js"></script>

also

the script was to be added underneath the declarations like so

 <script type="text/javascript">
 $(document).ready(function () {
    $('#parent')
        .bind('jsp-scroll-y',
            function (event, scrollPositionY, isAtTop, isAtBottom) {
                $(".header").css("top", scrollPositionY);
            }
         )
        .bind('jsp-scroll-x',
            function (event, scrollPositionX, isAtLeft, isAtRight) {
                $(".lefter").css("left", scrollPositionX);
            }
    )
   .jScrollPane();
  });
  alert('I was invoked at the end of the script');
 </script>
 <script type="text/javascript">
     function invokeMeMaster() {
        alert('I was invoked from Master');
    }
  </script>

Jquery,JavaScript, vb net Fixed in y and scrollable in x Header

1 Answers1