• 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

    • The official Funny Pictures thread

      By +primortal · Posted

    • Playground Games confirms Forza Horizon 6 save wipe bug

      By TarasBuria · Posted

      Playground Games confirms Forza Horizon 6 save wipe bug by Taras Buria Forza Horizon 6 was launched last month to critical acclaim (check out our review here), and it became a smash hit in an instant. Now, weeks into the launch, with die-hard fans clocking hundreds of hours, Forza Horizon 6 is facing a serious issue: save wipes. After multiple complaints on Reddit and social media, the studio issued a statement. The problem with missing saves came shortly after Playground Games promised the initial batch of gameplay tweaks and improvements. Unfortunately, there seems to be no temporary fixes for those affected by unexpected save wipes. However, the studio published a new support document with a few important steps users should try. First, affected gamers should open a support ticket immediately (go here to file one) so that the support team can try recovering the lost progress by reverting to an earlier save. Playground Games says this should be done the same day the issue occurs. Meanwhile, gamers are urged not to start new play sessions or create new saves. The studio also published a few things gamers should try to avoid to prevent potential progress loss: Ensure your Gaming Services app on PC or XBOX Series X|S console is fully up to date. On XBOX Series X|S consoles, disable Quick Resume for Forza Horizon 6: To disable Forza Horizon 6 from using Quick Resume, highlight the game box art anywhere in the console experience (Home, My Games & Apps, Pins, etc) and then press the Menu button, then go to Manage game and add-ons > Quick Resume settings > Disable Quick Resume. Ensure you are online when ‘quitting’ the game. Give your saved time to sync to the cloud before powering off or switching devices. Do not force quit the game during save screens. Do not power off the device during gameplay. Always "Quit" (console) or "Exit to desktop" (PC) once you've finished your play session, ensuring the save icon is not visible when you’re closing the game. Before turning off your console, shutting down your PC, or force-closing the Steam app, give your devices or clients at least a few minutes to ensure your latest progress has been synchronized with the cloud. This will reduce the risk of progress reversions as you switch between different platforms. XBOX Series X|S consoles, Steam, and the XBOX app on PC all include game save indicators that confirm your progress has been synced. You can read more about the bug in the official support document here. Forza Horizon 6 is currently available on PC (Steam and the Microsoft Store), Xbox Series X|S, and Game Pass. The game is also coming to PlayStation 5 later this year.
    • The official Funny Pictures thread

      By +primortal · Posted

    • Windows 11's big performance boost is finally available for all

      By leonsk29 · Posted

      If only Windows would have a toggle switch labeled "Get the latest updates as soon as possible" inside Windows Update settings... But nah, let's hide the new stuff inside a controlled feature rollout, even if the user is explicitly asking for the new stuff as soon as possible. Awesome idea!
    • Windows 11's big performance boost is finally available for all

      By Snake Doc · Posted

      After watching the Apple event earlier this week it is quite the contrast. Apple is going back and tweaking the code to make things more efficient in many areas of MacOS. Windows is boosting your electric build to hide their issues.

  • Recent Achievements

    • One Year In
      slackerzz earned a badge
      One Year In
    • One Year In
      highriskpaym earned a badge
      One Year In
    • One Month Later
      highriskpaym earned a badge
      One Month Later
    • Week One Done
      highriskpaym earned a badge
      Week One Done
    • Week One Done
      FBSPL earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      502
    2. 2
      PsYcHoKiLLa
      199
    3. 3
      +Edouard
      157
    4. 4
      Steven P.
      84
    5. 5
      ATLien_0
      74
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!