CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abdul Jabbar
Abdul Jabbar

Reputation: 2573

Moving a div on the left, other on right of one div

I am working on this scrollable tabs using jquery. It's working fine but the only problem i am facing is the position of the two arrow divs. They both are float:left but somehow coming stacked together on the right of the main tab container. Both of these divs are being created on run time. My desired positions of these two arrow divs is: left arrow div on the start (before tabs) and the right arrow div on the end (after tabs). Any help or suggestion will be welcomed.

JQuery code is below but to see it working, go here: JSFiddle 

(function ($) {
        var settings = {
            barheight: 38
        }
        $.fn.scrollabletab = function (options) {
            var ops = $.extend(settings, options);
            var ul = this.children('ul').first();
            var ulHtmlOld = ul.html();
            var tabBarWidth = $(this).width() - 60;
            ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
            ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
            var leftArrow = ul.children().last();
            leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
            leftArrow.children('.ui-icon-carat-1-w').first().css('left', '2px');
            ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
            var rightArrow = ul.children().last();
            rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
            rightArrow.children('.ui-icon-carat-1-e').first().css('left', '2px');
            var moveable = ul.find('.moveableContainer').first();
            leftArrow.click(function () {
                var offset = tabBarWidth / 6;
                var currentPosition = moveable.css('left').replace('px', '') / 1;
                if (currentPosition + offset >= 0) {
                    moveable.stop().animate({ left: '0' }, 'slow');
                }
                else {
                    moveable.stop().animate({ left: currentPosition + offset + 'px' }, 'slow');
                }
            });
            rightArrow.click(function () {
                var offset = tabBarWidth / 6;
                var currentPosition = moveable.css('left').replace('px', '') / 1;
                var tabsRealWidth = 0;
                ul.find('li').each(function (index, element) {
                    tabsRealWidth += $(element).width();
                    tabsRealWidth += ($(element).css('margin-right').replace('px', '') / 1);
                });
                tabsRealWidth *= -1;
                if (currentPosition - tabBarWidth > tabsRealWidth) {
                    moveable.stop().animate({ left: currentPosition - offset + 'px' }, 'slow');
                }
            });
            return this;
        }; // end of functions
    })(jQuery);
    $(function () {
        $("#tabs").tabs().scrollabletab();
    });

Upvotes: 1

Views: 210

Answers (1)

Praxis Ashelin
Praxis Ashelin

Reputation: 5217

The reason that your arrows both appear on the right of your fixedContainer, is because your fixedContainer is floated to the left as well.

If you have multiple elements with float: left;, they will be stacked next to eachother in the order of which they appear. Your HTML is rendered like this:

<div class="fixedContainer"></div>   <!-- your menu tabs -->
<div role="button"></div>            <!-- your left arrow -->
<div role="button"></div>            <!-- your right arrow -->

And all 3 of these divs are floated to the left, so they will appear next to eachother.

If you want your left arrow to appear to the left of your menu tabs, you will need to re-arrange your structure like this:

<div role="button"></div>            <!-- your left arrow -->
<div class="fixedContainer"></div>   <!-- your menu tabs -->
<div role="button"></div>            <!-- your right arrow -->

To do this, you need to change your Javascript code for the left arrow as following:

ul.prepend('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
var leftArrow = ul.children().first();

This will prepend() the arrow instead of append(), so it appears before the fixedContainer.

JSFiddle here

Upvotes: 3

Related Questions