Stop or Pause a Marquee in Starting Position

Question

I have Some Queries Related to Marquee in HTML
1.First i have created a Simply Marquee that movies in Direction Upwards
2.Marquee Contents are Entered in List.
3.Every List should stop for 1 Sec in Staring Position

Is there any way to Solve This Issues

Here is the Picture For Your clarification

Answer 1

I have worked with div as marquee is not cross-browser.

i have also added <div id="cont"></div> to show that even if has something on top it will still work.

code for stooping Every List should stop for 1 Sec in Staring Position

Working Demo http://jsfiddle.net/4yYsu/2/

html

<div id="cont"></div>
<div id="container">
    <ul id="mytext">
        <li>this is a simple text to test custom marquee</li>
        <li>this is a simple text</li>
        <li>test custom marquee</li>
    </ul>
</div>

css

#cont {
    height:200px;
    width:200px;
}
#container {
    display: inline-block;
    overflow: hidden;
    width: auto;
    position:absolute;
}
#mytext {
    display: inline-block;
    position: relative;
    margin-left:10px;
    margin-bottom:10px;
}

js

txt = $("#mytext");
length = $("#mytext li").length;
height_ul = parseInt(txt.height());
height_li = parseInt(txt.height()) / length;
delta = 0;
run();

function run() {
    delta = (delta - height_li < -1 * height_ul) ? height_ul : delta - height_li;
    if (delta <= 0) {
        scroll_li(delta);
    } else if (delta = height_ul) {
        txt.animate({
            top: delta
        }, 0, "linear");
        delta = 0;
        scroll_li(delta);
    }
    setTimeout(run, 1000);
}

function scroll_li(delta) {
    txt.animate({
        top: delta
    }, 2000, "linear").delay(1000);
}

previous code

Working Demo http://jsfiddle.net/cse_tushar/4yYsu/

HTML

<div id="cont"></div>
<div id="container">
    <ul id="mytext">
        <li>this is a simple text to test custom marquee</li>
        <li>this is a simple text</li>
        <li>test custom marquee</li>
    </ul>
</div>

CSS

#cont {
    height:200px;
    width:200px;
}
#container {
    display: inline-block;
    overflow: hidden;
    width: auto;
    position:absolute;
}
#mytext {
    display: inline-block;
    position: relative;
    margin-left:10px;
    margin-bottom:10px;
}

js

$(function () {
    var txt = $("#mytext");
    txt.bind('scroll', function () {
        var el = $(this);
        // Scroll state machine
        var scrollState = el.data("scrollState") || 0;
        el.data("scrollState", (scrollState + 1) % 4);
        switch (scrollState) {
            case 0:
                // initial wait
                el.css({
                    top: 0
                });
                el.show();
                window.setTimeout(function () {
                    el.trigger("scroll");
                }, 1000);
                break;
            case 1:
                // start scroll
                var delta = 0 - parseInt(el.height());
                if (delta < 0) {
                    el.animate({
                        top: delta
                    }, 2000, "linear", function () {
                        el.trigger("scroll");
                    });
                    delta = -1 * parseInt(delta) + 'px';
                    el.animate({
                        top: delta
                    }, 0, "linear", function () {
                        el.trigger("scroll");
                    });
                    el.animate({
                        top: 0
                    }, 2000, "linear", function () {
                        el.trigger("scroll");
                    });
                }
                break;
        }
    }).trigger("scroll");
});

Answer 2

Please take a look at the following link

https://github.com/aamirafridi/jQuery.Marquee

Its a simple plugin for jQuery. What you are looking for can be done modifying the configuration.

Answer 3

The Exact Correct Answer For This solution is Given By Mr Lister see the comments to Get solution
The Solution for this Question is below..

Here is the Working Code..

HTML

<div class="container">
   <ul>
      <li> this is a simple text to test custom marquee</li>
      <li> this is a simple text </li>
      <li> test custom marquee </li>

   </ul>
</div>

JavaScript :

var top = 8; run();

function run()
{
    var ul = document.getElementsByTagName('ul')[0];
    var time = 2000;
    if (top<-4) {
        top = 8; 
        ul.style.transition = 'none';
        time = 100;
    }
    else if (top>0) {
        top = 0; 
        ul.style.transition = 'all 4s linear';
        time = 5000;
    }
    else {
        top -= 2;
        ul.style.transition = 'all 1s linear';
    }
    ul.style.marginTop = ''+top+'em';
    setTimeout(run, time);
}

CSS :

.container {height:8em; overflow:hidden}
ul {margin-top:8em;}
li {white-space:nowrap; line-height:2; margin-top:0;}

Mr Lister Thanks So Much for quick reply and this is what i exactly need .. Thanks Again