Hitskin.com
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:
Here's the code:
Note: In the above code, change the value of the variable "sForumNumber" by their corresponding sub forum where tutorials are!
Result:
Well, I know that the code needs a lot of improvement, feel free to modify it...
JS
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:
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:
Well, I know that the code needs a lot of improvement, feel free to modify it...
JS
Facebook
Twitter
Pinterest
Youtube
