Sign in to follow this  
Followers 0

Jquery plugin to do this?


18 posts in this topic

Posted

Hello people,

does anyone happens to know a Jquery plugin that does this:

default.jpg

and on click, the button expands with animation to this:

on_click.jpg

You can check it in action @ this link

http://www.emirates.com/lb/english/index.aspx

thank you in advance.

Share this post


Link to post
Share on other sites

Posted

anybody????

Share this post


Link to post
Share on other sites

Posted

Jquery on click CSS modification...

Share this post


Link to post
Share on other sites

Posted

You don't really need a plugin for that.

Just code it yourself. Should be really simple. A div containing a background image and and the use of the animate function will do the trick probably.

Share this post


Link to post
Share on other sites

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>

1 person likes this

Share this post


Link to post
Share on other sites

Posted

10x people

Share this post


Link to post
Share on other sites

Posted

10x people

sorry?

Share this post


Link to post
Share on other sites

Posted

you might be able to do something with this:

http://jsfiddle.net/QfPyG/

CSS needs cleaning up a bit.

1 person likes this

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ^^

1 person likes this

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :((((((((((((

Share this post


Link to post
Share on other sites

Posted

i need support for ie6

NO!!!!! IE6 is now at a stage whereby I would argue that functionality can be maintained but bells and whistles, no!

1 person likes this

Share this post


Link to post
Share on other sites

Posted

I wouldn't even bother trying to maintain functionality, you really do need to go back to basics if you want to support IE6.

Why do you need IE6 support? it's pretty much dead..

1 person likes this

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.