CODEWITHSUNDEEP
javascripthtmlcss
user1813228
user1813228

Reputation:

Changing the background-color of the selected portion in popup

I have created a popup in which if I click on the question mark image, it is able to create a box contanining list of text. The fiddle for it is here

I want the text to look in the following way:

enter image description here

I am able to create a box containing list of text as shown in the fiddle but I am not sure how to change the background color of the selected portion text (eg: Support, Contact, Demo) .

For example, if I select or click or point the mouse to Support then the background-color of the Support text portion should be orange and the rest of them should be black or If I select or click or point the mouse to Contact then the background-color of the rest of the text should be black with Contact text having orange background.

Below are the HTML and CSS snippets from the fiddle:

HTML snippet:

<!DOCTYPE html>
<html>
<body style="text-align:center">

<br>
<br>
<br>
<br>
<br>
<br>
<div class="popup" onclick="myFunction()"><img src="https://s27.postimg.org/40rb1a2ir/questionmark2.jpg" alt="homeicon">
<div class="popuptext" id="div">
     <div><span id="myPopup">Support</span><br/></div>
     <div><span id="myPopup1">Contact</span><br/></div>
     <div><span id="myPopup2">Demo</span><br/></div>
</div>
</div>


<script>
// When the user clicks on div, open the popup
function myFunction() {
   var popup = document.getElementById('div');
popup.classList.toggle('show');
}
</script>

</body>
</html>

CSS Snippet:

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #FD8B00;
    color: #fff;
    text-align: left;

    padding:8px 10px 10px 120px;
    position: absolute;
    z-index: 1;
    bottom: -225%;
    left: -52px;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: -10%;
    left: 50%;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color:#FD8B00 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

Upvotes: 1

Views: 1382

Answers (2)

Bla...
Bla...

Reputation: 7288

So my answer below will tell you how to change the background-color when a button is clicked. Assume you have below CSS code.

#div div.selected {
  background-color: black;
}

Then, as the user click a button, you need to remove the previously selected button and change the background-color of currently selected button. You can achieve that using jQuery code below:

$(document).ready(function(){
    $('#div div').click(function(){
    $('#div div.selected').removeClass('selected');
    $(this).addClass("selected");
  });
});

You can also check out the Fiddle.. Hope it helps..

Upvotes: 2

hdotluna
hdotluna

Reputation: 5732

This is how I will do it.

I re-created the markup to make it more better. Since the items are links (expecting to be links). I used ul li a.

$(document).ready(() => {
  $('#clicker').click(() => {
     $('.dialog-box').fadeToggle();      
  });

  $('.dialog-box li').click((e) => {
    var self = e.currentTarget;
    
    if(!$(self).hasClass('active')){
      $('.dialog-box .active').removeClass('active');
      $(self).addClass('active');
    }
  })
});
* {
  margin: 0;
  padding: 0; }

body {
  margin: 50px 0 0 200px; 
  font-family: sans-serif; }

a#clicker {
  margin-left: 80px; }

ul.dialog-box {
  list-style: none;
  width: 200px;
  background: #434343;
  position: relative;
  display: none;
  margin-top: 20px; }

ul.dialog-box:before {
  content: ''; 
  position: absolute;
  top: -8px;
  left: calc(50% - 5px);
  border-left: 10px solid transparent; 
  border-right: 10px solid transparent; 
  border-bottom: 8px solid #ff8a00; }

ul.dialog-box li {
  padding: 8px 10px;
  cursor: pointer; }

ul.dialog-box li:not(:first-child) {
  border-top: 1px solid #787878; }

ul.dialog-box li.active {
  background: #ff8a00; }

ul.dialog-box li a {
  color: white;
  font-weight: 600; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="clicker">Clicker</a>

<ul class="dialog-box">
    <li class="active"><a>Support</a></li>
    <li><a>Contact</a></li>
    <li><a>Demo</a></li>
</ul>

Upvotes: 1

Related Questions