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.

How can I make this widget about newest member?

View previous topic View next topic Go down

Solved How can I make this widget about newest member?

Post by Van-Helsing on March 14th 2015, 12:09 pm

Hello,
How can I make this widget about the newest member before forum statistics on board index?



Last edited by Black-Shadow on March 16th 2015, 1:35 am; edited 1 time in total

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Ange Tuteur on March 14th 2015, 7:17 pm

I've a quick example for you. I'm not exactly sure how much you've modified your forum version, but this is meant for punbb. It should be installed in JS management in the homepage.
Code:
$(function(){
  var info = document.getElementById('pun-info'), bloc = document.createElement('DIV'), storage = window.localStorage;
 
  // check cached data, if not present or unsupported send a request
  if (storage && storage.faMembreRecent && storage.faMembreRecentExp > +new Date - 4*59*100) bloc.innerHTML = storage.faMembreRecent;
  else getMembre();
 
  // inserts the block before the qeel
  info.parentNode.insertBefore(bloc,info);
 
  // use a function so it can be called multiple times if we want to install a refresh button to purge the cache
  function getMembre() {
    $.get(info.getElementsByTagName('A')[0].href, function(d) {
     
      // set the HTML of the block with contents from the new member
      bloc.innerHTML = $('#profile-advanced-layout',d)[0].innerHTML + $('#profile-advanced-right',d)[0].innerHTML;
     
      // if storage is supported we'll store the HTML and a date
      if (storage) {
        storage.faMembreRecent = bloc.innerHTML;
        storage.faMembreRecentExp = +new Date;
      }
    });
  };
});

It'll load the newest member from the stats and insert their profile contents before the online statistics. It's the whole profile -- it's not filtered. There's also comments in there to explain what's going on.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Van-Helsing on March 14th 2015, 9:38 pm

Hello @Ange Tuteur,
Its not working,
I have found the following code which it is working with simple forumotion profile and addon js for ipb profile. The codes which I am using are:

HTML Code:
index_body template Code below the tag <!-- END catrow -->
Code:


    <div class="main-head">
        <div class="page-title">
            <h2>Νεότερο Μέλος</h2>
        </div>
    </div>
    <div class="main-content">
        <table cellspacing="0" class="table">
            <tbody class="statused">
                <!-- / CAT HEADER -->
                <tr class="">
                    <td class="col_c" id="recent_member" style="height: 171px;">
                        <!--/ Code here! -->
                    </td>
                </tr>           
            </tbody>
        </table>
    </div>
at the end of template code
Code:


<script type="text/javascript">
    //<![CDATA[
    /***
    * Shows the newest member!
    * Only one request per session to read member profile to get info!
    * Only show the element if is visible in browser window (view port)!!!
    * Made and Optimizations by JScript - 2013/07/12
    */   
    /* Fire event for 'scroll' to show the newest Member... */
    jQuery(window).on('scroll.newestMember', newestMember(document.getElementById("recent_member")));

    /* 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 newest Member... */
    function newestMember(elem) {
        return function() {
            /* Chech if the element is visible in view port! */
            if (isInViewPort(elem)) {
                /* If visible, stop event!!! */
                jQuery(window).off('scroll.newestMember');
               
                if ($("#statistics").length) {
                    var UserURL = $('#statistics').find('li.lastUser strong a').attr('href');
                } else {
                    var UserURL = $('#stats p:eq(2) a').attr('href');
                }
                var recmb = $('#recent_member');
                /*
                var storeData = sessionStorage.getItem('recent_member');
                if (storeData) {
                    $('#recent_member').html(storeData);
                    return false
                }*/
                recmb.load(UserURL + ' #profile_background .ipsVerticalTabbed', function() {
                    var prof = $('#recent_member #profile_content_main');
                    recmb.find('ul.clear2').hide();
                    var panes = recmb.find('#profile_panes_wrap');
                    panes.hide();
                    prof.css('margin-bottom', '0');
                    prof.find('#user_status_cell').hide();
                    prof.find('#user_utility_links').css('float', 'right');
                    recmb.find('#profile_photo').css({ 'max-height' : '138px', 'max-width' : '138px' });
                    recmb.find('.ipsVerticalTabbed_content').css({ 'min-height' : '100px', 'max-height' : '238px' });
                    recmb.find('div.warn_panel').remove();
                    $('#profile_tabs').append('<p style="text-align: center;"><strong>Καλωσήρθατε</strong></p>');
                    /*sets default user image*/
                    var $Sel = $('#profile_tabs').find('p.short.photo_holder');
                    if($.trim($Sel.find('img').attr('src')) =='') {
                        $Sel.append('<img alt="- foto" src="http://illiweb.com/fa/invision/pp-blank-thumb.png" id="profile_photo" class="ipsUserPhoto">');
                        $('#photo_popup_inner #ips_currentPhoto').append('<img alt="- foto" src="http://illiweb.com/fa/invision/pp-blank-thumb.png" id="profile_photo" class="ipsUserPhoto">');
                    } else {
                        $Sel.find('img').attr('id','profile_photo').addClass('ipsUserPhoto');
                    }
                    /*sets joined in*/
                    $('#user_info_cell').find('span.joined_in').html($('#field_id-4').find('div.field_uneditable').text()); /*id-4 => "Ημερομηνία Εγγραφής"*/ 
                    /*sets state*/
                    if($.trim($('#user_status').text()) == 'conectado') {
                        $('#user_info_cell #user_connected').html('online').addClass('ipsBadge_green').removeClass('ipsBadge_lightgrey');
                    } else {
                        $('#user_info_cell #user_connected').html('offline').addClass('ipsBadge_lightgrey').removeClass('ipsBadge_green');
                    };
                    var inter = $.trim(panes.find('#field_id6 div.field_uneditable').text());
                    var magic = $.trim(panes.find('#field_id9 div.field_uneditable').text());
                    if (inter == '-'){inter = "Δεν υπάρχουν πληροφορίες";}
                    if (magic == '-'){magic = "Δεν υπάρχουν πληροφορίες";}
                    prof.append(
                        '<br><div class="general_box clearfix" style="margin-top: 25px; margin-bottom: 5px;"><h3 style="padding: 2px;"></h3></div>',
                        '<p><strong>Interests: </strong>' + inter + '</p><p><strong>Μαγική Απάντηση: </strong>' + magic + '</p>'
                    );
                    /*sessionStorage.setItem('recent_member', $('#recent_member').html());*/
                });
            }
        }
    } 
    //]]>
</script>

I need to convert this code to work with the default forumotion advanced profile because I have other javascripts which are working with advanced profile.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Van-Helsing on March 15th 2015, 10:51 pm

Bump

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Ange Tuteur on March 15th 2015, 11:17 pm

Here, give this a try :
Code:
$(function(){
  var info = document.getElementById('pun-info'), bloc = document.createElement('DIV'), storage = window.localStorage;
  bloc.id = 'newest_member';
 
  if (storage && storage.faMembreRecent && storage.faMembreRecentExp > +new Date - 4*59*1000) bloc.innerHTML = storage.faMembreRecent;
  else getMembre();
 
  info.parentNode.insertBefore(bloc,info);
 
  function getMembre() {
    $.get(info.getElementsByTagName('A')[0].href, function(d) {
      bloc.innerHTML = '<div class="module main"><div class="main-head"><div class="h3">Newest Member</div></div><div class="main-content"><table style="width:100%"><tr><td style="width:15%" class="avatar_container">' + $('#profile-advanced-right .module:first .main-content',d).html() + '</td><td class="profile_info" style="vertical-align:top"><h1 style="margin-bottom:10px;">' + $('#profile-advanced-right .module:first .main-head .h3',d).html() + '</h1><div>Registered : ' + $('#field_id-4 dd',d).text() + '</div><div style="text-align:right;"><a href="' + info.getElementsByTagName('A')[0].href + '" class="profile_link">View Profile</a></div><hr/><div>' + $('#field_id-9',d).html() + '</div><div>' + $('#field_id-8',d).html() + '</div></td></tr></table></div></div>';
   
      if (storage) {
        storage.faMembreRecent = bloc.innerHTML;
        storage.faMembreRecentExp = +new Date;
      }
    });
  };
});

It's for the advanced profile on punbb. It should be installed in the homepage. If it doesn't work, please provide the URL of your forum.

It should give the following result :

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Van-Helsing on March 15th 2015, 11:34 pm

Hello Ange,
It is appearing empty (Null) the widget:



Here is my forum link

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Ange Tuteur on March 16th 2015, 12:41 am

