[FOORUM] Profile popup

Lõpp tulemus:


Alustuseks:

Loome javascripti
Administration Panel > Modules > JavaScript Codes Management
Pealkiri: Profile popup
Koht: All pages
Javascript:

Kood:

$(function () {
  if (/\/u\d+/.test(location.pathname)) return;
 
  var wall = 1, // visitor messages tab
  stats = 1, // statistics tab
  attachments = 0, // attachments tab
  friends = 1, // friends tab
  contact = 1, // contact tab
  rpg = 0, // RPG tab
  close = 1, // close popup button
  avatar = 1; // display user avatar
 
  var a=document.getElementsByTagName('A');
  for(i=0;i<a.length;i++)if(/\/u\d+/.test(a[i].href))a[i].className=a[i].className+' profilePopup';
  $('.profilePopup:has(img)').removeClass('profilePopup');
  
  var userWall='',userStats='',userAttachments='',userFriends='',userContact='',userRpg='',userClose='',guestView=true;
  if(wall==1)userWall='<span class="propop_tab" id="propop_vm">Visitor messages</span>';if(stats==1)userStats='<span class="propop_tab" id="propop_stats">Statistics</span>';if(attachments==1)userAttachments='<span class="propop_tab" id="propop_attach">Attachments</span>';if(friends==1)userFriends='<span class="propop_tab" id="propop_friends">Friends</span>';if(contact==1)userContact='<span class="propop_tab" id="propop_contact">Contact</span>';if(rpg==1)userRpg='<span class="propop_tab" id="propop_rpg">Character sheet</span>';if(close==1)userClose='<span class="propop_tab" id="close_popup" style="float:right;margin-top:-4px;">Close</span>';
 
  $('.profilePopup').click(function(){
    var UID=$(this).attr('href'),UNM=$(this).text(),SEL='#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details',LOAD='<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Loading...</div>';
    $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#EEE;border:1px solid #CCC;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;z-index:50;"><div class="profile_popup_nav">'+userWall+'<span class="propop_tab" id="propop_profile">Profile</span>'+userStats+userAttachments+userFriends+userContact+userRpg+userClose+'</div><a href="'+UID+'"><div id="userAVA"></div></a><div id="userprofile" style="height:400px;overflow-y:auto;">'+LOAD+'</div><span id="profileLinks"><a href="'+UID+'">View Profile</a><span id="interactionLinks"> • <a href="/privmsg?mode=post&u='+UID.replace(/.*?\/u/,'')+'">Send PM</a><span id="vmLink"> • <a href="/privmsg?mode=post_profile&u='+UID.replace(/.*?\/u/,'')+'">Send VM</a></span><span style="float:right;"><a href="/profile?friend='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> • <a href="/profile?foe='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></span></div>');

    $('#userprofile').load(UID+SEL,function(){if($('#profcont-container #username').length&&_userdata.user_id==-1){$(this).html('<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Sorry, guests cannot view the profiles! :(</div>');guestView=false}});
    $('#propop_profile').addClass('activeTab');
    if (avatar == 1) $('#userAVA').load(UID+' #profile-advanced-right .module:first div img:first, .forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img:first, dl.left-box.details:first dd img:first, .row1 b .gen:first img:first, .real_avatar img:first');
    loadPro('#propop_profile','');loadPro('#propop_vm','wall');loadPro('#propop_stats','stats');loadPro('#propop_friends','friends');loadPro('#propop_contact','contact');loadPro('#propop_rpg','rpg');loadPro('#propop_attach','attachments');
  
    if(wall==0)$('#vmLink').remove();
    if(!document.getElementById('logout'))$('#interactionLinks').remove();
    $('#profilefilter,#close_popup').click(function(){$('#profilefilter, #profcont-container').remove()});
    function loadPro(element, location){$(element).click(function(){if($(this).hasClass('activeTab')||guestView==false)return;$('#propop_profile,#propop_vm,#propop_stats,#propop_friends,#propop_contact,#propop_rpg,#propop_attach,#propop_close').removeClass('activeTab');$(this).addClass('activeTab');$('#userprofile').html(LOAD).load(UID+location+SEL)})}
    return false;
  });
});

 Nüüd Loome CSS STYLESHEET
