Announcement

Collapse
No announcement yet.

Sticky Plus Button That Rocks!

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Sticky Plus Button That Rocks!

    Want to increase user engangement and interaction on your vBulletin 5 forum? One of the ways to increase user participation is by making it easy for them to post something.

    What if you could start a new post (forum, blog, article, or group), update status, and send PM while you are on any page on the site? Soon you will be able to do this with this mod that I'm currently developing.

    Here's a sneak peek of how it looks like: Click image for larger version

Name:	sticky-plus-button-min.jpg
Views:	298
Size:	82.1 KB
ID:	560

    The + button is a sticky button or a floating button however you want to call it. Meaning it will be available as you scroll on any page across the site. When clicked, it will show 3 options. Clicking New Post will show a list of channels to choose from where you want to write a post to.
    Click image for larger version

Name:	sticky-plus-new-post1.png
Views:	382
Size:	51.9 KB
ID:	553
    Click image for larger version

Name:	sticky-plus-new-post2.png
Views:	208
Size:	34.6 KB
ID:	554

    Mobile Screenshot: (new button options available)
    Click image for larger version

Name:	sticky-plus-button-mobile-min.png
Views:	207
Size:	51.8 KB
ID:	820


    Clicking the other two will bring you to the appropriate page or probably inline on the page in a dialog window.

    Check back regularly and watch out for it! It will be available soon.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Added more screenshots to the first post. Check it out!
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      What commonly performed actions in the forum do you think are good to be added to the Plus button? I'm thinking of adding "Search" that will behave like the Search box in the header.

      Any suggestion is welcome.


      Btw, this mod is inspired by Inbox by Gmail and Facebook Messenger on Mobile and other mobile apps such as for UP by Jawbone and Google Hangouts. I've never seen anything like this in a forum (at least for me) so I guess this would be the first for forums to keep up with the latest UI/UX trends.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #4
        I created something similar for my own forum.
        This one of yours unfortunately sits right on top of my message notifier.
        With mine, I did it in pure CSS and it floats center right, sliding off screen 80% when not in use. I had it at 50% but got complaints from cellphone users it got in the way of buttons.
        It is semi-transparent. (The glow link is a separate CSS function.)
        It is placed into the head_include rather than css_additional.
        Only registered/logged in users see it.
        Adding new links is a simple anchor function as highlighted below.

        Click image for larger version

Name:	Clipboard01.jpg
Views:	204
Size:	4.8 KB
ID:	805Click image for larger version

Name:	Clipboard02.jpg
Views:	172
Size:	7.6 KB
ID:	806
        Code:
        <!-- Start Floating Menu -->
        <vb:if condition="is_member_of($user, 2)">
          <style type="text/css">
        #floatmenu {
            position: fixed;
            right: 0;
            top: 50%;
            margin: -2.5em 0 0 0;
            z-index: 5;
            background: hsla(232, 75%, 45%, 0.3);
            color: yellow;
            font-weight: bold;
            font-size: large;
            text-align: left;
            border: solid hsla(232, 75%, 45%, 0.2);
            border-right: none;
            padding: 0.5em 0.5em 0.5em 2.5em;
            box-shadow: 0 1px 3px #202020;
            border-radius: 3em 0.5em 0.5em 3em;
            width: 0em;
            -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s;
        }
        #floatmenu:hover {
            position: fixed;
            right: 0;
            top: 50%;
            margin: -2.5em 0 0 0;
            z-index: 5;
            background: hsla(232, 75%, 45%, 0.3);
            color: yellow;
            font-weight: bold;
            font-size: large;
            text-align: left;
            border: solid hsla(232, 75%, 45%, 0.2);
            border-right: none;
            padding: 0.5em 0.5em 0.5em 2.5em;
            box-shadow: 0 1px 3px #202020;
            border-radius: 3em 0.5em 0.5em 3em;
            width: 8em;
            -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s;
        }
        
        #floatmenu li { margin: 0 }
          #floatmenu a { color: inherit }
        
          /* Make menu absolute, not fixed, on IE 5 & 6 */
          #floatmenu { position: absolute }
          *>#floatmenu { position: fixed }
        
          p.stb { text-indent: 0; margin-top: 0.83em }
          p.mtb { text-indent: 0; margin-top: 2.17em }
          p.ltb { text-indent: 0; margin-top: 3.08em }
        </style>
        
        <ul id=floatmenu>
        [COLOR=#0000FF][B]   <li><a href="/forum/boards/gaming">Games</a>
        
           <li><a href="/forum/boards/servers/151-smtp-e-mail-server">EMail</a>
        
           <li><a href="/forum/boards/servers/44082-calendar">Calendar</a>[/B][/COLOR]
          </ul>
        </vb:if>
        <!-- End Floating Menu -->

        Comment


          #5
          By default, only the Plus button is visible so it does not get in the way of the content that much. But when it does, users could scroll up or down a bit to see the content.

          I added a screenshot for mobile in the first post. Check it out!
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #6
            Originally posted by glennrocksvb View Post
            What if you could start a new post (forum, blog, article, or group)
            How does the New Post button determine which forum category or sub-forum to create a thread in? Is there a selection from categories, or does it auto create a thread in the category a user is currently browsing?

            Enjoy,
            William

            Comment


              #7
              A modal popup will appear containing all the channels to choose from. There is a screenshot in the first post.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #8
                Originally posted by glennrocksvb View Post
                A modal popup will appear containing all the channels to choose from. There is a screenshot in the first post.
                Can't believe I missed that! Looking forward to your completion of this mod. I can definitely see purchasing it.

                Enjoy,
                William

                Comment


                  #9
                  ETA on this?

                  Comment


                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    Can't tell. Depends on my availability. I have a full-time job and a family. I would love to finish it as soon as possible.

                  #10
                  Any update ?

                  Comment


                    #11
                    any updates about this mod ?

                    Comment

                    Users Viewing This Page

                    Collapse

                    There is 1 user viewing this forum topic.

                    • Guest Guest

                    Latest Posts

                    Collapse

                    Working...
                    X
                    Searching...Please wait.
                    An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                    Please push the back button and reload the previous window.'
                    An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                    Please push the back button and reload the previous window.'
                    An internal error has occurred and the module cannot be displayed.
                    There are no results that meet this criteria.
                    Search Result for "|||"