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  
  • RegisterRegister  
  • Log inLog in  
  • September 2017
    MonTueWedThuFriSatSun
        123
    45678910
    11121314151617
    18192021222324
    252627282930 

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


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

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


    Go to page : Previous  1, 2

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

    avatar

    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 Here 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: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    avatar
    I'm here

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

    I was wrong you can delete it after

    Post on May 23rd 2013, 3:13 pm by pedrox

    avatar
    You sure

    Post on May 24th 2013, 2:42 pm by pedrox

    avatar
    What? Just go to Messages, and create new message and type my name in it Mr.EasyBB

    Post on May 25th 2013, 2:21 am by Mr.EasyBB

    avatar
    here are the details to enter in my forum

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

    can delete posts .. with my data

    Post on May 25th 2013, 6:59 am by pedrox

    avatar
    Reason why yours is not working pedrox is because you have Errors in a bunch of your JavaScript:

    Uncaught SyntaxError: Unexpected token else 58000.js:1
    Uncaught ReferenceError: scriptfonte is not defined t142-comuniti:41
    Uncaught ReferenceError: Exception is not defined 121118122645.js:1
    Uncaught SyntaxError: Unexpected identifier t142-comuniti:298

    Post on May 25th 2013, 7:40 pm by Mr.EasyBB

    avatar
    question 1:

    how to move button above or below?

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

    Question 2:

    I do not understand why I can have an example

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

    Post on May 26th 2013, 7:18 am by pedrox

    avatar
    This button Completed Request is just an Example that shows you can use all sorts of different buttons that we can add. Also to move it you have to change the JS to #text-edit 

    Post on May 26th 2013, 7:32 pm by Mr.EasyBB

    avatar
    can you help me?

    Post on May 26th 2013, 7:46 pm by pedrox

    avatar
    Find this line

    Code:
    $('#text_edit').append('<div id="mod_tools"></div>');
    and change it to this to see if it works

    Code:
    $('#html_edit').append('<div id="mod_tools"></div>');

    Post on May 26th 2013, 7:48 pm by Mr.EasyBB

    avatar
    you do not see the button 
    [You must be registered and logged in to see this image.]

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

    Post on May 26th 2013, 7:56 pm by pedrox

    avatar
    Ok so text edit is what we want, the rest of it is due to CSS you will have to change some of the CSS for this, like adding a float:left to it and what not

    Post on May 27th 2013, 2:28 am by Mr.EasyBB

    avatar
    from

    Code:
    #mod_controls{margin-bottom:10px;float:left;}

    to


    Code:
    #mod_controls{margin-bottom:10px;float:right;}

     but nothing changes

    Post on May 27th 2013, 2:26 pm by pedrox

    avatar
    I moved the button how can I put that down

    Code:
    <button class="modButton"style="float:right">Tooltip</button>
    [You must be registered and logged in to see this image.]

    Post on May 28th 2013, 4:01 pm by pedrox

    avatar
    the conflict is created that uses the same script 

    Tips:
    [You must be registered and logged in to see this link.]

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

    how to do?

    Post on May 29th 2013, 4:10 pm by pedrox

    avatar
    What? I am not sure on what you are saying, you have the same urls, if you have LGBB twice remove one. You only need one.

    Post on May 29th 2013, 9:29 pm by Mr.EasyBB

    avatar
    I solved so.. now it all works

    Code:
    $(function(){
      var p = $('.post .content'); //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>'
    });



    this was already present in my bbcode, I do not have insert

    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})();

    thanks for everything

    help on this

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

    Post on May 30th 2013, 2:22 pm by pedrox

    avatar
    Find the element those buttons are in and change the corresponding line to which it appends the mod tools


    Code:
    $('#text_edit').append('<div id="mod_tools"></div>');

    Post on May 30th 2013, 4:02 pm by Mr.EasyBB

    avatar
    does not work .. with css you can not do anything?

    Post on June 1st 2013, 7:02 am by pedrox

    Post  by Sponsored content

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

    Go to page : Previous  1, 2