My mental CSS rendering engine must have failed! Yeah, that's what I want. :-)
thanks, - Mike On Wed, Aug 18, 2010 at 11:09 PM, Dylan Fogarty-MacDonald <dylan.fm@ gmail.com> wrote: > Hey, > > I might be misunderstanding you, but this has text on hover: > > http://skitch.com/dylanfm/d1t3r/image-popup > <http://skitch.com/dylanfm/d1t3r/image-popup>http://gist.github.com/534548 > > <http://gist.github.com/534548>Dylan > > > On 18 August 2010 23:03, Bodaniel Jeanes <[email protected]> wrote: > >> And once again we have reason to wonder why the frak CSS is missing a >> parent selector... >> >> Sent from my iPhone >> >> On 18/08/2010, at 11:02 PM, Mike Bailey <[email protected]> wrote: >> >> That would be simpler *but* I'm wanting to display some text above and >> below the image when they hover. >> >> Hover over a >> pooch<http://www.google.com.au/images?q=dogs&biw=1246&bih=985>and you'll see >> what I mean. :-) >> >> - Mike >> >> On Wed, Aug 18, 2010 at 10:44 PM, Dylan Fogarty-MacDonald >> <dylan.fm@<http://gmail.com> >> gmail.com> wrote: >> >>> Hey Mike, >>> >>> You could achieve something like this with CSS and no JavaScript: >>> >>> <http://gist.github.com/534548>http://gist.github.com/534548 >>> >>> I'm not sure how this will behave in some browsers. IE6 for one won't >>> like div:hover. >>> >>> <http://gist.github.com/534548>You can go and enhance it with CSS3 box >>> shadows and even transitions for the zoom effect. >>> >>> Dylan >>> >>> >>> On 18 August 2010 22:34, Mike Bailey < <[email protected]> >>> [email protected]> wrote: >>> >>>> Thanks Mikel, that looks like what I need! :-) >>>> >>>> - Mike >>>> >>>> On Wed, Aug 18, 2010 at 10:33 PM, Mikel Lindsaar < <[email protected]> >>>> [email protected]> wrote: >>>> >>>>> I'm no jQuery king, but this should get you started on popping the >>>>> images up... you will need to fix the positioning of the image as well by >>>>> adding the appropriate style. >>>>> >>>>> jQuery(function($) { >>>>> $('img').live('hover', function(){ >>>>> $(this).animate({ height: $(this).attr('data-height'), >>>>> width: $(this).attr('data-width') }, >>>>> 2, 'swing'); >>>>> }); >>>>> >>>>> >>>>> Mikel >>>>> >>>>> >>>>> >>>>> On 18/08/2010, at 10:16 PM, Mike Bailey wrote: >>>>> >>>>> That looks pretty cool Julio! >>>>> >>>>> Right now I'm wondering how to make a div popup when users hover over >>>>> the image. >>>>> It needs to grab some values from the image element like google does: >>>>> >>>>> <img class="rg_hi" id="rg_hi" src="blah" width="272" height="185" >>>>> data-width="272" data-height="185" <----- Use these to calculate size >>>>> of onhover popup >>>>> style="width:272px;height:185px"> >>>>> >>>>> I'm sure it's a simple one. :-) >>>>> >>>>> - Mike >>>>> >>>>> On Wed, Aug 18, 2010 at 9:59 PM, Julio Cesar Ody <<[email protected]> >>>>> [email protected]> wrote: >>>>> >>>>>> Yeah, >>>>>> >>>>>> <http://desandro.com/resources/jquery-masonry/> >>>>>> http://desandro.com/resources/jquery-masonry/ >>>>>> >>>>>> I'm building an iPhone/iPad web app that uses it for image search >>>>>> >>>>>> <http://github.com/juliocesar/domino> >>>>>> http://github.com/juliocesar/domino >>>>>> >>>>>> Counts as a "ghost of done" now that I said so on the Internet before >>>>>> it's done :) >>>>>> >>>>>> >>>>>> >>>>>> On Wed, Aug 18, 2010 at 9:50 PM, Mike Bailey < <[email protected]> >>>>>> [email protected]> wrote: >>>>>> > <http://www.google.com.au/images?q=dogs&biw=1246&bih=985> >>>>>> http://www.google.com.au/images?q=dogs&biw=1246&bih=985 >>>>>> > Have you seen Google's new look image search? Besides being super >>>>>> fast, it's >>>>>> > got a nice way of showing an image's details on hover. >>>>>> > I'd like to implement a similar hover display on >>>>>> <http://Goodfordogs.org>Goodfordogs.org. Can anyone >>>>>> > point me to a simple example? >>>>>> > thanks, >>>>>> > Mike >>>>>> > >>>>>> > -- >>>>>> > >>>>>> > <http://Goodfordogs.org/>http://Goodfordogs.org - Adopt a dog or >>>>>> cat >>>>>> > >>>>>> > -- >>>>>> > You received this message because you are subscribed to the Google >>>>>> Groups >>>>>> > "Ruby or Rails Oceania" group. >>>>>> > To post to this group, send email to >>>>>> <[email protected]>[email protected]. >>>>>> > To unsubscribe from this group, send email to >>>>>> > <rails-oceania%[email protected]> >>>>>> [email protected]. >>>>>> > For more options, visit this group at >>>>>> > <http://groups.google.com/group/rails-oceania?hl=en> >>>>>> http://groups.google.com/group/rails-oceania?hl=en. >>>>>> > >>>>>> >>>>>> >>>>>> >>>>>> -- >>>>>> <http://crazyhollywood.org/>http://crazyhollywood.org >>>>>> >>>>>> -- >>>>>> You received this message because you are subscribed to the Google >>>>>> Groups "Ruby or Rails Oceania" group. >>>>>> To post to this group, send email to <[email protected]> >>>>>> [email protected]. >>>>>> To unsubscribe from this group, send email to >>>>>> <rails-oceania%[email protected]> >>>>>> [email protected]. >>>>>> For more options, visit this group at >>>>>> <http://groups.google.com/group/rails-oceania?hl=en> >>>>>> http://groups.google.com/group/rails-oceania?hl=en. >>>>>> >>>>>> >>>>> >>>>> >>>>> -- >>>>> >>>>> <http://Goodfordogs.org/>http://Goodfordogs.org - Adopt a dog or cat >>>>> >>>>> >>>>> -- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Ruby or Rails Oceania" group. >>>>> To post to this group, send email to <[email protected]> >>>>> [email protected]. >>>>> To unsubscribe from this group, send email to >>>>> <[email protected]> >>>>> [email protected]. >>>>> For more options, visit this group at >>>>> <http://groups.google.com/group/rails-oceania?hl=en> >>>>> http://groups.google.com/group/rails-oceania?hl=en. >>>>> >>>>> >>>>> -- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Ruby or Rails Oceania" group. >>>>> To post to this group, send email to <[email protected]> >>>>> [email protected]. >>>>> To unsubscribe from this group, send email to >>>>> <rails-oceania%[email protected]> >>>>> [email protected]. >>>>> For more options, visit this group at >>>>> <http://groups.google.com/group/rails-oceania?hl=en> >>>>> http://groups.google.com/group/rails-oceania?hl=en. >>>>> >>>> >>>> >>>> >>>> -- >>>> >>>> <http://Goodfordogs.org>http://Goodfordogs.org - Adopt a dog or cat >>>> >>>> -- >>>> You received this message because you are subscribed to the Google >>>> Groups "Ruby or Rails Oceania" group. >>>> To post to this group, send email to <[email protected]> >>>> [email protected]. >>>> To unsubscribe from this group, send email to >>>> <rails-oceania%[email protected]> >>>> [email protected]. >>>> For more options, visit this group at >>>> <http://groups.google.com/group/rails-oceania?hl=en> >>>> http://groups.google.com/group/rails-oceania?hl=en. >>>> >>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "Ruby or Rails Oceania" group. >>> To post to this group, send email to <[email protected]> >>> [email protected]. >>> To unsubscribe from this group, send email to >>> <rails-oceania%[email protected]> >>> [email protected]. >>> For more options, visit this group at >>> <http://groups.google.com/group/rails-oceania?hl=en> >>> http://groups.google.com/group/rails-oceania?hl=en. >>> >> >> >> >> -- >> >> <http://Goodfordogs.org>http://Goodfordogs.org - Adopt a dog or cat >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Ruby or Rails Oceania" group. >> To post to this group, send email to [email protected]. >> To unsubscribe from this group, send email to >> [email protected]. >> For more options, visit this group at >> http://groups.google.com/group/rails-oceania?hl=en. >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Ruby or Rails Oceania" group. >> To post to this group, send email to [email protected]. >> To unsubscribe from this group, send email to >> [email protected]<rails-oceania%[email protected]> >> . >> For more options, visit this group at >> http://groups.google.com/group/rails-oceania?hl=en. >> > > -- > You received this message because you are subscribed to the Google Groups > "Ruby or Rails Oceania" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]<rails-oceania%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/rails-oceania?hl=en. > -- http://Goodfordogs.org - Adopt a dog or cat -- You received this message because you are subscribed to the Google Groups "Ruby or Rails Oceania" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/rails-oceania?hl=en.
