• 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

    • Upgrade for cheap to Windows 11 Pro or Home Edition digital license

      By News Staff · Posted

      Upgrade for cheap to Windows 11 Pro or Home Edition digital license by Steven Parker Today's highlighted deal comes via our Apps + Software section of the Neowin Deals store, where you can save up to 94% off on a Microsoft Windows 11 Home, or Pro digital license. Upgrade your computing experience with Windows 11 Pro. This cutting-edge operating system boasts a sleek new design and advanced tools to help you work faster and smarter. From creative projects to gaming and beyond, Windows 11 delivers the power and flexibility you need to achieve your goals. With a focus on productivity, the new features are easy to learn and use, enhancing your workflow and efficiency. Whether you're a student, professional, gamer, or creative, Windows 11 Home has everything you need to take your productivity to the next level. New interface. easier on the eyes & easier to use Biometrics login*.Encrypted authentication & advanced antivirus defenses DirectX 12 Ultimate. Play the latest games with graphics that rival reality. DirectX 12 Ultimate comes ready to maximize your hardware* Screen space. Snap layouts, desktops & seamless redocking Widgets. Stay up-to-date with the content you love & the new you care about Microsoft Teams. Stay in touch with friends and family with Microsoft Teams, which can be seamlessly integrated into your taskbar** Wake & lock. Automatically wake up when you approach and lock when you leave Smart App Control. Provides a layer of security by only permitting apps with good reputations to be installed Windows Studio Effects. Designed with Background Blur, Eye Contact, Voice Focus, & Automatic Framing Touchscreen. For a true mouse-less or keyboard-less experience TPM 2.0. Helps prevent unwanted tampering Windows 11 Pro also includes a number of productivity-focused features, such as the ability to snap multiple windows together and create custom layouts, improved voice typing, and a new, more powerful search experience. Personal and professional users will enjoy a modern and secure computing experience, with improved performance and productivity features to help users get more done. Only on Windows 11 Pro If you require enterprise-oriented features for your daily professional tasks, then Windows 11 Pro is a better option. Set up with a local account (only when set up for work or school) Join Active Directory/Azure AD Hyper-V Windows Sandbox Microsoft Remote Desktop BitLocker device encryption Windows Information Protection Mobile device management (MDM) Group Policy Enterprise State Roaming with Azure Assigned Access Dynamic Provisioning Windows Update for Business Kiosk mode Maximum RAM: 2TB Maximum no. of CPUs: 2 Maximum no. of CPU cores: 128 Good to know This license is for Windows 11 only. It is NOT intended to be used for upgrading Microsoft Office (MSO) included in Parallels Pro. However, it will still work with Parallels Pro and allow you to run Windows applications including MSO, but it DOES NOT include an upgrade MSO itself. It is still compatible with Microsoft Office ONLY if you have a separate license for it. Length of access: lifetime Redemption deadline: redeem your code within 30 days of purchase Access options: desktop Max number of device(s): 1 Version: Windows 11 Pro Updates included Queries on legality of this deal, here A Windows 11 Pro retail license normally costs $199, with Windows 11 Home usually costing $139 but you can pick either one up for just $9.97 for a limited time. For a full description, specs, and license info, click the link below. Get Windows 11 Pro for just $9.97 (was $199) Get Windows 11 Home for just $9.97 (was $139) Although priced in U.S. dollars, this deal is available for digital purchase worldwide. Support queries If you have queries or need support for any of the Neowin Deals, please use the contact form here. Neowin Deals are managed and sold by StackCommerce who represent Neowin on an affiliate basis. Why we post these deals We post these because we earn commission on each sale so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. So for those that keep moaning and complaining, be thankful we're still online for you to even do that. Other ways to support Neowin Whitelist Neowin by not blocking our ads Create a free member account to see fewer ads Make a donation to support our day to day running costs Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: Neowin benefits from revenue of each sale made through our branded deals site powered by StackCommerce.
    • Politically funny images of the World

      By Dan~ · Posted

      Why say “Retarded” then? Lol 
    • Microsoft confirms Windows 11 26H2 to finally get one of the most requested features

      By sphbecker · Posted

      If you don't care to read what I said, then you prove my point. Maybe written media is beyond your attention span. Titles are not summaries my friend.
    • Politically funny images of the World

      By +Nik Louch · Posted

      Nobody asked... in fact, I said "I don't care about political leanings"  
    • Microsoft confirms Windows 11 26H2 to finally get one of the most requested features

      By Elliot B. · Posted

      TLDR. Here is a far better title (just a basic example): Windows 11 26H2 to allow disabling Web search results

  • Recent Achievements

    • Dedicated
      tuben earned a badge
      Dedicated
    • Week One Done
      mnsgroup earned a badge
      Week One Done
    • Conversation Starter
      sumytbe earned a badge
      Conversation Starter
    • One Year In
      B4dM1k3 earned a badge
      One Year In
    • One Year In
      DarkWun earned a badge
      One Year In

  • Popular Contributors

    1. 1
      +primortal
      519
    2. 2
      +Edouard
      199
    3. 3
      PsYcHoKiLLa
      95
    4. 4
      Michael Scrip
      82
    5. 5
      Steven P.
      67
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!