broadcastmouseevents
Version:
Duplicate/broadcast mouse event over all clients that are connected
52 lines (45 loc) • 4.45 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>BroadCast mouse and scroll position</title>
<link href="css/main.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<h1>BroadCast mouse and scroll position</h1>
<div class="mousePad">
<p class="discription">Drag mouse to broadcast it</p>
<div class="epicBox">
<div class="mouse"></div>
</div>
</div>
<div class="scrollDiv">
<p class="scrollDescription">Scroll to broadcast it</p>
<div class="scrollBox">
<div class="scrollingBox">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo sem, malesuada eget nisi et, posuere laoreet quam. Sed quis tortor sapien. Cras fermentum ut dolor ultrices sollicitudin. Vestibulum a vulputate mauris, vel pharetra justo. Praesent in volutpat sem. Phasellus commodo lacus at mi posuere molestie. Curabitur pretium neque sit amet hendrerit adipiscing. Donec congue ut dolor vel tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus quis felis lacus. Praesent orci augue, feugiat at risus vitae, euismod ultrices elit. Nulla sed mattis urna. Sed a hendrerit eros, a sodales nulla. Mauris molestie congue dictum. Vestibulum condimentum lorem nec mattis sodales.
</p>
<p>
Phasellus consequat lectus vitae tellus imperdiet condimentum. Maecenas eu nulla eget lorem volutpat eleifend. Praesent id diam non nibh mollis porttitor ut eget metus. Aenean nibh lacus, gravida quis turpis in, consequat scelerisque turpis. Proin lorem nisl, tincidunt sit amet dapibus in, pharetra ac erat. Etiam eget massa non elit laoreet congue. Praesent vel dui id elit dignissim blandit. Sed ante enim, malesuada non sem vitae, ultricies viverra elit. Nunc sit amet rutrum nisi. Duis suscipit pretium nibh a eleifend.
</p>
<p>
Vestibulum quis felis iaculis, interdum nunc eget, ultricies augue. Cras sodales nunc vitae erat aliquet ornare. Fusce congue aliquet eros, rutrum fermentum velit elementum a. Suspendisse eu diam tristique, pretium leo ac, viverra metus. Ut sit amet dictum risus. Integer lobortis justo a ipsum feugiat rutrum. Pellentesque elementum semper purus eget ornare. Integer eget massa mi. Nulla fermentum congue ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla vel dignissim risus, ac interdum augue. Proin dictum neque sed nisi posuere cursus. Pellentesque pharetra, mauris et accumsan mattis, lacus lacus sollicitudin libero, ac imperdiet turpis libero a urna. Nunc facilisis facilisis leo, vitae mollis velit pulvinar a. In nec turpis id sem faucibus fermentum non vel neque. Nam ut ante dolor.
</p>
<p>
Donec pretium mattis ligula at faucibus. Curabitur mollis ullamcorper dolor, quis aliquet est accumsan et. Mauris euismod lorem eu tellus consequat eleifend. Suspendisse ipsum orci, fermentum placerat felis et, posuere aliquam est. Duis malesuada sagittis augue. Nulla rhoncus rhoncus tortor, at porta felis rhoncus sed. Mauris odio ligula, adipiscing sit amet ante eget, consectetur porta lectus. Proin iaculis magna porttitor justo dictum, vitae lacinia lacus dapibus. In vel varius nisl, nec laoreet odio. Cras sollicitudin pellentesque massa, at consectetur felis vehicula vel. In ut orci quis orci facilisis iaculis nec vel dui. Aliquam mi purus, accumsan in ligula ut, cursus tincidunt leo.
</p>
<p>
Quisque hendrerit egestas magna a fringilla. Vivamus sit amet ullamcorper orci, ullamcorper facilisis ante. Phasellus nisi purus, lacinia in ante quis, lacinia euismod mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla imperdiet sit amet nibh id malesuada. Aliquam facilisis accumsan sapien in condimentum. Suspendisse dictum rhoncus arcu, vel bibendum enim vestibulum sed. Curabitur tincidunt pulvinar libero, id varius diam viverra nec. Suspendisse dictum sapien libero, ac hendrerit magna volutpat a. Aenean quis malesuada est. Quisque quis tempus odio, eu convallis lectus. Aenean eu ligula vitae tellus tempus lacinia sit amet tincidunt tellus.
</p>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="socket.io/socket.io.js"></script>
<script src="js/main.js"></script>
</body>
</html>