• Page 1 of 2
  • 1
  • 2
  • »
Forum moderator: bigblog  
uCoz Community » For Webmasters » Custom Solutions » [HelperRu] Inserting a choice of extra Thread Icons (A code which will add an option to choose threads icon ...)
[HelperRu] Inserting a choice of extra Thread Icons
barc00de
Posts: 8
Reputation: -3

Message # 1 | 9:50 AM 2009-06-02



  • Inserting a choice of extra thread icons. (Look in Image) - (Code Below)
    Attachments: 8793969.png (17.8 Kb)
    www.qMpGrup.com
    • Angel7
    Posts: 21
    Reputation: 8

    Message # 2 | 10:37 AM 2009-06-02
    1. To CSS
    Code
    .thDescr,
    .threadDescr {display:none}
    #frM30 img {opacity:.33; -moz-opacity: 0.33; filter: alpha(opacity=33);}    
    #frM30 img:hover {opacity:.5; -moz-opacity: 0.5; filter: alpha(opacity=50);}    
    #frM30 img.selectedImg {opacity:1; ; -moz-opacity: 1; filter: alpha(opacity=100);}

    You can change them as you want.

    2. Forum template, after $BODY$

    Code
    <script type="text/javascript">$('.thDescr').each(function(){
       var s = $(this).html().match( /sml\[(\w+)\]/ );
       $(this).show();
       if (s==null) return;
       var name = s[1];
       s = s[0];
       $(this).html( $(this).html().replace(s,'') );
       if( $(this).html()=='()' ) $(this).html('');
       if( $('table.gTable:first td.gTableTop div.gTopCornerRight + img').size()==0 ) $('table.gTable:first td.gTableTop div.gTopCornerRight').after('<img src="/images/threadIcons/'+name+'.png" /> ');
    })
    $('.threadDescr').each(function(){
       var s = $(this).html().match( /sml\[(\w+)\]/ );
       $(this).show();
       if (s==null) return;
       var name = s[1];
       s = s[0];
       $(this).html( $(this).html().replace(s,'') );
       $(this).parent().prev().find('img').attr('src','/images/threadIcons/'+name+'.png');
    });
    </script>

    Then you need to upload your icons to the folder "images/threadIcons". Names consist of only letters, numbers and _ .

    3. Open template of adding message form. Replace $_THREAD_DESCR$ with

    Code
    <input type="text" id="threadAbout" value="" class="postDescrFl" size="60" maxlength="50" />
    <img src="http://s3.ucoz.net/img/fr/ic1/thread.gif" alt="" class="selectedImg" />
    <img src="/images/threadIcons/image1.png" alt="Image1" />
    ...
    <img src="/images/threadIcons/imageN.png" alt="ImageN" />
    <div style="display:none">$_THREAD_DESCR$</div>

    where http://s3.ucoz.net/img/fr/ic1/thread.gif is a default picture.

    And then add to the end of template:

    Code
    <?if($_THREAD_NAME$)?>
    <script type="text/javascript">
    $('#frF3').css('width','auto').attr('size', 60);
    $('#frM30 img').click(function(){
       $('#frM30 .selectedImg').removeClass('selectedImg');
       $(this).addClass('selectedImg')
    });
    if( $('#frF4').val()!='' ){
       if( $('#frF4').val().match( /sml\[\w+\]/ ) ){
        $('#threadAbout').val( $('#frF4').val().replace( $('#frF4').val().match( /sml\[(\w+)\]/ )[0], '' ) );
        $('#frM30 .selectedImg').removeClass('selectedImg');
        $('#frM30 img[src$="'+ $('#frF4').val().match( /sml\[(\w+)\]/ )[1] +'.png"]').addClass('selectedImg');
       } else $('#threadAbout').val( $('#frF4').val() );
    }
    function checksubmit(){
       var s = $('#frM30 .selectedImg').attr('src').match( /\/(\w*)\.png/i );
       if( s!=null ) s = 'sml['+s[1]+']'; else s='';
       $('#frF4').val( s + $('#threadAbout').val() );
       return true;
    }</script>
    <?endif?>

    Source: helper.RU (translation: Angel7)

    uCoz rocks <3
    Post edited by Angel7 - Wednesday, 2009-06-03, 4:54 PM
    itseeker
    Posts: 29
    Reputation: 0

    Message # 3 | 6:51 PM 2009-06-29
    i have done all these.. but i m having problem inserting this

    Quote
    <input type="text" id="threadAbout" value="" class="postDescrFl" size="60" maxlength="50" />
    <img src="http://s3.ucoz.net/img/fr/ic1/thread.gif" alt="" class="selectedImg" />
    <img src="/images/threadIcons/image1.png" alt="Image1" />
    ...
    <img src="/images/threadIcons/imageN.png" alt="ImageN" />
    <div style="display:none">$_THREAD_DESCR$</div>

    and mine CSS is

    Quote

    <div class="gDivLeft"><div class="gDivRight">
    <table border="0" width="100%" cellspacing="1" cellpadding="0" class="gTable" id="frM53">
    <tr id="frM54"><td colspan="2" class="gTableTop" id="frM55"><div style="float:right" class="gTopCornerRight"></div><a name="post">$FORM_TITLE$</a></td></tr>
    <?if($ERROR$)?>
    <tr id="frM1"><td colspan="2" align="center" class="gTableError" id="frM2">$ERROR$</td></tr>
    <?endif?>
    <?if($_USER$)?>
    <tr id="frM3"><td class="gTableLeft" id="frM4">Name:</td><td class="gTableRight" id="frM5">$_USER$</td></tr>
    <?endif?>
    <?if($_THREAD_NAME$)?>
    <tr id="frM25"><td class="gTableLeft" id="frM26">Thread name:</td><td class="gTableRight" id="frM27">$_THREAD_NAME$</td></tr>
    <tr id="frM28"><td class="gTableLeft" id="frM29">Thread description:</td><td class="gTableRight" id="frM30">$_THREAD_DESCR$</td></tr>
    <?endif?>
    <?if($_POLL_QUESTION$)?>
    <tr id="frM31"><td class="gTableRight" colspan="2" id="frM32"> </td></tr><tr id="frM33"><td class="gTableLeft" id="frM34">Poll question:</td><td class="gTableRight" id="frM35">$_POLL_QUESTION$</td></tr><tr id="frM36"><td class="gTableLeft" id="frM37">Poll items:<div class="pollHelp">Enter one answer per line. Maximum <b>10</b> answers.</div></td><td class="gTableRight" id="frM38">$_POLL_ANSWERS$</td></tr><tr id="frM40"><td class="gTableLeft" id="frM41">Poll options:</td><td class="gTableRight" id="frM42">$_POLL_ONLY_OPT$ <label for="pollonly">Poll only (no answers allowed in thread)</label><br />$_POLL_MULTI_OPT$ <label for="pollmulty">Enable possibility to choose several answers</label><br />$_POLL_PERIOD_OPT$ Poll period (0 - no limit)</td></tr><tr id="frM43"><td class="gTableRight" colspan="2" id="frM44"> </td></tr>
    <?endif?>
    <tr id="frM56"><td width="25%" class="gTableLeft" id="frM57" valign="top">Message text:<div class="smilesPart">$SMILES$</div></td><td class="gTableRight" id="frM58">$BBCODES$ $_MESSAGE$</td></tr>
    <?if($MESSAGE_OPTIONS_FLAG$)?>
    <tr id="frM14"><td class="gTableLeft" id="frM15">Message options:</td><td class="gTableRight" id="frM16">
    <?if($_HTML_OPT$)?>
    $_HTML_OPT$ <label for="ahtml">Enable HTML tags</label><br />$_MAKE_BR_OPT$ <label for="frmt">Substitute line feeds by the tag <b><BR></b></label><br>
    <?endif?>
    <?if($_EDITED_OPT$)?>
    $_EDITED_OPT$ <label for="edited">Add inscription "Edited..." to this message?</label><br />
    <?endif?>
    <?if($_SMILES_OPT$)?>
    $_SMILES_OPT$ <label for="smon">Enable smileys</label><br />
    <?endif?>
    <?if($_SIGNATURE_OPT$)?>
    $_SIGNATURE_OPT$ <label for="sgon">Enable signature</label><br />
    <?endif?>
    <?if($_SUBSCRIBE_OPT$)?>
    $_SUBSCRIBE_OPT$ <label for="sbon">Enable e-mail notifications about answers</label><br />
    <?endif?>
    </td></tr>
    <?endif?>
    <?if($MODER_OPTIONS_FLAG$)?>
    <tr id="frM6"><td class="gTableLeft" id="frM7">Thread options:</td><td class="gTableRight" id="frM8">
    <?if($_FIRSTONTOP_OPT$)?>
    $_FIRSTONTOP_OPT$ <label for="firstontop">Make the first message a heading (display on all pages)</label><br />
    <?endif?>
    <?if($_ONTOP_OPT$)?>
    $_ONTOP_OPT$ <label for="isontop">Thread always on top</label><br />
    <?endif?>
    <?if($_CLOSED_OPT$)?>
    $_CLOSED_OPT$ <label for="isclosed">Closed thread</label>
    <?endif?>
    </td></tr>
    <?endif?>
    <?if($_FILES_UPLOADER$)?>
    <tr id="frM50"><td class="gTableLeft" id="frM51">Attach file: <span style="font-size:7pt;">(not more than <b>$FILE_MAX_SIZE$</b>Kb)</span></td><td class="gTableRight" id="frM52">$_FILES_UPLOADER$</td></tr>
    <?endif?>
    <?if($_SECURITY_CODE$)?>
    <tr id="frM45"><td class="gTableLeft" id="frM46">Security code:</td><td class="gTableRight" id="frM47">$_SECURITY_CODE$</td></tr>
    <?endif?>
    <tr id="frM59"><td class="gTableRight" colspan="2" align="center" id="frM60"><input style="width:110px;" id="frF15" class="postPreview" type="button" value="View" onclick="prepost();" /> <input type="submit" id="frF16" name="sbm" style="width:150px;font-weight:bold;" class="postSubmit" value="$SUBMIT_SIGN$" /> <input style="width:110px;" id="frF17" class="postReset" type="reset" value="Cancel" /></td></tr>
    </table>
    </div></div><div class="gDivBottomLeft"></div><div class="gDivBottomCenter"></div><div class="gDivBottomRight"></div>

    file icon name : arrow.png

    Added (2009-06-29, 12:51 Pm)
    ---------------------------------------------
    Please help me out i m waiting ..

    I have high lite the confusing point.

    Post edited by itseeker - Sunday, 2009-06-28, 11:57 PM
    shrikantkarvade
    Posts: 10
    Reputation: 0

    Message # 4 | 12:41 PM 2009-07-20
    Hey friends please help if some one know how to do this please explain.
    Pilot
    Posts: 487
    Reputation: 77

    Message # 5 | 12:44 PM 2009-07-20
    Quote (shrikantkarvade)
    Hey friends please help if some one know how to do this please explain.

    Pay more attention to the posts...
    Read the post Angel7 made.
    Post edited by Rake - Monday, 2009-07-20, 12:45 PM
    shrikantkarvade
    Posts: 10
    Reputation: 0

    Message # 6 | 2:45 PM 2009-07-20
    Quote (Rake)
    Pay more attention to the posts...
    Read the post Angel7 made.

    Hey Rake please help some thing has happened after applying this code please see this img below:-

    http://i27.tinypic.com/2qn36rr.jpg

    I have just got it but how to display the icons which i want it is showing Image 1......Image N. How to give path so that it can take my uploaded icons.

    It worked now i only want the way how to give the path of icons so that it will display the icons i want please someone help who knew how to do this.

    Added (2009-07-20, 7:34 Am)
    ---------------------------------------------

    Quote (Angel7)
    1. To CSS
    Code
    .thDescr,
    .threadDescr {display:none}
    #frM30 img {opacity:.33; -moz-opacity: 0.33; filter: alpha(opacity=33);}
    #frM30 img:hover {opacity:.5; -moz-opacity: 0.5; filter: alpha(opacity=50);}
    #frM30 img.selectedImg {opacity:1; ; -moz-opacity: 1; filter: alpha(opacity=100);}

    You can change them as you want.

    2. Forum template, after $BODY$
    Code
    <script type="text/javascript">$('.thDescr').each(function(){
    var s = $(this).html().match( /sml\[(\w+)\]/ );
    $(this).show();
    if (s==null) return;
    var name = s[1];
    s = s[0];
    $(this).html( $(this).html().replace(s,'') );
    if( $(this).html()=='()' ) $(this).html('');
    if( $('table.gTable:first td.gTableTop div.gTopCornerRight + img').size()==0 ) $('table.gTable:first td.gTableTop div.gTopCornerRight').after('<img src="/images/threadIcons/'+name+'.png" /> ');
    })
    $('.threadDescr').each(function(){
    var s = $(this).html().match( /sml\[(\w+)\]/ );
    $(this).show();
    if (s==null) return;
    var name = s[1];
    s = s[0];
    $(this).html( $(this).html().replace(s,'') );
    $(this).parent().prev().find('img').attr('src','/images/threadIcons/'+name+'.png');
    });
    </script>

    Then you need to upload your icons to the folder "images/threadIcons". Names consist of only letters, numbers and _ .

    3. Open template of adding message form. Replace $_THREAD_DESCR$ with
    Code
    <input type="text" id="threadAbout" value="" class="postDescrFl" size="60" maxlength="50" />
    <img src="http://s3.ucoz.net/img/fr/ic1/thread.gif" alt="" class="selectedImg" />
    <img src="/images/threadIcons/image1.png" alt="Image1" />
    ...
    <img src="/images/threadIcons/imageN.png" alt="ImageN" />
    <div style="display:none">$_THREAD_DESCR$</div>

    where http://s3.ucoz.net/img/fr/ic1/thread.gif is a default picture.

    And then add to the end of template:
    Code
    <?if($_THREAD_NAME$)?>
    <script type="text/javascript">
    $('#frF3').css('width','auto').attr('size', 60);
    $('#frM30 img').click(function(){
    $('#frM30 .selectedImg').removeClass('selectedImg');
    $(this).addClass('selectedImg')
    });
    if( $('#frF4').val()!='' ){
    if( $('#frF4').val().match( /sml\[\w+\]/ ) ){
    $('#threadAbout').val( $('#frF4').val().replace( $('#frF4').val().match( /sml\[(\w+)\]/ )[0], '' ) );
    $('#frM30 .selectedImg').removeClass('selectedImg');
    $('#frM30 img[src$="'+ $('#frF4').val().match( /sml\[(\w+)\]/ )[1] +'.png"]').addClass('selectedImg');
    } else $('#threadAbout').val( $('#frF4').val() );
    }
    function checksubmit(){
    var s = $('#frM30 .selectedImg').attr('src').match( /\/(\w*)\.png/i );
    if( s!=null ) s = 'sml['+s[1]+']'; else s='';
    $('#frF4').val( s + $('#threadAbout').val() );
    return true;
    }</script>
    <?endif?>

    Source: helper.RU (translation: Angel7)
    uCoz rocks <3

    Hey Angel7 can you please give me the way how to give path of the icons so that i can display the icon i want please help.

    And thanks for the execellent code.

    Added (2009-07-20, 7:52 Am)
    ---------------------------------------------
    Hey Please some one help.

    Added (2009-07-20, 7:52 Am)
    ---------------------------------------------
    Please Please help.

    Added (2009-07-20, 8:45 Am)
    ---------------------------------------------
    I have given the icons path but it is displaying at the time of creating new thread but it is not showing it in front of any thread why please help.

    Here it is showing the icons see image below.

    http://i32.tinypic.com/i1l4ib.jpg

    but not displaying in front of any thread see image below.

    http://i32.tinypic.com/24uvzft.jpg

    Please help.

    Post edited by shrikantkarvade - Monday, 2009-07-20, 2:46 PM
    Armaros
    Posts: 1424

    Message # 7 | 0:58 AM 2009-07-24
    shrikantkarvade, stop spamming this thread.
    rohansakhale
    Posts: 4
    Reputation: 0

    Message # 8 | 3:45 PM 2009-08-01
    awesome script, but i am getting one error,
    After selecting the icon on the create form of message it is not displayed in the forum list. Can you help plz...
    Please Visit My Site For More Downloads

    http://www.rohanzwarez.ucoz.org

    shrikantkarvade
    Posts: 10
    Reputation: 0

    Message # 9 | 6:01 AM 2009-08-05
    Quote (rohansakhale)
    awesome script, but i am getting one error,
    After selecting the icon on the create form of message it is not displayed in the forum list. Can you help plz...

    I also have the same problem.

    Expert1510
    Posts: 92
    Reputation: -2

    Message # 10 | 3:29 AM 2011-09-27
    I finished adding this whole code, but ONE major problem, once I click on the icon I want...it doesnt end up showing to that one...once it is seen in the thread lists.
    Post edited by Expert1510 - Tuesday, 2011-09-27, 3:53 AM
    Paradox
    Old Guard
    Posts: 3284
    Reputation: 145

    Message # 11 | 3:54 AM 2011-09-27
    Expert1510, read the thread next time. It's all written there.
    Jack of all trades in development, design, strategy.
    Working as a Support Engineer.
    Been here for 13 years and counting.
    Expert1510
    Posts: 92
    Reputation: -2

    Message # 12 | 3:56 AM 2011-09-27
    Quote (Paradox)
    Expert1510, read the thread next time. It's all written there.

    Huh, are you saying...that I did something wrong?

    It seems like everyone is having the same problem man, look at the late posts.

    If you have a solution, plz tell me.
    Paradox
    Old Guard
    Posts: 3284
    Reputation: 145

    Message # 13 | 4:01 AM 2011-09-27
    Expert1510, I understand there is a documented problem with this script. You asked how to do this and I assumed you were meaning the entire script. And no I do not have a solution for the problem.
    Jack of all trades in development, design, strategy.
    Working as a Support Engineer.
    Been here for 13 years and counting.
    Expert1510
    Posts: 92
    Reputation: -2

    Message # 14 | 4:02 AM 2011-09-27
    Quote (Paradox)
    Expert1510, I understand there is a documented problem with this script. You asked how to do this and I assumed you were meaning the entire script. And no I do not have a solution for the problem.

    Do you think Animorph has a solution to fix it?
    Natashko
    Posts: 3366
    Reputation: 171

    Message # 15 | 1:20 PM 2011-09-29
    Expert1510, please provide a link to the page where you have used this code as well as the screenshot of the error.
    uCoz Community » For Webmasters » Custom Solutions » [HelperRu] Inserting a choice of extra Thread Icons (A code which will add an option to choose threads icon ...)
    • Page 1 of 2
    • 1
    • 2
    • »
    Search: