Jump to content
Sign in to follow this  
ddave

Add JS Files Fade-in out

Recommended Posts

ddave

Hi everyone, I try to add a js files into the Headerscripts Code or Footerscripts Code but nothing appears

<script type="text/javascript" src="http://www.mywebsite.com/files/js/fade.js"></script>
I use this in the js files :
<!--
	
	    // wrap as a jQuery plugin and pass jQuery in to our anoymous function
	    (function ($) {
	        $.fn.cross = function (options) {
	            return this.each(function (i) {
	                // cache the copy of jQuery(this) - the start image
	                var $$ = $(this);
	
	                // get the target from the backgroundImage + regexp
	                var target = $$.css('backgroundImage').replace(/^url|[()'"]/g, '');
	
	                // nice long chain: wrap img element in span
	                $$.wrap('<span style="position: relative;"></span>')
	                    // change selector to parent - i.e. newly created span
	                    .parent()
	                    // prepend a new image inside the span
	                    .prepend('')
	                    // change the selector to the newly created image
	                    .find(':first-child')
	                    // set the image to the target
	                    .attr('src', target);
	
	                // the CSS styling of the start image needs to be handled
	                // differently for different browsers
	                if ($.browser.msie || $.browser.mozilla) {
	                    $$.css({
	                        'position' : 'absolute',
	                        'left' : 0,
	                        'background' : '',
	                        'top' : this.offsetTop
	                    });
	                } else if ($.browser.opera && $.browser.version < 9.5) {
	                    // Browser sniffing is bad - however opera < 9.5 has a render bug
	                    // so this is required to get around it we can't apply the 'top' : 0
	                    // separately because Mozilla strips the style set originally somehow...
	                    $$.css({
	                        'position' : 'absolute',
	                        'left' : 0,
	                        'background' : '',
	                        'top' : "0"
	                    });
	                } else { // Safari
	                    $$.css({
	                        'position' : 'absolute',
	                        'left' : 0,
	                        'background' : ''
	                    });
	                }
	
	                // similar effect as single image technique, except using .animate
	                // which will handle the fading up from the right opacity for us
	                $$.hover(function () {
	                    $$.stop().animate({
	                        opacity: 0
	                    }, 250);
	                }, function () {
	                    $$.stop().animate({
	                        opacity: 1
	                    }, 250);
	                });
	            });
	        };
	
	    })(jQuery);
	
	    // note that this uses the .bind('load') on the window object, rather than $(document).ready()
	    // because .ready() fires before the images have loaded, but we need to fire *after* because
	    // our code relies on the dimensions of the images already in place.
	    $(window).bind('load', function () {
	        $('img.fade').cross();
	    });
	
	    //-->

It's a fade in/out effect beetween two pictures. Someone can try this script and see why nothing appears even if the script is into custom code ? There is other solutions to use it ? (Maybe someone have a better code without pb). Warm regards, DDave.

Share this post


Link to post
Share on other sites
catrina

Did you upload the js files to the right directory? Also, can you provide a link?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ddave

Dear Catrina, thanks for your help. After some search i have find why the js fade in/out wasn't active. It's a pb beetween some js files and css files from Platformpro who use too "style background url" of an . Arggh :D I have try some others js files into custom code and no troubleshooting. So i find an other solution, only with CSS3 :) with webkit + moz + o + transition (it's ok with new version of browser (chrome 10, mozilla 4, explorer 9, opera...) and with old version you haven't fade in/out but transition still work ). Best, DDave

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×