How to create hover effect (newbie here!)

  • guitrldy
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 6
  • Thank you received: 0

guitrldy created the topic: How to create hover effect (newbie here!)

Hello! I'm just starting out with Breezing Forms.

I'd like to create a hover effect on items within a "checkbox group".

When my users hover over a selection, I need them to see a photo and a short text description.

How would I get started with this?

Thanks in advance!
Lisa W.
#239077
  • Posts: 2986
  • Karma: 104
  • Thank you received: 394

mihaela replied the topic: How to create hover effect (newbie here!)

Hello,

What you are asking is not a default BreezingForms feature.
BreezingForms offers the hover effect, but on the element label and not on each item inside for example Checkbox group element.

Here is a guideline on how to make this as you want.

Go to the Advanced properties of the checkbox group element and in the "Initscript" section set Type to Custom. Furthermore, check the "Form Entry" checkbox and in the code area that appears below put code like this:
function ff_checkboxgroupname_init(element, condition)
{
    jQuery('#bfGroupLabel14074').attr('title', 'This is the hover-over text');
    jQuery('#bfGroupLabel14074_1').attr('title', 'This is the hover-over second item text');
    jQuery('#bfGroupLabel14074_2').attr('title', 'This is the hover-over third item text');
} // ff_checkboxgroupname_init
NOTE: In the code above you have to replace bfGroupLabel14074, bfGroupLabel14074_1 and bfGroupLabel14074_2 with the ID's of the checkbox group options in your checkbox group.
You can get them by previewing the form and Inspecting the element.

This will show text on hower, but this will not display an image.

There must be a similar way to display the image here is well so I would suggest is to try Googling it.

Let me know whether this helped.

Regards,

Mihaela
#239089
  • guitrldy
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 6
  • Thank you received: 0

guitrldy replied the topic: How to create hover effect (newbie here!)

Thank you for this! I will give it a try and then Google info on displaying an image. I'll post here what I find for others...

Lisa W.
#239099
  • Posts: 2986
  • Karma: 104
  • Thank you received: 394

mihaela replied the topic: How to create hover effect (newbie here!)

Hi again,

Great!
Good luck.

Regards,

Mihaela
#239111
  • guitrldy
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 6
  • Thank you received: 0

guitrldy replied the topic: How to create hover effect (newbie here!)

Just FYI, this code worked! Now I'm looking online for tips displaying an image on hover.

One last question: what type of code is this? Java, php...? I'm not familiar with it.
(I am an old time coder, but still learning!)

Thanks!
Lisa W.
#239135
  • Posts: 2986
  • Karma: 104
  • Thank you received: 394

mihaela replied the topic: How to create hover effect (newbie here!)

Hello again,

Great! I'm glad that it worked. :)

This is a JavaScript code, to be specific jQuery is being used in the code that I have provided.

Regards,

Mihaela
#239150
Moderators: ForumSupporttomeperica
Time to create page: 0.076 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here