1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

OverlayTrigger with vertical scrollbar

Discussion in 'Styling and Customization Questions' started by Andy.N, Jul 2, 2012.

  1. Andy.N

    Andy.N Well-Known Member

    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
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    OverlayTrigger is correct:

    Code:
    <a href="LINK" class="OverlayTrigger">TEXT</a>
    
     
  3. Andy.N

    Andy.N Well-Known Member

    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.
    Code:
    <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>
    overlay.png
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    simbolo likes this.
  5. ragtek

    ragtek Guest

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


    HTML:
    <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>
     
    Dazedndconfused likes this.
  6. Andy.N

    Andy.N Well-Known Member

    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.
     
  7. cclaerhout

    cclaerhout Well-Known Member

    I know the thread is old, but the ragtek solution is working proving you write it like that:
    Code:
    class="OverlayTrigger" data-overlayoptions="{&quot;fixed&quot;:false}"
    Thank you for this topic, it helped me :)
     
  8. HeadHodge

    HeadHodge Member

    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:

    Code:
        //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
        });
    
     
    Last edited: Jun 24, 2015
  9. HeadHodge

    HeadHodge Member

    Played with it a little more and found:
    Code:
    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.
     

Share This Page