The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Latest tutorials widget!

+3
Van-Helsing
Zzbaivong
JScript
7 posters

Go down

Latest tutorials widget! Empty Latest tutorials widget!

Post by JScript June 22nd 2015, 8:29 pm

Hello!
I made a code more than a year ago for my forum, but if you want to test...

First you must create a new widget as shown in the following image:
Latest tutorials widget! TW1VsjP

Here's the code:
Code:

<!--
 * Application: Widget of the last 10 tutorials
 * Description: This application can displays the last tutorials and member avatar of topics.
 * Version: 1.08032014-jq1.9.1 - Sobek (Khnum & Maet)
 * Made and Optimizations by JScript - 2014/03/08
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 -->
 
<div id="mod_recent_tutorials" class="main-content _sbcollapsable" style="margin: 0px; height: 213px; max-height: 225px; overflow: auto;">
    <!-- #region recent_topic_row -->
    <ul id="ul_recent_tutorials" class="ipsList_withminiphoto" style="margin: 0px ! important; padding-left: 0px ! important;">
        <!-- content -->
        <div></br></br>Loading...</div>
    </ul>
    <!-- #endregion recent_topic_row -->
</div>

<script type="text/javascript">
//<![CDATA[
/***
* User Definition Variables
***/
/* Put here your forum number!!! */
var sForumNumber = 1;
/* END */

/***
* System Defined Variables - Do not edit if you don't know!
***/
var oConfig = {
        sCSS:
            '<style>' +
            '.ipsList_withminiphoto li {' +
                'margin-bottom: 8px;' +
            '}' +
            '.ipsType_smaller, .ipsType_smaller a {' +
                'font-size: 11px !important;' +
            '}' +
            '.ipsUserPhoto.ipsUserPhoto_mini {' +
                'width: 30px;' +
                'height: 30px;' +
                'border: 1px solid rgb(213, 213, 213);' +
                'background: none repeat scroll 0% 0% rgb(255, 255, 255);' +
                'box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);' +
                'padding: 1px;' +
            '}' +
            '.ipsType_small {' +
                'font-size: 12px;' +
            '}' +
            '.desc.ipsType_smaller {' +
                'color: #777777;' +
                'margin: 0;' +
            '}' +
            '.list_content {' +
                'margin-left: 40px;' +
                'word-wrap: break-word;' +
            '.ipsList_withminiphoto {' +
                'list-style: none outside none !important;' +
            '}' +
            '</style>',
        sTarget: '',
        sFound: 'td:eq(2)',
        sCommon: 'a.topictitle',
        sGetIMG: ''
    };

jQuery(function () {
    /* Add CSS */
    jQuery(oConfig.sCSS).insertBefore('body');

    /* Forum versions! */
    var phpBB2 = jQuery('.bodyline');
    var phpBB3 = jQuery('#wrap');
    var punbb = jQuery('#pun-intro');
    var invision = jQuery('#ipbwrapper');
   
    if (phpBB2.length) {
        oConfig.sTarget = '.three-col td:eq(1) > table.forumline:last tbody tr:not(":empty")';
        oConfig.sGetIMG = ' #emptyidcc .row1.gensmall img:eq(0)';
    } else if(phpBB3.length) {
        oConfig.sTarget = '.topiclist.topics.bg_none li:not(":empty")';
        oConfig.sFound = 'dd.dterm';
        oConfig.sGetIMG = ' #profile-advanced-right img:eq(0)';
    } else if(punbb.length) {
        oConfig.sTarget = '.statused tr:not(":empty")';
        oConfig.sFound = '.tcl.tdtopics';
        oConfig.sGetIMG = ' #profile-advanced-right .main-content img:first';
    } else if(invision.length) {
        oConfig.sTarget = '.borderwrap table.ipbtable tbody tr:not(":empty")';
        oConfig.sGetIMG = ' #profile-advanced-right .box-content.profile.center img:first';
    };
   
    /* Fire event for 'scroll' to show the widget... */
    var elem = document.getElementById("ul_recent_tutorials");
    if (isInViewPort(elem)) {
        LastTutorials();
    } else {
        jQuery(window).on('scroll.widget', showWidget(elem));
    }
});

