Latest topics
» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to One Million!
by Van-Helsing Yesterday at 16:02

» [GAME] Count to 30 - Ange Edition
by Van-Helsing Yesterday at 16:01

» Is there any new update for ForumActif Edge?
by Van-Helsing Yesterday at 16:01

» Add a login popup for the toolbar
by Ape Sun 24 Sep 2017, 17:26

» [GAME] Post a random picture
by SLGray Fri 22 Sep 2017, 19:23

» Topic'It
by Ange Tuteur Fri 22 Sep 2017, 10:06

» Topic'It
by SLGray Thu 21 Sep 2017, 15:52

» FM Themes
by SLGray Thu 21 Sep 2017, 15:51

» User - Made Creations
by SLGray Thu 21 Sep 2017, 15:50

» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

Recent Tutorials
Who is online?
In total there are 6 users online :: 2 Registered, 0 Hidden and 4 Guests :: 2 Bots

Bigtuber, Eslam Love

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

How do I add hover examine feature?

View previous topic View next topic Go down

avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Fri 10 Mar 2017, 10:58

Hover examining is an very interesting feature that allows you to hover your mouse over a link or image and see the stats everything.
For example.

When hovering over the weapon I see these.
Code:
AK47
Type: Assault Rifle
Damage: x28-7 (196) Rapid range shots
2 uses per a match
3400 RC coins - Sellback for 175 RC coins

And even in the examine box it will also display what RC coins are.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9738
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 13 Mar 2017, 14:46

You can use something like this, for example.

Just add this to a new script in all the pages :
Code:
(function(b){b.fn.extend({popUp:function(e){e=b.extend({},b.PopUp.defaults,e);this.each(function(){new b.PopUp(this,e)});return this}});b.PopUp=function(e,a){b(e).on({mouseenter:function(c){var f=a.content;if(!a.useDataAttrs)var e=a.data[b(this).data(a.identificator)];var g=/{(.*?)}/g,d,h=[],k="";if(null!==a.contentRepeat){for(;null!==(d=g.exec(a.contentRepeat));)d.index===g.lastIndex&&g.lastIndex++,h.push(d);d=/{(\S+)}/.exec(a.repeatKeyword);e[d[1]].forEach(function(d){for(var b=a.contentRepeat,
c=0;c<h.length;c++)b=b.replace(h[c][0],d[h[c][1]]);k=k.concat(b)})}for(;null!==(d=g.exec(a.content));)d.index===g.lastIndex&&g.lastIndex++,a.useDataAttrs?f=f.replace(d[0],b(this).data(d[1])):e[d[1]]&&d[0]!=a.repeatKeyword?f=f.replace(d[0],e[d[1]]):e[d[1]]&&d[0]==a.repeatKeyword&&(f=f.replace(d[0],k));if(0==b("#popup").length)switch(c=b("<div id='popup' style='display: none;top: "+(c.pageY-a.offset)+"px;left: "+(c.pageX+a.offset)+"px'>"+f+"</div>").appendTo("body"),a.animationIn){case "fadeIn":c.fadeIn(a.timingIn);
break;case "show":c.show(a.timingIn)}},mousemove:function(c){b("#popup").css({top:c.pageY-a.offset+"px",left:c.pageX+a.offset+"px"})},mouseleave:function(){var c=b("#popup"),e=function(){return function(){b(".removing").remove()}};c.addClass("removing");c.removeAttr("id");switch(a.animationOut){case "hide":c.hide(a.timingOut,e());break;case "fadeOut":c.fadeOut(a.timingOut,e())}}});a.follow||b(e).off("mousemove")};b.PopUp.defaults={follow:!0,offset:10,content:"content",contentRepeat:null,repeatKeyword:"{repeat}",
identificator:"id",data:void 0,useDataAttrs:!1,timingIn:750,timingOut:250,animationIn:"fadeIn",animationOut:"fadeOut"}})(jQuery);
$('head').append('<style>#popup,.removing{position: absolute;background-color: #fff;}</style>');

$(function(){$("img[data-tooltip]").popUp({
      content: '{tooltip}',
      useDataAttrs: true
  });
});

