• 0

Jquery plugin to do this?

Asked by eliokh,

 Share

Question

17 answers to this question

Recommended Posts

  • 0
Grand Master

LaP

Posted
Posted

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE>My first HTML document</TITLE>

<script type="text/javascript" src="jquery.min.js"></script>

<style type="text/css">

#animateMeh{background-image:url(Lutin-bg-1024.jpg); width:100px; height:100px;}

</style>

</HEAD>

<BODY>

<div id="animateMeh" onclick="$('#animateMeh').animate({height: '300px'}, 1000);"></div>

</BODY>

</HTML>

  • 0
Mentor

Guth

Posted
Posted

you might be able to do something with this:

http://jsfiddle.net/QfPyG/

CSS needs cleaning up a bit.

Same thing but with CSS only, just in case :) (My opinion is don't use JavaScript unless you have to. However, this does use CSS3 properties and OP did ask for jQuery)

http://jsfiddle.net/QfPyG/1/

  • 0
Grand Master

game_over

Posted
Posted

Same thing but with CSS only, just in case :) (My opinion is don't use JavaScript unless you have to. However, this does use CSS3 properties and OP did ask for jQuery)

http://jsfiddle.net/QfPyG/1/

Always love seeing problems solved in CSS but, certainly in this case, it's just not usable in the real world since css transitions are not supported in IE9 and below.. there are jQuery fall backs, but that kinda defeats the object.

  • 0
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted

Always love seeing problems solved in CSS but, certainly in this case, it's just not usable in the real world since css transitions are not supported in IE9 and below.. there are jQuery fall backs, but that kinda defeats the object.

I'd say forget the past and look at the future, so use CSS3 instead of jQuery if possible ^^

  • 0
Mentor

Guth

Posted
Posted

Always love seeing problems solved in CSS but, certainly in this case, it's just not usable in the real world since css transitions are not supported in IE9 and below.. there are jQuery fall backs, but that kinda defeats the object.

Yeah as I said in my post CSS3 does have its problems. I still use it though, if they are inIE8 then they will still see the div get bigger, just not the animation. If they want to run outdated browsers/software then they cant expect the full experience IMO.

However, if I had to support older browsers then I'd definitely use your method :)

I'd say forget the past and look at the future, so use CSS3 instead of jQuery if possible ^^

me too :) The more developers/designers push for it, the quicker the new standards come out and get used more widely.

  • 0
Proficient

eliokh

Posted
  • Author
Posted

Yeah as I said in my post CSS3 does have its problems. I still use it though, if they are inIE8 then they will still see the div get bigger, just not the animation. If they want to run outdated browsers/software then they cant expect the full experience IMO.

However, if I had to support older browsers then I'd definitely use your method :)

me too :) The more developers/designers push for it, the quicker the new standards come out and get used more widely.

