• 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

    • Microsoft's new Xbox Shutdown change promises massive power efficiency gains

      By PWazzle · Posted

      We need a game update frequency setting. * Right now your recent games will be auto updated overnight, and your unrecent games won't be updated. The bifurcation of recent and unrecent is fine, but we should be able to control the update frequency for both, with any of the following options: 1. Don't auto update 2. Auto update weekly 3. Auto update overnight 3. Auto update immediately (push) i.e. When I'm playing a lot, I want my recently played games to have push updates, so if a dev releases an update at 4pm, it's already downloaded on my Xbox by the time I get home. The current overnight cadence leaves a lot of wasted time waiting for updates on slow connections. My infrequently played games in ok with deferring to overnight, or maybe weekly, but let the users control their frequency. Basing it on data and last played sounds smart but ignores the human reality that often when I'm busiest and have the least time for games is when it sucks the most to come home and find a huge update list waiting for you.
    • U.S. delegation throws away all burner phones and gifts from China before takeoff

      By AsherGZ · Posted

      Genocide is intent to exterminate and both the Israeli government AND its people openly declare, even boast about their intent to exterminate Arabs. This society of sick psychopaths has even made songs about it. Zionist means believing Israel should exist as an religious ethno-state where only Jews have rights and everyone else is second class citizen. As for the blood libel thing, we already know zionists get off on killing children. We also know Israel is a safe heaven for all the pedophiles and rapists of the world. Honestly, after what we saw in the Epstein files, I wouldn't put anything past this depraved death cult. Of course all atrocities committed by tHe wOrLds mOsT mOrAl aRmY are always "unproven or taken out of context". Unfortunately for them, their soldiers are dumb enough to leave a trail of their war crimes all over social media. Then again, when you live in a society that's obsessed with death and destruction, posting videos of yourself in the act of ransacking homes and desecrating religious monuments earns you brownie points I guess. Israel is the only society in the world where people come out on the roads for the right to **** prisoners. Also claiming that the BBC said this and AP said that without so much as a link has gotten me curious. Are all zionists this dumb? I really hope you aren't getting paid for this because this is some low effort propaganda.
    • Should Microsoft be forced to stop promoting Edge over other browsers?

      By Som · Posted

      Why not just disable it?
    • Microsoft is bringing big performance improvements to OneDrive on Mac

      By TarasBuria · Posted

      Microsoft is bringing big performance improvements to OneDrive on Mac by Taras Buria Microsoft has announced a major update for the OneDrive client on macOS. Today, the company released version 26.098, promising significantly faster sync, optimized CPU usage, a smaller memory footprint, and better energy efficiency. In a newly published blog post, Microsoft acknowledged that changes implemented in OneDrive for Mac in 2022 brought some unwanted side effects. Due to architectural changes and the need to keep the OneDrive sync engine unchanged, Microsoft created a hidden cache folder. With time, it would cause reliability and performance issues for customers. Now, Microsoft is ditching the old engine for native sync, delivering a faster, more reliable experience. As a result of this change, OneDrive for Mac now integrates more deeply into the operating system, offers about two times faster sync performance, and uses fewer system resources. While the hidden folder still exists, the app only uses it to store files that have not been uploaded yet, link file types, and macOS-related packages. In total, even when holding hundreds of files, the temporary folder does not take more than a couple of megabytes on the drive. Besides optimizations, the new sync engine enables external drive support, allowing you to keep your OneDrive folder on a removable drive (it should meet all the requirements). Microsoft is now rolling out the updated OneDrive client for Microsoft 365 Insiders. To check if your Mac has the new sync engine, go to the About tab and check the app version. If it ends with something like 26H, you are on the new engine. If not, you are on the old one. Microsoft says it will take a few weeks to complete the rollout to Insiders, but it won't say when to expect the update in the stable channel. Big performance updates for OneDrive on Mac came right after Microsoft confirmed it would soon kill document editing in Office 2019 for Mac due to expiring certificates. This change will force users to look for alternatives or switch to Microsoft 365.
    • Hi my name is Olivia and I am from Australia

      By +Good Bot, Bad Bot · Posted

      Sorry but that makes no sense. What does using the same laptop have to do with anything? 

  • Recent Achievements

    • 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
    • First Post
      X-No-file earned a badge
      First Post
    • One Month Later
      johnjacobb40 earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      516
    2. 2
      PsYcHoKiLLa
      211
    3. 3
      +Edouard
      147
    4. 4
      Steven P.
      92
    5. 5
      ATLien_0
      82
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!