Home/ Questions/Q 9255907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:48:55+00:00

So I am using this demo plugin here http://tympanus.net/Tutorials/PrettySimpleContentSlider/ and am trying to get

  • 0

So I am using this demo plugin here http://tympanus.net/Tutorials/PrettySimpleContentSlider/ and am trying to get the the animated tabs (ul id=”rotmenu”) on the right to be able to float freely and be posistioned freely outside of its main div class “rotator,” and still maintain its functionality and play its part within rotator. I’ve tried to do some simple changes here and there with attributes of divs and classes but they have just messed things up more or less. any ideas?

Okay here is the js using the jquery_easing.1.3 and jquery.min.js libraries

<script type="text/javascript">
        $(function() {
            var current = 1;

            var iterate     = function(){
                var i = parseInt(current+1);
                var lis = $('#rotmenu').children('li').size();

            }
            display($('#rotmenu li:first'));
            var slidetime = setInterval(iterate,3000);

            $('#rotmenu li').bind('click',function(e){
                clearTimeout(slidetime);
                display($(this));
                e.preventDefault();
            });

            function display(elem){
                var $this   = elem;
                var repeat  = false;
                if(current == parseInt($this.index() + 1))
                    repeat = true;

                if(!repeat)
                    $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
                        $(this).animate({'opacity':'0.7'},700);
                    });

                current = parseInt($this.index() + 1);

                var elem = $('a',$this);

                    elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

                var info_elem = elem.next();
                $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
                    $('h1',$(this)).html(info_elem.find('.info_heading').html());
                    $(this).animate({'left':'0px'},400,'easeInOutQuad');
                });

                $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
                    $('p',$(this)).html(info_elem.find('.info_description').html());
                    $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
                })
                $('#rot1').prepend(
                $('<img/>',{
                    style   :   'opacity:0',
                    className : 'bg'
                }).load(
                function(){
                    $(this).animate({'opacity':'1'},600);
                    $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                        $(this).remove();
                    });
                }
              ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
            );
            }
        });
    </script>

where the jquery is applied

 <body>
    <div id="content">
        <a class="back" href=""></a>

        <div class="rotator">
            <ul id="rotmenu">
                <li>
                    <a href="rot1">Portfolio</a>
                    <div style="display:none;">
                        <div class="info_image">1.jpg</div>
                        <div class="info_heading">Our Works</div>
                        <div class="info_description">

                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="rot2">Services</a>
                    <div style="display:none;">
                        <div class="info_image">2.jpg</div>
                        <div class="info_heading">We serve</div>
                        <div class="info_description">

                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="rot3">Contact</a>
                    <div style="display:none;">
                        <div class="info_image">3.jpg</div>
                        <div class="info_heading">Get in touch</div>
                        <div class="info_description">

                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="rot4">Experiments</a>
                    <div style="display:none;">
                        <div class="info_image">4.jpg</div>
                        <div class="info_heading">We do crazy stuff</div>
                        <div class="info_description">

                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="rot5">Applications</a>
                    <div style="display:none;">
                        <div class="info_image">5.jpg</div>
                        <div class="info_heading">Working things</div>
                        <div class="info_description">

                            <a href="#" class="more">Read more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <div id="rot1">
                <img src="" width="800" height="300" class="bg" alt=""/>
                <div class="heading">
                    <h1></h1>
                </div>
                <div class="description">
                    <p></p>

                </div>    
            </div>
        </div>
    </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want it to be visible outside of its parent (.rotator) you need to change the parent’s CSS to have overflow: visible. Then you can position the #rotmenu wherever you want. 

    #rotmenu {
    position: absolute;
    top: 300px;
    left: 100px;
    z-index: 10;
}    
.rotator {
    ...
    overflow:visible;
    ...
}

    In addition, in order to continue masking the animated components, you need to set #rot1 to overflow: hidden and make it have the same dimensions as the common parent (.rotator).

    #rot1 {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

    Finally, just to prevent broken images from collecting in the DOM (which happens in the example, because we don’t include the source images), I added an error handler to the image insertion code to remove the image.

    $('#rot1').prepend(
$('<img/>', {
    style: 'opacity:0',
    className: 'bg'
}).error(function () {
    $(this).remove();
}).load(function () {
    $(this).animate({
        'opacity': '1'
    }, 600);
    $('#rot1 img:first').next().animate({
        'opacity': '0'
    }, 700, function () {
        $(this).remove();
    });
}).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '800').attr('height', '300'));

    jsfiddle

    • 0