• 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 MacBook Neo is a blessing for Windows users, here's why

      By +samw61 · Posted

      But the reality is it will work for people's needs, and they don't care about the technology that makes it. Clearly not everyone's needs, but that low end space where personal laptops were only used to type emails, watch content and browse websites, but they didn't want to do that on a small screen device. Heck, writing that out I can now see the connection and reason it'll do so well. Apple is about experience. If the experience is bad, they don't release it. Low end Windows laptop manufacturers up until this point have not taken that into consideration ever before, so slow laggy usage with brittle slimey plastic shells were common. I hope that the low end space at least creates better physical products that last a bit longer, and if Microsoft get their act together, they could also have a solid OS on such low end hardware that would actually make the experience work for what the hardware was intended for. The fact that the CPU is a "cellphone", sorry mobile phone processor is irrelevant. It's about the experience, and so far, that sounds quite solid.
    • Module Blocked - Is this Okay?

      By goretsky · Posted

      Hello, Bonjour is Apple's implementation of a multicast-DNS service, which allows devices running Apple's software and/or hardware to find each other on your local network.  I believe the Windows version was last updated around 2010. If you do not need it, you can stop and disable the Bonjour service in the Services Control Manager (filename: SERVICES.MSC).  Once you have done that, the operating system will no longer attempt to load the service. Regards, Aryeh Goretsky  
    • This AMD RX 9070 16GB GPU that performs close to Nvidia 5070 is under $600

      By hellowalkman · Posted

      This AMD RX 9070 16GB GPU that performs close to Nvidia 5070 is under $600 by Sayan Sen With the memory shortage that's prevalent nowadays, discounts are super-hard to get. As such we post good deals whenever they pop up. Recently, we covered a few great discounts on SSDs wherein you can get a 4TB TeamGroup NVMe PCIe Gen4 drive for just $400 thanks to a special coupon. If you want a faster product but don't need all that capacity, you can also opt for Samsung's 990 PRO 2TB that is on sale for its lowest price in over three months. Let's say though that you are on the hunt for a 1440p gaming card. In that case AMD's RX 9070 non-XT can help, and with its 16GB VRAM, you can also run AI models locally without worrying about bottlenecking (check out our recent 9070 GRE reviews for gaming and productivity to get an idea). The PowerColor Reaper variant of the RX 9070 is currently on sale for just $580 which is a very good price in the current state of affairs (purchase link under the specs table down below). The Reaper cooler on this 9070 uses a triple‑fan design with ring‑blade fans, paired with premium dual ball bearings to extend lifespan and reduce friction. "Intelligent" fan control allows the fans to remain idle at lower temperatures, only spinning up when the GPU is under load. A nickel‑plated copper base makes direct contact with both the GPU and memory modules, helping to spread heat evenly. PowerColor also applies Honeywell PTM7950 phase‑change thermal interface material (TIM), which fills microscopic gaps between the die and heatsink for more efficient thermal transfer. The fan shroud is shorter in height as the firm has made it such that it can be used in certain SFF (small form factor) cases. The technical specifications of the Reaper RX 9070 are given in the table below: Specification Value Stream Processors 3584 Units Video Memory 16GB GDDR6 Memory Speed 20.0 Gbps Memory Interface 256-bit Engine Clock Game Clock: up to 2070 MHz Boost Clock: up to 2520 MHz Bus Standard PCI Express 5.0 x16 Display Connectors 1 x HDMI 2.1b, 3 x DisplayPort 2.1a Maximum Resolution DisplayPort: 7680 × 4320 HDMI: 7680 × 4320 Board Dimensions 289mm × 111mm × 41mm 304mm × 127mm × 42mm (with bracket) Slot 2 Minimum System Power Requirement 600W Power Connectors Two 8-pin PCI Express Get the PowerColor Reaper RX 9070 at the links below (you get only a 90-day warranty on Woot): PowerColor Reaper Radeon RX 9070 16GB Graphics Card (RX9070 16G-A): $579.99 (Sold and Shipped by Amazon US) (Was: $700) PowerColor Reaper Radeon RX 9070 16GB Graphics Card (RX9070 16G-A): $559.99 (Sold and Shipped by Woot US) Good to know This Amazon deal is U.S. specific, and not available in other regions unless specified. We only use first-party seller links (at the time of article publishing); ensure that you purchase from a first-party seller link only. Check out Today's Deals on Amazon | or our recent tech deals. Become a Prime member (for Students or SNAP) via Neowin Get Prime Access - Prime for half price (for qualifying Medicaid, EBT, SNAP) Subscribe to Prime Video, Audible Plus, Music Unlimited or Kindle Unlimited via Neowin As an Amazon Associate, we earn from qualifying purchases.
    • DWARF mini review: the world's smallest smart telescope for night and day sky captures

      By ZipZapRap · Posted

      Are they marketed as an entry into astronomy or astrophotography? I do astrophotography. With big rigs, lots of computers, cables and headaches. I love it. And by learning this ridiculously complex hobby, I’ve learned about the objects I’m shooting. Astronomy followed from photography.
    • Microsoft confirms Recycle Bin bug across all versions of Windows

      By Usama Jawad96 · Posted

      Microsoft confirms Recycle Bin bug across all versions of Windows by Usama Jawad A couple of days ago, we reported that the latest Patch Tuesday update has seemingly resulted in a lot of issues for many users, including OneDrive and Dropbox access problems, BitLocker recovery lockouts, and BSODs. Although Microsoft is yet to acknowledge these bugs, it has confirmed another, relatively smaller issue across all supported versions of Windows. In an update on its Windows Release Health Dashboard, Microsoft has confirmed that after installing June's Patch Tuesday update (KB5094126), you'll experience unexpected behavior when leveraging Recycle Bin. Basically, when you attempt to delete an item from the Recycle Bin, the confirm dialog will show you the internal file name of that content rather than the actual name. For example, the file may be named abc.png, but the confirm dialog will ask if you're sure that you want to permanently delete $Rxxxxx.png from the Recycle Bin. This is pretty much it for the scope of the bug itself; it just displays the wrong name in the confirm dialog. The correct name will be shown in the list view of the Recycle Bin and if you restore the file, it will return with the correct name as well. This issue affects pretty much all supported versions of Windows client and server, including: Client: Windows 11, version 26H1; Windows 11, version 25H2; Windows 11, version 24H2; Windows 11, version 23H2; Windows 10, version 22H2; Windows 10 Enterprise LTSC 2021; Windows 10 Enterprise LTSC 2019; Windows 10 Enterprise LTSB 2016 Server: Windows Server 2025; Windows Server 2022; Windows Server 2019; Windows Server 2016; Windows Server 2012 R2; Windows Server 2012 As things currently stand, Microsoft is working on a concrete solution that will be released in a "future" Windows update. It remains to be seen if the firm will wait till the next Patch Tuesday or roll out an out-of-band (OOB) fix. The good news is that commercial customers can deploy a workaround right now, but they will have to reach out to Microsoft Support for Business for additional details.

  • Recent Achievements

    • Week One Done
      Jordan Smith earned a badge
      Week One Done
    • Reacting Well
      BizSAR earned a badge
      Reacting Well
    • First Post
      AndreaB earned a badge
      First Post
    • Week One Done
      Huge Trailer earned a badge
      Week One Done
    • Week One Done
      Classifyskilleducation earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      578
    2. 2
      +Edouard
      184
    3. 3
      PsYcHoKiLLa
      75
    4. 4
      Michael Scrip
      72
    5. 5
      neufuse
      64
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!