Question

The script below creates a slider widget the takes a definition list and turns it into a slide deck. Each dt element is rotated via css to become the “spine”, which is used to reveal that dt’s sibling dd element.

What I’m trying to do is to enhance it so that I can have the option to remove the spines from the layout and just use forward and back buttons on either side of the slide deck. To do that, I set the dt’s to display:none via CSS and use the code under the “Remove spine layout” comment to test for visible.

This works fine to remove the spines, now I need to dynamically create 2 absolutely positioned divs to hold the left and right arrow images, as well as attach a click handler to them.

My first problem is that my attempt to create the divs is not working.

Any help much appreciated.

jQuery.noConflict();
(function(jQuery) {
    if (typeof jQuery == 'undefined') return;

    jQuery.fn.easyAccordion = function(options) {

    var defaults = {            
        slideNum: true,
        autoStart: false,
        pauseOnHover: true,
        slideInterval: 5000
    };

    this.each(function() {

        var settings = jQuery.extend(defaults, options);
        jQuery(this).find('dl').addClass('easy-accordion');

        // -------- Set the variables ------------------------------------------------------------------------------

        jQuery.fn.setVariables = function() {
            dlWidth = jQuery(this).width()-1;
            dlHeight = jQuery(this).height();
            if (!jQuery(this).find('dt').is(':visible')){
                dtWidth = 0;
                dtHeight = 0;
                slideTotal = 0;
            // Add an element to rewind to previous slide
                var slidePrev = document.createElement('div');
                slidePrev.className = 'slideAdv prev';
                jQuery(this).append(slidePrev);
                jQuery('.slideAdv.prev').css('background':'red','width':'50px','height':'50px');

            // Add an element to advance to the next slide
                var slideNext = document.createElement('div');
                slideNext.className = 'slideAdv next';
                jQuery(this).append(slideNext);
                jQuery('.slideAdv.next').css('background':'green','width':'50px','height':'50px');
            }
            else
            {
                dtWidth = jQuery(this).find('dt').outerHeight();
                if (jQuery.browser.msie){ dtWidth = jQuery(this).find('dt').outerWidth();}
                dtHeight = dlHeight - (jQuery(this).find('dt').outerWidth()-jQuery(this).find('dt').width());
                slideTotal = jQuery(this).find('dt').size();
            }

            ddWidth = dlWidth - (dtWidth*slideTotal) - (jQuery(this).find('dd').outerWidth(true)-jQuery(this).find('dd').width());
            ddHeight = dlHeight - (jQuery(this).find('dd').outerHeight(true)-jQuery(this).find('dd').height());
        };
        jQuery(this).setVariables();

        // -------- Fix some weird cross-browser issues due to the CSS rotation -------------------------------------

        if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop;  /* Safari and Chrome */ }
        if (jQuery.browser.mozilla){ var dtTop = dlHeight - 20; var dtOffset = - 20; /* FF */ }
        if (jQuery.browser.msie){ var dtTop = 0; var dtOffset = 0; /* IE */ }
        if (jQuery.browser.opera){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; } /* Opera */

        // -------- Getting things ready ------------------------------------------------------------------------------

        var f = 1;
        var paused = false;
        jQuery(this).find('dt').each(function(){
            jQuery(this).css({'width':dtHeight,'top':dtTop,'margin-left':dtOffset});
            // add unique id to each tab
            jQuery(this).addClass('spine_' + f);
            // add active corner
            var corner = document.createElement('div');
                corner.className = 'activeCorner spine_' + f;
            jQuery(this).append(corner);

            if(settings.slideNum == true){
                jQuery('<span class="slide-number">'+f+'</span>').appendTo(this);
                if(jQuery.browser.msie){    
                    var slideNumLeft = parseInt(jQuery(this).find('.slide-number').css('left'));
                    if(jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){
                        jQuery(this).find('.slide-number').css({'bottom':'auto'});
                        slideNumLeft = slideNumLeft - 14;
                        jQuery(this).find('.slide-number').css({'left': slideNumLeft})
                    }
                    if(jQuery.browser.version == 8.0 || jQuery.browser.version == 9.0){
                    var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
                    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top'))  - 20; 
                    jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
                        slideNumLeft = slideNumLeft - 10;
                    jQuery(this).find('.slide-number').css({'left': slideNumLeft})
                    jQuery(this).find('.slide-number').css({'marginTop': 10});
                    }
                } else {
                    var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
                    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')); 
                    jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal}); 
                }
            }
            f = f + 1;
        });

        if(jQuery(this).find('.active').size()) { 
            jQuery(this).find('.active').next('dd').addClass('active');
        } else {
            jQuery(this).find('dt:first').addClass('active').next('dd').addClass('active');
        }

        jQuery(this).find('dt:first').css({'left':'0'}).next().css({'left':dtWidth});
        jQuery(this).find('dd').css({'width':ddWidth,'height':ddHeight});   


        // -------- Functions ------------------------------------------------------------------------------

        jQuery.fn.findActiveSlide = function() {
                var i = 1;
                this.find('dt').each(function(){
                if(jQuery(this).hasClass('active')){
                    activeID = i; // Active slide
                } else if (jQuery(this).hasClass('no-more-active')){
                    noMoreActiveID = i; // No more active slide
                }
                i = i + 1;
            });
        };

        jQuery.fn.calculateSlidePos = function() {
            var u = 2;
            jQuery(this).find('dt').not(':first').each(function(){  
                var activeDtPos = dtWidth*activeID;
                if(u <= activeID){
                    var leftDtPos = dtWidth*(u-1);
                    jQuery(this).animate({'left': leftDtPos});
                    if(u < activeID){ // If the item sits to the left of the active element
                        jQuery(this).next().css({'left':leftDtPos+dtWidth});    
                    } else{ // If the item is the active one
                        jQuery(this).next().animate({'left':activeDtPos});
                    }
                } else {
                    var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1));
                    jQuery(this).animate({'left': rightDtPos});
                    var rightDdPos = rightDtPos+dtWidth;
                    jQuery(this).next().animate({'left':rightDdPos});   
                }
                u = u+ 1;
            });
            setTimeout( function() {
                jQuery('.easy-accordion').find('dd').not('.active').each(function(){ 
                    jQuery(this).css({'display':'none'});
                });
            }, 400);
        };

        jQuery.fn.activateSlide = function() {
            this.parent('dl').setVariables();   
            this.parent('dl').find('dd').css({'display':'block'});
            this.parent('dl').find('dd.plus').removeClass('plus');
            this.parent('dl').find('.no-more-active').removeClass('no-more-active');
            this.parent('dl').find('.active').removeClass('active').addClass('no-more-active');
            this.addClass('active').next().addClass('active');  
            this.parent('dl').findActiveSlide();
            if(activeID < noMoreActiveID){
                this.parent('dl').find('dd.no-more-active').addClass('plus');
            }
            this.parent('dl').calculateSlidePos();  
        };

        jQuery.fn.rotateSlides = function(slideInterval, timerInstance) {
            var accordianInstance = jQuery(this);
            timerInstance.value = setTimeout(function(){accordianInstance.rotateSlides(slideInterval, timerInstance);}, slideInterval);
            if (paused == false){
                jQuery(this).findActiveSlide();
                var totalSlides = jQuery(this).find('dt').size();
                var activeSlide = activeID;
                var newSlide = activeSlide + 1;
                if (newSlide > totalSlides) {newSlide = 1; paused = true;}
                jQuery(this).find('dt:eq(' + (newSlide-1) + ')').activateSlide(); // activate the new slide
            }
        }

        // -------- Let's do it! ------------------------------------------------------------------------------

        function trackerObject() {this.value = null}
        var timerInstance = new trackerObject();

        jQuery(this).findActiveSlide();
        jQuery(this).calculateSlidePos();

        if (settings.autoStart == true){
            var accordianInstance = jQuery(this);
            var interval = parseInt(settings.slideInterval);
            timerInstance.value = setTimeout(function(){
                accordianInstance.rotateSlides(interval, timerInstance);
                }, interval);
        } 

        jQuery(this).find('dt').not('active').click(function(){
            var accordianInstance = jQuery(this); //JSB to fix bug with IE < 9
            jQuery(this).activateSlide();
            clearTimeout(timerInstance.value);
            timerInstance.value = setTimeout(function(){
                accordianInstance.rotateSlides(interval, timerInstance);
                }, interval);
        }); 

        if (!(jQuery.browser.msie && jQuery.browser.version == 6.0)){ 
            jQuery('dt').hover(function(){
                jQuery(this).addClass('hover');
            }, function(){
                jQuery(this).removeClass('hover');
            });
        }
        if (settings.pauseOnHover == true){
            jQuery('dd').hover(function(){
                paused = true;
            }, function(){
                paused = false;
            });
        }
    });
    };
})(jQuery);

Answer 1

Creating elements in jQuery is easy:

$newDiv = $('<div />');
$newDiv.css({
  'position': 'absolute',
  'top': '10px',
  'left': '10px'
});

$newDiv.on('click', function() {
  alert('You have clicked me');
});

$('#your_container').append($newDiv);