Results 1 to 6 of 6

Thread: [RESOLVED] Scrolled Text

  1. #1

    Thread Starter
    Addicted Member Pc Monk's Avatar
    Join Date
    Feb 2010
    Posts
    188

    Resolved [RESOLVED] Scrolled Text

    i have a piece of code but the scroll is not working i wonder why !? i did put it all in 1 page or including them 1 by 1 (js first obviously) but it didnt work
    it has been made from 3 part

    Part I : Javascript
    Code:
    $(".toggle").on("click", function () {
        $(".container").toggleClass("microsoft");
    });
    Part II : CSS
    HTML Code:
    @charset "utf-8";
    /* CSS Document */
    
    .container {
        width: 18em;
        height: 8em;
        margin: 1em auto;
        overflow: hidden;
        background: white;
        position: relative;
        box-sizing: border-box;
    }
    
    .marquee {
        top: 6em;
        position: relative;
        box-sizing: border-box;
        animation: marquee 15s linear infinite;
    }
    
    .marquee:hover {
        animation-play-state: paused;
    }
    
    /* Make it move! */
    @keyframes marquee {
        0%   { top:   8em }
        100% { top: -11em }
    }
    
    /* Make it look pretty */
    .microsoft .marquee {
    	margin: 0;
        padding: 0 1em;
        line-height: 1.5em;
        font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
    }
    
    .microsoft:before, .microsoft::before,
    .microsoft:after,  .microsoft::after {
        left: 0;
        z-index: 1;
        content: '';
        position: absolute;
        pointer-events: none;
        width: 100%; height: 2em;
        background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
    }
    
    .microsoft:after, .microsoft::after {
        bottom: 0;
        transform: rotate(180deg);
    }
    
    .microsoft:before, .microsoft::before {
        top: 0;
    }
    
    /* Style the links */
    .vanity {
        color: #333;
        text-align: center;
        font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
    }
    
    .vanity a, .microsoft a {
        color: #1570A6;
        transition: color .5s;
        text-decoration: none;
    }
    
    .vanity a:hover, .microsoft a:hover {
        color: #F65314;
    }
    
    /* Style toggle button */
    .toggle {
    	display: block;
        margin: 2em auto;
    }
    Part III : The Code
    HTML Code:
    <div class="microsoft container">
        <p class="marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
    </div>
    <button class="toggle">Toggle Beautification</button>
    Thanks in advanced
    Body Language tells the truth! even from the grave tsaeb eht morf gninnur ,nwod deaH
    All the big things started from little! teef my tsap evom sekans ,duol raor slluB
    Lietome.ir

  2. #2
    Junior Member
    Join Date
    Feb 2014
    Location
    Sydney, Australia
    Posts
    23

    Re: Scrolled Text

    Did you include the jQuery framework? This is a jQuery function.

  3. #3

    Thread Starter
    Addicted Member Pc Monk's Avatar
    Join Date
    Feb 2010
    Posts
    188

    Re: Scrolled Text

    Quote Originally Posted by bodessia View Post
    Did you include the jQuery framework? This is a jQuery function.
    what jquery framework ?
    Last edited by Pc Monk; Feb 18th, 2014 at 06:04 AM.
    Body Language tells the truth! even from the grave tsaeb eht morf gninnur ,nwod deaH
    All the big things started from little! teef my tsap evom sekans ,duol raor slluB
    Lietome.ir

  4. #4
    Junior Member
    Join Date
    Feb 2014
    Location
    Sydney, Australia
    Posts
    23

  5. #5

    Thread Starter
    Addicted Member Pc Monk's Avatar
    Join Date
    Feb 2010
    Posts
    188

    Re: Scrolled Text

    Quote Originally Posted by bodessia View Post
    sorry for the delay i did include the javascript and html and css what else ?
    Body Language tells the truth! even from the grave tsaeb eht morf gninnur ,nwod deaH
    All the big things started from little! teef my tsap evom sekans ,duol raor slluB
    Lietome.ir

  6. #6
    Junior Member
    Join Date
    Feb 2014
    Location
    Sydney, Australia
    Posts
    23

    Re: Scrolled Text

    Quote Originally Posted by Pc Monk View Post
    sorry for the delay i did include the javascript and html and css what else ?
    Get the latest version of jQuery here http://jquery.com/ (2.1.0 at the time of writing this) which allows for the `beautification` part to work
    Looks like you also need the JavaScript from here: http://leaverou.github.io/prefixfree/prefixfree.js for the scrolling text to work

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    		<title>CSS3 Vertical Marquee</title>	
    		<script type='text/javascript' src="scroll.js"></script> 
    		<style type='text/css'>
    				.container {
    				width: 18em;
    				height: 8em;
    				margin: 1em auto;
    				overflow: hidden;
    				background: white;
    				position: relative;
    				box-sizing: border-box;
    			}
    
    			.marquee {
    				top: 6em;
    				position: relative;
    				box-sizing: border-box;
    				animation: marquee 15s linear infinite;
    			}
    
    			.marquee:hover {
    				animation-play-state: paused;
    			}
    
    			/* Make it move! */
    			@keyframes marquee {
    				0%   { top:   8em }
    				100% { top: -11em }
    			}
    
    			/* Make it look pretty */
    			.microsoft .marquee {
    				margin: 0;
    				padding: 0 1em;
    				line-height: 1.5em;
    				font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
    			}
    
    			.microsoft:before, .microsoft::before,
    			.microsoft:after,  .microsoft::after {
    				left: 0;
    				z-index: 1;
    				content: '';
    				position: absolute;
    				pointer-events: none;
    				width: 100%; height: 2em;
    				background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
    			}
    
    			.microsoft:after, .microsoft::after {
    				bottom: 0;
    				transform: rotate(180deg);
    			}
    
    			.microsoft:before, .microsoft::before {
    				top: 0;
    			}
    
    			/* Style the links */
    			.vanity {
    				color: #333;
    				text-align: center;
    				font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
    			}
    
    			.vanity a, .microsoft a {
    				color: #1570A6;
    				transition: color .5s;
    				text-decoration: none;
    			}
    
    			.vanity a:hover, .microsoft a:hover {
    				color: #F65314;
    			}
    
    			/* Style toggle button */
    			.toggle {
    				display: block;
    				margin: 2em auto;
    			}
    		</style>
    		<script type='text/javascript'>//<![CDATA[ 
    		$(window).load(function(){
    		$(".toggle").on("click", function () {
    			$(".container").toggleClass("microsoft");
    		});
    		});//]]>  
    
    		</script>
    	</head>
    	<body>
    		<div class="microsoft container">
    			<p class="marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
    		</div>
    		<button class="toggle">Toggle Beautification</button>
    		<p class="vanity">
    			<a href="https://twitter.com/jonathansampson">@jonathansampson</a> of 
    			<a href="https://twitter.com/appendTo">@appendTo</a>
    		</p> 
    	</body>
    </html>
    Everything neatly placed together in a zip file for you:
    scrolled_text..zip

    NOTE: I did not write this code, I merely combined it so it works

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width