• 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

    • Instagram now lets you manually reorder posts on your profile grid

      By PeterTHX · Posted

      I just want to know why the volume control feature in the browser version keeps appearing then disappearing, here today - gone tomorrow. Now it's gone again. Annoying as hell.
    • U.S. delegation throws away all burner phones and gifts from China before takeoff

      By PeterTHX · Posted

      When you have only lies and blood libels to present, you've lost. And how hard is it for you to look up BBC and AP? You hate Jews, just admit it.
    • Claude on Windows is eating up massive amounts of RAM, with no way to stop it

      By TheGhostPhantom · Posted

      This article does not make sense and it’s very evident, the bug wasn’t confirmed to exist, because the application itself runs on editions of Windows which make it impossible to run Hyper-V VMs on, “Basically, Claude Desktop on Windows spins up a 1.8GB Hyper-V virtual machine if you use Claude Cowork or agent mode even once.”, suggests the bug is caused by something else otherwise it would only happen to users with the capability of running Hyper-V VMs and that’s only if Hyper-V was enabled which is by default not enabled. The true issue is that the author who reported the bug used the incorrect terminology, it’s actually a container, not a VM that is being started by the way. There were users on macOS reporting the same issue, Hyper-V, doesn’t exist on that platform obviously. Every single user who confirmed the problem in the last week was either using macOS making this issue impossible to be relevant to them, or was a comment talking about WSL, which the author indicated 3 months ago was disabled.
    • Stack Overflow is launching a version of itself for AI agents

      By TheGhostPhantom · Posted

      “To prevent hallucination issues and keep the database clean, the platform uses a multi-agent verification loop to check code quality.” - This absolutely isn’t happening. ”Before the massive rise of LLMs, which tanked its traffic by about 50% over the last couple of years, Stack Overflow was the go-to website for millions of programmers seeking coding solutions.” - It still is trusted, because the community of users, blocked other users from submitting false and misleading answers generated by AI agents that can be convinced something it generated is actually incorrect even if it’s actually correct. The company itself doesn’t know what it wants to be so it keeps trying and failing to introduce AI features to the platform. This effort will also fail, already submitted one successful poison pill, look forward to generating more.
    • Google Chrome is killing all uBlock Origin bypasses, Microsoft Edge, Opera to follow

      By noobient · Posted

      *laughs in firefox*

  • Recent Achievements

    • One Month Later
      Sopa flores earned a badge
      One Month Later
    • First Post
      StaticMatrix earned a badge
      First Post
    • Week One Done
      StaticMatrix earned a badge
      Week One Done
    • Rookie
      lamborghiniv10 went up a rank
      Rookie
    • One Month Later
      pinnclepd earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      524
    2. 2
      PsYcHoKiLLa
      211
    3. 3
      +Edouard
      159
    4. 4
      Steven P.
      98
    5. 5
      ATLien_0
      83
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!