OverlayTrigger with vertical scrollbar

[Andy.N]

I'm trying to get a window to popup like when you click on the number of Likes on the first post here
http://xenforo.com/community/threads/xenforo-1-0-3.17652/

I tried several classes "OverlayTrigger", "overlayScroll", etc but none seems to be the right class.

Can anyone point to the right one?
Thanks

 

[Jake Bunce]

OverlayTrigger is correct:

<a href="LINK" class="OverlayTrigger">TEXT</a>

 

[Andy.N]

OverlayTrigger is correct:

<a href="LINK" class="OverlayTrigger">TEXT</a>

Here is what the window looks like when it has too much data, Jake.
Here is the line of code that calls it from a custom code that shows the individual grades.

<div class="secondRow">{xen:phrase qntta_average_grade}: <a href="{xen:link 'quiz/grade', '', 'id={$grade.quiz_id}'}" class="OverlayTrigger">{xen:number $grade.grade_value, 2}</a></div>

 

[Jake Bunce]

Is the content of the overlay contained within a single root node?

http://xenforo.com/community/threads/xenforo-ajax-tutorial.8091/ (2:40)

I suspect overlayScroll may also be useful within the content template itself. Refer to the post_likes template as an example.

 

[ragtek]

add data-overlayoptions="{"fixed":false}" to the link

<div class="secondRow">{xenhrase qntta_average_grade}: <a href="{xen:link 'quiz/grade', '', 'id={$grade.quiz_id}'}" class="OverlayTrigger" data-overlayoptions="{"fixed":false}">{xen:number $grade.grade_value, 2}</a></div>

 

[Andy.N]

add data-overlayoptions="{"fixed":false}" to the link

<div class="secondRow">{xenhrase qntta_average_grade}: <a href="{xen:link 'quiz/grade', '', 'id={$grade.quiz_id}'}" class="OverlayTrigger" data-overlayoptions="{"fixed":false}">{xen:number $grade.grade_value, 2}</a></div>

Ragtek,
I tried that and it has the same result. I'm using "overlayScroll" for now until I can figure out how to scroll it. Thank you.

 

[cclaerhout]

Ragtek,
I tried that and it has the same result. I'm using "overlayScroll" for now until I can figure out how to scroll it. Thank you.

I know the thread is old, but the ragtek solution is working proving you write it like that:

class="OverlayTrigger" data-overlayoptions="{"fixed":false}"

Thank you for this topic, it helped me

 

[HeadHodge]

I know the thread is old, but the ragtek solution is working proving you write it like that:

class="OverlayTrigger" data-overlayoptions="{"fixed":false}"

Thank you for this topic, it helped me

Thank you so much!!! I would have never figured this one out.

It's not exactly how I'm doing it, but it gave me the vital clue to figure out how to make my needs work.

For anyone that may be interested, here is a snippet of the javascript I'm now using to directly create an overlay:

    //Remove any previous overlays from DOM
    $('.xenOverlay').remove();
    $('#InlineModOverlay').remove();
 
    //Create new overlay and display it
    overlay = {};
    overlay.$Trigger = $('<div href="index.php?threads/' + reviewId + '/"></div>');
    overlay.Loader = new XenForo.OverlayLoader(overlay.$Trigger, false, {fixed: false});
    overlay.Loader.load(function(e){
          //Callback code once overlay is created
    });

 

[HeadHodge]

I know the thread is old, but the ragtek solution is working proving you write it like that:

class="OverlayTrigger" data-overlayoptions="{"fixed":false}"

Thank you for this topic, it helped me

Played with it a little more and found:

This doesn't work:
data-overlayoptions="{'fixed':false}"

But this does:
data-overlayoptions='{"fixed":false}'

It seems to choke on the single quote but not the double quote. Have no idea why though.