View Full Version : Slide 'n' Dissapear Element(s)

06-27-2009, 02:51 PM
Hi! :)

I'm working on JS gallery (for fun) and I need help.
I made some kind of gallery with fade out/in effect and it works more or less alright, but now i want to add more functionality to it http://www.eynsoft.com/myGallery/ :D

I want to add some kind of slide effect to listed images (when somebody click to show new row of images with slide effect).
My problem at this time is http://www.eynsoft.com/myGallery/slide.php ...
I can move div around but i want to make him dissapear gradually when he leave the border of container div...
Is there some way to do this (without using giant JS Libraries)...
Thanks in advance ;)

06-27-2009, 03:38 PM

Edit: missed you last line before I posted earlier. Jquery has a "minified" version that helps getting to a smaller footprint.

06-27-2009, 03:55 PM
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;

function slideIt()
var slidingDiv = document.getElementById("d2");
var imgs=slidingDiv.getElementsByTagName('IMG')
var stopPosition = -800;

if (parseInt(slidingDiv.style.left) > stopPosition )
slidingDiv.style.left = parseInt(slidingDiv.style.left) - 2 + "px";
for (var z0=0;z0<imgs.length;z0++){
setTimeout(slideIt, 100);

<div style="position:relative;text-align:left; width:80%; border:1px solid #999999; margin-left:10%;">

<div id="d2" style="position:relative; left:10px;">

<img src="http://www.eynsoft.com/myGallery/images/nature-1.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/>
<img src="http://www.eynsoft.com/myGallery/images/nature-2.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/>
<img src="http://www.eynsoft.com/myGallery/images/nature-3.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/>

<img src="http://www.eynsoft.com/myGallery/images/nature-4.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;" />
<img src="http://www.eynsoft.com/myGallery/images/nature-5.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/>
<img src="http://www.eynsoft.com/myGallery/images/nature-6.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;"/> <br />
<img src="http://www.eynsoft.com/myGallery/images/nature-7.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;" />
<img src="http://www.eynsoft.com/myGallery/images/nature-8.jpg" width="100" style="margin-left:10px; margin-top:10px; margin-bottom:10px;" />

06-27-2009, 04:24 PM
Thanks guys :)

06-27-2009, 05:04 PM
Ok some weird stuff is going on...

If I use left property in css file then the function slideIt() doesn't work (JS doesn't return value), but if I put that property directly inside element
<div id="slidingDIV" style="left:10px;"> then it works fine... :confused:

06-27-2009, 07:32 PM
function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());

function zxcSVInt(obj,par){
if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));

pass the slider object and 'left' to the functions above to obtain the inline or the CSS class rule value.