Home of the Squeezebox™ & Transporter® network music players.
Results 1 to 5 of 5
  1. #1
    Senior Member
    Join Date
    Jul 2010
    Location
    Oz
    Posts
    338

    LMS webUI: create overlay across width of *entire* page?

    Hi.

    This is about the default LMS web UI:

    I have a link on the leftContent side that onlick opens a CSS overlay - that only covers the leftContent iframe on the left. The content of the overlay is basically a div that goes from width 0 to 100% onclick with an elevated z-index confined to the leftContent iframe so far.

    How do make it span across the entire width of the web page?

    Since it's really only this one task I'd prefer simple 'vanilla' JS without jQuery or similar libraries, if possible.

    I've been playing around with iframes and the parent document but nothing really works out so far. CSS + JS have never really been my best friends either.

    So any ideas are more than welcome.

    Thanks.

  2. #2
    Senior Member
    Join Date
    Mar 2017
    Posts
    3,099
    Quote Originally Posted by afriend View Post
    The content of the overlay is basically a div that goes from width 0 to 100% onclick with an elevated z-index confined to the leftContent iframe so far.
    Have you tried "width:100vw" ?? Failing that you could position the DIV as fixed - e.g.

    Code:
    .fixed-div {
     position:fixed;
     top:0px;
     left:0px;
     height:100vh;
     width:100vw;
     z-index:2;
    }
    Material debug: 1. Launch via http: //SERVER:9000/material/?debug=json (Use http: //SERVER:9000/material/?debug=json,cometd to also see update messages, e.g. play queue) 2. Open browser's developer tools 3. Open console tab in developer tools 4. REQ/RESP messages sent to/from LMS will be logged here.

  3. #3
    Babelfish's Best Boy mherger's Avatar
    Join Date
    Apr 2005
    Location
    Switzerland
    Posts
    20,624

    LMS webUI: create overlay across width of *entire*page?

    > How do make it span across the *entire width of the web page*?

    I don't have a solution right now. But as you've probably figured out
    the left hand side is an iframe.

    > I've been playing around with iframes and the parent document but
    > nothing really works out so far. CSS + JS have never really been my best
    > friends either.


    Unfortunately it's sill the way to go...

  4. #4
    I expect you should be able, since the #leftcontent iframe is in the same Javascript security domain as window.top, to create your DOM element inside window.top.document outside #leftcontent, and then it should be able to use the whole viewport.

    Otherwise you might consider hacking out of the iframe completely, as I did years ago to allow PlayLog to show the history table using the full screen, e.g. if (window != window.top ) then use top.location.href to reload and take over the whole viewport. Ugly hack, but I don't have to worry that my code my pollute the regular LMS DOM and cause problems with regular LMS code.
    owner of the stuff at https://tuxreborn.netlify.app/
    (which used to reside at www. tux.org/~peterw/)
    Note: The best way to reach me is email or PM, as I don't spend much time on the forums.
    Free plugins: AllQuiet Auto Dim/AutoDisplay BlankSaver ContextMenu DenonSerial
    FuzzyTime KidsPlay KitchenTimer PlayLog PowerCenter/BottleRocket SaverSwitcher
    SettingsManager SleepFade StatusFirst SyncOptions VolumeLock

  5. #5
    Senior Member
    Join Date
    Jul 2010
    Location
    Oz
    Posts
    338
    Quote Originally Posted by peterw View Post
    Otherwise you might consider hacking out of the iframe completely, as I did years ago to allow PlayLog to show the history table using the full screen, e.g. if (window != window.top ) then use top.location.href to reload and take over the whole viewport. Ugly hack, but I don't have to worry that my code my pollute the regular LMS DOM and cause problems with regular LMS code.
    Thank you. That's what I came up with eventually. Wish I'd read your post earlier. Ugly, maybe, but the beautiful overlay should make up for it. :-)

    EDIT: nevermind, it's working now, sort of. JS, JSON, async call(back)s, ajax and the like... for me, such a pain..
    Last edited by afriend; 2021-07-19 at 07:33.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •