Hi Kevin,

This plug-in is to easily setup hover effect using jQuery.

Regards, Dotdesign.in

Hi Buddy1,

This plug-in is based on jQuery, it’s not designed for WP, but it will work with WP the only difference will be you will need to put a code to initiate the plug-in.

If you go through comments in plug – in. One of the user (“gecko_guy”) had used plug – in in WordPress site.

Below are steps he had mentioned in plug-in comments.

1. go under Appearance / Editor /on WP

2. add to the footer.php page the javascript code

<link href=”path/to/plug-in-styles.css” rel=”stylesheet” type=”text/css” />

<script src=”path/to/plug-in-js.js” type=”text/javascript” language=”javascript”></script>

3. add your plugin on page /post/

4. change image location or paths

Hope this helps.

Thanks, DotDesign.in

Hi Michael,

I have provided you solution with working demo and sent you files via email. Please take a look and feel free to ask question if you have any.

Thanks, DotDesign.in

Thank you! And look forward to hearing from you. Your product has been duly rated.

Thanks Michael,

I have sent you updated file which has “click” event.

Regards,
DotDesign.in

Hi are you Michale?

If so I have received files I haven’t taken a look yet but I will provide solution in couple days.

If you are not Michale, can you please send HTML, CSS and JS together in zip file?

Thanks, DotDesign.in

Thanks for this, have supplied the relevant files to you for your support.

Hi Michael,

I have provided you solution with working demo and sent you files via email. Please take a look and feel free to ask question if you have any.

Thanks,
DotDesign.in

Please email the code. if you can do…. my email ID… ramesht4@gmail.com

I answered my question, if any want do what I Have tried to do …. basically on the DEMO 7, the back hover box need to adjust the height… here is the answer…

go to your Javascript file ( Jquery.hoverOver.Min.js)

search for this line… & add (+ 20) ( if you want the hover box to go down keep increasing the number…

->> var r = n.$el.outerHeight(true) – k + 20, // adjust the height of the hover

In addition to above solution. Instead of editing .min.js file you can edit source file and minify source file using online JS minify tool.

Thanks,
DotDesign.in

Yes it is possible.

Regards,
DotDesign.in

Hi,

Yes you can use 2 images. One in box and another in hoverOver layer. Right now hoverOver layer are of transparent color.

Regards,
DotDesign.in

Files mentioned in zip / demo will work. Can you please check that you are using proper class name / id?

Can you send over your files to dotdesign.in@gmail.com

I shall take a look and guide you on how to make it work.

Thanks,
DotDesign.in

I’ve send email to you. Thanks.

Hi,

I have provided solution. Issue was same ID is used in markup. IDs should be unique. Because in your JavaScript code plug-in is initiated based on IDs.

Thanks,
DotDesign.in

So on touch devices hover state will happen to be on touch. You an take a look at demo page on touch device. You will get an idea.

Regards,
DotDesign.in

Thank you for answering. I tried the demo page on a touch screen. In each example, the effect takes place but to make it go away, one has to try another effect. How would the plugin react with only one instance on a page?

Regards.

As I said, hover effect on touch behaves like that only, on one touch it will make hover and on another touch it will make hover out.

Thanks,
DotDesign.in

Hi Lucybasten,

Yup definitely it’s possible. Can you please send me mock-up on dotdesign.in@gmail.com? That will give me better idea.

Regards, DotDesign.in

Hi Joansu,

Thanks for liking plug-in. Regarding making it working in WP. There is one user who has put detailed info on how to make it work.

You can find that info in message thread of “hoverOver” plug-in.

I have pasted that below.

User: gecko_guy

Details: I don’t generally monitor these threads as I am not the owner of this plugin.

It is easy to make jQuery plugins work in Wordpress, but if you are unfamiliar with how to do so I’m afraid I don’t really have time to explain it in detail.

In short, you need to upload the plugin files to your server using FTP or cPanel, then enqueue the scripts in your WP functions.php file.

You then create your content, apply the CSS classes and/or ID’s before setting up an initialisation script to call the plugin functions.

Here are some links to get you started:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/

I recommend you use Firebug or Chrome Developer Tools to debug as you go.

Also, be aware that this is not a Wordpress Plugin, so unless you intend to write an actual plugin then you will not specify a path to the Plugin directory.

Likewise, the method for enqueueing scripts for a Parent theme requires a different path to the path you would use for a Child theme.

Here is and example of a functions.php for a Child theme:

<?php

add_action( 'wp_enqueue_scripts', 'load_hover_scripts' );

function load_hover_scripts () {

    wp_register_script( 'hoverover_init',  get_stylesheet_directory_uri() . '/js/hoverover/hover_init.js');
    wp_register_script( 'hoverover',  get_stylesheet_directory_uri() . '/js/hoverover/Source/jquery.hoverOver.js');
    wp_register_script( 'hoverover.min',  get_stylesheet_directory_uri() . '/js/hoverover/Source/jquery.hoverOver.min.js');

            wp_enqueue_script( 'hoverover_init' );
            wp_enqueue_script( 'hoverover' );
            wp_enqueue_script( 'hoverover.min' );

        }
}

?>

You could of course just use CSS to achieve an identical effect to the site at the link you have provided. I only use JS or jQuery plugins to enable fancy effects like sliding and fading.

Good luck!

Regards,
DotDesign.in

Hi Michael, I have sent you updated files over email.

Thanks, DotDesign.in

Thanks for all your assistance! Look forward to seeing more of your work. Probably, buy more plugins from you in the future.

Thanks Michael. Really appreciate that.

Hi Oscaraj,

Sorry for getting back late.

You can wrap any HTML to hover content. Can you please send me HTML or image what are you referring to?

Thanks,
DotDesign.in

Just emailed you the issue. Thanks for your help.

I have sent reply to your email.

To set up HoverOver plug-in all you need to do is follow the “demo/index.html” example and instructions given in “hoverOver_Plug-in_Description.pdf” and live preview website. http://dotdesign.in/hoverover

Regards,
DotDesign.in

Awesome. I hope plug-in is helpful to you.
Can you please paste steps here. So that others can get benefit of it.

I shall add it in description as well. So it will be easy for others who want to use in WP.

Regards, DotDesign.in

hi dot, I am not done yet wii installation, being sick… but briefly …if I may say…

1. go under Appearance / Editor /on WP 2. add to the footer.php page the javascript code

<link href=”.........” type=”text/css” rel=”stylesheet” /> <link href=”..........” rel=”stylesheet” type=”text/css” /> <link href=”.........” rel=”stylesheet” type=”text/css” />

<script src=”.........” type=”text/javascript” language=”javascript”></script> <script src=”..........” type=”text/javascript” language=”javascript”></script> <script src=”..........” type=”text/javascript” language=”javascript”></script>

3. add your plugin on page /post/ 4. change image location or paths

hope it helps thank u for plugin….programer|dot|designer (:

Thanks Valbrsp,

That will help many WP users who want to add this plug-in to their WP site.

Get well soon!!!

Regards,
DotDesign.in

Thanks. If you like the plug-in, I wold love to get ratings for the plug-in.

What you can do. Wrap hover box into DIV and give float: left and assign width, so that DIVs will be next to each other.

Regards, DotDesign.in

As shown in demo, you need to add jQuery API and initialize in either $(document).ready() or $(window).load()

$(’#demo6’).hoverOver({...}) where “demo6” is DIV ID.

Thanks, DotDesign.in

Hi,

I have created JSFiddle demo for you. http://jsfiddle.net/nishantuie/5Vywh/1/

Thanks, DotDesign.in

Hi,

I have created JSFiddle demo for you. http://jsfiddle.net/nishantuie/5Vywh/1/

Thanks, DotDesign.in

Hi,

Current HoverOver plug-in is not WP install able plug-in but you can use it in any WP or any other website. All you need to do is, initialize the plug-in and give Id or Class of container on which HoverOver effect needs to be applied.

I would suggest to keep CSS separate. There is nothing bad if you want to combine into your existing CSS.

Thanks, DotDesign.in

Sorry, but be simple with me. How do I “initialize” the plugin? I will implement “Content Title Visible” on 4 different images, all on the same page. Just as your demo…