Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2008
    Location
    Belgrade
    Posts
    19
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Slide 'n' Dissapear Element(s)

    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/

    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

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    jquery.com

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

  • Users who have thanked tomws for this post:

    okram666 (06-27-2009)

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    
    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++){
      zxcOpacity(imgs[z0],100+(Math.max(Math.min(slidingDiv.offsetLeft+imgs[z0].offsetLeft,0),-100)));
     }
    		setTimeout(slideIt, 100);
    	}
    }



    Code:
    <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;" />
    	</div>
    Last edited by vwphillips; 06-27-2009 at 03:11 PM. Reason: HTLM correction
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    okram666 (06-27-2009)

  • #4
    New Coder
    Join Date
    Jun 2008
    Location
    Belgrade
    Posts
    19
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Thanks guys

  • #5
    New Coder
    Join Date
    Jun 2008
    Location
    Belgrade
    Posts
    19
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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
    Code:
    <div id="slidingDIV" style="left:10px;">
    then it works fine...

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    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.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    okram666 (06-27-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •