07-24-2023, 10:23 AM
I have a huge ListView, like 30 Columns by alot of rows within a DIV in the midddle of the page
I need to have a fixed header and I have to be able to scroll on the x-axis in order to see all my columns. The header should of course remain fixed at top and each header colum has to align with each column.
Note: I am using a MasterPage. and the ListView is in another Contentpage.
I have found the exact script and css of what I am looking for but am unable to adapt it to my app. I keep getting Jscript Object error. I dont know where to put wich part of the script so it works with asp .nets masterpage dynamics
Here is what i want to implement in my app:
[This is what I need][1]
[1]:
The aspx code in my content page is basically the same code as in the jsfiddle
I will adapt it to my listview once it works with the table
there is no codebehind in this contentpage and i use the same html in the aspx page as in the jsfiddle.
This is my Site.Master.vb behind code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'----This scripts runs itself. JavaScript function in the MasterPage Page_Load() event
Dim someScript As New StringBuilder
someScript.Append("""<script type=""text/javascript"">""")
someScript.Append(" var headerWidth,")
someScript.Append("contentWidth,")
someScript.Append("leftWidth,")
someScript.Append("clientWidth,")
someScript.Append("documentWidth;")
someScript.Append(" function performWidth() {")
someScript.Append("$('.header').width(""99999em"");")
someScript.Append("headerWidth = $('.header > *').first().outerWidth(true);")
someScript.Append(" $('.header').width(headerWidth);")
someScript.Append(" $('.right').width(""99999em"");")
someScript.Append("contentWidth = $('.right > *').first().outerWidth(true);")
someScript.Append("$('.right').css({ left: leftWidth });")
someScript.Append(" $('.right').width(contentWidth);")
someScript.Append("clientWidth = window.document.body.clientWidth;")
someScript.Append("documentWidth = $(document).outerWidth(true);")
someScript.Append("};")
someScript.Append(" $(document).ready(function () {")
someScript.Append("$(document).scroll(function (e) {")
someScript.Append(" var ratio = (document.body.scrollLeft) / (documentWidth - clientWidth);")
someScript.Append("$('.header').css({ left: -(headerWidth - clientWidth) * ratio });")
someScript.Append("});")
someScript.Append("});")
someScript.Append("$(window).resize(function () {")
someScript.Append(" });")
someScript.Append("</script>")
someScript.Append("<script language='javascript'>alert('The script ran after script ran');</script>")
Page.ClientScript.RegisterStartupScript(Me.GetType(), "onload", someScript.ToString.Trim)
End Sub
nothing usefull in Site.Master.aspx.
Thx in advance. I've lost 2.5 days on this..My boss is badtrippin a fixed header is starting to cost alot of money Plz help.
I need to have a fixed header and I have to be able to scroll on the x-axis in order to see all my columns. The header should of course remain fixed at top and each header colum has to align with each column.
Note: I am using a MasterPage. and the ListView is in another Contentpage.
I have found the exact script and css of what I am looking for but am unable to adapt it to my app. I keep getting Jscript Object error. I dont know where to put wich part of the script so it works with asp .nets masterpage dynamics
Here is what i want to implement in my app:
[This is what I need][1]
[To see links please register here]
[1]:
[To see links please register here]
The aspx code in my content page is basically the same code as in the jsfiddle
I will adapt it to my listview once it works with the table
there is no codebehind in this contentpage and i use the same html in the aspx page as in the jsfiddle.
This is my Site.Master.vb behind code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'----This scripts runs itself. JavaScript function in the MasterPage Page_Load() event
Dim someScript As New StringBuilder
someScript.Append("""<script type=""text/javascript"">""")
someScript.Append(" var headerWidth,")
someScript.Append("contentWidth,")
someScript.Append("leftWidth,")
someScript.Append("clientWidth,")
someScript.Append("documentWidth;")
someScript.Append(" function performWidth() {")
someScript.Append("$('.header').width(""99999em"");")
someScript.Append("headerWidth = $('.header > *').first().outerWidth(true);")
someScript.Append(" $('.header').width(headerWidth);")
someScript.Append(" $('.right').width(""99999em"");")
someScript.Append("contentWidth = $('.right > *').first().outerWidth(true);")
someScript.Append("$('.right').css({ left: leftWidth });")
someScript.Append(" $('.right').width(contentWidth);")
someScript.Append("clientWidth = window.document.body.clientWidth;")
someScript.Append("documentWidth = $(document).outerWidth(true);")
someScript.Append("};")
someScript.Append(" $(document).ready(function () {")
someScript.Append("$(document).scroll(function (e) {")
someScript.Append(" var ratio = (document.body.scrollLeft) / (documentWidth - clientWidth);")
someScript.Append("$('.header').css({ left: -(headerWidth - clientWidth) * ratio });")
someScript.Append("});")
someScript.Append("});")
someScript.Append("$(window).resize(function () {")
someScript.Append(" });")
someScript.Append("</script>")
someScript.Append("<script language='javascript'>alert('The script ran after script ran');</script>")
Page.ClientScript.RegisterStartupScript(Me.GetType(), "onload", someScript.ToString.Trim)
End Sub
nothing usefull in Site.Master.aspx.
Thx in advance. I've lost 2.5 days on this..My boss is badtrippin a fixed header is starting to cost alot of money Plz help.