Language: 
To browser these website, it's necessary to store cookies on your computer.
The cookies contain no personal information, they are required for program control.
  the storage of cookies while browsing this website, on Login and Register.

User

Welcome, Guest. Please login or register.
Did you miss your activation email?


Login with username, password and session length

Select language:

Community



Stats

  • *Total Members: 4442
  • *Latest: Argon2

  • *Total Posts: 16406
  • *Total Topics: 2506
  • *Online Today: 14
  • *Most Online: 292
(12.11.16, 09:37:31)
  • *Users: 0
  • *Guests: 0
  • *Spiders: 5
  • *Total: 5

  • *Yahoo!
  • *Google
  • *Baidu (3)

Author Topic: Animated Typewriter Effect with jQuery typer.js  (Read 2854 times)

0 Members and 0 Guests are viewing this topic.

Offline cieplutki

  • Pŕöúđ Mémbéŕ
  • Jr. Member
  • **
  • Posts: 68
  • Gender: Male
    • .:: ewmapa ::.
Hi
how to add this:
Code: [Select]
<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width'>

        <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Numans'>
        <style>
            html,body{margin:0; padding:0; height:100%; }
            body {
                display: table;
                width: 100%;

                color: black;
                text-align: center;
                font-family: 'Numans', sans-serif;
                white-space: nowrap;

                background: white;
                background: -moz-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
                background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
                background: -webkit-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
                background: -o-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
                background: -ms-radial-gradient(center, ellipse cover, white 0%, #f6f6f6 47%, #ededed 100%);
                background: radial-gradient(ellipse at center, white 0%, #f6f6f6 47%, #ededed 100%);
                filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=90, style=2);
            }

            div {
                display: table-cell;
                vertical-align: middle;

                text-align: center;
            }

            span { color:#0ae }
        </style>

        <title>jquery.typer.js | The typewriter effect</title>
    </head>

    <body>
        <div id="typer">foo</div>

        <script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
        <script src='jquery.typer.js'></script>
        <script>
            var win = $(window),
                foo = $('#typer');

            foo.typer(['<i>Anyone</i> <u>is</u> <b>awesome</b>!', 'Foo is <span>not</span> equal to bar.', 1337]);

            // unneeded...
            win.resize(function(){
                var fontSize = Math.max(Math.min(win.width() / (1 * 10), parseFloat(Number.POSITIVE_INFINITY)), parseFloat(Number.NEGATIVE_INFINITY));

                foo.css({
                    fontSize: fontSize * .8 + 'px'
                });
            }).resize();
        </script>
    </body>
</html>

php or html block and how?



Offline feline

  • CO PortaMx corp.
  • Administrator
  • *
  • Posts: 5786
  • Gender: Female
Re: Animated Typewriter Effect with jQuery typer.js
« Reply #1 on: 09.02.16, 20:06:12 »
That don't work in a block ..
html, header, body are used by smf in the index.template.php, so you can't use that in a block !
Many are stubborn in relation to the path, a few in relation to the target.

Offline cieplutki

  • Pŕöúđ Mémbéŕ
  • Jr. Member
  • **
  • Posts: 68
  • Gender: Male
    • .:: ewmapa ::.
Re: Animated Typewriter Effect with jQuery typer.js
« Reply #2 on: 10.02.16, 07:39:49 »
This code not working,
when put on html block - I can paste it wrong
Please show should look like acting block
I do not have any code in index.template



Offline feline

  • CO PortaMx corp.
  • Administrator
  • *
  • Posts: 5786
  • Gender: Female
Re: Animated Typewriter Effect with jQuery typer.js
« Reply #3 on: 10.02.16, 13:08:55 »
As I say above .. the code don't work in a block.
And currently i don't have the time to check this jquery tool...
Many are stubborn in relation to the path, a few in relation to the target.