• 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 quantum search for Time's origin had an equally mind-boggling conclusion

      By Taliseian · Posted

      It's all wibbly-wobbly, timey-wimey....stuff.
    • Flameshot 14.0 Final

      By Copernic · Posted

      Flameshot 14.0 Final by Razvan Serea Flameshot is a free and open-source, cross-platform tool to take screenshots with many built-in features to save you time. Using Flameshot is as simple as launching, dragging the selection box to cover the area you want to capture, making annotations as needed in on-screen and saving the shot to your computer, all with a very simple and straightforward interface. Flameshot allows users to simply upload their screenshots directly to the cloud in order to easily share it with others. You can upload your image directly to Imgur with a single click and share the URL with others. In-app screenshot editing - You can choose to add an arrow mark, highlight text, blur a section (blur or pixelate an area), add a text, draw something, add a rectangular/circular shaped border, add an incrementing counter number, and add a solid color box with Flameshot's built-in editing tools. Command-line interface (CLI) - Flameshot has several commands you can use in the terminal without launching the GUI via a command line interface. The command line interface lets you script Flameshot and use it as the subject of key binds. Flameshot 14.0 release notes: This release brings major improvements to multi-monitor support, fractional scaling support, new capture workflows, and a long list of bug fixes across all platforms. Changelog: New Multi-Monitor Capture Workflow New monitor selection screen before capture for better multi-monitor and mixed-scaling support. Option to auto-capture the monitor under the cursor (X11 & Windows). Tray menu can directly select a monitor. Linux Improvements XDG Desktop Portal is now the primary screenshot method. Added legacy X11 fallback option for minimal window managers. New D-Bus capture API for scripting and automation. Windows Enhancements Global screenshot hotkeys now supported (not limited to Print Screen). New portable mode stores settings next to the executable. Clipboard now always uses PNG format for better compatibility. CLI & Platform Updates Redesigned flameshot screen command with per-monitor capture support. Added native Nix Flake support. More compact launcher UI and improved update notifications. Major Fixes Multiple Wayland stability fixes, including KDE Plasma crash fixes. Clipboard compatibility improvements for GNOME, Wayland, X11, Windows, and macOS. Fixed D-Bus hangs, capture crashes, and HiDPI region issues. Other Changes Dropped Ubuntu 20.04 (Focal) support. Updated translations and build infrastructure. Intel macOS builds are no longer provided. [full release notes] Download: Flameshot 14.0 | 18.1 MB (Open Source) Download: Flameshot Portable | 53.0 MB Links: Flameshot Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • The quantum search for Time's origin had an equally mind-boggling conclusion

      By branfont · Posted

      Time, as we know it, was invented by Humans!
    • Politically funny images of the World

      By +Edouard · Posted

    • Helium Browser 0.13.4.1

      By Copernic · Posted

      Helium Browser 0.13.4.1 by Razvan Serea Helium is a private, fast, and honest Chromium-based web browser — built for people, with love. It offers the best privacy by default, unbiased ad-blocking, and a clean experience free from bloat and noise. Proudly based on Ungoogled-Chromium, Helium removes Google’s clutter while keeping a fast, efficient development pipeline. With thoughtful touches like native !bangs and split view, Helium is a people-first, fully open-source browser that puts control back in your hands. Privacy, security, and control come first. Ads, trackers, and third-party cookies are blocked automatically, HTTPS is enforced everywhere, and all Chromium extensions work seamlessly — while Google can’t track your activity. Helium’s 13,000+ offline-ready !bangs let you jump straight to sites or AI tools like ChatGPT instantly. Open-source, people-first, and unbiased, Helium delivers a browsing experience that’s fast, secure, and free from noise, ads, and compromises. Helium Browser key features: Performance Fast, efficient, and lightweight — built on Chromium’s optimized engine. Energy-saving and consistent — stays fast over time without slowing down. No bloat — stripped of unnecessary components for maximum speed. Minimalist interface — compact, clean, and distraction-free. Customizable toolbar — hide elements you don’t need. Smooth and stable — no flicker, lag, or animation glitches. Comfort-focused experience — intuitive and unobtrusive. Privacy & Security Best privacy by default — blocks ads, trackers, phishing, and third-party cookies. Unbiased ad-blocking — powered by community filters and uBlock Origin. No telemetry or analytics — zero background web requests on first launch. Strict HTTPS enforcement — warns for insecure sites. Passkeys supported — modern authentication made simple. No built-in password manager or cloud sync — your data stays yours. Extension Compatibility Full Chromium extension support — including MV2 extensions. Anonymized Chrome Web Store requests — Google can’t track extension installs. Extended MV2 support — maintained for as long as possible. Smart Features Native !bangs — browse faster using 13,000+ offline-ready shortcuts. AI integration — use !chatgpt and others directly from the address bar. Offline functionality — bangs work without an Internet connection. Philosophy People-first design — open source, transparent, and community-driven. No ads, no noise, no bias — privacy and honesty over profit. Helium Browser 0.13.4.1 changelog: 0a4f1149 revision: bump to 4 (#1969) 4848de1f helium/core: enable the chromium screenshot feature (#1968) e0dec3f5 onboarding: integrate strings to i18n system (#1948) 417fa5bc i18n: fix newline parsing for onboarding 7a339b39 i18n: add foraged translations for onboarding 4f090cff i18n/generate: add handling for onboarding strings bfe48d58 i18n_apply: manually override parent grd logic for onboarding strings ab214e3c onboarding: bump in deps, wire up grdp afa6a059 helium/core: disable pdf infobar feature (#1965) eba585e7 helium/ui/vertical: fix new tab button alignment and icon size (#1964) 6ecfc9e0 helium/ui/tabs: fix horizontal tab hover background color (#1963) 3db87dc0 helium/ui/tabs: fix new tab button hover/press colors (#1962) 6bbdcc3e helium/ui: improve tab group UI in all layouts (#1961) 53deb314 helium/ui/tabs: enable tab group hover cards e93aece7 helium/ui/vertical: fix tab group appearance, prevent line overlap 629f5495 helium/ui/tabs: restore solid group header colors, enable new colors 961c962e helium/ui/tabs: move horiz tab group underline to bottom, make it thick c96deab6 merge: update to chromium 149.0.7827.155 (#1959) 36db56b4 i18n: update source.gen.json 5ce006ae patches: refresh for chromium 149.0.7827.155 b4c1ea62 merge: update ungoogled-chromium to 149.0.7827.155 4e5e8671 Update to Chromium 149.0.7827.155 08a3e7da helium/ui/layout: disable mute on collapsed vertical tabs (#1778) a0a5bbaf helium/core: simplify context menu and prevent huge widths (#1951) c4732aac devutils/i18n: add forage command (#1944) 11d16986 devutils/i18n: add an option to translate using local CLI tools (#1942) d820c3a2 i18n/prompt: tighten translation rules to prevent common errors (#1940) cf827007 Update to Chromium 149.0.7827.114 6e3d5164 Update to Chromium 149.0.7827.102 Download: Helium 64-bit | Portable 64-bit |~100.0 MB (Open Source) Download: Helium ARM64 | Portable ARM64 Links: Helium Home Page | macOS | Linux | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware

  • Recent Achievements

    • Reacting Well
      BizSAR earned a badge
      Reacting Well
    • First Post
      AndreaB earned a badge
      First Post
    • Week One Done
      Huge Trailer earned a badge
      Week One Done
    • Week One Done
      Classifyskilleducation earned a badge
      Week One Done
    • One Month Later
      eurospharma62 earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      579
    2. 2
      +Edouard
      183
    3. 3
      PsYcHoKiLLa
      75
    4. 4
      Michael Scrip
      73
    5. 5
      neufuse
      64
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!