Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Getting an image to swipe down.
New Posts  All Forums:Forum Nav:

Getting an image to swipe down.

post #1 of 7
Thread Starter 
I want an image to swipe down when my webpage is loaded. Not sure how to do this, I've looked everywhere.
Edited by xdanisx - 8/17/11 at 9:14pm
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
post #2 of 7
Thread Starter 
Tried using jquery, but I have no idea what to do. I have to "download" jquery but it's just a bunch of code...
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
post #3 of 7
Do you have an example on another site of what you are trying to do? Not sure exactly what affect you are looking for when you say "swipe down" but its probably pretty easy.
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #4 of 7
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
  <title>test</title>
</head>

<body>

<div class="slide" style="display:none">
        <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSgW1Yy4vBfeXLQgzA5VtSEkLAZvusAelWgD99aDFMOCPDa768-6w" alt="derp"></img>
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
        $(function()  {
                $('div.slide').slideDown('slow');
        });

       //$(function(){}); is short hand for $(document).ready(function(){});  ready is the best place to put onload events as the dom is fully parsed
// -->
</script>
</body>
</html>
To test, see: http://www.w3schools.com/html/tryit....=tryhtml_basic

for more animations start here http://api.jquery.com/slideDown/ ... any jquery questions feel free to ask away
Edited by lloyd mcclendon - 8/17/11 at 10:15pm
stable again
(25 items)
 
  
CPUCPUMotherboardGraphics
E5-2687W E5-2687W ASUS Z9PED8-WS EVGA GTX 570 (Linux host) 
GraphicsRAMHard DriveHard Drive
EVGA GTX 970 FTW (win7 guest) 64GB G.SKILL 2133 2x Crucial M4 256GB raid1 4x 3TB raid 10 
CoolingCoolingCoolingCooling
2x Apogee HD  2x RX 480 2x MCP 655 RP-452x2 rev2 (new) 
CoolingCoolingOSOS
16x Cougar Turbine CFT12SB4 (new) EK FC 580 Gentoo (host) Gentoo (x23 guests) 
OSMonitorMonitorPower
windows 7 (guest w/ vfio-pci) Viewsonic 23" 1080P Viewsonic 19" Antec HCP Platinum 1000 (new) 
CaseOtherOther
Case Labs TH10 (still the best ever) 2x Lamptron FC-5 IOGEAR 2 way DVI KVM Switch 
  hide details  
Reply
stable again
(25 items)
 
  
CPUCPUMotherboardGraphics
E5-2687W E5-2687W ASUS Z9PED8-WS EVGA GTX 570 (Linux host) 
GraphicsRAMHard DriveHard Drive
EVGA GTX 970 FTW (win7 guest) 64GB G.SKILL 2133 2x Crucial M4 256GB raid1 4x 3TB raid 10 
CoolingCoolingCoolingCooling
2x Apogee HD  2x RX 480 2x MCP 655 RP-452x2 rev2 (new) 
CoolingCoolingOSOS
16x Cougar Turbine CFT12SB4 (new) EK FC 580 Gentoo (host) Gentoo (x23 guests) 
OSMonitorMonitorPower
windows 7 (guest w/ vfio-pci) Viewsonic 23" 1080P Viewsonic 19" Antec HCP Platinum 1000 (new) 
CaseOtherOther
Case Labs TH10 (still the best ever) 2x Lamptron FC-5 IOGEAR 2 way DVI KVM Switch 
  hide details  
Reply
post #5 of 7
Thread Starter 
Quote:
Originally Posted by glakr View Post
Do you have an example on another site of what you are trying to do? Not sure exactly what affect you are looking for when you say "swipe down" but its probably pretty easy.
I need the image to either wipe down, or scale down I guess since the image is just a a grey box.



Quote:
Originally Posted by lloyd mcclendon View Post
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
  <title>test</title>
</head>

<body>

<div class="slide" style="display:none">
        <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSgW1Yy4vBfeXLQgzA5VtSEkLAZvusAelWgD99aDFMOCPDa768-6w" alt="derp"></img>
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
        $(function()  {
                $('div.slide').slideDown('slow');
        });

       //$(function(){}); is short hand for $(document).ready(function(){});  ready is the best place to put onload events as the dom is fully parsed
// -->
</script>
</body>
</html>
To test, see: http://www.w3schools.com/html/tryit....=tryhtml_basic

for more animations start here http://api.jquery.com/slideDown/ ... any jquery questions feel free to ask away
I guess I can use the .SlideUp, but I don't know how to use jquery. How would I specify where I want the image to start? Is there a way to time it to start when the page loads %100?
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
post #6 of 7
jQuery is pretty easy for basic stuff.

To wait to start something until the DOM is fully loaded you would use the document.ready call. Like this.

Code:
 $(document).ready(function(){
    .......
    //your code goes here so something like
    $(".slideimage").slideDown("slow");
    .......
 });
This assumes your image has the class="slideimage" assigned. It could be anything you choose. Pretty much the same as above, but I personally prefer to actually use the .ready function for clarity. Both ways are fine and correct.

Depending on how your page is setup, you can usually just put the image where you want it to end up after sliding and then give the image display:none in css. When the slidedown is called will basically animate the display of the image and slide anything below it down as it does it.

EDIT: If the above photo is what you are sliding, looks like you are doing a whole section of the site, in which case you are going to want to use that as the selector for the slideDown call.
Edited by glakr - 8/18/11 at 2:59pm
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #7 of 7
You could always just make a gif that doesn't loop.
The Butcher
(22 items)
 
  
CPUMotherboardGraphicsGraphics
Intel Core i7 2600K @4.2 Ghz Gigabyte Z68 UD3P-B3 EVGA GTX 680 4GB EVGA GTX 680 4GB 
RAMHard DriveHard DriveHard Drive
G-Skill Ripjaws 16 GiggleBytes WD Caviar Black WD Caviar Green Intel 3rd Gen 128GB SSD 
Hard DriveOptical DriveCoolingOS
WD Black Asus BD+DVD+CD Drive Corsair H80 Windows 7 Home Premium 64 
MonitorMonitorKeyboardPower
Asus LS246 23.6" Asus VE278Q 27" Razer Black Widow Ultimate Stealth OCZ 1000W  
CaseMouseMouse PadAudio
Fractal Design R4 Razer Imperator 2013 Razer Tritton AX720 
AudioOther
Sony 5.1 System Wireless Card 
  hide details  
Reply
The Butcher
(22 items)
 
  
CPUMotherboardGraphicsGraphics
Intel Core i7 2600K @4.2 Ghz Gigabyte Z68 UD3P-B3 EVGA GTX 680 4GB EVGA GTX 680 4GB 
RAMHard DriveHard DriveHard Drive
G-Skill Ripjaws 16 GiggleBytes WD Caviar Black WD Caviar Green Intel 3rd Gen 128GB SSD 
Hard DriveOptical DriveCoolingOS
WD Black Asus BD+DVD+CD Drive Corsair H80 Windows 7 Home Premium 64 
MonitorMonitorKeyboardPower
Asus LS246 23.6" Asus VE278Q 27" Razer Black Widow Ultimate Stealth OCZ 1000W  
CaseMouseMouse PadAudio
Fractal Design R4 Razer Imperator 2013 Razer Tritton AX720 
AudioOther
Sony 5.1 System Wireless Card 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Getting an image to swipe down.