Mine administratsioonpaneeli | Display | Colors | CSS stiilifail

Kood:

/* Profile popup */
#profcont-container {
    background:#EEE !important;
    border:1px solid #CCC !important;
}

#userAVA img{
    position:absolute;
    top:43px;
    right:30px;
    height:50px;
    width:50px;
}

.profile_popup_nav {
    background:#E0E0E0;
    margin:-4px -4px 10px -4px;
    padding:3px;
    padding-top:10px !important;
    height:auto;
    border-bottom:1px solid #CCC;
    -webkit-border-radius:5px 5px 0px 0px;
    -moz-border-radius:5px 5px 0px 0px;
    border-radius:5px 5px 0px 0px;
}

.propop_tab {
    color:#888;
    text-shadow:1px 1px 0 #F5F5F5;
    cursor:pointer;
    -webkit-border-radius:4px 4px 0px 0px;
      -moz-border-radius:4px 4px 0px 0px;
            border-radius:4px 4px 0px 0px;
    border:1px solid #CCC;
    border-bottom:none;
    -webkit-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
      -moz-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
            box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
    background:#DDD;
    margin:0 2px;
    padding:3px;
}

.propop_tab:hover {
    position:relative;
    top:1px;
    color:#666;
    text-shadow:none;
    background-color:#EEE;
}

.propop_tab.activeTab {
    position:relative;
    top:1px;
    color:#666;
    text-shadow:none !important;
    background-color:#EEE !important;
}

#profileLinks {
    background:#E0E0E0;
    display:block;
    padding:3px;
    margin:10px -4px -4px -4px;
    border-top:1px solid #CCC;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
    border-radius:0px 0px 5px 5px;
}

Eestikeelne versioon:

Kood:

$(function () {
      if (/\/u\d+/.test(location.pathname)) return;
   
      var wall = 1, // visitor messages tab
      stats = 1, // statistics tab
      attachments = 0, // attachments tab
      friends = 1, // friends tab
      contact = 1, // contact tab
      rpg = 0, // RPG tab
      close = 1, // close popup button
      avatar = 1; // display user avatar
   
      var a=document.getElementsByTagName('A');
      for(i=0;i<a.length;i++)if(/\/u\d+/.test(a[i].href))a[i].className=a[i].className+' profilePopup';
      $('.profilePopup:has(img)').removeClass('profilePopup');
     
      var userWall='',userStats='',userAttachments='',userFriends='',userContact='',userRpg='',userClose='',guestView=true;
      if(wall==1)userWall='<span class="propop_tab" id="propop_vm">Sein</span>';if(stats==1)userStats='<span class="propop_tab" id="propop_stats">Statistika</span>';if(attachments==1)userAttachments='<span class="propop_tab" id="propop_attach">Manused</span>';if(friends==1)userFriends='<span class="propop_tab" id="propop_friends">Sõbrad</span>';if(contact==1)userContact='<span class="propop_tab" id="propop_contact">Kontakt</span>';if(rpg==1)userRpg='<span class="propop_tab" id="propop_rpg">Karakter</span>';if(close==1)userClose='<span class="propop_tab" id="close_popup" style="float:right;margin-top:-4px;">Sulge</span>';
   
      $('.profilePopup').click(function(){
        var UID=$(this).attr('href'),UNM=$(this).text(),SEL='#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details',LOAD='<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Laen...</div>';
        $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#EEE;border:1px solid #CCC;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;z-index:50;"><div class="profile_popup_nav">'+userWall+'<span class="propop_tab" id="propop_profile">Profiil</span>'+userStats+userAttachments+userFriends+userContact+userRpg+userClose+'</div><a href="'+UID+'"><div id="userAVA"></div></a><div id="userprofile" style="height:400px;overflow-y:auto;">'+LOAD+'</div><span id="profileLinks"><a href="'+UID+'">Vaata profiili</a><span id="interactionLinks"> • <a href="/privmsg?mode=post&u='+UID.replace(/.*?\/u/,'')+'">Saada sõnum</a><span id="vmLink"> • <a href="/privmsg?mode=post_profile&u='+UID.replace(/.*?\/u/,'')+'">Kirjuta seinale</a></span><span style="float:right;"><a href="/profile?friend='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Lisa sõbraks</a> • <a href="/profile?foe='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Lisa vaenlaseks</a></span></span></div>');

        $('#userprofile').load(UID+SEL,function(){if($('#profcont-container #username').length&&_userdata.user_id==-1){$(this).html('<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Vabandame, külalised ei näe profiile!(</div>');guestView=false}});
        $('#propop_profile').addClass('activeTab');
        if (avatar == 1) $('#userAVA').load(UID+' #profile-advanced-right .module:first div img:first, .forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img:first, dl.left-box.details:first dd img:first, .row1 b .gen:first img:first, .real_avatar img:first');
        loadPro('#propop_profile','');loadPro('#propop_vm','wall');loadPro('#propop_stats','stats');loadPro('#propop_friends','friends');loadPro('#propop_contact','contact');loadPro('#propop_rpg','rpg');loadPro('#propop_attach','attachments');
     
        if(wall==0)$('#vmLink').remove();
        if(!document.getElementById('logout'))$('#interactionLinks').remove();
        $('#profilefilter,#close_popup').click(function(){$('#profilefilter, #profcont-container').remove()});
        function loadPro(element, location){$(element).click(function(){if($(this).hasClass('activeTab')||guestView==false)return;$('#propop_profile,#propop_vm,#propop_stats,#propop_friends,#propop_contact,#propop_rpg,#propop_attach,#propop_close').removeClass('activeTab');$(this).addClass('activeTab');$('#userprofile').html(LOAD).load(UID+location+SEL)})}
        return false;
      });
    });

