• 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

    • Nothing kills CMF Phone 2 Pro's successor due to rising memory prices

      By monterxz · Posted

      As I've been usually saying lately - we all can thank "AI" for this.
    • Windows 11 version 26H2 is now available for testing in the latest preview build

      By +TRS-80 · Posted

      Friday Windows 11 preview builds are here. Insiders in the Experimental (formerly Dev) and Beta Channel can download builds 26300.8697 and 26220.8690. My Windows11 device on the Preview Channel just got 26220.8728. My guess is this build is a nightly update from 26220.8690.
    • Traffic has a surprisingly unexpected impact on your surroundings

      By hellowalkman · Posted

      Traffic has a surprisingly unexpected impact on your surroundings by Sayan Sen Image by Radik 2707 via Pexels A collaborative study by researchers from several Israeli institutions found that everyday pollution from traffic and industrial activity measurably changed the atmospheric electric field over the Tel Aviv metropolitan area, providing new evidence of how human activity can influence the lower atmosphere. The research was led by Dr. Roy Yaniv of the Hebrew University of Jerusalem and the Gertner Institute at Sheba Medical Center, Dr. Assaf Hochman of the Fredy & Nadine Herrmann Institute of Earth Sciences at the Hebrew University, and Prof. Yoav Yair of Reichman University. The study also involved Itay Froomer, a student from Hadera High School and the Israeli Museum of Medicine and Science (Technoda), who carried out the work as part of the Ministry of Education's 5-unit physics research track. The researchers focused on the atmospheric electric field under fair-weather conditions. Even in the absence of storms, a weak electric field naturally exists between Earth's surface and the atmosphere. One of the main ways scientists measure this field is through the Potential Gradient (PG), which is the inverse of the vertical component of the electric field. PG is a key part of the global electric circuit, a planet-wide system of electrical currents maintained by thunderstorms and electrified clouds around the world. Scientists have long known that the atmospheric electric field can be influenced by factors ranging from large-scale atmospheric processes to local weather conditions such as dust, fog and clouds. Human-made pollution is also known to play a role, but understanding exactly how urban emissions affect the electric field close to the ground has remained an area of ongoing research. To investigate this relationship, the team analyzed measurements from a newly installed electric field mill, an instrument used to continuously monitor the strength of the atmospheric electric field. The instrument was installed at the Center for Technological Education (Roter House) in Holon and became operational in August 2024. It was funded by Israel's Ministry of Education and the Holon municipality. The electric field mill forms part of a broader monitoring network that includes nearby meteorological stations and air-quality monitoring sites. This allowed researchers to compare electric field measurements with detailed weather data and pollution records to better understand what was driving changes in the Potential Gradient. The study focused on two major urban pollutants: fine particulate matter (PM2.5) and nitrogen oxides (NOx), both commonly produced by vehicle traffic and industrial activity. PM2.5 refers to microscopic airborne particles small enough to remain suspended in the atmosphere for extended periods, while NOx is a group of gases released during fuel combustion. Researchers examined daily, weekly and seasonal patterns in the atmospheric electric field and compared them with changes in pollutant concentrations. Their analysis revealed a clear relationship between NOx levels and changes in the Potential Gradient, particularly during morning and evening rush hours when traffic emissions were at their highest. “What we observe is a direct physical link between emission peaks and electrical variability,” explained Dr. Roy Yaniv. “NOx reduces atmospheric conductivity very quickly, so the electric field responds almost instantaneously during traffic rush hours.” Atmospheric conductivity describes how easily electrical charges move through the air. According to the researchers, nitrogen oxides rapidly alter this conductivity, causing a near-immediate response in the electric field. PM2.5, however, was associated with a delayed response. The researchers attributed this difference to the particles' longer atmospheric residence time, meaning they remain in the atmosphere for longer periods, as well as their different microphysical interactions with surrounding air and atmospheric components. The study also identified a pronounced "weekend effect." In Israel, traffic volumes and some industrial activity decline significantly on Fridays and Saturdays. During these periods, concentrations of both NOx and PM2.5 dropped, and corresponding changes were observed in the atmospheric electric field. “The weekend signal demonstrates just how sensitive the electric field is to changes in human activity,” the researchers noted. “When emissions decline, the electrical environment adjusts at once, providing a high-resolution indicator of urban atmospheric conditions.” The findings showed that pollution levels can influence not only the chemical composition of the atmosphere but also its electrical properties. Researchers said the results strengthened the case for using atmospheric electricity as an additional tool for environmental monitoring, particularly in densely populated urban areas where anthropogenic, or human-caused, influences are most pronounced. The study also pointed to potential public health applications. By combining air-quality measurements with observations of atmospheric electricity, researchers said they could gain a more complete picture of how urban atmospheric conditions change over time. “Integrating air-quality data with electric-field measurements gives us a clearer picture of how the lower atmosphere evolves moment by moment,” the researchers added. “It’s a framework that can support both scientific insight and practical environmental decision-making.” Beyond the scientific findings, the project highlighted a collaboration between universities, public institutions and secondary education. Researchers said the work demonstrated how students could take part in real-world environmental research while contributing to studies of air quality, atmospheric processes and their potential effects on society. Source: Hebrew University, ScienceDirect This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing
    • Microsoft confirms Windows 11 26H2, urges IT admins to prepare for release

      By +TRS-80 · Posted

      We aren't even at the all-star game and Microsoft is talking about an update that will most likely be released during the World Series if not after. A lot can happen in the world between now and the 2026 World Series, including the 2026 FIFA Cup. Tell me about it again after the FIFA Cup is concluded. That should allow plenty of time to prepare for it.
    • Microsoft: Windows 11 could finally solve a major issue across AMD, Nvidia, and Intel GPUs

      By Jdoe25 · Posted

      Great, tell me when I have a "Bad Pool Caller" elsewhere not in Windoze.

  • Recent Achievements

    • Week One Done
      AMV earned a badge
      Week One Done
    • One Month Later
      AMV earned a badge
      One Month Later
    • Collaborator
      ryansurfer98 went up a rank
      Collaborator
    • One Month Later
      Eurosoft10 earned a badge
      One Month Later
    • Week One Done
      Eurosoft10 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      539
    2. 2
      +Edouard
      186
    3. 3
      PsYcHoKiLLa
      79
    4. 4
      Michael Scrip
      77
    5. 5
      Steven P.
      71
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!