0

I'm strictly limited to using YUI/Javascript along with HTML and possibly CSS as long as it runs with IE.

HTML:

<div id="test" style="visibility:hidden">

                    <p><img src=../../included_files/VGirlMega.png></p>
                    <p><img src=../../included_files/ReVGirlMega.png></p>

</div>

<script src="../../included_files/myjs.js"></script>

Javascript:

window.onload=(function(cback){
    return function(ev){
        cback && cback.call(window,ev);
        YUI().use('transition',function(Y){

            var cntr=1; //seconds
            Y.all('#test p').setStyles({'opacity':0,
                                        'marginTop':'25px',
                                        'background':'none repeat scroll 0 0 #fff',
                                        'fontSize':'21px'}).each(function(nd){

                nd.transition({
                    easing: 'ease-out', //easing method
                    duration: 9, // seconds
                    delay:cntr, //this is our counter to stagger the p tags showing
                    opacity:1 
                });

                cntr+=14.0; //increase the delay by half a second
            });

            Y.one('#test').setStyle('visibility','visible');
        });
    }
})(window.onload);

As you can see, I had someone help me with the Javascript, because I'm using it in an E-Learning Authoring Tool, which is quite specific over what works and what doesn't. As it stands of course, the images currently load one below the other. I'm thinking that I may be done over simply because of the paragraph tags?

I've looked into how others have achieved this, but while they're usually going for the same concept, the implementation isn't near the same and requires a lot more css/java.

For example this fiddle: http://jsfiddle.net/k9e5f/2/ Found in this thread: jQuery overlapping images during transition (trying to make background transition)

Would it be difficult to adapt what I have, without basically starting over?

p.s. Jquery isn't an option for this :(

Thanks for any help.

Community
  • 1
  • 1
Jon
  • 103
  • 1
  • 12
  • I removed the adaption part of your question. If you disagree, let me know and I'll roll back (or do it yourself). For how to overlap, see http://jsfiddle.net/9kh4d/ – Jonas G. Drange Aug 06 '13 at 12:18
  • "The JS part of the question is not useful." - Sorry, the JS part of the question was the whole point. If I just wanted to make images overlap I could have done so. The point was that I needed the first image to fade in, then the second to fade in, overlapping the first. (p.s. what you did do was useful, just not for what I was trying to achieve here.) – Jon Aug 07 '13 at 13:20

1 Answers1

1

Try this:

HTML:

<div class="images-overlap">
    <img src="http://www.gstatic.com/cf/logo_small_ru.gif" />
    <img src="http://www.google.com.ua/images/icons/product/chrome-48.png" class="align_right"/>
</div>

CSS:

.images-overlap{
    position:relative;
    width:170px;
    background:#fee;
}
.align_right{
    position:absolute;
    right:0;
}

Demo : http://jsfiddle.net/YRSFm/23/

Arbaoui Mehdi
  • 754
  • 6
  • 18