sweet jquery
- Started
- Last post
- 8 Responses
- iamjustoneman
Hi all,
I was just wondering if anyone can shed any light on how this was implemented:
if you scroll down to: We build great brands, you will see the logo boxes, on hover they reveal links etc.
I would like to create something similar but not sure where to start, looking at the code, it would seem they are using jQuery, rather than grab the code, I would like to learn a little bit about how it was implemented, what plugins were used, if any.
Appreciate any help.
Thanks
- Knuckleberry0
you could create similar with just a rollover action.
- hans_glib0
just steal the code, learn from it and then make it your own.
- Stugoo0
at a glance, its simple jQuery, nice techinque imo.
all it is, is a mouseover event that fades up the content div over the top of the image.
this might help
http://blog.themeforest.net/tuto…
- surface0
really simple stuff depending on how familiar you are with jquery. i'm assuming they did it in a simple manner and that means there is no need for any plugins of some sort. just mess around with fading elements over other elements, preferably divs.
if you understand code pretty well, you should be able to understand how they did it just by scoping their source.
- ukit0
In this case all there is is an absolutely positioned div set to display:none which is then faded in when the user mouses over.
So you have:
<div>
<div>Original content</div>
<div>Hover content</div>
<div>With the containing div set to "position:relative" so that it contains the absolutely positioned div.
- BattleAxe0
here is a good break down , not the same execution but same concept
http://buildinternet.com/2009/03…
- Nightshade0
There's a similar version of this in use on my website. Here's the jquery code I use:
$(document).ready(function(){
$("div.projectImage").hover(
function(){
$(this).find("span.textRollover...
},
function(){
$(this).find("span.textRollover...
}
);});
With the HTML looking something like this:
<div class="projectImage">
<span class="textRollover">
(Text here)
</span>
</div>- $(this).find("span.t...Nightshade
- Grr won't show long lines. Just look at my site's source.Nightshade
- iamjustoneman0
great advice, will take a look at the links and tuts.
Thanks