/* Function to check if an element is visible in view port */
function isInViewPort(elem) {
   var rect = elem.getBoundingClientRect();

   return (
   rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
   rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ );
}
/* Start function to show the widget... */
function showWidget(elem) {
   return function() {
        /* Chech if the widget is visible in view port! */
      if (isInViewPort(elem)) {
            /* If visible, stop event!!! */
         jQuery(window).off('scroll.widget');
           
            LastTutorials();
      }
   }
}
/* Widget conent */
function LastTutorials() {
    var oTarget = 0;
    /* First forum link to read info */
    jQuery.get('/f' + sForumNumber + '-', function(data) {
        oTarget = jQuery(oConfig.sTarget, data);
    }).always(function() {
        jQuery('#ul_recent_tutorials').html('');
        var i = 0
        oTarget.each(function() {
            if (i == 10) {
                return false;
            }
            var oThis = jQuery(this); /* DOM chached for fast execution! */
            var oFound = oThis.find(oConfig.sFound);
            if (oFound.length) {
                var sTopicTitle = oFound.find(oConfig.sCommon).parent().html();
                var oUserInf = oThis.find('a[href^="/u"]');
                var sAutor = oUserInf.html();
                var sUserUrl = oUserInf.attr('href');
                var sHtml =
                    '<li class="clearfix">' +
                        '<a href="' + sUserUrl + '" class="ipsUserPhotoLink left">' +
                            '<img src="" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini">' +
                        '</a>' +
                        '<div class="list_content">' +
                            '<span class="ipsType_small">' + sTopicTitle + '</span>' +
                            '<p class="desc ipsType_smaller">' +
                                'Criado por <a href="' + sUserUrl + '">' + sAutor + '</a>' +
                            '</p>' +
                        '</div>' +
                    '</li>';
                jQuery('#ul_recent_tutorials').append(sHtml);
            }
            i++
        });

        /* Now, read the member avatar info */
        /* DOM chached for fast execution! */
        oTarget = jQuery('#ul_recent_tutorials > li');
        oTarget.each(function(index) {
            oThis = jQuery(this); /* DOM chached for fast execution! */
            var load_container = oThis.children('a');
            var UserURL = load_container.attr('href');
            var def_img = "http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png"; /* In case request profile errors! */
            var sHtml = '<img src="' + def_img + '" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini" style="width: 30px; height: 30px; border: 1px solid rgb(213, 213, 213); background: none repeat scroll 0% 0% rgb(255, 255, 255); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); padding: 1px;">';
            /* Gets the avatar saved in local storage (Fastest!)*/
            var UserIMG = sessionStorage.getItem(UserURL);

            /* If avatar alread saved, then no request member profile! */
            if (UserIMG) {
                load_container.children('img').attr('src', UserIMG);
            } else { /* if not, then only request per session!!! */
                load_container.load(UserURL + oConfig.sGetIMG, function() {
                    var imgTag = load_container.children('img');

                    if (imgTag.length == 0) {
                        load_container.append(sHtml); /* Saves the default avatar in local storage */
                        sessionStorage.setItem(UserURL, def_img);
                    } else {
                        imgTag.attr('class', 'ipsUserPhoto ipsUserPhoto_mini');
                        imgTag.css({
                            'width': '30px',
                            'height': '30px',
                            'border': '1px solid rgb(213, 213, 213)',
                            'padding': '1px',
                            'background': 'none repeat scroll 0% 0% rgb(255, 255, 255)',
                            'box-shadow': '0px 2px 2px rgba(0, 0, 0, 0.1)'
                        });
                        /* Saves the member avatar in local storage */
                        sessionStorage.setItem(UserURL, imgTag.attr('src'));
                    }
                });
            }
        });
    });
}
//]]>
</script>

Note: In the above code, change the value of the variable "sForumNumber" by their corresponding sub forum where tutorials are!

Result:
Latest tutorials widget! UMsnCPF

Well, I know that the code needs a lot of improvement, feel free to modify it...

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Latest tutorials widget! Empty Re: Latest tutorials widget!

Post by Zzbaivong June 22nd 2015, 9:23 pm

I think you can use mod_news, unfortunately it does not provide the user avatar.
I see that you are abusing javascript to insert CSS, while it can be inserted manually into the widget.
Zzbaivong
Zzbaivong
Forumember

Posts : 101
Reputation : 51
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Latest tutorials widget! Empty Re: Latest tutorials widget!

Post by JScript June 22nd 2015, 9:40 pm

Zzbaivong wrote:(...)I see that you are abusing javascript to insert CSS, while it can be inserted manually into the widget.
Today I know that, but this code was made on the second month I took my first steps in web programming!

I knew nothing, although I'm still not knowing...

JScript wrote:Well, I know that the code needs a lot of improvement, feel free to modify it...

Anyway, many thanks for the tips!

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Latest tutorials widget! Empty Re: Latest tutorials widget!

Post by Van-Helsing July 2nd 2015, 2:29 am

Hello JScript,
Nice code and it is very useful.

Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Latest tutorials widget! Empty Re: Latest tutorials widget!

Post by darki July 19th 2015, 4:05 pm

I want that the announcements and stickys don't appear. How to do? With the following?
.forumbg:not(.forumbg.announcement)
If yes, where I will have to add it?
avatar
darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Latest tutorials widget! Empty Re: Latest tutorials widget!

Post by TheCrow July 28th 2015, 12:12 am

darki wrote:I want that the announcements and stickys don't appear. How to do? With the following?
.forumbg:not(.forumbg.announcement)
If yes, where I will have to add it?
@darki the recent topic system is made from the company as it is. When you post anything it will show there. So you cannot remove it from the widget.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Latest tutorials widget! Empty Re: Latest tutorials widget!

Post by H.A.SS.A.N August 1st 2015, 2:34 pm

hello >> @JScript 
can I put the first image of tutorial Instead of user avater ??
thank u ,
H.A.SS.A.N
H.A.SS.A.N
Forumember

Posts : 77
Reputation : 1
Language : Arabic

http://www.deve-net.com

Back to top Go down

Latest tutorials widget! Empty Re: Latest tutorials widget!

Post by SLGray February 23rd 2017, 8:02 am

This will no longer be supported by JScript: https://help.forumotion.com/t151137-in-memory-of-jscript-joao-carlos.


Latest tutorials widget! Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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