• 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: Windows 11 KB5094126, KB5093998 finally stops trusting a critical system threat

      By Captain_Eric · Posted

      Got it. Seem like a good improvement. Thanks. But, before we "Add the source to Trusted Sites," how would know if it is trusted or not? Could get messy for not first Knowing" it is clean. See what I mean?
    • AB Download Manager 1.9.0

      By Copernic · Posted

      AB Download Manager 1.9.0 by Razvan Serea AB Download Manager is an open-source, feature-rich download manager designed to accelerate downloads, organize files efficiently, and provide seamless control over downloads. With support for multiple connections, resume capability, and an intuitive interface, it enhances the downloading experience for users seeking speed and reliability. The software integrates with various browsers, enabling quick link grabbing and batch downloading. It supports HTTP, HTTPS, and FTP protocols, ensuring broad compatibility with different file sources. Users can schedule downloads, set speed limits, and categorize files automatically for better organization. AB Download Manager is lightweight yet powerful, making it a great alternative to proprietary download managers. Its open-source nature allows developers to contribute, customize, and improve the software as needed. Whether you're downloading large files, managing multiple downloads at once, or seeking an ad-free experience, this tool offers a practical and efficient solution. Key features of AB Download Manager: Multi-Connection Support – Accelerates downloads by splitting files into multiple segments. Resume Capability – Allows paused or interrupted downloads to be resumed without starting over. Batch Downloading – Supports downloading multiple files at once for improved efficiency. Browser Integration – Captures download links directly from browsers for seamless operation. HTTP, HTTPS, and FTP Support – Ensures compatibility with a wide range of file sources. Download Scheduling – Enables users to automate downloads at specific times. Speed Limiting – Lets users control bandwidth usage for optimized performance. File Categorization – Automatically organizes downloaded files into designated folders. User-Friendly Interface – Simple and intuitive design for easy navigation. Cross-Platform Compatibility – Works on multiple operating systems. Ad-Free Experience – No intrusive ads or tracking for a clean user experience. AB Download Manager 1.9.0 changelog: Added Czech language support User-friendly error messages for download errors (#1252) An option to remember the last selected queue and quickly add downloads to it by long-clicking the Add button ( #1246) An option to export/import downloads using JSON format A Download button on the multi-download page for cases where users do not want to start downloads without queue processing (#1247) The app now includes a logger that can be enabled using a command-line flag (#1226) Startup errors are now logged automatically to help diagnose initialization issues Changed The default unqueued "Max Concurrent Downloads" value has been changed from "Unlimited" to 3 (This can be customized in the app settings) Improved Updated translations Added an indicator on the Android main page when resume is not supported (#1248) Extract the file name from the download link as a fallback when no response information is available (#1209) Minor UI/UX improvements Download: AB Download Manager 1.9.0 | Portable | ~80.0 MB (Open Source) Download: ARM64 | Portable ARM64 | Android Links: AB Download Manager Website | Github Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Claude on Windows is eating up massive amounts of RAM, with no way to stop it

      By kiddingguy · Posted

      32 GB RAM here. What’s the issue?
    • EU Commission explains why Siri AI isn't launching in the EU, and Apple is to blame

      By Dutchie64 · Posted

      Good consumer.......... /s
    • Microsoft explains how it made Teams so much faster in 2026

      By +virtorio · Posted

      I just started using Teams (and “New” Oiutlook) at work (instead of Slack) and both are truly abysmal pieces of software.

  • Recent Achievements

    • First Post
      DragonOfMercy earned a badge
      First Post
    • First Post
      bella52 earned a badge
      First Post
    • Reacting Well
      Techinmay earned a badge
      Reacting Well
    • Collaborator
      WndSks went up a rank
      Collaborator
    • One Month Later
      Sopa flores earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      487
    2. 2
      PsYcHoKiLLa
      205
    3. 3
      +Edouard
      152
    4. 4
      Steven P.
      82
    5. 5
      ATLien_0
      72
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!