28 comments found.
Hi. I “think” that I have been searching for this plugin for a long time. Can this plugin be made to change an image when you HOVER over text? What I need is to duplicate the effects on this website, { http://www.srcart.com/art_collection.html } so that when you hover over an artist’s name, an image in another element will show.
Thanks.
This plug-in is not meant for the same functionality. I will create similar one that you want it. Can you please drop your email? I will send you message when that plug-in got approved.
Thank you, email sent.
Hi, As discussed earlier. I have created plug-in, by thumb image over large image will show to placeholder or target box.
Here is the link to plug-in. http://codecanyon.net/item/show-image-in-placeholdertarget-box-jquery/4872569Thanks, DotDesign.in
Hi, Great Script.. On your Site (LivePreview) you have specified
“data-push-content=’#contentID’” and define ” id=”contentID”“
Do you have any other ways else than to do it without ID? On a Site with Dynamic created Boxes there will be Errors cause same IDs are used often.
Hey Karabey, what you can do, when you specify dynamic id. Add some index. so data-push-contet=’#contentID1’.
Regards, DotDesign.in
@ Arthas13
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!
Hi gecko_guy. I have asked dotdesign_in to create a custom wordpress plugin, that when the mouse hovers over a text, text url, or anytype of content of my choosing, an image will apear to the right. Similar to this site http://www.probertsongallery.com/component/artists
I read from your comments that you figured out how to convert it to a wrodpress plugin? I have no idea how to convert to a wordpress plugin.
Hi gecko_guy. I have asked dotdesign_in to create a custom wordpress plugin, that when the mouse hovers over a text, text url, or anytype of content of my choosing, an image will apear to the right. Similar to this site http://www.probertsongallery.com/component/artists
I read from your comments that you figured out how to convert it to a wrodpress plugin? I have no idea how to convert to a wordpress plugin.
This looks great, do you know if it will work in Wordpress?
Yup this should work. Only you need to do is give id of box on which you need hover over.
Thanks, I am giving it a go. I find your guidance notes regarding the CSS very difficult to follow though. Your notes are aimed at high level understanding and will not be easily understood by people who are inexperienced. It would be a tremendous help if you explained things a bit more… Anyway, I am nearly there now.
I thought explaining in detail will help. In reality it is very straight forward. Because you can add content and style it yourself with classes that you want to apply. There are only couple classes that needs to apply hover overlay background color that’s it.
Feel free to let me know if you face any difficulty.
Regards, DotDesign.in
Thanks, it is reasonably straightforward, but I’ve found I need to pick apart your demo files and use Firebug/Developer Tools to see how it works.
The slight difficulty I am having is likely due to the fact I am using a very complex Wordpress Framework, and it is probably simpler when working with an ordinary site.
I’m nearly there now, and I do like the plugin, but I think many less experienced people may struggle. What may seem obvious to you is not necessarily easy for others to comprehend.
The help documentation could be improved to make it easier to understand. Specifically it is the CSS advice which is sketchy, and perhaps this is due to the general nature of the advice to cover so many different examples.
Sure I will try to make it easy. Thanks for the feedback.
Hi again. I have got this all working very well in Wordpress now. Thanks for the nice plugin 
I have a general question which you may be able to help with. I am using the effect you show in Demo 7 (content title visible).
How easy would it be to adapt the script so that the content only shows on being clicked?
Ideally, I would like to make the title shake a little bit on mouseover, and open the underlay only if clicked.
In other words, currently the effect triggers when the div is hovered on, but I would like the title (which can be turned into a button using a bit of CSS) to shake very slightly on hover, and the hidden content to display on click, and then close automatically on mouseout after a slight delay.
Clearly anything is possible, but would such a modification require extensive work?
Thanks for the sharing requirement.
Such change there is significant change. Because as I named this plug-in as HoveOver, I have handled all effect in mouseover & out function. I shall look into it and I will let you know if its a easy fix.
Can you please share URL where you have used plug-in? It will give me / other buyer an idea of usage.
Unfortunately the site is on a local host at the moment and can’t be accessed on the web, sorry 
Just looking at your addDot plugin, it is probably something half way between the 2 that I am thinking of.
Regarding above comment, it probably needs a new plugin, I would definitely purchase it!
Another request for the hoverOver plugin though (this one), is to have the possibility of hover intent.
I mean, it would be nice if we could have a slight delay before the event gets triggered so that if you have lots of boxes close to each other, they won’t be jumping up and down when moving quickly over one to get to another…
That is doable.
That would be great! Appreciate the quick responses, and I am giving you a 5 star rating for the product and customer service. Is this something you can help me with then?
Thanks for that, I would have always help if it’s doable. Thanks a lot if you have already given 5 star ratings. I shall look into code and I will let you know how to do that.
Hey Gecko,
As you requested feature of animation delay on hover content. I have added for both delay on hover in & out. Options for them are “aniInDelay” & “aniOutDelay”.
Code is approved, you can download latest files. I have updated online demo. You can check demo 2 “Only CTA Button/Icon”.
If you feel this plug-in is useful, recommend to your friends.
Thanks, DotDesign.in
Thanks so much, that is very helpful and much appreciated
You are Welcome!!!
Hi there,
I’ve just got round to testing this.
Unfortunately, all it does is set a timer to delay the effect.
I was hoping to implement HoverIntent, so that if the mouse moves quickly over a box the effect will not trigger at all.
Here is a link to the HoverIntent site. I’ll also try to find the solution in the meantime:
http://cherne.net/brian/resources/jquery.hoverIntent.html...and here is a link to an example:
http://overlycaffeinated.com/demos/hoverIntent.phpI am trying to get it to work like the green box at the bottom…
Hi, sorry to bombard you. This is less important to me, but I have another question
When using your example #7 (Content Title Visible)
It is possible to set the start height with contentShowHeight, but it would be nice to be able to specify the end height too.
This would allow for the background effect to occupy only a portion of the container on hover, or apply some nice CSS styling to the edges of the background.
If this is easy to do it would be a nice addition to your script, but I am much more interested in HoverIntent at this stage.
Thanks again, I really like the plugin!
I have tried a lot of others that are fancy in all sorts of ways, but so far yours is working well for me due to its simplicity and allows me to apply an HTML5 pixel grayscale hover effect at the same time without conflict.
If it is possible to make these other changes it would be perfect!
Can we customize the color of elements ?
With CSS ?
Hey Candeed,
Yes of-course, that’s what I did in demo. I have used same plug-in but hover-over overlay color is different.
Thanks, DotDesign.in
Wow cool:-)
Thanks.
