How to display .toggle or .Animate to all connected browser sessions using Meteor


Tags: javascript,jquery,html,css,meteor

Problem :

But how do you show the interaction of clicking on an element that toggles or animates? The meteor checkers example: http://checkers.meteor.com/

In the example below, I would like for every browser that's connected to the Meteor server to be able to see when one of the other browsers makes the shape change.

https://jsfiddle.net/qh2jyL3b/

HTML:

<div class="square"></div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

CSS:

.square {
  width: 100px;
  height: 100px;
  background: white;
  border: 10px solid black;
  cursor: pointer;

}

JavaScript:

$(".square").click(function() {
    $( this ).toggleClass("circle");
  });


Solution :

You can store click state in Meteor.Collection. Changes in collections propagate reactively for all connected clients. Just create separate document for each square and save state here. Then you can create helper that displays correct class name depending on db items.

For example you can do this this way:

For each chess-table you can create separate document on server side:

ChessTableCell = new Mongo.Collection('chesstablecell');

Then you can store state of each cell in each of this document. So initially you can insert

ChessTableCell.insert({name: 'a1', state: false);
ChessTableCell.insert({name: 'a2', state: false);

...etc

And on your client side you have access to cells states like this:

ChessTableCell.findOne({name: 'a1'}).state;

And on click you just need to toggle state of clicked cell. You can do it in a following way:

Template.chessboard.events({//or whatever your template is called like
    'click .cell': function(e,t) {
      var cellName = $(e.target).data('name'); //if you specify cell name in your html in data-name attribute
      var cellValue = ChessTableCell.findOne({name: cellName}).state;
      //here you can update the value
      ChessTableCell.update({name: cellValue}, {$set: { state: !cellValue}});
    }
});

Then state will change reactively on every connected client. Of course you need to reflect those changes in your html like this:

{{#each ChessTableCells}}
  <div class="cell {{#if state}}active{{/if}}" data-name="{{name}}"></div>
{{/each}}

And in your client code:

Template.chessboard.helpers({
  ChessTableCells: function() { return ChessTableCell.find({}); }
});

    CSS Howto..

    how to create the scrolling Menu in css?

    css how to increase the size of rounded image button with varying text

    I am having a hard time figuring out how to dynamically setup a timeline

    How to disable webkit-text-size-adjust with JavaScript

    How * tag can be used in CSS?

    Menu - Show up the Submenuitems under the whole Menuitems - HTML/CSS

    How to add the footer with social icons in bootstrap?

    Bootstrap dropdown div not showing in non-collapsed view

    How to change the color of the active link in the menu

    How do I make my images in my div change opacity on hover?

    How can I compute a percentage based margin with LESS css?

    How do I require an HTML document (webpage) to be a certain size, or use scroll bars

    How to vertically center a div for all browsers?

    How to mimic Photoshop “Color Overlay” in CSS

    How to do Hanging Punctuation in HTML / CSS

    How do I conditionally apply CSS styles in AngularJS?

    How do I specify that a html cell should have the minimum width it needs to display all of its content

    jquery - how to change the display css attribute of a button within a li on hover

    How can I prevent the Featherlight lightbox from creating recursive dialogs?

    Show header when at top of page - Scroll event re-firing issue

    Modal box doesn't show completely

    how to hide the content of the div in css

    How to ignore

    CSS rules in wordpress theme?

    css breadcrumbs breaks into 2 lines, how to controll it in responsive?

    How to add comments to inline CSS? [closed]

    How to get css background color on tag to span entire row

    How can I make my webpage background cover fixed for the full size page in css?

    CSS how to change page content depending on page size (zoom) in responsive design

    how I can set color of anything in css [closed]

    How to make an image follows scrolling until a certain point