flammable kirjutas:Lõpp tulemus:


Alustuseks:

Loome javascripti
Administration Panel > Modules > JavaScript Codes Management
Pealkiri: Profile popup
Koht: All pages
Javascript:

Kood:

$(function () {
  if (/\/u\d+/.test(location.pathname)) return;
 
  var wall = 1, // visitor messages tab
  stats = 1, // statistics tab
  attachments = 0, // attachments tab
  friends = 1, // friends tab
  contact = 1, // contact tab
  rpg = 0, // RPG tab
  close = 1, // close popup button
  avatar = 1; // display user avatar
 
  var a=document.getElementsByTagName('A');
  for(i=0;i<a.length;i++)if(/\/u\d+/.test(a[i].href))a[i].className=a[i].className+' profilePopup';
  $('.profilePopup:has(img)').removeClass('profilePopup');
  
  var userWall='',userStats='',userAttachments='',userFriends='',userContact='',userRpg='',userClose='',guestView=true;
  if(wall==1)userWall='<span class="propop_tab" id="propop_vm">Visitor messages</span>';if(stats==1)userStats='<span class="propop_tab" id="propop_stats">Statistics</span>';if(attachments==1)userAttachments='<span class="propop_tab" id="propop_attach">Attachments</span>';if(friends==1)userFriends='<span class="propop_tab" id="propop_friends">Friends</span>';if(contact==1)userContact='<span class="propop_tab" id="propop_contact">Contact</span>';if(rpg==1)userRpg='<span class="propop_tab" id="propop_rpg">Character sheet</span>';if(close==1)userClose='<span class="propop_tab" id="close_popup" style="float:right;margin-top:-4px;">Close</span>';
 
  $('.profilePopup').click(function(){
    var UID=$(this).attr('href'),UNM=$(this).text(),SEL='#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details',LOAD='<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Loading...</div>';
    $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#EEE;border:1px solid #CCC;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;z-index:50;"><div class="profile_popup_nav">'+userWall+'<span class="propop_tab" id="propop_profile">Profile</span>'+userStats+userAttachments+userFriends+userContact+userRpg+userClose+'</div><a href="'+UID+'"><div id="userAVA"></div></a><div id="userprofile" style="height:400px;overflow-y:auto;">'+LOAD+'</div><span id="profileLinks"><a href="'+UID+'">View Profile</a><span id="interactionLinks"> • <a href="/privmsg?mode=post&u='+UID.replace(/.*?\/u/,'')+'">Send PM</a><span id="vmLink"> • <a href="/privmsg?mode=post_profile&u='+UID.replace(/.*?\/u/,'')+'">Send VM</a></span><span style="float:right;"><a href="/profile?friend='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> • <a href="/profile?foe='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></span></div>');

    $('#userprofile').load(UID+SEL,function(){if($('#profcont-container #username').length&&_userdata.user_id==-1){$(this).html('<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Sorry, guests cannot view the profiles! :(</div>');guestView=false}});
    $('#propop_profile').addClass('activeTab');
    if (avatar == 1) $('#userAVA').load(UID+' #profile-advanced-right .module:first div img:first, .forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img:first, dl.left-box.details:first dd img:first, .row1 b .gen:first img:first, .real_avatar img:first');
    loadPro('#propop_profile','');loadPro('#propop_vm','wall');loadPro('#propop_stats','stats');loadPro('#propop_friends','friends');loadPro('#propop_contact','contact');loadPro('#propop_rpg','rpg');loadPro('#propop_attach','attachments');
  
    if(wall==0)$('#vmLink').remove();
    if(!document.getElementById('logout'))$('#interactionLinks').remove();
    $('#profilefilter,#close_popup').click(function(){$('#profilefilter, #profcont-container').remove()});
    function loadPro(element, location){$(element).click(function(){if($(this).hasClass('activeTab')||guestView==false)return;$('#propop_profile,#propop_vm,#propop_stats,#propop_friends,#propop_contact,#propop_rpg,#propop_attach,#propop_close').removeClass('activeTab');$(this).addClass('activeTab');$('#userprofile').html(LOAD).load(UID+location+SEL)})}
    return false;
  });
});

 Nüüd Loome CSS STYLESHEET

Kood:

/* Profile popup */
#profcont-container {
    background:#EEE !important;
    border:1px solid #CCC !important;
}

#userAVA img{
    position:absolute;
    top:43px;
    right:30px;
    height:50px;
    width:50px;
}

.profile_popup_nav {
    background:#E0E0E0;
    margin:-4px -4px 10px -4px;
    padding:3px;
    padding-top:10px !important;
    height:auto;
    border-bottom:1px solid #CCC;
    -webkit-border-radius:5px 5px 0px 0px;
    -moz-border-radius:5px 5px 0px 0px;
    border-radius:5px 5px 0px 0px;
}

.propop_tab {
    color:#888;
    text-shadow:1px 1px 0 #F5F5F5;
    cursor:pointer;
    -webkit-border-radius:4px 4px 0px 0px;
      -moz-border-radius:4px 4px 0px 0px;
            border-radius:4px 4px 0px 0px;
    border:1px solid #CCC;
    border-bottom:none;
    -webkit-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
      -moz-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
            box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
    background:#DDD;
    margin:0 2px;
    padding:3px;
}

.propop_tab:hover {
    position:relative;
    top:1px;
    color:#666;
    text-shadow:none;
    background-color:#EEE;
}

.propop_tab.activeTab {
    position:relative;
    top:1px;
    color:#666;
    text-shadow:none !important;
    background-color:#EEE !important;
}

#profileLinks {
    background:#E0E0E0;
    display:block;
    padding:3px;
    margin:10px -4px -4px -4px;
    border-top:1px solid #CCC;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
    border-radius:0px 0px 5px 5px;
}

Kust kohast seda CSS STYLESHEET luua saab?

Enrique Iglesias kirjutas:Kust kohast seda CSS STYLESHEET luua saab?

Mine administratsioonpaneeli | Display | Colors | CSS stiilifail

Toimis, aga need ikoonid ei tulnud.