A possible workaround for those with alignment issues

  • gornycreative

    (@gornycreative)


    9 years ago

    If you are having problems with alignment issues (as I was) please note:

    This plugin relies on parent containers that are EXPLICITLY delcared position relative in the CSS. As an example, I build on Yootheme’s master template warp 7 – I was getting arbitrary spacing depending on responsive behavior etc. However, since the theme uses UIkit and both the widget and the sidebars are placed in uk-panel class divs, I could anchor measurements to those DIVs.

    But what if those position relative containers aren’t direct parents? This plugin came in very handy:

    https://charleskonsor.com/blogs/jQuery%3A-Getting-an-elements-position-offset-relative-to-a-parent-element/34.html

    I included it before the plugin code and altered two lines from:

    var refPosition = $(ref).position().top; // Position of reference anchor
		var notePosition = $(note).position().top; // Position of sidenote

    to

    var refPosition = $(ref).positionRelative('.uk-panel').top; // Position of reference anchor
		var notePosition = $(note).positionRelative('.uk-panel').top; // Position of sidenote

    This let me explicitly define the parent element I wanted to measure from – now I get perfect placement with no need for offset adjustments and because of how the template works, responsive behavior is for the sidebar notes to drop below the article content as a stack of footnotes – exactly what I wanted.

    https://www.ads-software.com/plugins/side-matter/

Viewing 2 replies - 1 through 2 (of 2 total)

  • This seems like a really good way to improve the behavior of the plugin. I’ve used it many times now, and each implementation I do is a head scratcher.

    The jQuery plugin you referenced, how did you choose to load that? I’m just curious about best practices, I guessed either grabbing a static copy of jQuery then adding the plugin? Or do you add this in your own site JS?

    Thanks for the tip, I’m going to try this now.

    Thread Starter gornycreative

    (@gornycreative)

    It is great to be able to choose the parent element you want to measure from.

    I made a few changes to the original plugin because it was a little bit greedy in terms of enqueueing its js/css on every admin backend page causing console errors.

    I’m not sure if it is in active development by the original author. If it is, I’ll send my updated version and hopefully it will get merged.

    Otherwise, I am going to do a proper writeup and unofficial release with additional admin options on my site and I’ll post a link to that when it is ready.

    When I said I included ‘it’ before the plugin code above, what I should have said was that I added it in side-matter.js before the plugin’s function($) – I hope that makes more sense.

    The changes I suggested above all are made in the side-matter.js file.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘A possible workaround for those with alignment issues’ is closed to new replies.