Latest topics
» Multi-step Login Form
by Ange Tuteur Today at 10:36

» Post Cards
by Ange Tuteur Today at 10:35

» Simple Theme Changer
by Ange Tuteur Today at 10:34

» Starred Forums
by Ange Tuteur Today at 10:31

» IconSkouliki
by skouliki Yesterday at 03:40

» help me about Latest topic
by Valoish Sat 27 May 2017, 14:53

» Display a preview of the user profile on hover
by Haytam Sat 27 May 2017, 12:39

» Chit Chat Thread
by Ange Tuteur Sat 27 May 2017, 12:11

» Colored Bar Navigation
by Valoish Fri 26 May 2017, 23:03

» FM Themes
by SLGray Thu 25 May 2017, 22:39

» User - Made Creations
by SLGray Thu 25 May 2017, 22:37

» Classified Ads
by SLGray Thu 25 May 2017, 19:23

» Categories as tabs on Edge!
by STBW Thu 25 May 2017, 04:11

» [GAME] What are you thinking right now?
by Ange Tuteur Wed 24 May 2017, 15:10

» [GAME] Countdown from 200,000
by Ange Tuteur Wed 24 May 2017, 15:09

Recent Tutorials
Who is online?
In total there are 6 users online :: 0 Registered, 0 Hidden and 6 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 : 52
Points : 342
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 : 4548
Points : 9377
Reputation : 2294
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 : 52
Points : 342
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 : 20
Posts : 3590
Points : 4518
Reputation : 334
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 : 52
Points : 342
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/

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