• 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

    • The 2TB Samsung 990 PRO NVMe SSD hits lowest price in over three months

      By Jaybonaut · Posted

      Couple years ago I got a brand new 4TB Samsung 990 Pro for $250 during Black Friday
    • Sparkle 2.20.0

      By Jaybonaut · Posted

      Thanks
    • You pay just $100 per TB with this rare 4TB PCIe Gen4 NVMe SSD deal

      By Jaybonaut · Posted

      Can confirm, I've built stuff for others and no complaints using their products.
    • Mozilla highlights Firefox Nova 2026 redesign and more upcoming features with new roadmap

      By Jaybonaut · Posted

      Yes I agree, it's annoying. You can now miss tabs unless you point low enough.
    • Sysinternals Suite 2026.17.06

      By Copernic · Posted

      Sysinternals Suite 2026.17.06 by Razvan Serea The Sysinternals Suite is a comprehensive package of advanced Windows utilities created by Mark Russinovich, who launched the Sysinternals website in 1996 to share his system tools and technical resources. This suite combines a wide range of troubleshooting and diagnostic tools, including Process Explorer, Process Monitor, Sysmon, Autoruns, ProcDump, the PsTools collection, and many others. It provides everything IT professionals and developers need to manage, monitor, and troubleshoot Windows systems and applications. The Suite bundles all of the core troubleshooting utilities along with their help files. Non-troubleshooting extras—such as the BSOD Screen Saver or NotMyFault—are excluded. In addition to the well-known tools, it also includes AccessChk, Autologon, Ctrl2Cap, DiskView, Disk Usage (DU), LogonSessions, PageDefrag, PsLogList, PsPasswd, RegMon, RootkitRevealer, TCPView, VMMap, ZoomIt, and more. Sysinternals Suite 2026.17.06 changelog: Autoruns v14.3 - This update to Autoruns, a utility for monitoring startup items, adds bug fixes and improves the command-line application autorunsc. ZoomIt v12.1 - This update to ZoomIt, a screen magnification and annotation tool, adds image backgrounds, webcam background blur and microphone noise cancellation support. Coreinfo v4.01 - This update to Coreinfo, a tool that reports processor, socket, NUMA memory, and cache topology of a system, as well as processor features supported, adds support for new processor features. DebugView v5.02 - This update to DebugView, a tool for displaying both kernel-mode and Win32 debug output, adds Ctrl-Shift-A support for selecting all output, and agent skills support for the CLI utility. LiveKd v5.64 - This update to LiveKd, a utility that allows running the kernel debugger on a live system, fixes a debugging privileges issue. ProcDump 3.5.2 for Linux - This update to ProcDump for Linux, a tool for capturing process dumps, adds .NET counters and a custom core dumper. Process Monitor v4.04 - This update to Process Monitor, a utility for observing real-time file system, Registry, and process or thread activity, adds some bug fixes Sysmon v15.21 - This update to Sysmon, an advanced host security monitoring tool, adds some bug fixes. Download: Sysinternals Suite 2026.17.06 | 168.0 MB (Freeware) Download: Sysinternals Suite for ARM64 | 15.4 MB Link: Sysinternals Suite Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware

  • Recent Achievements

    • 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
    • One Month Later
      Vincian earned a badge
      One Month Later
    • First Post
      Jocimo earned a badge
      First Post

  • Popular Contributors

    1. 1
      +primortal
      542
    2. 2
      +Edouard
      167
    3. 3
      PsYcHoKiLLa
      85
    4. 4
      ATLien_0
      64
    5. 5
      neufuse
      64
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!