Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • Latest imagesLatest images  
  • RegisterRegister  
  • Log inLog in  
  • March 2024
    MonTueWedThuFriSatSun
        123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

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

    None

    Most users ever online was 140 on July 4th 2021, 2:03 pm
    RSS feeds


    Poll
    Top posting users this week
    No user


    Go to page : 1, 2  Next

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

    Mr.EasyBB

    ToolTip and Moderator Tools Tutorial

    Mr.EasyBB
    05/19/2013
    [You must be registered and logged in to see this link.]




    Ok so the other day someone asked me through PM on here how to create the LGBB pop up Tool Tip Feature. Well as you all know LGBB is of course AvacWebs code, so I am not going to get into too much detail about that except the code to add to the BBcode section. I have this code exactly as is on my website and it is punBB, this can work for phpbb2 as well as the other two. This code should work for Invision and phpbb3 if you follow the LGBB code correctly.




    AvacWebs LGBB CODE MUST BE IMPLEMENTED FOR THIS ADD ON TO WORK! FOLLOW HIS TUTORIAL HERE!
    [You must be registered and logged in to see this link.]




    Step 1:
    Add this to the LGBB code




    Code:
    LGBB.add('tips', {
        close : true,
        replacement : '<a class="tooltip2" href="" title="{ATTR}">{CONTENT}</a>'
    });








    Step Two:
    We have to create mod tools so what I did first was go to the ACP>MODULES>WIDGETS and activated the widgets management. Then I created a new widget 
    Title= Mod Tools
    Use table type= No
    Widget title= blank




    Code:

    <div id="mod_controls">
    <span class="mod_title">Mod tools</span>
    <button class="button2" data-helix="[compreq]" type="button">Completed Request</button>
    <button class="modButton">Tooltip</button>
    <div id="tool_wrapper" style="display:none;">
    <span class="aa">Tip: <input class="input_mod" id="tip_tip" type="text"/></span><br />
    <span class="bb">Text: <input class="input_mod" id="text_tip" type="text" /></span>
    <div><input type="submit" class="modbutton" id="sub_tip" /></div>
    </div>
    </div>
    This is a simple code.
    We have our container the buttons after that, our inner container for the pop up and the html that lays inside that. Save this widget




    Now add the widget to either side left or right and save that as well.
    Now on where you new widget is there should be a button for permissions, uncheck all except Admin and Moderators.




    *If widgets are not activated please activate them and place this inside CSS




    Code:
    #left,#right{display:none;}




    Step 3:
    Now to style this
    Code:
    #mod_controls{margin-bottom: 10px;float:left;}
    #tool_wrapper{position: absolute;border: 3px solid #414641;border-radius: 5px;background: #548B54;width: 200px;height: 90px;margin-left: 25%;margin-top:5px;}
    #tool_wrapper .aa {padding-left:10px;}
    #tool_wrapper .bb {padding-left:2px;}
    #tool_wrapper .bb input,#tool_wrapper .aa input{width:160px;}
    #tool_wrapper div{text-align:Center;}








    Step 4:
    Now on to all the jQuery.




    Code:

    $(function(){
    $('#text_edit').append('<div id="mod_tools"></div>');
    $('#mod_controls').appendTo('#mod_tools');
        $('#mod_controls .button2').each(function(){
            var helix = $(this).attr('data-helix');
    $(this).click(function(){
        var text = $('#text_editor_textarea');
        text.val(text.val()+helix);
    });
        });
    });
    $(function(){
    var showHide =$('#tool_wrapper');
    var button = $('.modButton');
    button.click(function(e){
    e.preventDefault();
    showHide.toggle();
    });
    $('#sub_tip').click(function(e){
    e.preventDefault();
    var a = $('#tip_tip').val();
    var b = $('#text_tip').val();
    var text = $('#text_editor_textarea');
      text.val(text.val()+'[tips='+a+']'+b+'[/tips]');
    $('#tip_tip').val('');
    $('#text_tip').val('');
    });
    $('a.tooltip2,a.tooltip3,a.clickTip').click(function(e){
    e.preventDefault();
    });
    });








    Step 5:
    Next the Tooltip Section




    Code:

    /*
      jQuery Version:            jQuery 1.3.2+
      Plugin Name:            aToolTip V 1.5
      Plugin by:                Ara Abcarians: http://ara-abcarians.com
      License:              aToolTip is licensed under a Creative Commons Attribution 3.0 Unported License
                            Read more about this license at --> http://creativecommons.org/licenses/by/3.0/        
    */
    (function($) {
        $.fn.aToolTip = function(options) {
          /**
              setup default settings
          */
          var defaults = {
              // no need to change/override
              closeTipBtn: 'aToolTipCloseBtn',
              toolTipId: 'aToolTip',
              // ok to override
              fixed: false,
              clickIt: false,
              inSpeed: 200,
              outSpeed: 100,
              tipContent: '',
              toolTipClass: 'defaultTheme',
              xOffset: 5,
              yOffset: 5,
              onShow: null,
              onHide: null
          },
          // This makes it so the users custom options overrides the default ones
          settings = $.extend({}, defaults, options);
        
          return this.each(function() {
            var obj = $(this);
            /**
                Decide weather to use a title attr as the tooltip content
            */
            if(obj.attr('title')){
                // set the tooltip content/text to be the obj title attribute
                var tipContent = obj.attr('title');    
            } else {
                // if no title attribute set it to the tipContent option in settings
                var tipContent = settings.tipContent;
            }




            /**
                Build the markup for aToolTip
            */
            var buildaToolTip = function(){
                $('body').append("<div id='"+settings.toolTipId+"' class='"+settings.toolTipClass+"'><p class='aToolTipContent'>"+tipContent+"</p></div>");




                if(tipContent && settings.clickIt){
                  $('#'+settings.toolTipId+' p.aToolTipContent')
                  .append("<a id='"+settings.closeTipBtn+"' href='#' alt='close'>close</a>");
                }
            },
            /**
                Position aToolTip
            */
            positionaToolTip = function(){
                $('#'+settings.toolTipId).css({
                  top: (obj.offset().top - $('#'+settings.toolTipId).outerHeight() - settings.yOffset) + 'px',
                  left: (obj.offset().left + obj.outerWidth() + settings.xOffset) + 'px'
                })
                .stop().fadeIn(settings.inSpeed, function(){
                  if ($.isFunction(settings.onShow)){
                      settings.onShow(obj);
                  }
                });            
            },
            /**
                Remove aToolTip
            */
            removeaToolTip = function(){
                // Fade out
                $('#'+settings.toolTipId).stop().fadeOut(settings.outSpeed, function(){
                    $(this).remove();
                    if($.isFunction(settings.onHide)){
                      settings.onHide(obj);
                  }
                });            
            };




            /**
                Decide what kind of tooltips to display
            */
            // Regular aToolTip
            if(tipContent && !settings.clickIt){  
                // Activate on hover  
                obj.hover(function(){
                  // remove already existing tooltip
                  $('#'+settings.toolTipId).remove();
                  obj.attr({title: ''});
                  buildaToolTip();
                  positionaToolTip();
                }, function(){ 
                  removeaToolTip();
                });  
              }          




              // Click activated aToolTip
              if(tipContent && settings.clickIt){
                // Activate on click  
                obj.click(function(el){
                  // remove already existing tooltip
                  $('#'+settings.toolTipId).remove();
                  obj.attr({title: ''});
                  buildaToolTip();
                  positionaToolTip();
                  // Click to close tooltip
                  $('#'+settings.closeTipBtn).click(function(){
                      removeaToolTip();
                      return false;
                  });      
                  return false;        
                });
              }




              // Follow mouse if enabled
              if(!settings.fixed && !settings.clickIt){
                obj.mousemove(function(el){
                  $('#'+settings.toolTipId).css({
                      top: (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset),
                      left: (el.pageX + settings.xOffset)
                  });
                });        
            }          




          }); // END: return this
        };
    })(jQuery);
    // initiate the plugin after DOM has loaded  
    $(function(){  
        // basic usage  
        $('a.fixedTip').aToolTip();  
        // fixed tooltip  
        $('a.tooltip1').aToolTip({  
            fixed: true ,
    });
    // on click tooltip with custom content  
        $('a.clickTip').aToolTip({  
            clickIt: true,
        });  
    });




    You can either have a fixed tooltip or a moving tooltip try both out by changing the the LGBB code I gave, the replacement:a class="tooltip2" href="" title="{ATTR}">{CONTENT}




    Step 6:
    Then add this CSS to your CSS style sheet




    Code:

    /* 
       Required Styles
    */
    #aToolTip {
       position: absolute;
       display: none;
       z-index: 999;
    }




       #aToolTip .aToolTipContent {
          position:relative;
          margin:0;
          padding:0;
       }
    /* 
       END: Required Styles
    */
    /**
       Default Theme
    */
    .defaultTheme {
       border:2px solid #444;
       background:#555;
       color:#fff;
       margin:0;
       padding:6px 12px;   




       -moz-border-radius: 12px 12px 12px 0;
       -webkit-border-radius: 12px 12px 12px 0;
       -khtml-border-radius: 12px 12px 12px 0;
       border-radius: 12px 12px 12px 0;




       -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
       -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
       box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    }




       .defaultTheme #aToolTipCloseBtn {
          display:block;
          height:18px;
          width:18px;
          background:url("http://i79.servimg.com/u/f79/17/83/35/07/closeb10.png")no-repeat;
          text-indent:-9999px;
          outline:none;
          position:absolute;
          top:-20px;
          right:-30px;
          margin:2px;
          padding:4px;
       }




    now you are 100% done.


    Remember AvacWeb LGBB code can be supported [You must be registered and logged in to see this link.] and I do not own any rights of this. This is to help whoever wants to use this as either 1 the tooltip like it is but you can rearrange this code to make it work with other LGBB codes


    Support for the rest of this is accepted by posting below and I will help whenever I am here Smile
    Share this post on: reddit

    Rukiafan
    Could you give us some examples with some premade tool tips?

    Post May 20th 2013, 5:07 pm by Rukiafan

    Mr.EasyBB
    [You must be registered and logged in to see this link.]    


    For demo Purposes

    Post May 20th 2013, 6:20 pm by Mr.EasyBB

    Rukiafan
    As long as I change the styling may the entire finished code be copied and pasted to make the process easier? Also the Javascript in the demo has 3 errors, will that effect its ability to function properly?

    Post May 20th 2013, 7:53 pm by Rukiafan

    Mr.EasyBB
    No as you can see it still runs, they are not warnings really just notes. JSBIN just collects everything as notes and label them as Warnings Very Happy

    And yes you can copy that entire javascript from the demo. I wrote it in separate sections so you knew what was what and how it worked Wink

    Post May 20th 2013, 8:33 pm by Mr.EasyBB

    Rukiafan
    Does the demo version has all 3 of the tool tips available?

    Post May 20th 2013, 8:51 pm by Rukiafan

    Mr.EasyBB
    Yes sir it does. This code does as well. The Demo is this code put together like it would be on Forumotion Wink

    Post May 20th 2013, 9:12 pm by Mr.EasyBB

    pedrox
    problem

    [You must be registered and logged in to see this image.]

    Post May 21st 2013, 3:53 pm by pedrox

    Rukiafan
    Same here. Neutral

    Post May 21st 2013, 5:19 pm by Rukiafan

    Mr.EasyBB
    Idea Heres an Idea, check the javascript.


    LGBB
    Code:
    LGBB.add('tips', {
        close : true,
        replacement : '<a class="tooltip2" href="" title="{ATTR}">{CONTENT}</a>'
    });

    MOD JS

    Code:
     text.val(text.val()+'[tips='+a+']'+b+'[/tips]');

    Post May 21st 2013, 5:23 pm by Mr.EasyBB

    pedrox
    does not work. Sad

    Post May 21st 2013, 6:44 pm by pedrox

    Mr.EasyBB
    I won't provide support to those of whom simply place "Does not work" you need to investigate, either
     A) you don't have LGBB added
    B) You don't have the corresponding BBcode
    C) A conflicting JavaScript

    Look into your console errors. With some detailed information

    Post May 21st 2013, 8:42 pm by Mr.EasyBB

    pedrox
    A) you don't have LGBB added
    Code:
    (function(){'LGBB, a Javascript BB Code parser and API. Copyright ©️ by AvacWeb 2011-2012. All Rights Reserved. Use of this script is not allowed without this entire copyright notice in place. No Distribution without authors consent.';var f={bbcodes:{},basics:[],attrReg:/.*?=("|'|)(.*?)\1\]/,parseTag:function(a,b,d){return a.replace(d?RegExp("(\\["+b.tag+"[^\\]]*\\])((?:.|\\r?\\n)*?)\\[/"+b.tag+"]","g"+(b.insensitive?"i":"")):RegExp("\\["+b.tag+"[^\\]]*\\]","g"+(b.insensitive?"i":"")),function(a,c,e){d||(c=a);c=f.attrReg.test(c)?c.replace(f.attrReg,"$2"):b.defaultAttr;if(b.validate&&!(d?b.validate(e,c):b.validate(c)))return a;b.replace&&(a=d?b.replace(e,c):b.replace(c),"string"===typeof a?d?e=a:c=a:a&&"object"===typeof a&&(e=a.content||e,c=a.attr||c));return f.swapReplacers(b.replacement,e,c)})},swapReplacers:function(a,b,d){return(a||"").replace(/{CONTENT}/g,b||"").replace(/{ATTR}/g,d||"")},parse:function(a){for(var b=f.bbcodes,d=f.basics,g=0,c;c=d[g++];){var e=c[0];if("string"===typeof e)for(;-1!==a.indexOf(e);)a=a.replace(e,c[1]);else a=a.replace(e,c[1])}for(var h in b)(d=b[h])&&(d.replacement&&d.tag)&&(a=f.parseTag(a,d,d.close));return a},add:function(a,b){if(!/^\w+$/.test(a))throw new Exception("Invalid LGBB tag name: "+a);b.tag||(b.tag=a);"close"in b||(b.close=!1);f.bbcodes[a]=b},addSwap:function(a,b){f.basics.push([a,b])}};window.LGBB=f})();
    $(function(){
      var p = $('.post-entry'); //get the posts
      for(var i = 0, e; (e = p[ i++ ]); ) {
        var text = e.innerHTML; //get the text we want to parse. (the innerhtml of posts)
        text = LGBB.parse(text); //give it to LGBB to parse.
        e.innerHTML = text; //re-insert the parsed text
      }
    });LGBB.add('tips', {
        close : true,
        replacement : '<a class="tooltip2" href="" title="{ATTR}">{CONTENT}</a>'
    });

    B) You don't have the corresponding BBcode : yes 

    C) A conflicting JavaScript:all disabled


    [You must be registered and logged in to see this image.]

    Post May 22nd 2013, 2:12 pm by pedrox

    Mr.EasyBB
    And the BBcode isn't parsing at all?

    Try changing this 
    Code:
    LGBB.add('tips', {
        close : true,
        replacement : '<a class="tooltip2" href="" title="{ATTR}">{CONTENT}</a>'
    });

    to this

    Code:
    LGBB.add('tips', {
        close : true,
        replacement : '<a class="fixedTip" href="" title="{ATTR}">{CONTENT}</a>'
    });

    One of the Classes that should work:

    fixedTip
    tooltip1
    clickTip

    Post May 22nd 2013, 2:17 pm by Mr.EasyBB

    pedrox
    change also here ?

    Code:
    text.val(text.val()+'[tips='+a+']'+b+'[/tips]');
    $('#tip_tip').val('');
    $('#text_tip').val('');
    });
    $('a.tooltip2,a.tooltip3,a.clickTip').click(function(e){
    e.preventDefault();
    });
    });

    Post May 22nd 2013, 3:34 pm by pedrox

    Mr.EasyBB
    Yeah you can. That is just making it so that the a href doesn't go to a url or pop to the top of the page. Is it working now or no?

    Post May 22nd 2013, 4:09 pm by Mr.EasyBB

    Rukiafan
    I got the hover tips to work, but not the click tips, also I'm going to copy the CSS in the demo to figure out how to restyle the tool tips. One last thing to mention is that the mod tools buttons are really ugly, is there any way to redesign those as well?

    Post May 22nd 2013, 5:19 pm by Rukiafan

    Mr.EasyBB
    Yes you can use CSS... That is all that it needs. Wink

    Post May 22nd 2013, 5:20 pm by Mr.EasyBB

    Rukiafan
    What would I add to the mod tools JS to grab the data using CSS?

    Post May 22nd 2013, 5:21 pm by Rukiafan

    Mr.EasyBB
    Liked
    To style use this CSS 
    Code:
    #mod_controls .button2 {}

    Post May 22nd 2013, 5:26 pm by Mr.EasyBB

    Rukiafan
    Okay thanks! Very Happy

    Post May 22nd 2013, 5:29 pm by Rukiafan

    pedrox
    no....you can check? (mp)

    Post May 23rd 2013, 2:12 pm by pedrox

    Mr.EasyBB
    You can give me a test account as well as a test thread. Then I will check it for you in a moment.

    Post May 23rd 2013, 2:14 pm by Mr.EasyBB

    pedrox
    mp in your profile then deleteit

    Post May 23rd 2013, 2:23 pm by pedrox

    Mr.EasyBB
    Ok if you want to private message me that is fine of course Wink

    Post May 23rd 2013, 2:33 pm by Mr.EasyBB

    Post  by Sponsored content

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

    Go to page : 1, 2  Next