CODEWITHSUNDEEP
cssmeteor
user3213821
user3213821

Reputation: 229

How to apply CSS to Selected One in Meteor?

I need to apply CSS to Selected One in Meteor JS.I did a sample example with a list of names then when ever clicks a name then get details of that name.So here i need to highlight the clicked name in a list of names.In this sample exe i get names using Publish/Subscribe methods.So how to highlight the selected one in a list of names.Please see the below code and css [Here css hover will works but active not working ]& suggest me what to do?

Template Code :

<template name="client">
    <div style="float:left;">
    <div style="float:left;">
   <h2> Clients List</h2>
    {{#each clientname}}      
             <div class="client {{isselected}}">{{name}}</div> 
    {{/each}}
    </div>
    <div style="float:left;padding-left:400px;">
    {{> clientmaincontent}}
    </div>
    </div>
</template>

<template name="clientdata">
<div>
<h1> This is Client Data</h1>
<div style="font-weight:bold;font-size:24px;">Name : {{cname}}</div></br>
<div style="font-weight:bold;font-size:24px;">ID : {{id}}</div> </br>
<div style="font-weight:bold;font-size:24px;">Hcare : {{hcare}}</div> 
</div>
</template>

CSS :

  .client .selected
 {
  background-color: red;
 }
.client {
    cursor: pointer;
    width:200px;
    height:20px;
    border:4px solid #eeeee8;
    border-radius: 4px;
    -moz-border-radius: 4px;
    margin: 4px;
   // float:left;
    text-align: center;
    background-color:#eeeee8;
    font-size: 20px;
}

JS Code :

Template.client.events
          ({
            'click .client' : function (e,t)
            {

              // template data, if any, is available in 'this'
              if (typeof console !== 'undefined')
              //alert("You pressed the button");
                console.log("You pressed the Client button");
                e.preventDefault();
                 Session.set("selectedClient", this.name);
                        }
              });
Template.client.isselected = function ()
             {
                console.log("Hello DD="+Session.equals("selectedClient", this.name) ? "selected" : '');
                return Session.equals("selectedClient", this.name) ? "selected" : '';
              };

Upvotes: 1

Views: 394

Answers (1)

Tobias
Tobias

Reputation: 4074

This should work. Though it would probably better not to store the client name in the session variable but a more unique identifier. {{isSelected}} inserts selected into the list of classes if the client name equals the name stored in the session variable selectedClient.

HTML:

<!-- in some other template -->
{{#each clientname}}      
  {{> client}}
{{/each}}

<template name="client">
   <div class="client {{isSelected}}">{{name}}</div> 
</template>

JS (wrap in Meteor.isClient):

Template.client.events({
  'click': function () {
    Session.set("selectedClient", this.name);
  }
});

Template.client.isSelected = function () {
  return Session.equals("selectedClient", this.name) ? "selected" : '';
};

CSS:

.client .selected {
  background-color: red;
}

Upvotes: 1

Related Questions