Welcome Guest! To access all forums & features, please register an account or sign-in. → Why register?


AT&T adds 'administrative fee' to wireless bills in Back Page News

Jquery plugin to do this?

Started by eliokh, Dec 08 2012 14:57 html javascript jquery

17 replies to this topic - - - - -

#1 eliokh

    Neowinian³

  • 430 posts
    • 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.

Ad Bot


#2 OP eliokh

    Neowinian³

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

Posted 08 December 2012 - 16:32

anybody????

#3 +Seahorsepip

    http://seapip.com

  • 940 posts
    • Joined: 23-January 11
  • Location: Vlissingen, Netherlands
  • OS: Windows 8 Pro

Posted 08 December 2012 - 19:39

Jquery on click CSS modification...

#4 LaP

    Forget about it

  • 3,203 posts
    • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8 Pro

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

    Forget about it

  • 3,203 posts
    • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8 Pro

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

    Neowinian³

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

Posted 09 December 2012 - 09:17

10x people

#7 Guth

    Alba Gu Bráth

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

Posted 09 December 2012 - 16:20

View Posteliokh, on 09 December 2012 - 09:17, said:

10x people
sorry?

#8 Uplift

    Deejayy...

  • 5,172 posts
    • 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

    Alba Gu Bráth

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

Posted 09 December 2012 - 18:56

View PostUplift, on 09 December 2012 - 17:03, said:

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 Uplift

    Deejayy...

  • 5,172 posts
    • Joined: 07-May 04
  • Location: England

Posted 09 December 2012 - 19:59

View PostGuth, on 09 December 2012 - 18:56, said:

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

    http://seapip.com

  • 940 posts
    • Joined: 23-January 11
  • Location: Vlissingen, Netherlands
  • OS: Windows 8 Pro

Posted 09 December 2012 - 20:42

View PostUplift, on 09 December 2012 - 19:59, said:

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

    Alba Gu Bráth

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

Posted 09 December 2012 - 21:51

View PostUplift, on 09 December 2012 - 19:59, said:

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

View PostSeahorsepip, on 09 December 2012 - 20:42, said:

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

    Neowinian³

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

Posted 10 December 2012 - 12:03

View PostGuth, on 09 December 2012 - 21:51, said:

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 louch

    ..:::..:::..:::..

  • 31,391 posts
    • Joined: 14-January 03
  • Location: Leicester, UK
  • OS: Windows 7, OSX, Android, Ubuntu
  • Phone: Galaxy Note II

Posted 10 December 2012 - 12:20

Quote

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 Uplift

    Deejayy...

  • 5,172 posts
    • 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..
Back to Web Design / Programming · Next Unread Topic →


  1. Quick Nav
  2. Neowin Forums
  3. → Technical Help & Support
  4. → Web Design / Programming