The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Tutorial] Start fast topic

View previous topic View next topic Go down

[Tutorial] Start fast topic

Post by Daemon on July 18th 2017, 5:35 pm

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="open_modal();">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="close_modal();">×</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="select_forum();">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
        }
    });
});
function open_modal() {
    jQuery(".modal").fadeIn("slow", function() {
        jQuery(".modal-list").animate({
            "height": "show"
        }, 400);
    });
}
function select_forum() {
    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 close_modal() {
    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;
    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>
Wink


Last edited by Daemon on July 22nd 2017, 1:26 am; edited 2 times in total
avatar
Daemon
Forumember

Posts : 51
Reputation : 27
Language : Português

Back to top Go down

Re: [Tutorial] Start fast topic

Post by skouliki on July 18th 2017, 5:54 pm

tested on invision and punbb worked perfect 
very nice
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 2772
Reputation : 410
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] Start fast topic

Post by TonnyKamper on July 18th 2017, 6:42 pm

@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.. Sad
avatar
TonnyKamper
Forumember

Female Posts : 71
Reputation : 8
Language : Dutch/English
Location : The Netherlands

http://test-tube.actieforum.com/

Back to top Go down

Re: [Tutorial] Start fast topic

Post by SLGray on July 18th 2017, 7:53 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39639
Reputation : 2666
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: [Tutorial] Start fast topic

Post by Daemon on July 18th 2017, 8:07 pm

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.
avatar
Daemon
Forumember

Posts : 51
Reputation : 27
Language : Português

Back to top Go down

Re: [Tutorial] Start fast topic

Post by TonnyKamper on July 18th 2017, 10:02 pm

@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?
avatar
TonnyKamper
Forumember

Female Posts : 71
Reputation : 8
Language : Dutch/English
Location : The Netherlands

http://test-tube.actieforum.com/

Back to top Go down

Re: [Tutorial] Start fast topic

Post by SLGray on July 18th 2017, 10:10 pm

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

Topic ID:
Code:
153390


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39639
Reputation : 2666
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: [Tutorial] Start fast topic

Post by TonnyKamper on July 18th 2017, 10:24 pm

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

Topic ID:
Code:
153390

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

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

Female Posts : 71
Reputation : 8
Language : Dutch/English
Location : The Netherlands

http://test-tube.actieforum.com/

Back to top Go down

Re: [Tutorial] Start fast topic

Post by Daemon on July 22nd 2017, 1:29 am

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. Very Happy Very Happy Very Happy Very Happy Very Happy
avatar
Daemon
Forumember

Posts : 51
Reputation : 27
Language : Português

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum