Ajax- JQuery Hovering/Expanding Info Box
I looked high and low for an “AJAX hovering/expanding info box”, but I couldn’t really find anything decent that worked in all browsers. Most of them choked when using I.E. I may have even been Googling the wrong keyphrase, I’m not even sure I named this effect the right thing…
For those of you who don’t have a clue what I’m talking about, I mean something like this:
So basically, there are 3 panels, and when you hover one, the panel expands with further information.
As I said, I couldn’t find anything precisely to the criteria I required, so I decided to try and write my own. The code is really simple, and from what I’ve tested, it works in most browsers, including I.E 6. It’s quite smooth, but it’s not animated. I’m sure someone can improve the code to make it a lot smoother.
Anyways, I still think the end result is pretty cool (even though quite basic). The actual CSS was more of a pain than the AJAX, purely because of cross-browser issues.
Demo
JQuery Hovering/Expanding Info Box Demo
Download
JQuery Hovering/Expanding Info Box Download
If anyone actually uses this, let me know how it works out. Additionally, if anyone has any improvements to the code, i’d love to see it…
brightcherry.co.uk
Wow Maruf! it’s gorgeous. I want to incorporate this into the citrus mix word press theme. i’ve pasted the code into the sidebar.php but it’s not aligned very nicely. I’m interested in using this ‘hover info box’ instead of using a navbar.
two things;
1. to position ‘hover info box’ where ‘about’ and other widgets are located. (effectively replacing them)
2. could you send me the code for the php and the code for the css
I left you a scribble on citrus mix forum, you can ignore that if you can help me with this instead.
Thank you for everything.
Hi Maruf.
I’m having some trouble with ‘img src=…’
can you advise how i can add images from my server into the code.
Many thanks
June
Hi June.
Apologies for the late response, I have been mad busy.
Did you manage to resolve this issue?