[Resolved] Modifying Size of Externally-Loaded Javascript Widget/Page

Home Forums Support [Resolved] Modifying Size of Externally-Loaded Javascript Widget/Page

Home Forums Support Modifying Size of Externally-Loaded Javascript Widget/Page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #701765
    Eric

    Background: I’ve been trialing various appointment booking platforms, most of which can be resized/cropped/scaled as iframes. By doing so, I’m able to get a satisfactory look when loaded on my website.

    Unfortunately, there’s one provider – Vagaro – which I have had no success integrating. It inherits my website font by default, but that’s it.

    The code they provide boils down to this:

    <script type=”text/javascript” src=”SOMEWIDGETLOADINGURL”></script>

    The default code they provide is this:

    Book Now
    <style>.vagaro a {font-size:14px; color:#AAA; text-decoration:none;}</style>Powered by Vagaro Salon SoftwareSpa Software & Fitness Software<script type=”text/javascript” src=”SOMEWIDGETLOADINGURL”></script>

    They load the same thing, basically, minus the font change. The vagaro advertisment hyperlinks load even if you delete the blurb, and deleting the other id style elements doesn’t change anything.

    Problem: The scheduler they load is wider than a full-sized page (at all resolutions) and introduces a horizontal scrollbar. The total width of the page appears to be = total responsive width + width of my vertical menu. It seems as if the loadout is always being forced to a screen’s full width, which would work perfectly fine for most websites with horizontal menus, but not mines, where it ends up being too wide.

    What I’ve tried:
    a. Adding style elements to the div, such as margin adjustments, scaling, setting absolute pixel size
    b. Adding a second class to the div and applying everything from part a to that class in the CSS.
    c. Using the GP container format.
    d. Renaming the class, which breaks the loading of the scheduler.
    e. Ignoring their widget generator URL altogether and attempting to load a part of their site as an iframe.

    None of the above works or does anything.

    Any suggestions? Most of the horizontal space added is blank.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #701772
    Eric

    Update:

    I have been able to get modifications to post by using a second div wrapper with a new class/id.

    I guess the challenge is a bit more specific now.

    I’m able to fix the problem of the excess white horizontal white space using position: absolute and some right/left adjustments, but the behavior feels unpredictable when the screen gets resized.

    Using clip-path and clip seems to send new resolution info to the booking server, causing it to serve unpredictably cropped versions of the mobile scheduler.

    Is there any sort of best-practices technique to create the desired effect without breaking desktop responsiveness?

    #701783
    Eric

    Update #2:

    Even more specific now. I’m able to eliminate the horizontal scrollbar at 1080p and up by using the following:

    #cropper {
    position: absolute;
    width: 100%;
    left: -100px;
    }

    Assigning the width seems to get the correct desktop version of the scheduler requested, and shifting the left side 100px eliminates the horizontal dead space.

    My question is now with GP’s rules for serving different versions of the menu. I can see three on desktop:

    a. At 1440p and 1080p, I see the original vertical menu.
    b. At BOTH resolutions, if the browser is resized to roughly 60% of its original width, the vertical menu gets replaced with a horizontal one.
    c. At some fixed width, the horizontal menu gets replaced with the hamburger mobile menu.

    Where can one find the above rules? Specifically, I need to find the transition point between a and b in order to insert the above CSS.

    Thank you!

    #701801
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The big horizontal header is only on screens 1000px and up. So your first media query would be:

    @media (max-width: 999px) {
    
    }

    Then the mobile menu happens at 768px, so your media query would be:

    @media (max-width: 768px) {
    
    }

    Hope this helps ๐Ÿ™‚

    #701829
    Eric

    Thanks, Tom!

    The problem has been fixed. There was a secondary issue with my transparent side menu overlapping the scheduler body, so I had to use the following:

    //for most situations where a vistor has their web browser at full width

    @media
    (min-width: 1400px) {
    #cropper {
    position: absolute;
    width: 100%;
    left: -100px;
    }
    }

    //for when a visitor has their browser windowed between 1000-1339px and I actually need to add spacing on the left rather than remove it.

    @media
    (min-width: 1000px) {
    #cropper {
    position: absolute;
    width: 100%;
    left: 100px;
    }
    }

    #702368
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad you got it working ๐Ÿ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.