• 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

    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By Steven P. · Posted

      🥹
    • Universal USB Installer 2.0.3.6

      By Copernic · Posted

      Universal USB Installer 2.0.3.6 by Razvan Serea The Universal USB Installer (UUI) is a powerful bootable USB software tool for creating USB boot drives from ISO files, perfect for installing Linux or Windows, running live systems, or building diagnostic toolkits. This versatile ISO-to-USB software makes it easy to boot from USB and create Live USBs for Linux distributions, Windows setup installers, antivirus tools, and system diagnostic utilities. Whether you need a multisystem Windows Media Creation Tool, a Live USB Linux installer, or an all-in-one PC diagnostic toolkit, UUI offers a reliable and flexible Linux and Windows bootable USB creator. Effortlessly carry your favorite portable operating systems and essential troubleshooting and diagnostic tools on a single flash drive or USB boot stick. Take your preferred Live Linux distributions, Windows installers, recovery software, backup utilities, and diagnostic tools with you, all bootable from a single USB drive. No more juggling multiple USB sticks or complicated bootloaders, UUI consolidates everything into one flexible, multiboot solution. Using this open source USB boot maker software is easy as 123. To create a Linux or Windows bootable USB drive, you simply select your target flash drive, choose your distribution from the list, browse to the ISO file (or choose to download the ISO), and then click Create. Once finished, you should have a ready to run Live USB containing the Live operating system, Windows installation media, or system diagnostics utility, or advanced system cleaner tool you previously selected. Universal USB Installer 2.0.3.6 fixes: Fixed volume label never being set after disk preparation. Fixed selected disk not being restored when returning to the drive selection page after preparation. Download: Universal USB Installer 2.0.3.6 | 19.4 MB (Open Source) Link: Universal USB Installer Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Should Microsoft be forced to stop promoting Edge over other browsers?

      By FBSPL · Posted

      Browser vendors including Chrome, Firefox, Brave, and Vivaldi have jointly written an open letter to Microsoft saying enough is enough regarding Edge being pushed on Windows users without consent. Microsoft makes it difficult to change the default browser, promotes Edge throughout Windows 11, and has made the uninstall process unnecessarily complicated compared to other apps. Does anyone have more details on what exactly the open letter demands and whether any regulatory action is being considered? Also curious whether this could lead to antitrust investigations similar to what happened with Internet Explorer back in the day. Would love to hear from anyone following this closely.
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By Steven P. · Posted

      Amen, they are a shady company... they modify my site to remove inline ads and then cry about subscribing to their services, a few things they "bravely" did in recent years: In 2020, Brave was caught automatically appending its own affiliate referral codes to URLs when users typed the web addresses of crypto exchanges (like Binance and Coinbase) into the address bar. Following significant backlash, the CEO apologized and the feature was disabled. In 2023, the company faced criticism after users noticed a paid VPN service was installed on their computers without their explicit consent. TOR Privacy Leak: In 2021, Brave's private Tor tabs were found to be leaking DNS queries to internet service providers, a flaw that was subsequently patched. Passive Cryptocurrency Donations: In early versions of the browser, Brave automatically collected user contributions and held them in a pool to be distributed to creators. If a creator had not signed up to claim their funds within a certain time frame, the process sparked criticism about where the money went.
    • Microsoft AI boss no longer believes that AI will replace human workers

      By Snake Doc · Posted

      I think they still believe it but are realizing that those statements created massive backlash and impacted adoption. I personally think AI, if used regularly will give you back about 30% of your time if you are an “information” worker.

  • Recent Achievements

    • 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
    • Reacting Well
      Sir_Timbit earned a badge
      Reacting Well
    • Week One Done
      rubentuben8 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      509
    2. 2
      PsYcHoKiLLa
      229
    3. 3
      +Edouard
      144
    4. 4
      ATLien_0
      86
    5. 5
      Steven P.
      82
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!