• 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

    • Apple would rather delay Siri AI than open iOS to rival assistants in the EU

      By JayZJay · Posted

      I do trust Apple probably more than these other companies with certain data, but I also do think (and it has been demonstrated that) Apple pulls a lot of shenanigans and always has for a long time.
    • Does your iPhone support the latest iOS version? Here's the iOS 27 compatibility list

      By Aditya Tiwari · Posted

      Does your iPhone support the latest iOS version? Here's the iOS 27 compatibility list by Aditya Tiwari It's that time of year when we get to know about the latest operating system updates for Apple devices. For iPhone, Apple previewed the iOS 27 update at WWDC 2026, where the company finally introduced an upgraded version of Siri. Apple typically supports iPhone models for up to five years. But it has been making exceptions in recent years (read iPhone 11). If you're wondering whether your iPhone is compatible with the iOS 27 update, here is the official list of devices: iPhone 17 Pro Max, iPhone 17 Pro, iPhone 17, iPhone 17e, iPhone Air iPhone 16 Pro Max, iPhone 16 Pro, iPhone 16, iPhone 16 Plus, iPhone 16e iPhone 15 Pro Max, iPhone 15 Pro, iPhone 15 Plus, iPhone 15 iPhone 14 Pro Max, iPhone 14 Pro, iPhone 14 Plus, iPhone 14 iPhone 13 Pro Max, iPhone 13 Pro, iPhone 13, iPhone 13 mini iPhone 12 Pro Max, iPhone 12 Pro, iPhone 12, iPhone 12 mini iPhone 11 Pro Max, iPhone 11 Pro, iPhone 11 iPhone SE (2nd generation), iPhone SE (3rd generation) So, you can download the iOS 27 developer beta on up to 31 different iPhone models. There has been no change to the list of supported iPhones since iOS 26. However, it will expand to include more devices when the iPhone 18 series arrives later this year. To download the developer beta on your iPhone, go to Settings > General > Software Update > Beta Updates. Here, select "iOS 27 Developer Beta" from the list of choices to get the new update. In addition to iOS 27, you can try the developer beta versions of macOS 27, iPadOS 27, watchOS 27, tvOS 27, and HomePod software 27 on your supported devices. iOS 27 comes with improved Liquid Glass, which you can adjust using a new transparency slider. Apple said during the keynote that iPhone apps now launch up to 30% faster, new photos appear in the Photos app up to 70% faster, and AirDrop transfers work up to 80% faster. The new update promises to improve performance on older iPhones by introducing a new CPU Scheduler that supports devices all the way back to the iPhone 11. While iOS 27 is supported on older iPhones, it goes without saying that they'll lack several features due to hardware differences. For instance, iPhone 14/14 Plus and older models come with a notch instead of the Dynamic Island. Similarly, Apple Intelligence features are supported on iPhone 15 Pro/Pro Max and later models.
    • AMD 9070XT

      By Mockingbird · Posted

      The Radeon RX 9070 XT is right up there with the GeForce RTX 5070 Ti
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By rseiler · Posted

      I don't know why someone said useless, but it does have that pesky kernel driver bundled, and it's in perennial turmoil. When it goes bad, it goes very bad, and it's impossible to predict when it will due to system differences. I know that they're in the middle of development for a major new version that will include a completely new driver, one that they expect will largely solve the problem, but that's a ways out and it's unproven at this point.
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By haxasaur · Posted

      doesn't AdGuard let ads through that pay to be let through?

  • Recent Achievements

    • Experienced
      JayZJay went up a rank
      Experienced
    • Reacting Well
      Sir_Timbit earned a badge
      Reacting Well
    • Week One Done
      rubentuben8 earned a badge
      Week One Done
    • Week One Done
      ARaclen earned a badge
      Week One Done
    • Week One Done
      jojodbn earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      524
    2. 2
      PsYcHoKiLLa
      232
    3. 3
      +Edouard
      132
    4. 4
      ATLien_0
      88
    5. 5
      Steven P.
      83
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!