We Keep Coding

Remove class if id's the correct ID

Looking to remove a class if a certain button is clicked.
<div class="slide-container">
<section class="about" id="slide-0">
<div class="menu-total">
<nav class="nav">
<button class="nav_link home" onclick="slideTo('slide-2')">HOME</button>
<button class="nav_link about" onclick="slideTo('slide-0')">ABOUT</button>
<button class="nav_link fun-stuff" onclick="slideTo('slide-1')">FUN STUFF</button>
<button class="nav_link professional" onclick="slideTo('slide-3')">PROFESSIONAL</button>
<button class="nav_link contact" onclick="slideTo('slide-4')">CONTACT</button>
</nav>
<div class="hamburger">
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
</div>
</div>
The one I want to remove the class on is the HOME button. So "slideTo('slide-2)". If it's clicked on the others then the class is kept. I believe someone is either wrong with my loop or not getting the ID correctly of the items/
function slideTo(slideId) {
const slide = document.getElementById(slideId);
slide.scrollIntoView({
behavior: 'smooth'
})
// above this line works fine
let nonHome = document.querySelectorAll('.slide-container section');
let nonHomeID = document.getElementById('slide-2');
var i;
setTimeout(function(){
for (i=0; i < nonHome.length; i++ ){
// i believe it's somewhere here it is wrong
if (nonHome[i].id != nonHomeID){
nonHome[i].classList.add("nav-visibility");
} else{
nonHomeID.classList.remove("nav-visibility");
}
}
}, 1000)
}

If you can use jquery library, you can write in the HTML:
<button class="nav_link" data-value="home">HOME</button>
...
and then in the JS code:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // Get the data-value clicked
$(".nav_link").each(function() { // Loop through all elements of the class 'nav-link'
var v = $(this).data("value");
if (v == valueClicked) {
$(this).removeClass("nav-visibility");
} else {
$(this).addClass("nav-visibility");
}
)
}
Not much simpler, but the HTML is cleaner.

Simpler version if it is not required to browse through all buttons at each button click:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // The value of the button clicked by the user
if (valueClicked == "home") {
$(this).removeClass("nav-visibility");
console.log('remove')
} else { $(this).addClass("nav-visibility");
console.log('add')
}
});

Disaible open uib-tooltip when any other tooltip is clicked

I am trying to create 3 tooltips in a page, Its not working , only one tooltip should be open on click anyother tooltip should be closed.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
$scope.tooltip = {
1: false,
2: false,
3: false
};
$scope.tooltipCloseActive = function(activeTooltip) {
console.log($scope.tooltip);
_.set($scope.tooltip, activeTooltip, true);
_.forOwn($scope.tooltip, function(value, key) {
console.log(value+'*************'+key);
if(activeTooltip !== key && value === true){
console.log('#'+key);
_.set($scope.tooltip, key, false);
$scope.triggerClickOnTooltip(key);
console.log(key);
}
});
};
$scope.triggerClickOnTooltip = function(id) {
setTimeout( function(){
angular.element(document.querySelectorAll('#'+id)).trigger('click');
}, 100);
};
});
HTML:
<div class="col-xs-10 col-sm-4">
<p id="1" tooltip-trigger="click"
uib-tooltip="I am a tooltip 1." ng-click="tooltipCloseActive('1');">
<span>tooltip 1:</span>
</p>
<br>
<p id="2" tooltip-trigger="click"
uib-tooltip="I am a tooltip 2." ng-click="tooltipCloseActive('2')">
<span >tooltip 2:</span>
</p>
<br>
<p id="3" tooltip-trigger="click"
uib-tooltip="I am a tooltip 3." ng-click="tooltipCloseActive('3')">
<span>tooltip 3:</span>
</p>
<br>
</div>
I have written code for multiple ui tooltips and want to close other tooltips when one of the tooltip is clicked.
It is going into infinite loop so when I am triggering click .
Just want to know how to make it work :
Possible Solution :
1) Differentiating the user click and trigger click :
I was not able to differentiate (I know how we can do in jquery but not in angular)
2) Use tooltip flags ( which I did it didn't work)
3) Upgrading ui bootstrap and use outsideClick (Which I cant afford doing in our application right now)
Is there any way I can solve this mystery of enable only one tooltip at a time.
Any help would be greatly appreciated.
PLUNKER : http://plnkr.co/edit/mjqGa26auDSY2G8ThAk4?p=preview

