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.

script for avatar in Topics and Recent topics widget

View previous topic View next topic Go down

Solved script for avatar in Topics and Recent topics widget

Post by iyaaz on March 7th 2014, 10:37 pm

I have search and couldn't find a script for avatar in Topics and Recent topics widget, i want the avatar to be on the left so when some one post it will show a small avatar also it will show automatic on Recent topics widget
, so if any one has the scrip code kindly share.



hear is the link i saw very nicely done Smile  but i cant understand http://punbb.forumeiros.com/forum

My forum version is PunBB

thank you!

iyaaz
Forumember

Male Posts : 350
Reputation : 8
Language : English
Location : London

http://iyaaz.forumotion.co.uk/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by masesm on March 7th 2014, 10:51 pm


masesm
Forumember

Male Posts : 67
Reputation : 5
Language : English, Java, JavaScript, HTML, CSS.
Location : United States

http://sicktier.forumotion.com/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by iyaaz on March 7th 2014, 11:16 pm


Hello Masesm,
I have check the link you posted I don't see the version for PunBB

iyaaz
Forumember

Male Posts : 350
Reputation : 8
Language : English
Location : London

http://iyaaz.forumotion.co.uk/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by Ange Tuteur on March 7th 2014, 11:22 pm

Hello iyaaz,

For lastpost, try this :
Administration Panel > Modules > Javascript codes management > Create a new script

Title : what you wish
Placement : in the homepage
Code:
           $(function(){
            
               if(!window.localStorage) return;
            
               // Avatar by default
                var default_avatar= 'http://illiweb.com/fa/invision/pp-blank-thumb.png';
            
               // Time of cache, here : 24hrs * 60m * 60s * 1000ms so one day
                var caching_time= 24*60*60*1000;
            
               // Time of cache in case of error, here : 60s * 1000ms so one minute
                var caching_error= 60*1000;
            
               var set_avatar= function(id) {
                    $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
                };
            
               var get_avatar= function(id) {
                    if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
                    {
                        localStorage.setItem('d_ava'+id, default_avatar);
                        $.get('/u'+id, function (d){
                            localStorage.setItem('t_ava'+id,+new Date);
                            localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                            set_avatar(id);
                        });
                    }
                    return localStorage.getItem('d_ava'+id);
                };
            
               var to_replace= {};
            
               $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
                    to_replace[$(this).attr('href').substr(2)]= 1;
                    $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
                });
            
               for(i in to_replace)
                {
                    set_avatar(i);
                };
            
           });

Then add this CSS :
Display > colors > css stylesheet
Code:
   .mini_ava{
    float:left;
    }
    .mini_ava img{
    width:40px;
    height:40px;
    margin: 0 5px;
    }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by iyaaz on March 7th 2014, 11:48 pm

Avatar in Topics has been solved by Ange Tuteur  Very good , thank you for your time & patience. please keep this topic open till  some one help me with the Recent topics widget I also requested that i could not find for that version

iyaaz
Forumember

Male Posts : 350
Reputation : 8
Language : English
Location : London

http://iyaaz.forumotion.co.uk/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by JScript on March 7th 2014, 11:53 pm

@iyaaz
Hello,
Translates what you find necessary for your native language ok?

mod_recent_topics template:
Code:

