Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
0
Reply
Sticky columns when scrolling right
Cauvery Vr.
Apr 17 2017 2:18 AM
350
Reply
The code in the below link works fine to display sticky Column headings
http://www.enjoysharepoint.com/Articles/Details/steps-to-freeze-header-row-for-title-in-sharepoint-2013-21223.aspx
I modified this code such that it displays the first column when i scroll to the right. But it is not working properly.
i have attached the resulting image and below is the modified javascript code.
Kindly please help.
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
type=
"text/javascript"
>
</script>
<script type=
"text/javascript"
>
$(document).ready(
function
(){
stickyHeaders()
})
function
stickyHeaders(){
if
( jQuery.inArray(
"spgantt.js"
, g_spPreFetchKeys ) > -1)
{
SP.SOD.executeOrDelayUntilScriptLoaded(
function
()
{
findListsOnPage();
},
"spgantt.js"
);
}
else
{
findListsOnPage();
}
$(window).bind(
'hashchange'
, findListsOnPage);
}
function
findListsOnPage() {
var
lists = $(
'.ms-listviewtable'
)
var
quickEditLists = [];
var
listViews = [];
$(lists).each(
function
(i){
if
($(
this
).find(
'div[id^="spgridcontainer"]'
).length > 0 )
{
quickEditLists.push($(
this
))
}
else
if
( $(
this
).hasClass(
"ms-listviewgrid"
) ==
false
)
{
listViews.push($(
this
))
}
})
if
(quickEditLists.length > 0)
{
SP.GanttControl.WaitForGanttCreation(
function
(ganttChart) {
initializeStickyHeaders(quickEditLists,
"qe"
);
});
}
if
(listViews.length > 0)
{
initializeStickyHeaders(listViews,
"lv"
);
}
}
function
initializeStickyHeaders (lists, type) {
var
top_old = [], top_new = [],
bottom_old = [], bottom_new = [],
stickies = [], headers = [],
indexOffset = 0 ;
var
style =
"position:fixed;"
+
"left:50px;"
+
"z-index:1;"
+
"background-color:beige;"
+
"box-shadow:3px 3px 5px #DDDDDD;"
+
"display:none"
$(window).unbind(
'resize.'
+ type);
$(window).bind (
'resize.'
+ type, updatestickies );
$(
'#s4-workspace'
).unbind(
'scroll.'
+ type);
$(
'#s4-workspace'
).bind (
'scroll.'
+ type, updatestickies );
$(lists).each(
function
()
{
headers.push($(
this
).find($(
'.ms-listviewtable tbody tr td:nth-child(2)'
)))
//alert(headers.length);
});
$(headers).each(
function
(i)
{
var
table = $(
this
).closest(
"table"
);
if
(table.find(
"tbody > tr"
).length > 1)
{
table.parent().find(
".sticky-anchor"
).remove()
table.parent().find(
".sticky"
).remove()
var
anchor = table.before(
'<div class="sticky-anchor"></div>'
)
stickies.push($(
this
).clone(
true
,
true
).addClass(
"sticky"
).attr(
'style'
, style).insertAfter(anchor))
var
tbodies = $(
this
).parent(
"thead"
).siblings(
"tbody"
)
if
(tbodies.length > 1)
{
tbodies.bind(
"DOMAttrModified"
,
function
(){
setTimeout(
function
(){
$(
'#s4-workspace'
).trigger(
"scroll"
,
true
)
}, 250)
})
}
}
else
{
headers.splice(i-indexOffset,1)
indexOffset++;
}
})
//Do it once even without beeing triggered by an event
updatestickies();
function
updatestickies (event, DOMchangeEvent)
{
$(headers).each(
function
(i) {
if
(DOMchangeEvent)
{
width();
return
false
;
}
function
width()
{
stickies[i].height(headers[i].height()).find(
'td:nth-child(2)'
).each(
function
() {
$(
this
).height(headers[i].find(
'td:nth-child(2)'
).height())
})
}
top_old[i] = top_new[i]
top_new[i] = Math.round($(
this
).offset().left - 45)
bottom_old[i] = bottom_new[i]
bottom_new[i] = Math.round(top_new[i] - 30 + $(
this
).closest(
'table'
).width())
var
x=1;
stickies[i].offset({
top: Math.round(headers[i].closest(
"td"
).offset().top)
});
if
(top_old[i] >= 0 && top_new[i] <= 0 || bottom_old[i] <= 0 && bottom_new[i] >= 0 || top_old[i] === undefined && bottom_old[i] === undefined&& top_new[i] < 0 && bottom_new[i] > 0 )
{
width();
stickies[i].fadeIn();
}
else
if
(top_old[i] <= 0 && top_new[i] >= 0 || bottom_old[i] >= 0 && bottom_new[i] <= 0 )
{
stickies[i].fadeOut();
}
})
}
//update stikies
}
//initialize sticky headers
</script>
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
0
)
Next Recommended Forum
Configure Cloud Hybrid Search In SharePoint Server 2016
How to create search web part in SP 2013