2

I have 2 web parts on my AllItems.aspx page (one HTML Form web part & one list view). I want to fix the HTML web part on the top of the page, so that it is also visible on scrolling the page down. The other webpart (list view) should begin below the html webpart and should be scrollable (as normal). Can someone help?

EDIT: Actual Code & Problem

I could fix the html web part and show the list view below with the following code:

$(document).ready(function () {
  $("#MSOZoneCell_WebPartWPQ3").css("position", "fixed");
  var marginNew = $("#MSOZoneCell_WebPartWPQ3").outerHeight() * 1.5;
  $("#MSOZoneCell_WebPartWPQ2").css("margin-top", marginNew + "px");
});

The problem now is, that on scrolling the two web parts overlap! enter image description here

EDIT 2: New attempt

With the following code I can fix "normal" HTML elements, like divs. But the logic won't work for my webpart-containing SP page!

$('#s4-workspace').on('scroll', function() {
    var pos = $('#s4-workspace').scrollTop();
    if(pos > webPartPosition) {
        document.getElementById("MSOZoneCell_WebPartWPQ3").style.top = pos + "px";
    } else {
        document.getElementById("MSOZoneCell_WebPartWPQ3").style.top = webPartPosition + "px";
    }
});

I guess that I can't make position settings, because the listview web part follows below and prevents the upper one to be able to move.

  • Check the webpart settings first and check if you can change the Distribution See this reference for more info. If you're using a Wiki page, I suggest you use a Webpart page instead = this type of page contains WebPartZones. – Mauricio Arias Olave Feb 23 '16 at 16:45
  • I can't find any helpful settings. The page I use is no wiki page. Also if I create a new page on the site, I have no layout template that allows a fixed webpart. – D. Müller Feb 24 '16 at 9:39
0

I found the following work-around:

As the webpart I want to fix is the topmost webpart of the page, I did it the other way round: Instead of fixing its position, I've shorten the size of the listview webpart, as I only want to be viewed below the fixed HTML webpart.

So when I set the size depending on the size of the whole page content (s4-workspace) and added scrollbars to it, the site is shown as I wanted to. The upper section the List title and the HTML webpart is visible, and below and only below the listview webpart follows.

To do that I added an Content Editor Webpart (id MSOZoneCell_WebPartWPQ4) with the following code pieces

  • CSS: Show scrollbars for the HTML webpart, hide the Content Editor webpart & hide scrollbars of the page content (s4-workspace)
  • Logic for resizing the page (browser window)
  • Timer (waitForFinalEvent) for awaiting the finishing of the resize, source: https://stackoverflow.com/a/4541963/4846215

Here the Content Editor webpart's code:

<script src="/SiteAssets/jquery-1.12.0.js" type="text/javascript"></script>

<style>
  #WebPartWPQ2{
    overflow:scroll;
  }
  #MSOZoneCell_WebPartWPQ4 {
    display:none;
  }
  #s4-workspace {
    overflow:hidden;
  }
</style>

<script> 
  $(window).resize( function() {
    waitForFinalEvent(function(){
        var newHeight = $("#s4-workspace").height() - $("#WebPartWPQ2").position().top;
        var newWidth = $("#s4-workspace").width() - $("#WebPartWPQ2").position().left;

        $("#WebPartWPQ2").height(newHeight + "px");
        $("#WebPartWPQ2").width(newWidth + "px");
    }, 500, "resizeTimer");
  });

  var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout (timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
  })();
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.