I think I was over thinking on trigger :
I have used is-open with wrong format due to which I was not able to get the
Working plunker using mutliple tooltips and enabling using tooltip-is-open http://plnkr.co/edit/gKqdoA3qK74XD1r9b5PR?p=info
HTML:
Tooltip Text
<br/> Toggle value: {{ tooltip.isTTOpen }}
</div>
<br/>
<br/>
<br/>
<br/>
<span tooltip-template="'myTooltipTemplate.html'" tooltip-trigger="none" tooltip-is-open="tooltip.isTTOpen2" tooltip-placement="top" ng-click="closeTooltip('isTTOpen2')">Tooltip Text</span>
<br/> Toggle value: {{ tooltip.isTTOpen2 }}
<br/>
<br/>
<br/>
<br/>
<span tooltip-template="'myTooltipTemplate.html'" tooltip-trigger="none" tooltip-is-open="tooltip.isTTOpen3" tooltip-placement="top" ng-click="closeTooltip('isTTOpen3')">Tooltip Text</span>
<br/> Toggle value: {{ tooltip.isTTOpen3 }}
JS:
$scope.tooltip = {
isTTOpen: false,
isTTOpen2: false,
isTTOpen3: false
};
$scope.closeTooltip = function(tooltip) {
console.log(tooltip);
for (var key in $scope.tooltip) {
if ($scope.tooltip.hasOwnProperty(key)) {
console.log(key + " -> " + $scope.tooltip[key]);
if (tooltip === key) {
$scope.tooltip[key] = true;
} else {
$scope.tooltip[key] = false;
}
}
}
};

ReactJS & Google MDL Button onClick not working

I have some JS like below. I find that if I remove mdl-js-layout the onClick of the button works. Otherwise it fails. Why might this be? I have already did componentHandler.upgradeDom()
'use strict';
module.exports = React.createClass({
componentDidMount: function() {
console.log('update')
componentHandler.upgradeDom();
},
addExpense: function() {
console.log('add expense');
},
render: function() {
return (
<div ref="appLayout" className="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div className="mdl-layout__drawer">
<span className="mdl-layout-title">Expenses</span>
<nav className="mdl-navigation">
<a className="mdl-navigation__link" href="#">Expenses</a>
<a className="mdl-navigation__link" href="#">Settings</a>
</nav>
</div>
<main className="mdl-layout__content">
<div className="page-content">
<div className="mdl-grid">
<div className="mdl-cell mdl-cell--12-col">
<button ref="btnAddExpense" onClick={this.addExpense} className="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
Add Expense
</button>
</div>
</div>
</div>
</main>
</div>
);
}
});
If I look into the React debugger tools, I can actually see the onClick is supposed to be bound?

It looks like mdl is not compatible with react, and prevents the click events from the react component from working. Hopefully, this would be fixed in a future update, but until then, you can work around this by manually re-adding the events after mounting the component.
componentDidMount: function() {
componentHandler.upgradeDom();
var button = this.refs.btnAddExpense;
button.addEventListener('click', this.addExpense);
},
Demo

Hopefully this answers your question:
With the resources used it apparently does not need to touch the DOM.
HTML
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js">
</script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
JS
var Widget = React.createClass({
handleBtnClick: function(e) {
e.preventDefault();
alert("clicked!");
return true;
},
render: function() {
return <div >
<form>
< button className = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-textfield--full-width mdl-button--facebook"
onClick = {
this.handleBtnClick
} >
Click MEEEEEE!
< /button > </form> < /div >;
}
});
ReactDOM.render( < Widget / > ,
document.getElementById('container')
);

