• 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

    • Should Microsoft be forced to stop promoting Edge over other browsers?

      By cleverclogs · Posted

      I haven't paid for windows since windows 8. So I guess I would be happy to pay for a new version if it meant seeing fewer adverts (none) or product pushes. But that applies to _any_ service or OS.
    • Microsoft wants to end printer driver headaches with Windows Ready Print

      By cork1958 · Posted

      Edit: Oops! Wrong topic! :(
    • Save 35% on Sony's SS-CS5M2 3-way high-res bookshelf speakers

      By TarasBuria · Posted

      Save 35% on Sony's SS-CS5M2 3-way high-res bookshelf speakers by Taras Buria Sony is currently offering a big discount on its SS-CS5M2 bookshelf speaker, saving you 35% on a set of high-quality audio equipment. The SS-CS5M2 is a passive 3-way bookshelf speaker with a 5.12-inch woofer, a 25 mm soft-dome tweeter, and a 19 mm super tweeter. This design allows different drivers to handle different parts of the sound spectrum for a clearer, more detailed audio when watching movies or listening to music. The compact cabinet size allows you to place these speakers on shelves, desks, or stands, making them a practical choice for apartments, bedrooms, and small living rooms. Despite its compact size, the SS-CS5M2 delivers up to 100 W of power. Note that since the speakers are passive, you will need an amplifier to drive them. However, if you do, you can use them for high-resolution music, thanks to a claimed frequency response of 53 Hz - 50 kHz. It is able to extend so far high in the spectrum as a result of those super tweeters. While they will work with most amplifiers and AV receivers, Sony says this pair is a perfect match for its AV receivers, such as STRDH190, 590, 790, or 1000. Sony CS Bookshelf Speakers SS-CS5M2 3-Way 3-Driver Hi-res - $178 | 36% off on Amazon US This Amazon deal is US-specific and not available in other regions unless specified. This is a first-party seller link (at the time of article publishing); ensure that you also purchase from a first-party seller link only. If you don't like it or want to look at more options, check out the previous deals that we have covered, OR you can also visit Amazon US deals page. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • EU Commission explains why Siri AI isn't launching in the EU, and Apple is to blame

      By AltecXP · Posted

      So they somehow expect Apple to easily make it so that if I install say DeepSeek that DS can then handle all the tasks that Siri would be doing while integrated in the OS? That sounds like just rediculous.
    • AMD 9070XT

      By Mockingbird · Posted

      For ray-tracing, the Radeon RX 9070 XT is better than the GeForce RTX 5070, but worse than the GeForce RTX 5070 Ti The Radeon RX 9070 XT is similar to the GeForce RTX 5070 Ti in rasterization Both AMD and NVIDIA have had serious issues with drivers in the past, so I can't say that one is better or worse than the other. Yes. AMD has better support Linux than does NVIDIA. Use Display Driver Uninstaller (DDU) to uninstall NVIDIA's drivers before installing AMD's drivers. That's up to you. Supplies of memory is unpredictable because AI using up a lot of memory. As a result, there is a lot of volatility in video card prices.

  • Recent Achievements

    • One Month Later
      pinnclepd earned a badge
      One Month Later
    • First Post
      X-No-file earned a badge
      First Post
    • One Month Later
      johnjacobb40 earned a badge
      One Month Later
    • One Year In
      Primer1st earned a badge
      One Year In
    • Experienced
      JayZJay went up a rank
      Experienced

  • Popular Contributors

    1. 1
      +primortal
      510
    2. 2
      PsYcHoKiLLa
      215
    3. 3
      +Edouard
      145
    4. 4
      Steven P.
      88
    5. 5
      ATLien_0
      83
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!