Then you create your image like this :
Code:
<img src="https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png" data-tooltip="AK47<br>Type: Assault Rifle<br>Damage: x28-7 (196) Rapid range shots<br>2 uses per a match<br>3400 RC coins - Sellback for 175 RC coins" />
The
Code:
data-tooltip=""
attribute is where you place your tooltip text. You can use HTML to add formatting.

The result will look like this :


You may want to change the tooltip design, so use the rule below to add different styles to it.
Code:
#popup,.removing{
  position: absolute;
  background-color: #fff;
}
avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Sun 19 Mar 2017, 22:03

@Ange Tuteur
How do I add this script? Guidelines please?
I really appreciate your help.
avatar
Valoish
Graphic Designer
Title :
Gender : Female
Age : 21
Posts : 3633
Points : 4702
Reputation : 356
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Mon 20 Mar 2017, 10:15

@dr.kran;
The first code Ange gave you (The JS code) can be added by going to APC > Modules > Javascript Codes Management > Create New Script
Then just fill out the following fields:
Title: Examine Pop-up
Placement: In all pages
JS Code: paste first code here
And save.

Then you'd take the third code Ange gave you (The CSS) and paste it at the end of your stylesheet
ACP > Display > Colors > CSS Stylesheet
And save.

Then the second code he gave you (The HTML itself) would most likely have to be used in a custom-made HTML page where you want to display all of the weapons.
You can make an HTML page by doing the following:
ACP > Modules > HTML Pages Management > Create New page in advanced mode (HTML)
Make sure to tick off yes for using your forum's header and footer c:

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Thu 23 Mar 2017, 06:18

Doesn't work, do you mind helping me on my forums?
http://castlevania-1.forumotion.com/
avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Fri 25 Aug 2017, 17:24

Valoish wrote:@dr.kran;
The first code Ange gave you (The JS code) can be added by going to  APC > Modules > Javascript Codes Management > Create New Script
Then just fill out the following fields:
Title: Examine Pop-up
Placement: In all pages
JS Code: paste first code here
And save.


Then you'd take the third code Ange gave you (The CSS) and paste it at the end of your stylesheet
ACP > Display > Colors > CSS Stylesheet
And save.


Then the second code he gave you (The HTML itself) would most likely have to be used in a custom-made HTML page where you want to display all of the weapons.
You can make an HTML page by doing the following:
ACP > Modules > HTML Pages Management > Create New page in advanced mode (HTML)
Make sure to tick off yes for using your forum's header and footer c:

