Latest topics
» Hello everyone this is Adam from France
by Milouze14 Tue 21 Nov 2017, 13:23

» Auto-suggest @mentions as You Type
by T.C. Tue 21 Nov 2017, 12:36

» Personal Rank Titles
by T.C. Tue 21 Nov 2017, 12:04

» FM Themes
by SLGray Tue 21 Nov 2017, 01:08

» User - Made Creations
by SLGray Tue 21 Nov 2017, 01:07

» Search box only visible on hover
by SLGray Tue 21 Nov 2017, 00:58

» Browsers & Updates
by SLGray Tue 21 Nov 2017, 00:56

» Change newposts/no new posts/ locked icons
by T.C. Mon 20 Nov 2017, 19:52

» [HELP] About Profile Cover Code
by MaHwOs Sun 19 Nov 2017, 18:54

» bloquer un membre
by berlingo Fri 17 Nov 2017, 18:19

» IconSkouliki Graphics
by skouliki Fri 17 Nov 2017, 03:54

» [IN PROGRESS] Can this code work on pun version
by skouliki Thu 16 Nov 2017, 03:50

» [TUTORIAL] [ALL VERSIONS] Warning before posting
by demon99 Wed 15 Nov 2017, 08:12

» About Add Reply & New Topic button (popup form)
by omarpop23 Mon 13 Nov 2017, 20:31

» Add a login popup for the toolbar
by Ape Sun 12 Nov 2017, 18:41

Recent Tutorials
Who is online?
In total there are 9 users online :: 0 Registered, 0 Hidden and 9 Guests :: 1 Bot

None

[ 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 : 542
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 : 22
Posts : 4712
Points : 9589
Reputation : 2341
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 : 542
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 : 3652
Points : 4780
Reputation : 357
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/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 : 542
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 : 542
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 : 250
Points : 1243
Reputation : 80
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 : 542
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 : 250
Points : 1243
Reputation : 80
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 : 542
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 : 542
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 : 542
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 : 2460
Points : 4779
Reputation : 287
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 : 542
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 : 2460
Points : 4779
Reputation : 287
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 : 542
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 : 2460
Points : 4779
Reputation : 287
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 : 250
Points : 1243
Reputation : 80
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 : 542
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