Your statistics aren't default, so the new member URL is in a different location. See if this works for you, you might need to clear your cache after installing, because the last data saved will be cached for 5 minutes.
Code:
$(function(){
  if (!_userdata.session_logged_in) return;
  var info = document.getElementById('statistics'), bloc = document.createElement('DIV'), storage = window.localStorage;
  bloc.id = 'newest_member';
 
  if (storage && storage.faMembreRecent && storage.faMembreRecentExp > +new Date - 4*59*1000) bloc.innerHTML = storage.faMembreRecent;
  else getMembre();
 
  info.parentNode.insertBefore(bloc,info.nextSibling);
 
  function getMembre() {
    $.get(info.getElementsByTagName('A')[0].href, function(d) {
      bloc.innerHTML = '<div class="module main"><div class="main-head"><div class="h3">Newest Member</div></div><div class="main-content"><table style="width:100%"><tr><td style="width:15%" class="avatar_container">' + $('#profile-advanced-right .module:first .main-content',d).html() + '</td><td class="profile_info" style="vertical-align:top"><h1 style="margin-bottom:10px;">' + $('#profile-advanced-right .module:first .main-head .h3',d).html() + '</h1><div>Registered : ' + $('#field_id-4 dd',d).text() + '</div><div style="text-align:right;"><a href="' + info.getElementsByTagName('A')[0].href + '" class="profile_link">View Profile</a></div><hr/><div>' + $('#field_id-9',d).html() + '</div><div>' + $('#field_id-8',d).html() + '</div></td></tr></table></div></div>';
 
      if (storage) {
        storage.faMembreRecent = bloc.innerHTML;
        storage.faMembreRecentExp = +new Date;
      }
    });
  };
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Van-Helsing on March 16th 2015, 12:46 am

Ange i have substitute the javascript but it is still not working, I have cleared my browser's cache but the problem still remains.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Ange Tuteur on March 16th 2015, 12:50 am

Are you using the advanced profile or the simple profile ?
Users & Groups > Profiles > General Options > Activate advanced profile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Van-Helsing on March 16th 2015, 12:51 am

I am using the advanced profile.

In my index_body template there is a script for IPB stats and the code is
Code:

<script>
$(document).ready(function(){
var rdtOn = $('.rdtOn strong').html();
var lastUser = $('.lastUser strong').html();
var totalUser = $('.totalUser strong').html();
var totalPost = $('.totalPost strong').html();


$('ul.statsPers').prepend('
<li><span>'+totalPost+'</span> Συνολικές Δημοσιεύσεις</li>
<li><span>'+totalUser+'</span> Εγγεγραμένα Μέλη</li>
<li><span>'+lastUser+'</span> Το νεότερο μέλος μας</li>
<li><span>'+rdtOn+'</span> Ρεκόρ Ταυτόχρονων Συνδέσεων</li>
');


});
</script>
this code maybe help you.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Ange Tuteur on March 16th 2015, 1:07 am

See if this works :
Code:
$(function(){$(function(){
  if (!_userdata.session_logged_in) return;
  var info = document.getElementById('statistics'), bloc = document.createElement('DIV'), storage = window.localStorage;
  bloc.id = 'newest_member';
 
  if (storage && storage.faMembreRecent && storage.faMembreRecentExp > +new Date - 4*59*1000) bloc.innerHTML = storage.faMembreRecent;
  else getMembre();
 
  info.parentNode.insertBefore(bloc,info.nextSibling);
 
  function getMembre() {
    $.get(info.getElementsByTagName('A')[0].href, function(d) {
      bloc.innerHTML = '<div class="module main"><div class="main-head"><div class="h3">Newest Member</div></div><div class="main-content"><table style="width:100%"><tr><td style="width:15%" class="avatar_container">' + $('#profile-advanced-right .module:first .main-content',d).html() + '</td><td class="profile_info" style="vertical-align:top"><h1 style="margin-bottom:10px;">' + $('#profile-advanced-right .module:first .main-head .h3',d).html() + '</h1><div>Registered : ' + $('#field_id-4 dd',d).text() + '</div><div style="text-align:right;"><a href="' + info.getElementsByTagName('A')[0].href + '" class="profile_link">View Profile</a></div><hr/><div>' + $('#field_id-9',d).html() + '</div><div>' + $('#field_id-8',d).html() + '</div></td></tr></table></div></div>';
 
      if (storage) {
        storage.faMembreRecent = bloc.innerHTML;
        storage.faMembreRecentExp = +new Date;
      }
    });
  };
})});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Van-Helsing on March 16th 2015, 1:13 am

Yes this seems working


Is there a way to hide the rank image and/or title?

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Ange Tuteur on March 16th 2015, 1:15 am

Replace this :
Code:
$('#profile-advanced-right .module:first .main-content',d).html()

By :
Code:
'<img src="' + $('#profile-advanced-right .module:first .main-content img:first',d).attr('src') '"/>'

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Van-Helsing on March 16th 2015, 1:21 am

It is not working

Code:

$(function(){$(function(){
if (!_userdata.session_logged_in) return;
var info = document.getElementById('statistics'), bloc = document.createElement('DIV'), storage = window.localStorage;
bloc.id = 'newest_member';

if (storage && storage.faMembreRecent && storage.faMembreRecentExp > +new Date - 4*59*1000) bloc.innerHTML = storage.faMembreRecent;
else getMembre();

info.parentNode.insertBefore(bloc,info.nextSibling);

function getMembre() {
$.get(info.getElementsByTagName('A')[0].href, function(d) {
bloc.innerHTML = '<div class="module main"><div class="main-head"><div class="h3">Newest Member</div></div><div class="main-content"><table style="width:100%"><tr><td style="width:15%" class="avatar_container">' + '<img src="' + $('#profile-advanced-right .module:first .main-content img:first',d).attr('src') '"/>' + '</td><td class="profile_info" style="vertical-align:top"><h1 style="margin-bottom:10px;">' + $('#profile-advanced-right .module:first .main-head .h3',d).html() + '</h1><div>Registered : ' + $('#field_id-4 dd',d).text() + '</div><div style="text-align:right;"><a href="' + info.getElementsByTagName('A')[0].href + '" class="profile_link">View Profile</a></div><hr/><div>' + $('#field_id-9',d).html() + '</div><div>' + $('#field_id-8',d).html() + '</div></td></tr></table></div></div>';

if (storage) {
storage.faMembreRecent = bloc.innerHTML;
storage.faMembreRecentExp = +new Date;
}
});
};
})});

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Ange Tuteur on March 16th 2015, 1:26 am

Try now, I missed a plus by mistake.
Code:
$(function(){$(function(){
      if (!_userdata.session_logged_in) return;
      var info = document.getElementById('statistics'), bloc = document.createElement('DIV'), storage = window.localStorage;
      bloc.id = 'newest_member';
   
      if (storage && storage.faMembreRecent && storage.faMembreRecentExp > +new Date - 4*59*1000) bloc.innerHTML = storage.faMembreRecent;
      else getMembre();
   
      info.parentNode.insertBefore(bloc,info.nextSibling);
   
      function getMembre() {
        $.get(info.getElementsByTagName('A')[0].href, function(d) {
          bloc.innerHTML = '<div class="module main"><div class="main-head"><div class="h3">Newest Member</div></div><div class="main-content"><table style="width:100%"><tr><td style="width:15%" class="avatar_container"><img src="' + $('#profile-advanced-right .module:first .main-content img:first',d).attr('src') + '"/></td><td class="profile_info" style="vertical-align:top"><h1 style="margin-bottom:10px;">' + $('#profile-advanced-right .module:first .main-head .h3',d).html() + '</h1><div>Registered : ' + $('#field_id-4 dd',d).text() + '</div><div style="text-align:right;"><a href="' + info.getElementsByTagName('A')[0].href + '" class="profile_link">View Profile</a></div><hr/><div>' + $('#field_id-9',d).html() + '</div><div>' + $('#field_id-8',d).html() + '</div></td></tr></table></div></div>';
   
          if (storage) {
            storage.faMembreRecent = bloc.innerHTML;
            storage.faMembreRecentExp = +new Date;
          }
        });
      };
    })});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Van-Helsing on March 16th 2015, 1:29 am

Yes now it is working Smile, can make now the link "View Profile" button via css?

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Ange Tuteur on March 16th 2015, 1:31 am

Yes, there's a few classes included to allow you to style it. Use this for the button :
Code:
.profile_link {
  background:#EEE;
  border:1px solid #CCC;
  padding:3px;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Van-Helsing on March 16th 2015, 1:36 am

Thank you very much Ange for your time it is solved.
~1~

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I make this widget about newest member?

Post by Ange Tuteur on March 16th 2015, 1:48 am

You're welcome ^^

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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