Home > Back-end >  active attribute is not setting with div's class
active attribute is not setting with div's class

Time：11-07

I am trying to Create a inbox notification. It is successfully opening and closing But is only opening and closing when 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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

As you noticed that I am running function named openInbox to set active attribute with myNotifiction But I have no idea why the div is not opening.

Any help would be much Appreciated. Thank You.

CodePudding user response：

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

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

Show code snippet

// 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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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 your codes 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>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I hope following answer will help you.

I have did following change in your JS 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>
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

In your scenario, use Element.classList 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");
}

Page link：https//www.codepudding.com/Backend/181879.html

Prev:javascript async await for function before continuing
Next:Get the returned variable out of a function and into a document.write
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding