CODEWITHSUNDEEP
javascripthtmljquerycss
Van
Van

Reputation: 107

Active attribute is not setting with the div's class

I am trying to Create a inbox notification. It is successfully opening and closing. But it is only opening and closing when the open button is inside the div. But I am trying to open the notification when the Open button is outside the panel div, so I created an onClick event to remove and open active class. But when I click on open Button then it is not opening or closing:

// My onClick event

function openInbox() {
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].setAttribute("myNotification", "active");
}


// Previous script to open and close which is working fine

$(".myNotification .icon_wrap").click(function(){
    $(this).parent().toggleClass("active");
});

$(".show_all .link").click(function(){
    $(".myNotification").removeClass("active");
    $(".popup").show();
});

$(".close, .shadow").click(function(){
    $(".popup").hide();
});

$(".myB").click(function(){
    $(".myNotification").removeClass("active");
});
.myNavbar .navbar_left .logo a{
   font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 505px;
}

.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .profile_dd,
.notification_dd{
  position: absolute;
  top: 18px;
  right: -10px;
  user-select: none;
  background: #fff;
  border: 1px solid #c7d8e2;
  width: 350px;
  padding: 3em;
  height: auto;
  display: none;
  border-radius: 3px;
  box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.125),
              -10px -10px 35px rgba(0, 0, 0, 0.125);
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />

<div onClick="openInbox();">Open inbox Here(not working)</div>

<div class="myNavbar">
    <div class="navbar_right">
        <myDiv class="myNotification" id="Notif">
        <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

            <div class="notification_dd">
                This is Notification Div
            </div>
        </myDiv>
    </div>
</div>

As you noticed, I am running a function named openInbox to set the active attribute with myNotifiction. But why is the div is not opening ?

Upvotes: 0

Views: 460

Answers (4)

FerdousTheWebCoder
FerdousTheWebCoder

Reputation: 228

If you want to add classes using setAttribute, then you've to use the function like below.

function openInbox() {
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].setAttribute("class","myNotification active");
}

Here is your code modified:

// My onClick event

function openInbox() {
  gettingOpen = document.getElementsByTagName("myDiv");
  gettingOpen[0].setAttribute("class","myNotification active");
}


// Previous script to open and close which is working fine

$(".myNotification .icon_wrap").click(function(){
  $(this).parent().toggleClass("active");
});

$(".show_all .link").click(function(){
  $(".myNotification").removeClass("active");
  $(".popup").show();
});

$(".close, .shadow").click(function(){
  $(".popup").hide();
});

$(".myB").click(function(){
  $(".myNotification").removeClass("active");
});
.myNavbar .navbar_left .logo a{
   font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 505px;
}

.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .profile_dd,
.notification_dd{
  position: absolute;
  top: 18px;
  right: -10px;
  user-select: none;
  background: #fff;
  border: 1px solid #c7d8e2;
  width: 350px;
  padding: 3em;
  height: auto;
  display: none;
  border-radius: 3px;
  box-shadow: 10px 10px 35px rgba(0,0,0,0.125),
              -10px -10px 35px rgba(0,0,0,0.125);
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />


<div onClick="openInbox();">Open inbox Here(not working)</div>





<div class="myNavbar">
    <div class="navbar_right">
        <myDiv class="myNotification" id="Notif">
        <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

            <div class="notification_dd">
                This is Notification Div
            </div>
        </myDiv>
    </div>
</div>

Upvotes: 1

Ruhul Amin
Ruhul Amin

Reputation: 1

In your scenario, use Element.classList rather than setAttribute.

Element.classList is read-only property that returns a live DOMTokenList collection of the class attributes of the element. You can modify its associated DOMTokenList using the add(), remove(), replace(), and toggle() methods.

You can update your openInbox() method accordingly.

function openInbox() {
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].classList.toggle("active");
}

Upvotes: 0

Katheer
Katheer

Reputation: 343

I have did following change in your JavaScript code:

function openInbox() {
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].setAttribute("myNotification","active");
}

Changed to

function opentInbox(){
  $(".myNotification").toggleClass("active");
};

Updated Code Snippet

// My onClick event

function opentInbox(){
  $(".myNotification").toggleClass("active");
};



// Previous script to open and close which is working fine

$(".myNotification .icon_wrap").click(function(){
  $(this).parent().toggleClass("active");
});

$(".show_all .link").click(function(){
  $(".myNotification").removeClass("active");
  $(".popup").show();
});

$(".close, .shadow").click(function(){
  $(".popup").hide();
});

$(".myB").click(function(){
  $(".myNotification").removeClass("active");
});
.myNavbar .navbar_left .logo a{
   font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 505px;
}

.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .profile_dd,
.notification_dd{
  position: absolute;
  top: 18px;
  right: -10px;
  user-select: none;
  background: #fff;
  border: 1px solid #c7d8e2;
  width: 350px;
  padding: 3em;
  height: auto;
  display: none;
  border-radius: 3px;
  box-shadow: 10px 10px 35px rgba(0,0,0,0.125),
              -10px -10px 35px rgba(0,0,0,0.125);
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />


<div onClick="opentInbox();">Open inbox Here(not working)</div>

<div class="myNavbar">
    <div class="navbar_right">
        <div class="myNotification" id="Notif">
           <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

            <div class="notification_dd">
                This is Notification Div
            </div>
        </div>
    </div>
</div>

Upvotes: 0

ProDec
ProDec

Reputation: 5420

To add a CSS class, you don't use setAttribute, but instead use element.classList:

gettingOpen[0].classList.toggle("active");


// My onClick event

function openInbox() {
    gettingOpen = document.getElementsByTagName("myDiv");
    gettingOpen[0].classList.toggle("active");

}


// Previous script to open and close which is working fine

$(".myNotification .icon_wrap").click(function(){
  $(this).parent().toggleClass("active");
});

$(".show_all .link").click(function(){
  $(".myNotification").removeClass("active");
  $(".popup").show();
});

$(".close, .shadow").click(function(){
  $(".popup").hide();
});

$(".myB").click(function(){
  $(".myNotification").removeClass("active");
});
.myNavbar .navbar_left .logo a{
   font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 505px;
}

.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .profile_dd,
.notification_dd{
  position: absolute;
  top: 18px;
  right: -10px;
  user-select: none;
  background: #fff;
  border: 1px solid #c7d8e2;
  width: 350px;
  padding: 3em;
  height: auto;
  display: none;
  border-radius: 3px;
  box-shadow: 10px 10px 35px rgba(0,0,0,0.125),
              -10px -10px 35px rgba(0,0,0,0.125);
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />

<div onClick="openInbox();">Open inbox Here(not working)</div>

<div class="myNavbar">
    <div class="navbar_right">
        <myDiv class="myNotification" id="Notif">
        <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

            <div class="notification_dd">
                This is Notification Div
            </div>
        </myDiv>
    </div>
</div>

Upvotes: 2

Related Questions