[Tutorial] Start fast topic

This code will help users start a topic faster with a dropdown.


Create a custom widget with the following content:

Code:

<ul id="tool-list">
    <li>
        <a id="fast-topic" class="fast-topic" href="javascript:void(0)" onclick="openModal();">Start a new topic</a> 
    </li>
</ul>
<script>
/*
 *  Application: Start fast topic
 *  Date: 18/07/2017
 *  Version: 1.221072017
 *  Copyright (c) 2017 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
jQuery(document).ready(function() {
    var topicId = 0;
    jQuery.ajax({
        type: "GET",
        url: "/statistics",
        success: function(data) {
            topicId = parseInt(jQuery(".statistics a[href^='/t']", data).attr("href").match(/\d+/));
            if(topicId > 0) {
                jQuery.ajax({
                    type: "GET",
                    url: "/t" + topicId + "-",
                    success: function(data) {
                        var list = jQuery("form[action='/viewforum'] select", data).html();
                        jQuery("body").append(
                        '<div class="modal">' +
                        '    <div class="modal-list">' +
                        '        <h3 class="modal-title">Select a Forum</h3>' +
                        '        <hr class="modal-hr">' +
                        '        <a href="javascript:void(0)" class="modal-close" onclick="closeModal();">×</a>' +
                        '        <div class="space">' +
                        '            <select class="select-list">' + list + '</select>' +
                        '            <br>' +
                        '            <span class="modal-danger">This field is required!</span>' +
                        '            <br>' +
                        '            <br>' +
                        '            <button id="select-forum" class="button_continue" onclick="selectForum();">Continue</button>' +
                        '        </div>' +
                        '    </div>' +
                        '</div>'
                        );
                    },
                    error : function(xhr, textStatus, errorThrown ) {
                        // Handle error
                    }
                });
            } else {
                alert("For this application to work, a topic must exist!");
            }
        },
        error : function(xhr, textStatus, errorThrown ) {
            // Handle error
        }
    });
});
jQuery(document).on("click", function(e) {
    if(jQuery(e.target).is(".modal")) {
        closeModal();
    }
});
function openModal() {
    jQuery(".modal").fadeIn("slow", function() {
        jQuery(".modal-list").animate({
            "height": "show"
        }, 400);
    });
}
function selectForum() {
    var selectForumVal = jQuery(".select-list").val();
    var forumValId = selectForumVal.match(/\d+/g);
    (selectForumVal.indexOf("f") < 0) ? jQuery(".modal-danger").show() : location.href = "/post?f=" + forumValId + "&mode=newtopic";
}
function closeModal() {
    jQuery(".modal").fadeOut("slow", function() {
        jQuery(".modal-list").animate({
            "height": "hide"
        }, 400);
    });
}
</script>
<style>
.modal {
    background: rgba(200,200,200,0.8);
    position: fixed;
    top: 0;
    display: none;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
}
.modal-list {
    left: 50%;
    margin-left: -250px;
    margin-top: -210px;
    display: none;
    top: 43%;
    z-index: 999;
    width: 35%;
    max-width: 500px;
    position: fixed;
    background: #fff;
    box-shadow: 0px 5px 55px rgba(0,0,0,0.4);
}
.modal-danger {
    display: none;
    color: #a52638;
}
.modal-list select {
    background: #fff url(http://i.imgur.com/Kj9CW90.png) repeat-x top;
    color: #333;
    min-height: 32px;
    border: 1px solid #b3b3b3;
    width: 100%;
    max-width: 350px;
    border-radius: 3px;
    padding: 7px 25px 7px 7px;
    position: relative;
    cursor: pointer;
    margin-bottom: 5px;
}
.modal-list .space {padding: 15px;}
.modal-close {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    color: #000;
    width: 44px;
    height: 44px;
    line-height: 48px;
    font-size: 34px;
    font-weight: 300;
    text-align: center;
    z-index: 999;
    -webkit-transition: 0.2s all linear;
    -moz-transition: 0.2s all linear;
    -ms-transition: 0.2s all linear;
    -o-transition: 0.2s all linear;
    transition: 0.2s all linear;
}
.modal-close:hover {color: #cd3816 !important;}
.modal-list .button_continue {
    background: #262e33;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    padding: 10px 20px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-transition: 0.1s all linear;
    -moz-transition: 0.1s all linear;
    -ms-transition: 0.1s all linear;
    -o-transition: 0.1s all linear;
    transition: 0.1s all linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.modal-list .button_continue:hover {opacity: 0.9;}
.modal-title {
    color: #333;
    font-size: 26px !important;
    font-weight: 300 !important;
    text-align: left;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    padding: 12px 15px 0 15px;
}
.modal-title ~ .modal-hr {
    margin: 12px 15px 0 15px;
}
hr.modal-hr {
    margin: 15px 0;
    height: 0;
    padding: 0;
    border-width: 2px 0 0 0;
    border-style: solid;
    border-color: #ebebeb;
}
#tool-list {
    width: 100%;
    display: inline;
    padding: 0;
    list-style: none;
    margin: 0;
}
.fast-topic {
    background: #94a66a;
    color: #ffffff !important;
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
    font-size: 14px;
    line-height: 42px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-transition: 0.1s all linear;
    -moz-transition: 0.1s all linear;
    -ms-transition: 0.1s all linear;
    -o-transition: 0.1s all linear;
    transition: 0.1s all linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.fast-topic:hover {
    opacity: 0.9;
}
</style>

tested on invision and punbb worked perfect 
very nice

@Daemon

Tested on phpBB2, phpBB3 and on ModernBB and it isn't working on either of them..
the dropdown to pick a forum to post in, just doesn't open the list..

I can confirm the drop-down menu does not work on a #ModernBB forum.

I fixed the problem. What happens is that in just a few versions the dropdown is on every page, and I was not aware of that. There is a line with an instruction in the updated code.

Daemon wrote:I fixed the problem. What happens is that in just a few versions the dropdown is on every page, and I was not aware of that. There is a line with an instruction in the updated code.

@Deamon with an instruction do you mean this line: "var topicId = 1; // Put here an id of any existing topic" ?

If so, where can I find the ID of a topic? is it a number?

Example:  https://help.forumotion.com/t153390-tutorial-start-fast-topic#1051610

Topic ID:

Code:

153390

SLGray wrote:Example:  https://help.forumotion.com/t153390-tutorial-start-fast-topic#1051610

Topic ID:

Code:

153390

Ah okay, thank you very much for showing me @SLGray

UPDATE:
That did the trick @Deamon
It works like a charm now on phpBB2, phpBB3 and on ModernBB
Thank you very much

The code has been updated! In this version there is still a need for a topic for the code to work. However, you no longer need to enter an ID manually.

Daemon wrote:The code has been updated! In this version there is still a need for a topic for the code to work. However, you no longer need to enter an ID manually.

Hi @Daemon Can you paste The Code Here please Spoiler it....
Thanks in advanced

The code is in the first post of this topic.

Hi @Daemon, can i translate your tutorial to spanish ?
(I will give you the credits)

don't work in phpbb2

Any screenshot and your forum URL?

Not work in phpbb3, Can't open the popup menu "Start a new topic"

As far as I know, this project won't work on Firefox and Microsoft Edge, I don't know why.

YoshiGM wrote:Hi @Daemon, can i translate your tutorial to spanish ?
(I will give you the credits)

Wait Yoshi that the code works perfectly, at the moment it seems that no work