• 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

    • Glary Utilities 6.43.0.47

      By Copernic · Posted

      Glary Utilities 6.43.0.47 by Razvan Serea Glary Utilities offers numerous powerful and easy-to-use system tools and utilities to fix, speed up, maintain and protect your PC. Glary Utilities allow you to clean common system junk files, as well as invalid registry entries and Internet traces. You can manage and delete browser add-ons, analyze disk space usage and find duplicate files. You can also view and manage installed shell extensions, encrypt your files from unauthorized access and use, split large files into smaller manageable files and then rejoin them. Furthermore, Glary Utilities includes the options to find, fix, or remove broken Windows shortcuts, manage the programs that start at Windows startup and uninstall software. All Glary Utilities tools can be accessed through an eye-pleasing and totally simplistic interface. Glary Utilities 6.43.0.47 changelog: Optimized Memory Defrager: Optimized the clipboard cleaning algorithm, increasing speed by 5%. Optimized Wipe Free Space: Optimized the free space wiping algorithm, increasing speed by 8%. Minor GUI improvements. Minor bug fixes. Download: Glary Utilities 6.43.0.47 | 27.0 MB (Freeware) Download: Portable Glary Utilities | 32.3 MB View: Glary Utilities Homepage | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By +Edouard · Posted

      "Of course the easiest solution is to switch to uBlock Origin Lite if you want to remain on Chrome, as it is MV3-based, but from our experience, uBO Lite does not seem to be as good as the original non-Lite version" In my experience uBlock Origin Lite does the job for normal everday home users. When they kill that we get to watch Firefox and Brave get a boost in user market share.
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By TheGhostPhantom · Posted

      Block by DNS ad blocker! I dare you! I will even layer unlock Origin, on top of my internal DNS, if I need to and I don’t even block ads today (I really should but this type of behavior makes me angry). I suppose I could also just be lazy, and add the flags myself, back to each release (it wouldn’t be that difficult).
    • UK nudity blockers are a looming privacy disaster, we must be able to see the source code

      By ExecutiveFunction404 · Posted

      Wonder what MPs have ties to these privacy/verification/data harvesting companies that are going to step in this time. Last time under the Tories half the cabinet had fingers in the pies, heck even the PM and his wife at the time was working for silicon valley, probably made a fortune.
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By hellowalkman · Posted

      Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow by Sayan Sen For a while now the transition away from Manifest V2 (MV2) to MV3 has been on-going and it looks like it is entering its final phase of deprecation, at least, in the case of Google Chrome. A recent discussion thread in the w3c WebExtensions Community Group GitHub repo has highlighted how the latest and upcoming versions of the most popular browser are expected to be its final releases with support for MV2 extensions. Chromium contributor Andrey Bershanskiy shared details about recent Chromium changes and according to comments from Google engineer Devlin Cronin, Chrome has now started removing the flags that previously controlled MV2 availability. kExtensionManifestV2Disabled, the Chromium feature flag that allowed controlled disabling of MV2 add-ons, is now completely removed, which means you will likely no longer find uBlock Origin in your browser extensions list. He wrote: "The kExtensionManifestV2Disabled feature has been default-enabled for over a year. Remove the feature and the effectively-dead code. ... Any tests that relied on being in the "warning" phase (i.e., with the kExtensionManifestV2Disabled) for their sole behavior testing are removed, since this stage is no longer reachable." Cronin further explained why MV2 extensions are no longer allowed in supported Chrome versions as maintaining the associated functionality indefinitely is no longer possible. He cited growing technical difficulties and implementation complexities as well as security concerns. He wrote: "MV2 extensions are no longer allowed in any supported version of Chrome, and we are removing support for them and the associated functionality. We won't be able to provide / maintain this functionality indefinitely due to the complexity and tech debt, as well as the security risks it entails (we've actually found a number of bugs that are specific to MV2 lately). Of course, other browsers can continue supporting these if they so desire. Unfortunately, we won't be putting code behind a compilation flag ... We won't be removing all the MV2 code wholesale right away, so many of these things will continue working for awhile (but they will go away eventually, and some may go away sooner than others)." What this essentially means is that the tricks and bypasses that were used to keep MV2 extensions like uBlock Origin and others alive will not work any more on Chrome, or at least not for very long. For example the Windows Registry mod that could extend MV2 availability will cease to function after Chromium version 151. Here is a rundown of the changes coming in the final such releases of Chromium releases: Chromium 150 lost ExtensionManifestV2Disabled option Chromium 151 will loose ExtensionManifestV2Unsupported option Chromium 151 will loose ExtensionManifestV2Availability option Chromium 151 will likely loose AllowLegacyMV2Extensions option Other Chromium-based browsers like Opera and Microsoft Edge could soon follow suit too. Although it is not specified, Edge began disabling uBlock Origin back in February, and Opera could also stop the functioning of MV2 add-ons, even though it had committed to support MV2 for longer in October 2024. uBlock Origin developer Raymond Hill (gorhill) apparently stated the following: "For Opera I did submit 1.70.0 rather late, but this was weeks ago. A while ago I received an email from Opera that they plan to abandon MV2-based extension so maybe they are no longer allocating resources for reviewing such extensions." The email which developers like Gorhill mentions was received from Opera last year. Here is what it seemingly said: Hence for now the only Chromium browser that seems to be on-board fully with MV2 support is Brave, and perhaps Vivaldi as well. Meanwhile if you want to ditch Chromium browsers entirely then Mozilla Firefox is an excellent alternative as MV3 and MV2 are both supported. Of course the easiest solution is to switch to uBlock Origin Lite if you want to remain on Chrome, as it is MV3-based, but from our experience, uBO Lite does not seem to be as good as the original non-Lite version. Source: w3C (GitHub repo) As an online publication, Neowin too relies on ads for operating costs and, if you use an ad blocker, we'd appreciate being whitelisted. In addition, we have an ad-free subscription for $28 a year, which is another way to show support!

  • Recent Achievements

    • Week One Done
      skylerssviv earned a badge
      Week One Done
    • One Month Later
      mobmobiles earned a badge
      One Month Later
    • Very Popular
      Captain_Eric earned a badge
      Very Popular
    • One Month Later
      amusc earned a badge
      One Month Later
    • One Month Later
      DJC50PLUS earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      501
    2. 2
      PsYcHoKiLLa
      217
    3. 3
      ATLien_0
      92
    4. 4
      +Edouard
      90
    5. 5
      Steven P.
      82
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!