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:	58
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:	67
Size:	51.9 KB
ID:	553
    Click image for larger version

Name:	sticky-plus-new-post2.png
Views:	48
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:	47
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.

    #2
    Added more screenshots to the first post. Check it out!

    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.

      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:	44
Size:	4.8 KB
ID:	805Click image for larger version

Name:	Clipboard02.jpg
Views:	35
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>
           <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>
          </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!

          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.

              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

                    Working...
                    X