Hello People,

Today Iam Gonna Make A Tutorial For Marquee Codes, So Lets Start

Hosting
First We Need To Host jQuery 1.6.2: Here.
Then Some JavaScript Files:File1 & File2 (From RemySharp)

---

JavaScripts
and now lets add script to make the marquee works perfectly

Code:

    <script type="text/javascript">
        <!--
        $(function () {       
            $('div.demo marquee').marquee('pointer').mouseover(function () {
                $(this).trigger('stop');
            }).mouseout(function () {
                $(this).trigger('start');
            }).mousemove(function (event) {
            if ($(this).data('drag') == true) {
                    this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
                }
            }).mousedown(function (event) {
                $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
            }).mouseup(function () {
                $(this).data('drag', false);
            });
        });
        //-->
    </script>

So We Will Call The Marquee's Class : demo But If You Wanna Use Your Own Class Then Replace ".demo" In This Place

Code:

('div.demo marquee')

With Your Own Class

---

HTML
And Now Lets Do The HTML Code

Code:

<div class="demo">
   <marquee behavior="scroll" direction="left" scrollamount="2">
      <p>This Is A Perfect Smooth Marquee.</p>
   </marquee>
</div>

---

Preview

Perfect Marquee


It's Info
- Smooth Sliding
- Stop OnHover
- Can Be Drag
- So Sexy

---

Normal Marquee


It's Info
- Harsh Sliding
- Never Stop
- Dream Of Draging it
- So Ugly

---

Enjoy, ArChKnIgHt

Awesome

Thanks

I noticed on your sliding one you can click and drag it XD

Yup Thats Cuz Its Perfect From ArChKnIgHt

and this part xD

Code:

.mousemove(function (event) {
            if ($(this).data('drag') == true) {
                    this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
                }
            }).mousedown(function (event) {
                $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
            }).mouseup(function () {
                $(this).data('drag', false);
            });

So 'drag', false would be the fix?

Ops Sorry ,...
Forget some piece of the code ,

CODE UPDATED, ArChKnIgHt

Sorry but you made the tutorial not the script

yea i know and i said that before its from RemySharp

Only problem with the drag is you cannot copy and paste.

yes u can select from outside the maquee

How can i fix the height??

http://tommyzserver.forummotion.com/h6-

change the height in the CSS class

how?

add class to the HTML code

Code:

<marquee class="xxxx" behavior="scroll" direction="left" scrollamount="2">
      <p>This Is A Perfect Smooth Marquee.</p>
  </marquee>

then into ur CSS sheet add this code

Code:

.xxxx {
height: anyheight;
}

PS1 : you can replace "xxxx" with any class name
PS2 : replace "anyheight" with marquee height

btw sorry for long time no answer cuz i was very busy

ahh thanks man..

It okay for long time cause im patient and how can i make it that u can drag up or down?

easy... just replace the script with this one

Code:

    <script type="text/javascript">
    <!--
    $(function () {
        $('div.demo marquee').marquee('pointer').mouseover(function () {
            $(this).trigger('stop');
        }).mouseout(function () {
            $(this).trigger('start');
        }).mousemove(function (event) {
            if ($(this).data('drag') == true) {
                this.scrollTop = $(this).data('scrollY') + ($(this).data('y') - event.clientY);
            }
        }).mousedown(function (event) {
            $(this).data('drag', true).data('y', event.clientY).data('scrollY', this.scrollTop);
        }).mouseup(function () {
            $(this).data('drag', false);
        });
    });
    //-->
    </script>

enjoy