New Posts  All Forums:Forum Nav:

animate polls help

post #1 of 8
Thread Starter 
I am looking to animate a graph per a request of a client. I did find this tutorial with code snippet here:

http://papermashup.com/building-an-animated-3d-poll/

The client wants it to animate from a button click to the tab. Whats the best way to go about doing this?? I just need something similar to the animation and not actually a poll but just bars animating horizontally. Any ideas would be great..


client provided this:
if you scroll to the experience you can see it animate
Edited by graphicsman - 10/3/11 at 8:00am
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #2 of 8
Why wouldn't you just take the code example you posted and remove all references from the graph and just use the bar code? or am I missing something?
Fozzie
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-2600K Processor @ 4.4GHz ASUS P8P67 DELUXE MSI N570GTX TF3 PE/OC SLI 8GB DDR3 
Hard DriveOptical DriveOSMonitor
Crucial M4 128GB SSD ASUS DRW-24B1ST Windows 7 x64 Samsung S27A950D / Samsung 226BW 
KeyboardPowerCaseMouse
DAS Professional Silent Corsair 750HX Cooler Master HAF X Steelseries Sensei 
Mouse Pad
Mionix Propus 380 
  hide details  
Reply
Fozzie
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-2600K Processor @ 4.4GHz ASUS P8P67 DELUXE MSI N570GTX TF3 PE/OC SLI 8GB DDR3 
Hard DriveOptical DriveOSMonitor
Crucial M4 128GB SSD ASUS DRW-24B1ST Windows 7 x64 Samsung S27A950D / Samsung 226BW 
KeyboardPowerCaseMouse
DAS Professional Silent Corsair 750HX Cooler Master HAF X Steelseries Sensei 
Mouse Pad
Mionix Propus 380 
  hide details  
Reply
post #3 of 8
Thread Starter 
i just need he animation part not the actual poll
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #4 of 8
jQuery Animate : http://api.jquery.com/animate/
Pretty simple to make a box expand, that's all the example is using.

and your title/question is misleading if you just want the animation and the not poll feature
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
post #5 of 8
Quote:
Originally Posted by graphicsman View Post
i just need he animation part not the actual poll
Right, so for 1 bar, include this:

Code:
$(document).ready(function(){
$('.bar1').animate({'height':'22%'},500);
});
Change whatever you want the % to be in there. Then just change this code to execute on clicking or w/e behavior you want. Download the code example on that page, it helps: http://papermashup.com/demos/3d-poll/3d-poll.zip
Fozzie
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-2600K Processor @ 4.4GHz ASUS P8P67 DELUXE MSI N570GTX TF3 PE/OC SLI 8GB DDR3 
Hard DriveOptical DriveOSMonitor
Crucial M4 128GB SSD ASUS DRW-24B1ST Windows 7 x64 Samsung S27A950D / Samsung 226BW 
KeyboardPowerCaseMouse
DAS Professional Silent Corsair 750HX Cooler Master HAF X Steelseries Sensei 
Mouse Pad
Mionix Propus 380 
  hide details  
Reply
Fozzie
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-2600K Processor @ 4.4GHz ASUS P8P67 DELUXE MSI N570GTX TF3 PE/OC SLI 8GB DDR3 
Hard DriveOptical DriveOSMonitor
Crucial M4 128GB SSD ASUS DRW-24B1ST Windows 7 x64 Samsung S27A950D / Samsung 226BW 
KeyboardPowerCaseMouse
DAS Professional Silent Corsair 750HX Cooler Master HAF X Steelseries Sensei 
Mouse Pad
Mionix Propus 380 
  hide details  
Reply
post #6 of 8
Thread Starter 
Quote:
Originally Posted by Jonowxeno View Post
jQuery Animate : http://api.jquery.com/animate/
Pretty simple to make a box expand, that's all the example is using.

and your title/question is misleading if you just want the animation and the not poll feature
this was it!

found this too
http://viralpatel.net/blogs/2010/03/...-function.html
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #7 of 8
Well, that was what I explaining too. Since your original example provided used the JQUERY animate function. Glad you found your solution.
Fozzie
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-2600K Processor @ 4.4GHz ASUS P8P67 DELUXE MSI N570GTX TF3 PE/OC SLI 8GB DDR3 
Hard DriveOptical DriveOSMonitor
Crucial M4 128GB SSD ASUS DRW-24B1ST Windows 7 x64 Samsung S27A950D / Samsung 226BW 
KeyboardPowerCaseMouse
DAS Professional Silent Corsair 750HX Cooler Master HAF X Steelseries Sensei 
Mouse Pad
Mionix Propus 380 
  hide details  
Reply
Fozzie
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-2600K Processor @ 4.4GHz ASUS P8P67 DELUXE MSI N570GTX TF3 PE/OC SLI 8GB DDR3 
Hard DriveOptical DriveOSMonitor
Crucial M4 128GB SSD ASUS DRW-24B1ST Windows 7 x64 Samsung S27A950D / Samsung 226BW 
KeyboardPowerCaseMouse
DAS Professional Silent Corsair 750HX Cooler Master HAF X Steelseries Sensei 
Mouse Pad
Mionix Propus 380 
  hide details  
Reply
post #8 of 8
Thread Starter 
thanks, just got to get the delay in it now. trying to learn jquery in the process, lol
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding