We Keep Coding

How can I add an effect to know the selected item in list

I have a list and I want to add an effect to the item selected after click. For example when I click to the first item 'Complémentaire forfait' I want to see an effect to know which item is selected from the list.
Here is my HTML. I want to know if I can do what I want with Javascript or jQuery?
<div data-toggle="collapse" data-target="#architect" aria-expanded="false" aria-controls="collapseExample">
<a class="mdc-list-item" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
<i class="architect_aarrow material-icons" style="margin-right:10px">
add_circle_outline
</i>Architectes, Ingénieurs et Techniciens
</a>
</div>
<div class="collapse" id="architect" style="margin-left:6px">
<nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list" style="width:100%">
<a class="mdc-list-item" tauxPlafonds="CPAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
Complémentaire forfait
</a>
<a class="mdc-list-item" tauxPlafonds="PLACPAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
Plafonds complémentaire
</a>
<a class="mdc-list-item" tauxPlafonds="IDAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
Invalidité décès
</a>
</nav>
</div>
My file js :
$("mdc-list-item").on("click", function () {
$(this).toggleClass("list-item-clicked");
});
My css :
.list-item-clicked{
border: 1px solid black;
}

You just have to declare a css rule like:
.list-item-clicked{
border: 1px solid black;
}
then add an on click listener to your list items and add or remove the css style to the items when clicked.
With jQuery you can use the toggleClass function.
an implementation could look like this:
$(".mdc-list-item").on("click", function(){
$( this ).toggleClass("list-item-clicked");
})
There you add the click listener to all of your items with css class "mdc-list-item" and toggle the class of the specific item.
Toggle class adds the class in parameter if the item does not has it already and removes it when it has it.
$('.mdc-list-item').on("click",function(){
var isClicked = $(this).hasClass("list-item-clicked"); // am I clicked?
$('.mdc-list-item').removeClass("list-item-clicked"); // un-click everything
if(!isClicked)
$(this).toggleClass("list-item-clicked"); // click me if needed
})
.list-item-clicked {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='mdc-list-item'>First title</a><br/>
<a class='mdc-list-item'>Second title</a><br/>
<a class='mdc-list-item'>Third title</a><br/>

Disable a button inside a label element using Javascript

I am looking for a way to disable a 'inner-button' that is inside a label tag.
I have a button that is created in a label:
<label for="UploadFile" class="inner-button" data-toggle="tooltip" data-placement="top" title="Upload File" onclick="SetFileName()" id="upload">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x img-responsive"></i>
<i class="fa fa-upload fa-stack-1x fa-inverse img-responsive"></i>
</span>
</label>
I want to disable that element using a radio buttons in a similar format like that:
<label>
<input type="radio" id="chkDisableOnClick"name="radiobButton" onclick="document.getElementById('upload').disabled = true;"/>
</label>
I did not have any luck at the moment. Once the radio button is clicked, the button inside the Label is not disabled.
Thanks in advance.

You could use for example pointer-events css property (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).
label[disabled]{
pointer-events: none;
}

label doesn't have a disable property, you'll need to add a class to disable the object. For example:
.disabled {
color: darkgrey;
background-color: grey;
}

grab value of div using class

Inside div i set a value now i want to grab this value using class. But code bellow not returns the value. Whats wrong i am doing here? how can i solve that?
<div title="Find on Amazon" value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
$(".btnAmazon").on("click", function () {
var d = $(".btnAmazon").val();
alert(d);
});

Inside div i set a value now i want to grab this value using class
Looks like you are are looking for value attribute of div
val() is for input elements, replace it with attr( "value" )
var d = $(".btnAmazon").attr( "value" );

You're trying to read the div's "value" attribute.
console.log($('div').val()) // This won't work; DIVs don't have a value
console.log($('div').attr('value')) // but this one has an attribute named value
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
Note that, strictly speaking, value is not a valid attribute -- ever since the XHTML era, nonstandard attributes are supposed to have a data- or x- prefix -- but it will work just fine in all browsers. If code validation is a concern, the "correct" way to handle this would be:
// either of these will work, interchangeably:
console.log($("div").data("value"))
console.log($("div").attr("data-value"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>

I could see that you want to read the value attribute, which cannot be used for <div> tag. Please use either data-value:
data-value="396495"
And get it using:
.data("value");
This is the right method. Using .attr("value") might work in some browsers and not sure if it works seamlessly everywhere. But that's what you need.

I think "value" as a attribute is not allowed on div elements.
Try it like this:
jQuery(document).ready(function($){
$(".btnAmazon").on("click", function () {
var d = $(this).attr("data-value");
alert(d);
});
});
.btn{
background: green;
padding: 20px;
text-align:center;
display:inline-block;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default
btnAmazon" data-toggle="modal" data-
target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
Button
</div>

In order to retrieve to attribute named value (the 352197909440 in your example) you will need to use
var d = $(".btnAmazon").attr('value');
.html() will show you the html within your Div. i.e.
<i class="fa fa-bullseye"></i>

A div can't have a value attribute, it is invalid markup.
You, however, can use custom data-* attributes (as you already use in your code).
So first of change your HTML
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
Then you can use $('.btnAmazon').data('value') to get its value...
Working example:
$(".btnAmazon").on("click", function () {
var d = $(".btnAmazon").data('value');
alert(d);
});
/* for the demo */
div {
width: 50px;
height: 50px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>

truncate javascript multiple lines not working

I am using truncate.js (https://github.com/jeffchan/truncate.js) to put ellipsis into a text when it overflows. It is not working when I am following the demo right I think. Here is my code:
CSHTML File:
<div id="yammerDiv">
<div id="yammerHeader">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" height="20px;" width="50%">
</div>
<div id="yammerMessages" data-truncate-lines="3" data-toggle="modal" data-target="#myModal" style="margin-top: 25px;">
<img id="loading-gif" src="http://i559.photobucket.com/albums/ss36/madszckey01/speakker/buffering.gif">
<span id="message"></span>
<p id="sender"></p>
</div>
<div id="yammerButtons" style="display:none">
<button id="previous" type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="onPrevious()">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</button>
<input type="checkbox" id="myCheck" onclick="autoscroll()" data-toggle='tooltip' data-placement='bottom' data-original-title="Auto-Scroll" class='checkbox'>
<button id="next" type="button" class="btn btn-default btn-xs" aria-label="Right Align" onclick="onNext()">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</button>
</div>
JavaScript inside the CSHTML file:
$('#yammerMessages').truncate({
lines: 3,
lineHeight: 1.5
});
I want to truncate the text in the yammerMessages div and its not working as the text just continues through the height limit of the width.
EDIT:
I have got the truncate method working but my content inside the span element 'message' reloads text often and how do I keep truncating it every time it changes?
$('#yammerMessages').truncate({
lines: 7,
lineHeight: 14
});
This truncates the text inside the div once, but when the content changes in 'message', it won't let me truncate again.
SOLVED:
Look for my answer below.

Since this library would not solve my problem, I just ended up using dotdotdot jquery library which solved my issue.
To truncate for the div, I used the dotdotdot method:
$("#text-wrapper").dotdotdot({ wrap: 'letter' });
Then when the text changes inside the div, I use the trigger method which then deletes the truncation of the element it was called on:
$("#text-wrapper").trigger("destroy");
Then I simply truncate again the new text loaded inside the div:
$("#text-wrapper").dotdotdot({ wrap: 'letter' });

How to get a tooltip to appear in a popover?

On my machine, this code produces a tooltip on hover over a bootstrap glyphicon:
<span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span>
However when I stack the tooltip inside a popover, the code used to generate a tooltip on its own no longer produces a tooltip:
<a href="#" class="example" data-toggle="popover" >Experiment</a>
<div id="popover_content_wrapper" style="display: none">
<a href="">
<span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span>
</a>
</div>
Here's how I'm triggering the popover and tooltip in the javascript (below these html elements)
<script>
$('.tt').tooltip();
$('.example').popover({
trigger: 'hover click',
html: true,
content: function() {
return $('#popover_content_wrapper').html();
},
placement: 'top',
delay: { show: 500, hide: 1000 }
});
</script>
Any ideas on how to get a tooltip to appear on an element inside a popover?

The problem is that the .tt classed element that appears in your popover is not the same one used to bind .tooltip() to.
You need to use the delegation model via the selector option, eg
$(document).tooltip({
selector: '.tt'
});
Demo here - http://jsfiddle.net/jAtqW/