I'm very sorry that I was unsuccessful in carrying out the format that was provided.
(editing.
avatar
Wolfuryo

Gender : Male
Posts : 249
Points : 1183
Reputation : 79
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostWolfuryo on Wed 30 Aug 2017, 09:17

First step:
Go to the Admin Panel, Modules, Javascript Codes Management and add a new script with this options:
1.Name:whatever you want
2.Placement:All pages
3.Code:
Code:
        (function(b){b.fn.extend({popUp:function(e){e=b.extend({},b.PopUp.defaults,e);this.each(function(){new b.PopUp(this,e)});return this}});b.PopUp=function(e,a){b(e).on({mouseenter:function(c){var f=a.content;if(!a.useDataAttrs)var e=a.data[b(this).data(a.identificator)];var g=/{(.*?)}/g,d,h=[],k="";if(null!==a.contentRepeat){for(;null!==(d=g.exec(a.contentRepeat));)d.index===g.lastIndex&&g.lastIndex++,h.push(d);d=/{(\S+)}/.exec(a.repeatKeyword);e[d[1]].forEach(function(d){for(var b=a.contentRepeat,
        c=0;c<h.length;c++)b=b.replace(h[c][0],d[h[c][1]]);k=k.concat(b)})}for(;null!==(d=g.exec(a.content));)d.index===g.lastIndex&&g.lastIndex++,a.useDataAttrs?f=f.replace(d[0],b(this).data(d[1])):e[d[1]]&&d[0]!=a.repeatKeyword?f=f.replace(d[0],e[d[1]]):e[d[1]]&&d[0]==a.repeatKeyword&&(f=f.replace(d[0],k));if(0==b("#popup").length)switch(c=b("<div id='popup' style='display: none;top: "+(c.pageY-a.offset)+"px;left: "+(c.pageX+a.offset)+"px'>"+f+"</div>").appendTo("body"),a.animationIn){case "fadeIn":c.fadeIn(a.timingIn);
        break;case "show":c.show(a.timingIn)}},mousemove:function(c){b("#popup").css({top:c.pageY-a.offset+"px",left:c.pageX+a.offset+"px"})},mouseleave:function(){var c=b("#popup"),e=function(){return function(){b(".removing").remove()}};c.addClass("removing");c.removeAttr("id");switch(a.animationOut){case "hide":c.hide(a.timingOut,e());break;case "fadeOut":c.fadeOut(a.timingOut,e())}}});a.follow||b(e).off("mousemove")};b.PopUp.defaults={follow:!0,offset:10,content:"content",contentRepeat:null,repeatKeyword:"{repeat}",
        identificator:"id",data:void 0,useDataAttrs:!1,timingIn:750,timingOut:250,animationIn:"fadeIn",animationOut:"fadeOut"}})(jQuery);
        $('head').append('<style>#popup,.removing{position: absolute;background-color: #fff;}</style>');
       
        $(function(){$("img[data-tooltip]").popUp({
              content: '{tooltip}',
              useDataAttrs: true
          });
        });
Second step:Go to the Admin Panel, Display, Colors, CSS stylesheet and add this code at the bottom of the code:
Code:
#popup,.removing{
position: absolute;
background-color: #fff;
}
Now place this code where you want the image and the popup to show:
Code:
<img src="https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png" data-tooltip="AK47<br>Type: Assault Rifle<br>Damage: x28-7 (196) Rapid range shots<br>2 uses per a match<br>3400 RC coins - Sellback for 175 RC coins" />
avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Wed 30 Aug 2017, 10:20

Wolfuryo wrote:First step:
Go to the Admin Panel, Modules, Javascript Codes Management and add a new script with this options:
1.Name:whatever you want
2.Placement:All pages
3.Code:
Code:
        (function(b){b.fn.extend({popUp:function(e){e=b.extend({},b.PopUp.defaults,e);this.each(function(){new b.PopUp(this,e)});return this}});b.PopUp=function(e,a){b(e).on({mouseenter:function(c){var f=a.content;if(!a.useDataAttrs)var e=a.data[b(this).data(a.identificator)];var g=/{(.*?)}/g,d,h=[],k="";if(null!==a.contentRepeat){for(;null!==(d=g.exec(a.contentRepeat));)d.index===g.lastIndex&&g.lastIndex++,h.push(d);d=/{(\S+)}/.exec(a.repeatKeyword);e[d[1]].forEach(function(d){for(var b=a.contentRepeat,
        c=0;c<h.length;c++)b=b.replace(h[c][0],d[h[c][1]]);k=k.concat(b)})}for(;null!==(d=g.exec(a.content));)d.index===g.lastIndex&&g.lastIndex++,a.useDataAttrs?f=f.replace(d[0],b(this).data(d[1])):e[d[1]]&&d[0]!=a.repeatKeyword?f=f.replace(d[0],e[d[1]]):e[d[1]]&&d[0]==a.repeatKeyword&&(f=f.replace(d[0],k));if(0==b("#popup").length)switch(c=b("<div id='popup' style='display: none;top: "+(c.pageY-a.offset)+"px;left: "+(c.pageX+a.offset)+"px'>"+f+"</div>").appendTo("body"),a.animationIn){case "fadeIn":c.fadeIn(a.timingIn);
        break;case "show":c.show(a.timingIn)}},mousemove:function(c){b("#popup").css({top:c.pageY-a.offset+"px",left:c.pageX+a.offset+"px"})},mouseleave:function(){var c=b("#popup"),e=function(){return function(){b(".removing").remove()}};c.addClass("removing");c.removeAttr("id");switch(a.animationOut){case "hide":c.hide(a.timingOut,e());break;case "fadeOut":c.fadeOut(a.timingOut,e())}}});a.follow||b(e).off("mousemove")};b.PopUp.defaults={follow:!0,offset:10,content:"content",contentRepeat:null,repeatKeyword:"{repeat}",
        identificator:"id",data:void 0,useDataAttrs:!1,timingIn:750,timingOut:250,animationIn:"fadeIn",animationOut:"fadeOut"}})(jQuery);
        $('head').append('<style>#popup,.removing{position: absolute;background-color: #fff;}</style>');
        
        $(function(){$("img[data-tooltip]").popUp({
              content: '{tooltip}',
              useDataAttrs: true
          });
        });
