Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] Widget for status updates



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

avatar
Administrator
Administrator
Description:

This tutorial will allow you to quickly change your profile status without a need of visiting your profile and changing a Status column.

Preview:



Installation steps:

1. Create a new profile field like this:


2. Create a new widget and put the following code inside:
Code:
[panda=js]<div class="module main">
                                                                   
 <div class="main-head">
                                                                                           
 <div class="h3" id="statusTitle">
                                                        <em class="fa fa-comment-o"> </em>  <span id="statusAtual">Status update</span>                                                 
 </div>
                                                                             
 </div>
                                                                   
 <div class="main-content clearfix">
                                                                                           
 <div id="statusUpdateBody">
                                                                                                               
 <center>
                                                                          <input id="statusUpdate" type="text" style="width: 100px;" />                <input id="statusUpdateButton" value="OK" style=" margin-top: -3px; " type="submit" />                <br />Maxium amount of characters are <strong>21</strong>. <br /><strong><span style="color: #ff3300;">Important:</span></strong> Advertising is against rules.                         
 </center>
                                                                                                   
 </div>
                                                <script>
            jQuery(function () {
                jQuery('#statusUpdateButton').click(function () {
                    var USER_ID = _userdata["user_id"];
                    var statusText = jQuery('#statusUpdate').val();
                    var TID = jQuery('input[name="tid"]').val() + '';
                    jQuery.post("/ajax_profile.forum?jsoncallback=?", {
                        id: "7",
                        user: USER_ID,
                        active: "1",
                        content: '[["profile_field_13_1", "' + statusText + '"]]',
                        tid: TID
                    }, function (data) {
                        jQuery('#statusUpdate').val('');
                        jQuery('#statusTitle').html('Status has been updated.<span id="statusNovoAtual" style="display:none;"></span>');
                        jQuery('#statusNovoAtual').load('profile?mode=editprofile&page_profil=informations #', function () {
                            jQuery('#statusNovoAtual').hide();
                            var statusTextAtual = jQuery('#statusNovoAtual #profile_field_13_1').val();
                            jQuery('#statusTitle').html('<em class="fa fa-comment-o"></em> Status: <span id="statusAtualText">"' + statusTextAtual + '"</span>');
                            var statusTextChat = jQuery('#statusAtualText').text();
                        });
                        console.log("OK: ajax_profile, userID = " + USER_ID);
                    }, "json").fail(function () {
                        alert("There was an error updating status! If this problem persists, contact your administrators.")
                        console.log("error: ajax_profile, userID = " + USER_ID);
                    });
                });
            });
            jQuery(function () {
                jQuery('#statusAtual').load('profile?mode=editprofile&page_profil=informations #profile_field_13_1', function () {
                    jQuery('#statusAtual').hide();
                    var statusText = jQuery('#statusAtual #profile_field_13_1').val();
                    jQuery('#statusTitle').html('<em class="fa fa-comment-o"></em> Status: <br/><span id="statusAtualText">"' + statusText + '"</span>');
                });
            });
        </script>                                 
 </div>
</div>
 <style>#statusTitle br {
  display: none;
}
#statusTitle {
  white-space:nowrap;
  width: 100%;                 
  overflow:hidden;
  text-overflow:ellipsis;
}</style> 

In code find the following string: [ic]profile_field_13_1[/ic]

Replace it with your status field code with inspect element function in chrome or Mozilla. (Right click -> Inspect Element)


Closing notes:

Feel free to ask your questions here!



Forum Administrator, Coolyou,
Due to the volume of PMs I receive, I do not provide support via PM.
We have community forums for most support requests. If it's truly confidential, please do PM me.

Useful links:
-> Before asking question,  please use a Search option.
-> If you want to check our staff members click here.
->  Forum rules, this is a MUST READ thread.
->  FAQ (Frenquently asked questions)

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

2
Offline

  Petronel™

avatar
Punbb Rookie
Punbb Rookie
bbbbbbb

Powered by PunBB
Currently 0 users have thanked Petronel™ for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

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