IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month
Who is online?
In total there are 5 users online :: 0 Registered, 0 Hidden and 5 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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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
Gender : Male
Age : 22
Posts : 4733
Points : 9848
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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;
}

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Dr.kran

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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.

--------



Play on this King Makers Role play.
avatar
Valoish
Graphic Designer
Gender : Female
Age : 21
Posts : 3670
Points : 5013
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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 : 256
Points : 1462
Reputation : 81
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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 : 256
Points : 1462
Reputation : 81
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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
Gender : Male
Age : 45
Posts : 2465
Points : 5001
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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
Gender : Male
Age : 45
Posts : 2465
Points : 5001
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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
Gender : Male
Age : 45
Posts : 2465
Points : 5001
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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 : 256
Points : 1462
Reputation : 81
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
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

Gender : Male
Age : 25
Posts : 73
Points : 760
Reputation : 1
Language : english
Browser : Browser : Internet Explorer Forum Version : Forum Version : phpBB2
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.
Sponsored content

PostSponsored content

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