Second step:Go to the Admin Panel, Display, Colors, CSS stylesheet and add this code at the bottom of the code:
Code:
#popup,.removing{
position: absolute;
background-color: #fff;
}
Now place this code where you want the image and the popup to show:
Code:
<img src="https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png" data-tooltip="AK47<br>Type: Assault Rifle<br>Damage: x28-7 (196) Rapid range shots<br>2 uses per a match<br>3400 RC coins - Sellback for 175 RC coins" />
The last one I don't understand though.
Can you change it to reply code formation?
http://grandexchange.forumotion.com/t2-contact-registry#12
I've also added to HTML
avatar
Wolfuryo

Gender : Male
Posts : 249
Points : 1183
Reputation : 79
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostWolfuryo on Wed 30 Aug 2017, 10:30

You have to enable HTML on your forum for the code to work.
avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Wed 30 Aug 2017, 10:33

Wolfuryo wrote:You have to enable HTML on your forum for the code to work.
How do I find the enable this option?

Oh wait, I found it.
avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Wed 30 Aug 2017, 10:40

Wolfuryo wrote:You have to enable HTML on your forum for the code to work.
Nope still doesn't work.
Even with new post.
avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Wed 30 Aug 2017, 11:39

Wolfuryo wrote:You have to enable HTML on your forum for the code to work.
The format I've asked for would be like this.

Code:
[url=http://help.forumotion.com/forum]<img
 title="TEST" alt="TEST"
src="https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png">[/url]
<img
 title="TEST" alt="TEST"
src="https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png">




Code:
[img title="HOVERTEXT"]URL[/img]
[img title="HOVERTEXT"]https://i58.servimg.com/u/f58/19/11/83/14/ak47_210.png[/img]
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2432
Points : 4690
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Wed 30 Aug 2017, 14:30

You have to activate HTML for the whole forum and in your profile.
avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Wed 30 Aug 2017, 14:33

SLGray wrote:You have to activate HTML for the whole forum and in your profile.
Sorry, the image had it on, and it's still not working.
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2432
Points : 4690
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Wed 30 Aug 2017, 14:38

So the image appears, but not the tooltip?

avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Wed 30 Aug 2017, 14:40

SLGray wrote:So the image appears, but not the tooltip?  



Here's the image of HTML being activated but I'm not certain on how to use tooltip

A little help there?
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2432
Points : 4690
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Wed 30 Aug 2017, 14:43

Profile > Preferences
Allow HTML:  Yes
avatar
Wolfuryo

Gender : Male
Posts : 249
Points : 1183
Reputation : 79
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostWolfuryo on Wed 30 Aug 2017, 15:41

I'm not sure I got this right. You have HTML active on your forum and the codes are not working?

Or they are working but you want to use it as a BBCode?

I'll probably make another code myself because it's easier for me to do so then see what's wrong with the one posted by Ange.
avatar
Dr.kran

Title :
Inventor
Gender : Male
Age : 24
Posts : 69
Points : 484
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://castlevania-1.forumotion.com/

PostDr.kran on Wed 30 Aug 2017, 16:43

Wolfuryo wrote:I'm not sure I got this right. You have HTML active on your forum and the codes are not working?

Or they are working but you want to use it as a BBCode?

I'll probably make another code myself because it's easier for me to do so then see what's wrong with the one posted by Ange.
BBCodes would do just fine, HTML's difficult work.

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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