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
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>