Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

None

[ View the whole list ]


Most users ever online was 7 on Sat Mar 15, 2014 3:53 am
Statistics
We have 15 registered users
The newest registered user is bilde

Our users have posted a total of 271 messages in 27 subjects
deleted after updated

hover profile box

View previous topic View next topic Go down

hover profile box

Post by Admin on Wed Mar 21, 2012 3:20 pm

Code:

function get_hover_stats() {
   var holder = document.body.firstChild; //temp div holding the loaded elems.
   var f = holder.getElementsByTagName('fieldset');
   var ret = {length:0}; //object to store all the elems we need.
   for(var i=0,l=f.length;i<l;i++){
      var ftitle = f[i].firstChild.innerHTML;
      if(ftitle == 'Topics' || ftitle == 'Posts') {
         ret[ftitle] = f[i];
         ret.length++;
      }
      if(ret.length == 2) break; //if we have the topics and posts, no need to continue looping.
   }
   ret['avatar'] = document.getElementById('profile-advanced-right').firstChild.firstChild; //add avatar.
   return ret;
}

function cached_hover_profile(user_id,elem) {
  //first check if he already have a hover box for this profile. If so, display it, nothing else needs done.
  if(elem.lastChild.className == 'hover_profile') {
        elem.lastChild.style.display = '';
        return true;
  }
  //if we don't, then we can check the cache. Aka, they have hovered over this user before, but not this exact profile.
  else if(hover_profile_cache[user_id]) {
      var html = hover_profile_cache[user_id]; //the inner html was stored. create the new box and display it.
      var box = document.createElement('div');
      box.className = 'hover_profile';
      box.innerHTML = html;
      elem.appendChild(box);
      return true;
  }
  else { //nope, we've got nothing so return false so it begins to load the info.
        return false;
    }
}

function show_hover_info(user_id,elem) {
    $('.hover_profile').hide();
    if(cached_hover_profile(user_id,elem)) return;  //check cache, will return true if successful, so we don't need to do anything else.
   var temp = document.createElement('div');
   document.body.insertBefore(temp,document.body.firstChild);
   $(temp).load('/'+user_id+'stats #main-content',function() { //load the things we need in our temp div.
      var info = get_hover_stats(); //will return object of elems we want.
      document.body.removeChild(temp); //remove temp. and begin to create our new box.
      var x = document.createElement('div');
      x.className = 'hover_profile';
      x.appendChild(info['avatar']);
      x.appendChild(info['Topics']);
      x.appendChild(info['Posts']);
      x.innerHTML+='<span class="hover_box_close" onclick="this.parentNode.style.display=\'none\';">Close</span>';
      elem.appendChild(x);
      hover_profile_cache[user_id] = x.innerHTML; //store the innerHTML in the cache.
   });
}

$(function(){
   var pathname = window.location.pathname.substr(1);
   
   //if topic.
   if(/^t\d+/.test(pathname)) {
      var pp = $('.postprofile dt').mouseover(function(){
          var parent = this.parentNode.parentNode;
         var user_id = parent.getElementsByTagName('a')[0].href.replace(/.*(u\d+)/,'$1');
         show_hover_info(user_id,parent);
      });      
   }
});

hover_profile_cache = {};


Last edited by Admin on Wed Mar 21, 2012 3:26 pm; edited 1 time in total

Admin
Admin

Avacweb
Posts: 231
Points: 282
Join date: 2011-11-07

View user profile http://testlg.forumotion.co.uk

Back to top Go down

Re: hover profile box

Post by Admin on Wed Mar 21, 2012 3:21 pm

I'd recommend reading the code backwards if you do read it.

This is set up only for topics, but the concept is the same elsewhere, not to mention the functions can be used on any page, it main only the bits in the $(function(){ which will need changed by adding if elses.

You'll notice that the results are very fast when hovering over someone who has been previously hovered over.

Admin
Admin

Avacweb
Posts: 231
Points: 282
Join date: 2011-11-07

View user profile http://testlg.forumotion.co.uk

Back to top Go down

attachment test

Post by Admin on Wed Nov 07, 2012 10:46 pm

6ujy5htg4rf3ed
Attachments
minilogo.PNG You don't have permission to download attachments.(2 Kb) Downloaded 2 times

Admin
Admin

Avacweb
Posts: 231
Points: 282
Join date: 2011-11-07

View user profile http://testlg.forumotion.co.uk

Back to top Go down

Re: hover profile box

Post by Admin on Tue Nov 13, 2012 2:57 pm

testing http://testlg.forumotion.co.uk/f1-your-first-forum

swre

Image url:
http://r15.imgfast.net/users/1515/42/07/94/avatars/1-24.jpg

Local post: [post]http://testlg.forumotion.co.uk/t19-hover-profile-box#268[/post]
Post elsewhere: [post]http://testlg.forumotion.co.uk/t24-new-slider#264[/post]

Tip test: [tip]Hi there![/tip]
[tip="Tip"]Hi there[/tip]

Admin
Admin

Avacweb
Posts: 231
Points: 282
Join date: 2011-11-07

View user profile http://testlg.forumotion.co.uk

Back to top Go down

Re: hover profile box

Post by Admin on Thu Nov 29, 2012 12:49 pm

Admin wrote:testing http://testlg.forumotion.co.uk/f1-your-first-forum

swre

Image url:
http://r15.imgfast.net/users/1515/42/07/94/avatars/1-24.jpg

Local post: [post]http://testlg.forumotion.co.uk/t19-hover-profile-box#268[/post]
Post elsewhere: [post]http://testlg.forumotion.co.uk/t24-new-slider#264[/post]

Tip test: [tip]Hi there![/tip]
[tip="Tip"]Hi there[/tip]

Admin
Admin

Avacweb
Posts: 231
Points: 282
Join date: 2011-11-07

View user profile http://testlg.forumotion.co.uk

Back to top Go down

Re: hover profile box

Post by Admin on Sun Jan 13, 2013 1:20 pm


Admin
Admin

Avacweb
Posts: 231
Points: 282
Join date: 2011-11-07

View user profile http://testlg.forumotion.co.uk

Back to top Go down

Re: hover profile box

Post by EasyBB on Wed Mar 26, 2014 1:35 am

Ok testing ost's [ost][/ost]

EasyBB


Posts: 9
Points: 13
Join date: 2011-12-09

View user profile

Back to top Go down

Re: hover profile box

Post by EasyBB on Wed Mar 26, 2014 1:36 am

[div=ost]This tutorial is an OST, if you're not sure what to do with OST's, read here: [post="About OSTs"]http://www.avacweb.com/t1441-about-ost-s-on-screen-tutorials#13834[/post][/div]

EasyBB


Posts: 9
Points: 13
Join date: 2011-12-09

View user profile

Back to top Go down

Re: hover profile box

Post by EasyBB on Fri May 09, 2014 5:08 am

Inline Code Attribute of Type
[ic=type]object[/ic] [ic=type]array[/ic] [ic=type]function[/ic]

Inline Code Attribute of Code or nothing
[ic]allow_private_messaging[/ic] [ic=code]allow_user_resize[/ic] [ic=code]allow_appear_offline[/ic]

Inline Code Attribute of required
[ic=required]allow_private_messaging[/ic] [ic=required]allow_user_resize[/ic] [ic=required]allow_appear_offline[/ic]

EasyBB


Posts: 9
Points: 13
Join date: 2011-12-09

View user profile

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