hide popover when clicked outside of it

here is my code for popover html:
<a data-placement="bottom" style="float:right;margin-right:20px;" id="new-quote-popover" popover><img src="img/user.png"/> <b>{{UserName}}</b>
<div id="popover-head" class="hide">USER DETAILS</div>
<div id="popover-content" class="hide">
<div class="row smallMargin">
<div class="col-sm-4">
varun
</div>
<div class="col-sm-8">
<select name="selectopt" style="width:80%">
<option value="001">001</option>
<option value="002">002</option>
</select>
</div>
</div>
</div>
</a>
and the directive for popover is
js:
app.directive('popover', function($compile){
return {
restrict : 'A',
link : function(scope, elem){
var content = $("#popover-content").html();
var compileContent =function() {
return $compile(content)(scope);
};
var title = $("#popover-head").html();
var options = {
content: compileContent,
html: true,
title: title
};
$(elem).popover(options);
}
}
});
It is working well..I am trying to hide the pop-over whenever cliked outside of it.But as it is in tag i am unable to do so.please help me in this.I tried with classname,id but not succeeded .
I checked this question it is not working for me

You need to inject $document service and to create new event listener mousedown on document root.
$document.on('mousedown', addClickOutsideListener);
function addClickOutsideListener(event) {
var target = event.target;
while(target != document.body) {
if(target == elem[0]) {
//user clicked on Popover, nothing to do
return;
}
if(!target.parentNode)
return;
target = target.parentNode;
}
hidePopover();
});
Don't forget add listener of scope destroying:
scope.$on('$destroy', function() {
$document.off('mousedown', addClickOutsideListener);
});

How to open and close div element while cliking of anchor tag

Below is my html format i want to open leftbar div tag while clicking of open-left tag and also close leftbar div tag while clicking of open-left tag.
<div id="leftbar" class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<br />
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<img src="assets/img/nloop-min.png" alt="" class="drawer-logo" />
</div>
<br />
<ul>
<li><i class="fa fa-home fa-1x"></i> Home</li>
<li><i class="fa fa-dot-circle-o fa-1x"></i> Tour</li>
<li><i class="fa fa-bullseye fa-1x"></i> FAQ</li>
<li><i class="fa fa-magic fa-1x"></i> About</li>
<li><i class="fa fa-comment-o fa-1x"></i> Contact</li>
</ul>
<br />
<p>
© 2013 - nLoop</p>
</div>
</div>
</div>
<div id="content" class="snap-content">
<div id="sidebarmenu" class="col-lg-1 col-sm-1 col-xs-1 col-md-1">
</div>
<div id="rightpart" class="margingap">
Right part
</div>
</div>
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('content'),
disable: 'right'
});
$(document).ready(function () {
var addEvent = function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.addEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.attachEvent("on" + eventName, func);
}
};
addEvent(document.getElementById('open-left'), 'click', function () {
snapper.open('left');
var state = $(this).is('.open');
if (state) {
snapper.close('left');
}
});
});
</script>

Open and close div element while cliking an anchor tag:
$("#open-left").click(function(){
$("#leftbar").toggle();
});
See more about this here: .toggle() Documentation
Code explanation:
I am just attaching a click event to the #open-left tag and then I called the .toggle() on the #leftbar. This just pretty much keeps record of what is the current state of the object, hiddden or shown, and then calls the particular function according to the state.
Also, see this working example: fiddle.

Are you maybe looking for something like jQuery's hide() and show()? Or toggle()?

Try this:
var isOpen = false;
$("#open-left").click(function(){
if(isOpen){
$("#leftbar").slideUp(); isOpen = false;}
else{ $("#leftbar").slideDown(); isOpen = true; }
});