i need support for ie6 :((((((((((((

  • 0
Grand Master

LaP

Posted
Posted

I'd say forget the past and look at the future, so use CSS3 instead of jQuery if possible ^^

CSS will not let him control the animation unless he uses CSS3 transition property which is not supported in any version of IE (maybe IE10 not sure). If he uses hover only it will be small then all of a sudden it will be big. I don't think this is what he wants. I'm not a big fan of handling user intercaction and animation using CSS3 personally as it is limited and not really what CSS has been created for.

I don't see the problem with using Javascript in this particular case. It's user interaction on click.

  • 0
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted

CSS will not let him control the animation unless he uses CSS3 transition property which is not supported in any version of IE (maybe IE10 not sure). If he uses hover only it will be small then all of a sudden it will be big. I don't think this is what he wants. I'm not a big fan of handling user intercaction and animation using CSS3 personally as it is limited and not really what CSS has been created for.

I don't see the problem with using Javascript in this particular case. It's user interaction on click.

ie10 supports everything that chrome and firefox supports including animations, I'd rather have something working in 80% of the browser market instead of the 20% internet explorer market, and I'm talking about the consumer market, not the bussines market which is the opposite lol.

  • 0
Grand Master

LaP

Posted
Posted

i need support for ie6 :((((((((((((

You don't need to support IE6 unless it's an intranet or extranet web app.

The only support you have to give for a public web site is content accessibility. Everything else is eye candy and can be ignored. Of course supporting browsers with a high market share is a given. But IE 6 market share is really low these days.

If someone ask you IE6 support challenge him. If he still want support ask him to pay for.

My shop dropped IE6 support in summer 2011. The only thing we guarantee for IE 6 is content accessibility.

The example i posted previously works (post #5). You can modifiy it to fit your need.

ie10 supports everything that chrome and firefox supports including animations, I'd rather have something working in 80% of the browser market instead of the 20% internet explorer market, and I'm talking about the consumer market, not the bussines market which is the opposite lol.

Using Javascript to animate the box on click wont make it works in only the 20% IE market. It will perfectly work in Firefox and Chrome. Imo using JS to handle use interaction is not bad practice at all as long as the web site is not bloated with over 3000 lines of Javascript spaghetti code. In this case it's really a simple JQuery line of code executed only when the user click the div. Nothing wrong with that imo. It's simple. Elegant. Does the job.

This topic is now closed to further replies.
 Share
Go to question listing

  • Posts

    • This is how much iPhone 18 Pro could cost after Apple's price hike confirmed

      By Steven P. · Posted

      Kind of glad I upgraded to S26 Ultra 1TB this year, with trade-in and discounts it cost me €1199, that's only €119 more than the S23 Ultra (256 GB) cost me. Last time I bought it via my phone provider outright with committing to two years, now via Samsung.com I reckon the S27 series will be more expensive too.
    • Politically funny images of the World

      By PsYcHoKiLLa · Posted

    • Neowin's 2026 Desktop Thread

      By TCA · Posted

      Yes. Yes, I would.
    • Save 66% on a MagTag Ultra Slim Tracker Card for Apple or Android

      By News Staff · Posted

      Save 66% on a MagTag Ultra Slim Tracker Card for Apple or Android by Steven Parker Never Lose Anything Again with MagTag Today's highlighted deal comes via our Gear + Gadgets section of the Neowin Deals store where you can save 66% on this MagTag Ultra Slim Tracker Card - Works with Apple Find My App. Keep track of your world with MagTag, a sleek, ultra-slim, reliable tracker that’s built to help you safeguard your most important items. In the size of a credit card, just 1.5mm thick, you can slip MagTag easily into your wallet, backpack, passport pouch luggage…etc. Integrated seamlessly with Apple’s FindMy app, MagTag offers precise real-time global tracking, instant left-behind alerts, loud location beeping, and a long-lasting rechargeable battery. Whether you’re heading to work, on vacation, or simply running errands, MagTag ensures you never lose what matters most. No item left behind Precision Global Tracking: Works seamlessly with the Apple FindMy app, providing real-time tracking anywhere in the world, powered by the vast Apple network. Ultra Slim Design: At just 1.5mm thick and the size of a credit card, MagTag slips easily into your wallet, passport pouch, backpack, or luggage. Instant Alerts: Receive notifications the moment you leave behind your valuables, and locate them easily with a loud beeping sound. Versatile Attachment Options: With a built-in keyring hole, attach MagTag to keys, ID lanyards, kids’ bags, or name tags for easy access and protection. Long Battery Life & Wireless Charging: Lasts up to 5 months on a single charge and can be easily recharged with any Qi wireless charger. Durable & Waterproof: IP68 waterproof and dustproof built to withstand your adventures, perfect for vacations and everyday use, no matter where life takes you. Specs Color: Black Materials: ABS Dimensions: 0.05" x 3.35" x 2.13" (1.5mm x 85mm x 54mm) Ultra-slim Apple FindMy App Built-in keyring hole Battery life: up to 5 months Charging: Qi wireless IP68 rating (waterproof, dustproof) Manufacturer's 90-day warranty Good to know Ships to US Expected Delivery: Expected Delivery: Jun 23 - Jul 2 All sales final. This item is excluded from coupons. Here's the deal: This MagTag Ultra Slim Tracker Card (for Apple or Android) normally costs $59.99, but you can pick it up for just $19.99 for a limited time - that represents a saving of $19. For a full description, specs, and shipping info, click the link below. MagTag Ultra Slim Tracker Card now just $19.99 (was $59.99) Get the two-pack and save 70% Ships only to Contiguous US Support queries If you have queries or need support for any of the Neowin Deals, please use the contact form here. Neowin Deals are managed and sold by StackCommerce who represent Neowin on an affiliate basis. Why we post these deals We post these because we earn commission on each sale so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. So for those that keep moaning and complaining, be thankful we're still online for you to even do that. Other ways to support Neowin Whitelist Neowin by not blocking our ads Create a free member account to see fewer ads Make a donation to support our day to day running costs Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: Neowin benefits from revenue of each sale made through our branded deals site powered by StackCommerce.
    • I never knew Windows had a "hidden" collection of tools

      By jordanspringer · Posted

      I cannot believe this is a news post from Neowin. This should be embarassing, coming from a "senior editor". Is it your first day using Windows?! Maybe it's time to find a new Windows news site.

  • Recent Achievements

    • Week One Done
      Huge Trailer earned a badge
      Week One Done
    • Week One Done
      Classifyskilleducation earned a badge
      Week One Done
    • One Month Later
      eurospharma62 earned a badge
      One Month Later
    • Week One Done
      With What earned a badge
      Week One Done
    • Week One Done
      Harris Gilbert earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      586
    2. 2
      +Edouard
      169
    3. 3
      PsYcHoKiLLa
      73
    4. 4
      Michael Scrip
      66
    5. 5
      ATLien_0
      64
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!