• 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

    • Poll: Grand Theft Auto VI price predictions, cast your vote

      By noobient · Posted

      $80 or 90%, anything else would be financial suicide one way or another.
    • Why you need to take back control of your synced passwords and how to go about doing that

      By noobient · Posted

      Or... just use Bitwarden. Free, and has on-prem option as well. Works both on desktop and mobile, wherever you are. The age of local password files is over.
    • Mp3tag 3.35

      By Jaybonaut · Posted

      Thanks
    • Why you need to take back control of your synced passwords and how to go about doing that

      By +Warwagon · Posted

      I actually got to use one of those so called "backup codes" once. It was for a customer, I choose the backup code option, and by the grace of god, they actually hade them printed out. Imagine my surprise, when after using the backup code, Google then told use we had to enter a code they just sent to the gmail address we currently did not have access to. I was not amused, Google backup codes should be the end all get out of jail free card, because you had to have access to the account to even get them.
    • Why you need to take back control of your synced passwords and how to go about doing that

      By Snake Doc · Posted

      On the topic of being locked out of a service. Recently two different friends of mine got locked out of their Google accounts. Both were hack attempts and one of them is waiting 30 days before he can get back in. He had backup codes and MFA but not a passkey. It was a browser token hack. Anyhow he has to wait 30 days for the dispute or whatever to end. The other person only had a password and is screwed losing all of the email, docs and years of photos. Google won’t help her at all. Her fault because she had no backup/recovery setup. Enable passkeys if possible. Also do NOT use browser based password managers. If using a cloud service make sure it is one you can fully sync to one of your devices so you can back it up. Like a PC or Mac with some backup drive plugged into it. Google is the worst to use IMHO. You can’t sync your photos at all. You have to use the “Take Out” service which is manual and takes days. That service strips the meta data from your photos. Also Google Docs synced to a device are useless without a Google accounts. MS Office/Libre Office is not going to open a link to a Google doc to a dead account.

  • 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
      513
    2. 2
      +Edouard
      164
    3. 3
      PsYcHoKiLLa
      88
    4. 4
      Steven P.
      74
    5. 5
      Michael Scrip
      73
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!