Jump to content



Photo

Jquery plugin to do this?

html javascript jquery

  • Please log in to reply
17 replies to this topic

#1 eliokh

eliokh

    Neowinian

  • Joined: 01-July 10
  • Location: Lebanon
  • OS: Win7/XP

Posted 08 December 2012 - 14:57

Hello people,

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

Posted Image

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



You can check it in action @ this link
http://www.emirates....lish/index.aspx


thank you in advance.


#2 OP eliokh

eliokh

    Neowinian

  • Joined: 01-July 10
  • Location: Lebanon
  • OS: Win7/XP

Posted 08 December 2012 - 16:32

anybody????

#3 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 14
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 08 December 2012 - 19:39

Jquery on click CSS modification...

#4 LaP

LaP

    Forget about it

  • Tech Issues Solved: 3
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 08 December 2012 - 19:43

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.

#5 LaP

LaP

    Forget about it

  • Tech Issues Solved: 3
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 08 December 2012 - 20:13

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

#6 OP eliokh

eliokh

    Neowinian

  • Joined: 01-July 10
  • Location: Lebanon
  • OS: Win7/XP

Posted 09 December 2012 - 09:17

10x people

#7 Guth

Guth

    Alba Gu Bráth

  • Joined: 30-December 05
  • Location: Scotland
  • OS: Windows 8 Pro
  • Phone: iPhone 5

Posted 09 December 2012 - 16:20

10x people

sorry?

#8 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 09 December 2012 - 17:03

you might be able to do something with this:

http://jsfiddle.net/QfPyG/

CSS needs cleaning up a bit.

#9 Guth

Guth

    Alba Gu Bráth

  • Joined: 30-December 05
  • Location: Scotland
  • OS: Windows 8 Pro
  • Phone: iPhone 5

Posted 09 December 2012 - 18:56

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/

#10 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 09 December 2012 - 19:59

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.

#11 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 14
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 09 December 2012 - 20:42

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

#12 Guth

Guth

    Alba Gu Bráth

  • Joined: 30-December 05
  • Location: Scotland
  • OS: Windows 8 Pro
  • Phone: iPhone 5

Posted 09 December 2012 - 21:51

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.

#13 OP eliokh

eliokh

    Neowinian

  • Joined: 01-July 10
  • Location: Lebanon
  • OS: Win7/XP

Posted 10 December 2012 - 12:03

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

#14 +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 2
  • Joined: 14-January 03

Posted 10 December 2012 - 12:20

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!

#15 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 10 December 2012 - 12:58

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



Click here to login or here to register to remove this ad, it's free!