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.

How can I make this widget about newest member?

2 posters

Go down

Solved How can I make this widget about newest member?

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

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

How can I make this widget about newest member? Newmem10


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

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

http://itexperts.forumgreek.com/

Back to top Go down

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

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Van-Helsing 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://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.
Van-Helsing
Van-Helsing
Hyperactive

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

http://itexperts.forumgreek.com/

Back to top Go down

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

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

Bump
Van-Helsing
Van-Helsing
Hyperactive

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

http://itexperts.forumgreek.com/

Back to top Go down

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

Post by Ange Tuteur 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 :
How can I make this widget about newest member? Captu155
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

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

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

How can I make this widget about newest member? GICapll

Here is my forum link
Van-Helsing
Van-Helsing
Hyperactive

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

http://itexperts.forumgreek.com/

Back to top Go down

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

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Van-Helsing 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
Van-Helsing
Hyperactive

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

http://itexperts.forumgreek.com/

Back to top Go down

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

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Van-Helsing 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
Van-Helsing
Hyperactive

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

http://itexperts.forumgreek.com/

Back to top Go down

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

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

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

Yes this seems working

How can I make this widget about newest member? 3bRU5QR
Is there a way to hide the rank image and/or title?
Van-Helsing
Van-Helsing
Hyperactive

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

http://itexperts.forumgreek.com/

Back to top Go down

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

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Van-Helsing 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
Van-Helsing
Hyperactive

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

http://itexperts.forumgreek.com/

Back to top Go down

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

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

Try now, I missed a plus by mistake. How can I make this widget about newest member? 2147065358
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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

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

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

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

http://itexperts.forumgreek.com/

Back to top Go down

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

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

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

Thank you very much Ange for your time it is solved.
~1~
Van-Helsing
Van-Helsing
Hyperactive

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

http://itexperts.forumgreek.com/

Back to top Go down

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

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

You're welcome ^^

Topic archived

Have a nice day. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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