The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Hover over a certain word? & other questions

View previous topic View next topic Go down

In progress Hover over a certain word? & other questions

Post by concon22 on August 22nd 2013, 8:56 pm

Hi,


Edit:
Do you know how to make it so staff have a certain text bacground, like the background for this is the forumotion "Help" sign!



-Concon22


Last edited by concon22 on August 23rd 2013, 3:28 pm; edited 1 time in total

concon22
Forumember

Posts : 32
Reputation : 2
Language : English

Back to top Go down

In progress Re: Hover over a certain word? & other questions

Post by Base on August 23rd 2013, 12:25 am

Hello,

Do you mean tooltips? If not, please give us an example by showing us a screenshot or giving a link to this. Thanks!

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

In progress Re: Hover over a certain word? & other questions

Post by Cassius Dio on August 23rd 2013, 8:05 am

Hi, bye

You can meake something like this adding this code to Administration Panel ~> Modules ~> HTML & JAVASCRIPT ~> JavaScript codes management:
Code:

$(function () {
  var definition_words = {
        'Word 1' : 'Text description 1',
        'Word 2' : 'Text description 2',
        'Word 3' : 'Text description 3'
  },
  img_words = {
      'Word 1': 'Image description 1',
      'Word 2': 'Image description 2',
      'Word 3': 'Image description 3'
  },
  link_words = {
      'Word 1': 'URL Adress 1',
      'Word 2': 'URL Adress 2',
      'Word 3': 'URL Adress 3'
  },
  def_regex = [],
  img_regex = [],
  link_regex = [];
  for (var w in definition_words) def_regex.push(w.replace(/\*/g, '\\w*?'));
  for (w in img_words) img_regex.push(w);
  for (w in link_words) link_regex.push(w);
  def_regex = RegExp('\\b(' + def_regex.join('|') + ')\\b(?=\\W)', 'gi');
  img_regex = RegExp('\\b(' + img_regex.join('|') + ')\\b(?=\\W)', 'gi');
  link_regex = RegExp('\\b(' + link_regex.join('|') + ')\\b(?=\\W)', 'gi');
  for (var i = 0, post = $('.pun .post-entry .entry-content'), p; (p = post[i++]);) {
      p.innerHTML = p.innerHTML.replace(def_regex, function (m) {
        return '<span class="tech-word" title="' + definition_words[m.toLowerCase()] + '">' + m + '</span>';
      }).replace(link_regex, function (m) {
        return '<a class="post-word-link" href="' + link_words[m.toLowerCase()] + '">' + m + '</a>';
      }).replace(img_regex, function (m) {
        return '<span onmouseover="$(this.nextSibling).show(); this.nextSibling.style.left = this.offsetLeft + \'px\'" onmouseout="$(this.nextSibling).hide()" class="post-hover-img">' + m + '</span><img style="display:none" src="' + img_words[m.toLowerCase()] + '" class="auto-img">';
      });
  }
});
Code explanations:
1. In this piese of code you can add your word with a text description:
Code:
  var definition_words = {
        'Word 1' : 'Text description 1',
        'Word 2' : 'Text description 2',
        'Word 3' : 'Text description 3'
  },
- When you'll hover over the "Word 1", will appear a tooltip with text "Text description 1", when over the "Word 2" - "Text description 2" and so on...

2. In this piese of code you can add your word with an image description:
Code:
  img_words = {
      'Word 1': 'Image description 1',
      'Word 2': 'Image description 2',
      'Word 3': 'Image description 3'
  },
- When you'll hover over the "Word 1", will appear a tooltip with the image you inserted in "Image description 1", when over the "Word 2" - the image you inserted in "Image description 2" and so on...

3. In this piese of code you can add your word with a link description:
Code:
  link_words = {
      'Word 1': 'URL Adress 1',
      'Word 2': 'URL Adress 2',
      'Word 3': 'URL Adress 3'
  },
- When you'll hover over the "Word 1", will appear a tooltip with the URL you inserted in "URL Adress 1", when over the "Word 2" - the URL you inserted in "URL Adress 2" and so on...

Hope I was clear.

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

In progress Re: Hover over a certain word? & other questions

Post by concon22 on August 23rd 2013, 3:16 pm

Yes, a Tooltip!
Yes, you were clear, what about the other questions?

concon22
Forumember

Posts : 32
Reputation : 2
Language : English

Back to top Go down

In progress Re: Hover over a certain word? & other questions

Post by concon22 on August 23rd 2013, 3:17 pm

Yes, a Tooltip!
Yes, you were clear, what about the other questions?

concon22
Forumember

Posts : 32
Reputation : 2
Language : English

Back to top Go down

In progress Re: Hover over a certain word? & other questions

Post by Cassius Dio on August 23rd 2013, 5:33 pm

There is no needed to edit your first post deleting the first problem. Maybe other users have the same question too and want to know how to put a tooltip. Razz

Related to your second problem, it will be nice to open a new topic for each problem. thumleft

Have a nice day!

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

In progress Re: Hover over a certain word? & other questions

Post by SLGray on August 23rd 2013, 7:52 pm

@concon22 wrote:Yes, a Tooltip!
Yes, you were clear, what about the other questions?
@concon22 wrote:Yes, a Tooltip!
Yes, you were clear, what about the other questions?
Second Reminder:

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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