How can I make this widget about newest member?

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

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.

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://2img.net/i/fa/invision/pp-blank-thumb.png" id="profile_photo" class="ipsUserPhoto">');
                        $('#photo_popup_inner #ips_currentPhoto').append('<img alt="- foto" src="http://2img.net/i/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.

Bump

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 :

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



Here is my forum link

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 i have substitute the javascript but it is still not working, I have cleared my browser's cache but the problem still remains.

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

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.

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;
      }
    });
  };
})});

Yes this seems working


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

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') '"/>'

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;
          }
        });
      };
    })});


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;
          }
        });
      };
    })});

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

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;
}

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

You're welcome ^^

Topic archived

Have a nice day.