I am trying to hide the innerHTML "Welcome," (class = welcome-text) text when a certain elements class = display none; Below is the code I have
// Redesign of the login button
jQuery(document).ready(function ($) {
$("#siteNavBar_ctl00_btnLogin").removeClass("saml-login-button").addClass("btn btn-primary");
$(".top-nav-bar .nav-container .main-nav-submenu-container .user-login").css({
'position': 'relative',
'top' : '-60px',
'right': '0px',
});
/*
$(".iconss").click(function() {
window.location = "http://google.com";
});
*/
$(".secondicon").click(function() {
window.location = "http://www.facebook.com";
});
var newNode = document.createElement('div');
var referenceNode = document.querySelector('#siteNavBar_loginToggle');
newNode.className = "username-displayed";
newNode.innerHTML='<span class="welcome-text">Welcome,</span>';
referenceNode.parentNode.insertBefore(newNode, referenceNode);
$( ".username-displayed" ).append( $( ".user-name" ) );
});
$(function(){
$('dl.portletSectionJump dd a:contains("Custom Info")').hide();
});
I need it to be hidden only when the class .d-block is set to display: none;
** Please notice the VAR NEWNODE section. I am new to Javascript so I apologize is something isn't super clear.
Here's working code for the same,
function hide() {
$(".d-block").hide();
}
function show() {
$(".d-block").show();
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) {
console.log('style changed!');
var value = $(".d-block").css("display");
console.log(value);
if (!value || "none" === value) {
$(".welcome-text").hide();
} else {
$(".welcome-text").show();
}
});
});
var target = document.getElementsByClassName('d-block')[0];
observer.observe(target, { attributes : true, attributeFilter : ['style'] });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span class="welcome-text">Welcome, </span>User</h1>
<hr/>
<div>
<p>Lorem</p>
</div>
<div>
<p class="d-block">Lorem Imsum</p>
</div>
<button onClick="hide()">Hide</button><button onClick="show()">Show</button>
MutationObserver
reference is taken from this answer.