CODEWITHSUNDEEP
jqueryhtmlcssscroll
Vikas Sharma
Vikas Sharma

Reputation: 80

Cross browser Issue with horizontal image scrolling

Here is my Fiddle.

I am facing issues in scrolling. I open the page in Chrome the scroll works perfectly fine,it stops when the content is finished.But in firefox it keeps on scrolling even if the content is finished as i have defined the fixed width to div.

My problem is i don't know how many images will be there, as it will come from database so i can't use fixed width for scrolling.

How can i get this fixed.

I use mouse drag for scrolling.

Here is my CSS code

#timeline {
    height: 375px;
    margin-top: 10px;
    padding: 20px;
    overflow: auto;   
}

.tl-events {
    width: 11800px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tl-events li {
    float: left;
    width: 300px;
    margin-right: 10px;
}

.tl-events ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

This is my html

<div id="timeline">
        <ul class="tl-events">
<li class="welcome">
<h2>Welcome to the interactive timeline of Google history!</h2>
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p>
</li>
<li class="welcome">
<h2>Welcome to the interactive timeline of Google history!</h2>
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p>
</li>
<li class="welcome">
<h2>Welcome to the interactive timeline of Google history!</h2>
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p>
</li>
<li class="welcome">
<h2>Welcome to the interactive timeline of Google history!</h2>
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p>
</li>
<li class="welcome">
<h2>Welcome to the interactive timeline of Google history!</h2>
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p>
</li>
<li class="welcome">
<h2>Welcome to the interactive timeline of Google history!</h2>
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p>
</li>

</ul>
    </div>

And here is my JS

$(document).ready(function () {        
        $('#timeline').mousedown(function (event) {
            $(this)
                .data('down', true)
                .data('x', event.clientX)
                .data('scrollLeft', this.scrollLeft);

            return false;
        }).mouseup(function (event) {
            $(this).data('down', false);
        }).mousemove(function (event) {
            if ($(this).data('down') == true) {
                this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
            }
        }).mousewheel(function (event, delta) {
            this.scrollLeft -= (delta * 30);
        }).css({
            'overflow' : 'hidden',
            'cursor' : '-moz-grab'
        });
    });

    $(window).mouseout(function (event) {
        if ($('#timeline').data('down')) {
            try {
                if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
                    $('#timeline').data('down', false);
                }                
            } catch (e) {}
        }
    });

What am i doing wrong here?

Upvotes: 1

Views: 170

Answers (2)

codebear22
codebear22

Reputation: 1877

It seems you have to get the width of the element that wrap the li options to set the width of .tl-events. You must no use a static width like .tl-events { width: 11800px;. How could you resolve. 

var welcome = $('.welcome'), cont=0;

$(welcome).each(function(index) {
    cont++;
});

var welcome_w = $('.welcome').width * cont;
$('#timeline').css('width', welcome_w);

You need the element 'welcome' to get it's width and multiply it by the number of welcome elements. Try this inside your $(document).ready function. And IMPORTANT delete your width from css of your .tl-events class.

Upvotes: 0

Mohinder Singh
Mohinder Singh

Reputation: 1830

Add display: inline-flex; width:auto; to .tl-events and then check.

Upvotes: 1

Related Questions