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 : 29
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 : 3011
Reputation : 471
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 : 119
Reputation : 9
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 : 40515
Reputation : 2733
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 : 29
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 : 119
Reputation : 9
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 : 40515
Reputation : 2733
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 : 119
Reputation : 9
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 : 29
Language : Português

Back to top Go down

Re: [Tutorial] Start fast topic

Post by jomarcabasag on September 6th 2017, 6:13 am

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. Very Happy Very Happy Very Happy Very Happy Very Happy
Hi @Daemon Can you paste The Code Here please Spoiler it....
Thanks in advanced
avatar
jomarcabasag
Forumember

Posts : 82
Reputation : 1
Language : English

Back to top Go down

Re: [Tutorial] Start fast topic

Post by SLGray on September 6th 2017, 6:39 pm

The code is in the first post of this topic.


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

avatar
SLGray
Administrator
Administrator

Male Posts : 40515
Reputation : 2733
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: [Tutorial] Start fast topic

Post by YoshiGM on September 6th 2017, 7:13 pm

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

Male Posts : 664
Reputation : 92
Language : Spanish, English & Italian (16%)
Location : Mexico

http://asistencia.foroactivo.com/u21373

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