March 2024
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
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
Most Viewed Topics
Top posting users this week
No user |
Go to page : 1, 2
ToolTip and Moderator Tools Tutorial
[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
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
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
Step 3:
Now to style this
Step 4:
Now on to all the jQuery.
Step 5:
Next the Tooltip Section
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
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
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>
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
Similar topics
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?
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
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
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
Yes sir it does. This code does as well. The Demo is this code put together like it would be on Forumotion
Heres an Idea, check the javascript.
LGBB
MOD JS
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]');
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
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
A) you don't have LGBB added
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.]
- 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.]
And the BBcode isn't parsing at all?
Try changing this
to this
One of the Classes that should work:
fixedTip
tooltip1
clickTip
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
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();
});
});
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?
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?
Go to page : 1, 2