<!-- JScript - 2013-07-08 - http://punbb.forumeiros.com -->
<!-- BEGIN scrolling_row -->
<div class="module main">
   <div class="main-head"><div class="h3">Tópicos Recentes</div></div>
    <div id="mod_recent_topics" class="main-content _sbcollapsable" style="margin: 0px; height: 225px; max-height: 225px; overflow: auto;">
        <ul class="ipsList_withminiphoto" style="margin: 0px !important;">
            <!-- BEGIN recent_topic_row -->
            <li class="clearfix">
                <!-- BEGIN switch_poster -->
                <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}" class="ipsUserPhotoLink left">
                    <img src="" 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;">
                </a>
                <!-- END switch_poster -->
                <div class="list_content" style="margin-left: 40px; word-wrap: break-word;">
                    <a onmouseover="document.getElementById('comments_scroll_container').stop();"
                        onmouseout="document.getElementById('comments_scroll_container').start();" class="ipsType_small" style="font-size: 12px;"
                        href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE} - criado em {scrolling_row.recent_topic_row.S_POSTTIME}">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}
                    </a>
                    <p class="desc ipsType_smaller" style="color: rgb(119, 119, 119);">
                        <!-- BEGIN switch_poster -->
                        <a onmouseover="document.getElementById('comments_scroll_container').stop();"
                            onmouseout="document.getElementById('comments_scroll_container').start();"
                            href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}" style="font-size: 11px !important;">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}
                        </a>
                        <!-- END switch_poster -->

                        <!-- BEGIN switch_poster_guest -->
                        {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
                        <!-- END switch_poster_guest -->

                         - {scrolling_row.recent_topic_row.S_POSTTIME}
                    </p>
                </div>
            </li>
            <!-- END recent_topic_row -->
      </ul>
   </div>
</div>

<script type="text/javascript">
//<![CDATA[
$(function(){
    div_marquee('mod_recent_topics', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}');
});
//]]>
</script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
<div class="module main">
   <div class="main-head"><h3>Tópicos Recentes</h3></div>
   <div id="mod_recent_topics" class="main-content _sbcollapsable" style="margin: 0px; height: 225px; max-height: 225px; overflow: auto;">
        <ul class="ipsList_withminiphoto" style="margin: 0px !important;">
            <!-- BEGIN recent_topic_row -->
            <li class="clearfix">
                <!-- BEGIN switch_poster -->
                <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" class="ipsUserPhotoLink left">
                    <img src="" 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;">
                </a>
                <!-- END switch_poster -->
                <div class="list_content" style="margin-left: 40px; word-wrap: break-word;">
                    <a href="{classical_row.recent_topic_row.U_TITLE}" class="ipsType_small" style="font-size: 12px;"
                        title="{classical_row.recent_topic_row.L_TITLE} - criado em {classical_row.recent_topic_row.S_POSTTIME}">{classical_row.recent_topic_row.L_TITLE}</a>
                    <p class="desc ipsType_smaller" style="color: rgb(119, 119, 119);">
                        <!-- BEGIN switch_poster -->
                        <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" style="font-size: 11px !important;">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
                        <!-- END switch_poster -->

                        <!-- BEGIN switch_poster_guest -->
                        {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                        <!-- END switch_poster_guest -->

                         - {ON} {classical_row.recent_topic_row.S_POSTTIME}
                    </p>
                </div>
            </li>
            <!-- END recent_topic_row -->
      </ul>
   </div>
</div>
<!-- END classical_row -->
<script type="text/javascript">
//<![CDATA[
/***
 * Widget Recent Topics
 * Only one request per session to read member profile to get avatar!
 * Only show the widget if is visible in browser window (view port)!!!
 * Made and Optimizations by JScript - 2013/07/12
 */
 
/* Fire event for 'scroll' to show the widget... */
$(window).load(function() {
    if (location.pathname == '/forum') {
        jQuery(window).on('scroll.mod_recent_topics', showRecentTopics(document.getElementById("mod_recent_topics")));
    }
});
/* 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 showRecentTopics(elem) {
   return function() {
        /* Chech if the widget is visible in view port! */
      if (isInViewPort(elem)) {
            /* If visible, stop event!!! */
         jQuery(window).off('scroll.mod_recent_topics');
            /* DOM chached for fast execution! */
            var oTarget = $('#mod_recent_topics').find('ul.ipsList_withminiphoto > li');

            oTarget.each(function () {
                oThis = $(this); /* DOM chached for fast execution! */
               
                if (oThis.find('a.ipsType_small').text().indexOf('_Log') !== -1) oThis.remove();
               
                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;">';
                var UserIMG = sessionStorage.getItem(UserURL); /* Gets the avatar saved in local storage (Fastest!)*/
       
                /* 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 + ' #profile_tabs p img', 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>

So long,

JS

JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by iyaaz on March 8th 2014, 12:16 am

Hi JScript,

avatar is showing a small dot inside the box also how can i move the avatar a long with the text towards the left it just text are too close together  Smile JScript


iyaaz
Forumember

Male Posts : 350
Reputation : 8
Language : English
Location : London

http://iyaaz.forumotion.co.uk/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by iyaaz on March 12th 2014, 4:01 pm

bump

iyaaz
Forumember

Male Posts : 350
Reputation : 8
Language : English
Location : London

http://iyaaz.forumotion.co.uk/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by JScript on March 12th 2014, 4:10 pm

@iyaaz
Hello!
Let the widget running so we can assess the problem ok?

JS

JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by iyaaz on March 12th 2014, 4:36 pm

@JScript wrote:@iyaaz
Hello!
Let the widget running so we can assess the problem ok?

JS

sorry I don't understand, widget is running now i have copy the code on my forum
http://iyaaz.forumotion.co.uk/

iyaaz
Forumember

Male Posts : 350
Reputation : 8
Language : English
Location : London

http://iyaaz.forumotion.co.uk/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by JScript on March 12th 2014, 9:43 pm

@iyaaz

In my code, search: #profile_tabs p img
And replace with: #profile-advanced-right .main-content img:first

Go to: ACP > Display > Colors (right hand side) > Css Stylesheet
And add this to you css
Code:

.pun .main-content ol, .pun .main-content ul {
    padding-left: 0 !important;
}
.module ol, .module ul {
    padding-left: 0 !important;
}

So long,

JS

JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by iyaaz on March 12th 2014, 10:01 pm

Hey Js  Smile 
copied the information above still have the same problem with the avatar not showing automatic

iyaaz
Forumember

Male Posts : 350
Reputation : 8
Language : English
Location : London

http://iyaaz.forumotion.co.uk/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by JScript on March 12th 2014, 10:29 pm

@iyaaz

My code uses the function sessionStorage which writes the avatar in the browser cache, in this case, just to clear the cache, close the browser and open again!

JS

JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by iyaaz on March 12th 2014, 10:44 pm

@JScript wrote:@iyaaz

My code uses the function sessionStorage which writes the avatar in the browser cache, in this case, just to clear the cache, close the browser and open again!

JS

I have use CCleaner to clear the cache still i don't see avatar

iyaaz
Forumember

Male Posts : 350
Reputation : 8
Language : English
Location : London

http://iyaaz.forumotion.co.uk/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by iyaaz on March 14th 2014, 7:23 pm

It solved thank you

iyaaz
Forumember

Male Posts : 350
Reputation : 8
Language : English
Location : London

http://iyaaz.forumotion.co.uk/

Back to top Go down

Solved Re: script for avatar in Topics and Recent topics widget

Post by SLGray on March 14th 2014, 7:32 pm

Problem solved & topic archived.


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


SLGray
Administrator
Administrator

Male Posts : 36705
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

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