• 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

    • Traffic has a surprisingly unexpected impact on your surroundings

      By James W. · Posted

      First time clicking on a Sayan Sen article after he started making clickbait, vague headlines recently. Didn't read, just came here to say the headline doesn't look like very cheap, vague clickbait this time. Are you okay?
    • AMD RX 9070 GRE AI, Blender benchmarks vs 9070 XT, 7800XT, Nvidia RTX 5070, 4070

      By IT Cures · Posted

      Good review, and yeah the benchmark breakdown is pretty clear but also a little messy in a good way. It’s kinda interesting to see where the RX 9070 GRE slides in between the 7800 XT and the 9070 XT , especially when it comes to AI tasks and Blender style workloads. The side by side with Nvidia’s RTX 5070 and 4070 makes it feel obvious just how competitive the mid range GPU scene has gotten lately, and that’s great for creators and gamers too since you can pick based on your priorities rather than only chasing one single thing.
    • Firefox 152.0.1

      By James W. · Posted

      That's it. I finally uninstalled Firefox because they often keep pushing buggy updates, only to test them later and make users suffer. No longer is it my alternative browser to Edge. What a waste of energy. Firefox is bad for the environment, just like Chrome (wasting RAM/energy).
    • Microsoft Weekly: new Surface, Windows 11 26H2, and more

      By TarasBuria · Posted

      Microsoft Weekly: new Surface, Windows 11 26H2, and more by Taras Buria This week's news recap is here, with Microsoft announcing Windows 11 version 26H2, launching new Surface devices powered by Snapdragon X2 processors, GTA VI preorder date and cover art, fresh Windows 11 preview builds, a quirky phone-sized e-reader with a physical dial, and more. Quick links: Windows 10 and 11 Windows Insider Program Updates are available Reviews are in Gaming news Great deals to check Windows 11 and Windows 10 Here, we talk about everything happening around Microsoft's latest operating system in the Stable channel and preview builds: new features, removed features, controversies, bugs, interesting findings, and more. And, of course, you may find a word or two about older versions. Windows 11 version 26H2 is now official. Alongside Windows 11's new preview builds released this week, Microsoft confirmed version 26H2, which is coming later this year as an enablement package based on the same platform as versions 24H2 and 25H2. A newly published blog post details what IT admins should do to prepare for the upcoming launch. Next, we have new Windows 11 bugs. Users report that this month's security updates for Windows 11 cause all sorts of issues, including BitLocker bugs, OneDrive issues, black screens of death, and third-party integration in Office apps. Microsoft has not confirmed those yet, but it acknowledged other issues with its operating system. What Microsoft has confirmed is a bug where Recycle Bin delete prompts display internal file names instead of actual ones, and a year-old Windows JScript compatibility bug caused by security-focused engine changes. Moving to more positive news, Microsoft and Adobe are working on improving Windows performance in popular creative apps like Photoshop. Thanks to SPGO optimizations, users can expect up to 20% better performance. Finally, we have a few useful articles that can help you recover your PC or make it perform better. For one, we published a guide detailing what to do if your computer cannot boot after a clean Windows 11 install. There are two important steps you can try to get your system back to working in no time. Additionally, there is a more detailed guide on various CPU performance modes that could notably improve performance. Windows Insider Program Here is what Microsoft released for Windows Insiders this week: Builds Canary Channel Builds 28120.2315 and 29613.1000 These two builds include a new built-in audio driver, improvements to audio Settings, and more. Dev Channel Builds 26300.8697 and 26220.8690 Not much is available here. Some File Explorer improvements, Start menu enhancements, bug fixes, and more. However, build 26300.8697 is now officially marked as version 26H2. Updates are available This section covers software, firmware, and other notable updates (released and coming soon) delivering new features, security fixes, improvements, patches, and more from Microsoft and third parties. This week, Microsoft announced its newest Surface devices powered by Qualcomm's latest Snapdragon X2 processors. There is the 12th-gen Surface Pro and the 8th-gen Surface Laptop. Both devices feature little to no visual differences compared to their predecessors from 2024, and most changes hide inside, including a better processor, faster graphics, enhanced NPUs, and more. The Surface Laptop also received a new haptic trackpad. Mozilla is currently working on a major Firefox redesign, and earlier this week, it published a roadmap of upcoming features and highlights of the upcoming "Project Nova" rework. Files, one of the best file managers for Windows 10 and 11, has been updated in the Preview channel with a long-requested feature. Tree View is finally available in version 4.1.4, allowing you to quickly browse deeply nested folders without leaving the main view. In addition, the update improved the Windows Fonts folder, allowing you to preview each font without opening the default viewer. Rufus, another useful Windows 11 utility, also received a notable update. Version 4.15 arrived as beta with important fixes for silent Windows 11 installation. It also includes patches for ARM-based Windows PCs, OneDrive removal improvements, and more. Here are other updates and releases you may find interesting: Microsoft faces shareholder lawsuit over masking AI costs and slowing Azure growth Microsoft now allows you to tweak Visual Studio to new extremes Microsoft brings Planner Agent to all Microsoft 365 Copilot users Microsoft fixes one of Excel Copilot's most frustrating limitations Microsoft will finally let you sign in to Edge with a Google account Here are the latest drivers and firmware updates released this week: NVIDIA 610.62 with support for Empulse and various fixes. Reviews are in Here is the hardware and software we reviewed this week Earlier this week, we reviewed the DuRoBo Krono, a portable, phone-sized e-reader with some interesting physical controls. This device has an Apple Watch-like dial for page turning, frontlight adjustment, and more. Software is simple and no-nonsense, but it also lacks some useful features and customization. Overall, the device proved interesting, but not flawless. On the gaming side Learn about upcoming game releases, Xbox rumors, new hardware, software updates, freebies, deals, discounts, and more. Forza Horizon 6 received two big updates this week. Alongside the Series 2 content update, developers pushed plenty of bug fixes and balancing tweaks. However, they also had to acknowledge the Eliminator CR-farming exploit and shut down the online mode temporarily. Luckily, only a few days later, another fix arrived, which re-enabled Eliminator and patched the exploit. Microsoft announced new games for Game Pass subscribers. Those include EA Sports FC 26, Junkster, Call of Duty: Vanguard, Abyssus, RV There Yet?, and more. Some existing games are leaving the catalog, so be sure to check out the full list here. New games are also available for GeForce NOW subscribers, and they include Embers of the Uncrowned Demo, Aphelion, Megastore Simulator, OPERATOR, Citizen Sleeper, and more. Rockstart Games had plenty of GTA-related news this week. For one, the company gave GTA V players another free update. Those still playing the game on Xbox One and PlayStation 4 are no longer required to pay $40 to upgrade to the latest-gen version. More importantly, Rockstar Games revealed the GTA VI cover art and announced the preorder date. The Epic Games Store is giving away two games: Citizen Sleeper and Roboeat. These two titles are up for grabs until next Thursday, but if they are not up to your taste, you can always check out the latest Weekend PC Game Deal issue, which is usually full of discounts and specials that let you save a lot of money on new games. Great deals to check Every week, we cover many deals on different hardware and software. The following discounts are still available, so check them out. You might find something you want or need. GEEKOM X16 Pro at GEEKOM - $1,119.67 | 17% off Acer 4K Webcam for PC/Mac with All-Metal Unibody Sculpted - $59.99 | 14% off Samsung 990 PRO SSD 2TB - $369.99 | 42% off Nothing Ear Wireless Earbuds Bluetooth - $73.15 | 51% off PowerColor Reaper AMD Radeon RX 9070 16GB - $579.99 | 17% off This link will take you to other issues of the Microsoft Weekly series. You can also support Neowin by registering for a free member account or subscribing for extra member benefits, along with an ad-free tier option.
    • Microsoft confirms Recycle Bin bug across all versions of Windows

      By spacelordmaster · Posted

      ...and the problems continue.

  • Recent Achievements

    • Week One Done
      Supreme Spray LV earned a badge
      Week One Done
    • One Month Later
      Genuinetonerink- Dubai earned a badge
      One Month Later
    • Week One Done
      Genuinetonerink- Dubai earned a badge
      Week One Done
    • One Year In
      hhgygy earned a badge
      One Year In
    • Week One Done
      AMV earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      506
    2. 2
      +Edouard
      163
    3. 3
      PsYcHoKiLLa
      84
    4. 4
      Steven P.
      74
    5. 5
      Michael Scrip
      71
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!