Hi All,
I have received a new design for a website and in the design the designer used jquery. I'm implementing the design no into an ASP.NET Ajax application.
But I ran into a problem. I have a page with an update panel and a menu. When a menu item is clicked a user control is loaded dynamically into a placeholder on the update panel. This makes that the page is not totally refreshed but only the update panel.
Now the content in the user control contains a scrollpane that extends to the maximum height of the window. The first time that runs fine, but when a menu item is clicked and the new user control is loaded which has content witch includes the same scrollpane. The height isn't extended to the maximum height of the window, it then only uses the height it needs. The same thing happens when I don't include the jquery files so it has to do something with the jscript library.
The scripts that are used in the page:
scripts/jquery.js
jquery.watermark.js
scripts/jquery.customSelect.js
scripts/jquery.easing.js
scripts/jquery.logger.js
scripts/jquery.sizes.min.js
scripts/jquery.mousewheel.js
scripts/jquery.em.js
scripts/jquery.core.js
scripts/jquery.accordion.js
scripts/jquery.tabs.js
scripts/jquery.scroll.js
scripts/jquery.datepick.js
scripts/jquery.datepick-nl.js
scripts/jquery.scripts.js
Main code of th page that loads the main page:
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="container">
<div id="logo"></div>
<uc2:Menu ID="ucMenu" runat="server" />
<uc3:Kruimelpad ID="ucKruimelpad" runat="server" />
<asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:PlaceHolder ID="phMain" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<div id="sideBar">
<uc1:Login ID="ucLogin" runat="server" />
</div>
<div class="clearboth"></div>
</div>
<uc4:Footer ID="ucFooter" runat="server" />
</div>
</form>
</body>
</html>
main code of the user control:
<div class="editMenu">
</div>
<div id="content" class="orange-bar">
<div id="contentVlak" class="scroll_pane">
<h1><asp:Label ID="lblNoAccount" runat="server" Text="<%$ Resources:Login, no_account %>"></asp:Label></h1>
<p><asp:Label ID="lblMainText" runat="server" Text="<%$ Resources:Login, main_text %>"></asp:Label> <asp:LinkButton
ID="lbAccountAanvragen" runat="server"
Text="<%$ Resources:Login, demo_account_aanvragen %>"
onclick="lbAccountAanvragen_Click"></asp:LinkButton>.</p>
</div>
</div>
CSS code:
#content { background: url(../images/contentBg.png) repeat-y left top; position: relative; top: 58px; margin: 0px 0px 0px 11px !important; width: 886px; padding: 20px 20px 10px 20px; }
#contentVlak { width: 676px; height:100%; padding: 0px 20px; }
#contentVlak p { line-height: 20px; margin-bottom: 10px; font-size: 11.5px; }
#contentVlak a { font-weight: bold; text-decoration: none; }
#contentVlak a:hover {
text-decoration: underline;
}
/* Scrollpane styles */
.scroll_pane { overflow: auto; }
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: url(../images/scrollTrack.png) repeat-y left top; }
.jScrollPaneDrag { position: absolute; background: #666; cursor: pointer; overflow: hidden; height: 20px !important; width: 20px; background: url(../images/scrollPane.png) no-repeat left top; } .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; } .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; } a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; background: url(../images/scrollUp.png) no-repeat left top; height: 16px; width: 16px; }
a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; background: url(../images/scrollDown.png) no-repeat left top; height: 16px; width: 16px; }
I hope somebody can help me and knows what I'm doing wrong...
Best regards Patrick
Code for resizing the block:
function resizeBlock(object) {
var windowHeight = $(window).height();
var start = object.offset().top;
var margin = object.margin().bottom + object.margin().top;
var padding = object.padding().bottom + object.padding().top;
var totalHeight = windowHeight - start - padding - 9;
object.height(totalHeight);
// Hoogtes van scroll-ding fixen
object.find(".scroll_pane").height(totalHeight);
object.find(".jScrollPaneContainer").height(totalHeight);
object.find(".jScrollPaneTrack").height(totalHeight);
object.find(".jScrollPaneDrag").height(totalHeight - 32);
// Object opnieuw toevoegen
$(".scroll_pane").jScrollPane({ showArrows: true, scrollbarWidth: 16 });
}
$(document).ready(function () {
// Functie zie hierboven
resizeBlock($("#content"));
$(".scroll_pane").jScrollPane({ showArrows: true, scrollbarWidth: 16 });
$(window).resize(function() {
resizeBlock($("#content"));
});
// Custom selectboxes
if($(".default-usage-select").length > 0) {
$(".default-usage-select").selectbox();
}
// Watermarks op homepage
if($("#relatiecode").length > 0) {
$("#relatiecode").Watermark("relatiecode", "#808285");
}
if($("#wachtwoord").length > 0) {
$("#wachtwoord").Watermark("wachtwoord", "#808285");
}
// Accordion box
if($(".accordion").length > 0) {
$('.accordion').accordion({
header: '.accordionTrigger',
autoheight: true,
animate: '100'
});
if($(".accordionTrigger").hasClass("selected")) {
$("#accordionLastTrigger").addClass ("activeLastTrigger");
}
}
// Tabbladen
if($("#tabContainer").length > 0) {
$('#tabContainer > ul').tabs();
}
// IE 6 Hover fix voor menu's
if (jQuery.browser.msie) {
if(parseInt(jQuery.browser.version) == 6) {
$('ul li').hover(function() {
$(this).addClass('ie6hover');
}, function() {
$(this).removeClass('ie6hover');
});
}
}
});if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();