Welcome to Creative Nation!

Welcome to Creative Nation, . Feel free to browse our forums and help yourself to all our free tutorials, images, and recources!

Download

To download this script go back to article »

Member Login

Lost your password?

Not a member yet? Sign Up!

[HTML&JavaScript] Perfect Marquee


The next generation of web design.


You are not connected. Please login or register

[HTML&JavaScript] Perfect Marquee

View previous topic View next topic Go down  Message [Page 1 of 1]

1 [HTML&JavaScript] Perfect Marquee on 9/6/2011, 6:21 am

ArChKnIgHt

avatar

Perfect Marquee

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 Big Grin




Normal Marquee


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



Enjoy, ArChKnIgHt



Last edited by ArChKnIgHt on 9/6/2011, 4:41 pm; edited 1 time in total




http://ultragamerz.forumotion.net/

Gangstar15

avatar

Awesome Wink

ArChKnIgHt

avatar

Thanks Big Grin




http://ultragamerz.forumotion.net/

virtuosity

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

ArChKnIgHt

avatar

Yup Thats Cuz Its Perfect From ArChKnIgHt Tongue Cool

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);
            });



Last edited by ArChKnIgHt on 9/7/2011, 6:26 am; edited 2 times in total (Reason for editing : Code updated)




http://ultragamerz.forumotion.net/

virtuosity

avatar
So 'drag', false would be the fix?

ArChKnIgHt

avatar

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

CODE UPDATED, ArChKnIgHt




http://ultragamerz.forumotion.net/

Gangstar15

avatar

Sorry but you made the tutorial not the script Smile

ArChKnIgHt

avatar

yea i know and i said that before its from RemySharp




http://ultragamerz.forumotion.net/

virtuosity

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

ArChKnIgHt

avatar

yes u can select from outside the maquee Tongue




http://ultragamerz.forumotion.net/

12 Re: [HTML&JavaScript] Perfect Marquee on 9/22/2011, 5:05 am

shadowz_au

avatar

How can i fix the height??

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

13 Re: [HTML&JavaScript] Perfect Marquee on 9/22/2011, 12:30 pm

Daniel

avatar

change the height in the CSS class Smile

14 Re: [HTML&JavaScript] Perfect Marquee on 9/22/2011, 12:32 pm

shadowz_au

avatar

how?

15 Re: [HTML&JavaScript] Perfect Marquee on 9/22/2011, 5:01 pm

ArChKnIgHt

avatar

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




http://ultragamerz.forumotion.net/

16 Re: [HTML&JavaScript] Perfect Marquee on 9/23/2011, 12:40 am

shadowz_au

avatar

ahh thanks man..

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

17 Re: [HTML&JavaScript] Perfect Marquee on 9/23/2011, 11:48 am

ArChKnIgHt

avatar

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 Big Grin




http://ultragamerz.forumotion.net/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

.

Create a forum | © PunBB | Free forum support | Contact | Report an abuse | Forumotion.