• Register
    • Help

    striker  0 Items
    Currently Supporting
    • Home
    • News
    • Forum
    • Wiki
    • Support
      • Manage Subscriptions
      • FAQ
      • Support For
        • VaultWiki 4.x Series
        • VaultWiki.org Site
    • What's New?
    • Buy Now
    • Manual
    • 
    • Support
    • VaultWiki 4.x Series
    • Task
    • Make Overlay JS Even Simpler

    1. Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

      VaultWiki allows your existing forum users to collaborate on creating and managing a site's content pages. VaultWiki is a fully-featured and fully-supported wiki solution for vBulletin and XenForo.

      The VaultWiki Team encourages you to join our community of forum administrators and check out VaultWiki for yourself.

    Issue: Make Overlay JS Even Simpler

    • Issue Tools
      • View Changes
    1. issueid=2594 February 4, 2012 7:26 PM
      pegasus pegasus is offline
      VaultWiki Team
      Make Overlay JS Even Simpler

      Currently the Overlay Manager requires HTML to be in a specific format and that onclick events for things like the Close button be registered from outside the class. It would be much more useful to create a valid Close button within the class if one doesn't already exist. It would be annoying if devs started making overlays with no way to close them.
    Issue Details
    Issue Number 2594
    Issue Type Task
    Project VaultWiki 4.x Series
    Category General
    Status Completed
    Priority 6 - Dev-Related Tasks
    Target Version 4.0.0 Alpha 1
    Resolved Version 4.1.0 Alpha 1 Preview
    Milestone VaultWiki 4 Beta X
    Software DependencyAny
    License TypePaid
    Votes to perform 0
    Votes not to perform 0
    Attachments 0
    Assigned Users (none)
    Tags (none)




    1. September 11, 2012 7:58 PM
      pegasus pegasus is offline
      VaultWiki Team
      Just bumping this issue since we started using overlays for front-end help. With in-overlay navigation, it doesn't always resize correctly due to the current format requirements.
      Reply Reply  
    2. October 13, 2012 2:36 AM
      pegasus pegasus is offline
      VaultWiki Team
      Marking this issue as In Progress. Overlay JS now requires the element HTML to be formatted with more generic vw-overlay- classes, rather than a list of cp- classes or random tags that might work. The following format is necessary to overlay correctly:

      vw-overlay-block
      -- vw-overlay-head
      -- vw-overlay-form
      -- -- vw-overlay-scrollable
      -- -- -- vw-overlay-ctrl-row
      -- -- -- -- vw-overlay-controls (optional)
      -- -- vw-overlay-buttons

      vw-overlay-block defines the container element of the overlay HTML. This is not the same as the vw-overlay element that the class uses more like a window container.
      vw-overlay-head usually defines heading tags but it can really be any block HTML.
      vw-overlay-form usually defines a physical form element
      vw-overlay-scrollable defines the form controls or the real content of the overlay. This section will be compressed with a vertical scrollbar so that the entire overlay can fit it the browser window at one time.
      vw-overlay-ctrl-row should be used on blocks within the scrollable element. It allows horizontal compression within the element to account for the extra width required by the scrollbar.
      vw-overlay-controls (optional) should wrap the actual inputs within the vw-overlay-ctrl-row (e.g. if the inputs are in a right-hand column beside the labels).
      vw-overlay-buttons defines the block containing form submission and/or cancel buttons.

      vw-overlay-block, vw-overlay-head (and its children), vw-overlay-form, and vw-overlay-scrollable should not have vertical margins. Use padding instead. Margins on these elements can prevent the overlay from centering in the browser window.

      vw-overlay-buttons is allowed a vertical margin on the top of the element.

      Except for vw-overlay-controls, each overlay should utilize all of the classes, conforming to the hierarchy above. Doing otherwise can lead to an undesired appearance.
      Reply Reply  
    3. April 15, 2018 1:10 PM
      pegasus pegasus is offline
      VaultWiki Team
      Marking this as completed in 4.1.x. While form buttons must still be manually handled (such as a form containing a Cancel button), the overlay JS now automatically creates a Close button which can be styled and positioned as desired by the platform. Working nicely in XF1 and 2 so far.
      Reply Reply  
    + Reply

    Assigned Users
    Loading Please Wait
    Tags
    Loading Please Wait
    • Contact Us
    • License Agreement
    • Privacy
    • Terms
    • Top
    All times are GMT -4. The time now is 6:07 AM.
    This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Learn more… Accept Remind me later
  • striker
    Powered by vBulletin® Version 4.2.5 Beta 2
    Copyright © 2023 vBulletin Solutions Inc. All rights reserved.
    Search Engine Optimisation provided by DragonByte SEO (Pro) - vBulletin Mods & Addons Copyright © 2023 DragonByte Technologies Ltd.
    Copyright © 2008 - 2013 VaultWiki Team, Cracked Egg Studios, LLC.