0

I am just trying to make the following html code as a lightning component, but not getting the output as it is. I tried to keep html part(the div and span elements) in lightning component, javascript functions in lightning controller and css in style but somehow it is not working. The html code(that I am trying to convert to a lightning component) is at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay2. Can you please let me know how to make a lightning component with the following:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: blue;
  background-color: turquoise;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
</style>
</head>
<body>

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  
  <div class="overlay-content">    
    Help Content
  </div>
</div>
 
<span style="float:right;font-size:30px;cursor:pointer"  onclick="openNav()"> help</span>

<script>
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
</script>
     
</body>
</html>

Thanks

2
  • Do you want this in Aura or LWC? Just double-checking.
    – sfdcfox
    Commented Jul 6, 2020 at 5:31
  • I am trying this in Aura.
    – Suhasini
    Commented Jul 6, 2020 at 5:31

1 Answer 1

0

To convert this to Aura, we need a few tweaks.

id is not supported

We need to change it to aura:id:

<div aura:id="myNav" class="overlay">

CSS needs .THIS

We need to scope our CSS, so we need to add a few .THIS selectors:

.THIS {
  font-family: "Lato", sans-serif;
}
.THIS.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: blue;
  background-color: turquoise;
  overflow-y: hidden;
  transition: 0.5s;
}
.THIS .overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.THIS.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.THIS.overlay a:hover,
.THIS.overlay a:focus {
  color: #f1f1f1;
}

.THIS.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .THIS.overlay {
    overflow-y: auto;
  }
  .THIS.overlay a {
    font-size: 20px;
  }
  .THIS.overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

Note that we use a space if the element is not a top-level element, and no space otherwise (e.g. .THIS.overlay because it is a top-level element, and .THIS .overlay-content because it is contained inside another element).

Direct JavaScript is not supported

We need to change the event handlers to support Aura calls:

    <a href="#" class="closebtn" onclick="{!c.closeNav}">&times;</a>

And:

    <span style="float:right;font-size:30px;cursor:pointer" onclick="{!c.openNav}">

Finally, we need to put the methods in a controller. We use component.find to get the SecureComponent that is the overlay, then then we need to getElement() to reach in to the DOM.

({
  openNav: function (component, event, helper) {
    component.find("myNav").getElement().style.height = "100%";
  },
  closeNav: function (component, event, helper) {
    component.find("myNav").getElement().style.height = "0%";
  },
});

I may have overlooked a few details, as I haven't loaded the actual code from w3schools, but this should be a close approximation.

Here's the final component:

<aura:component>
    <div aura:id="myNav" class="overlay">
        <a href="#" class="closebtn" onclick="{!c.closeNav}">&times;</a>

        <div class="overlay-content">
            Help Content
        </div>
    </div>

    <span style="float:right;font-size:30px;cursor:pointer" onclick="{!c.openNav}">
        help
    </span>

</aura:component>

({ // This is the controller //
  openNav: function (component, event, helper) {
    component.find("myNav").getElement().style.height = "100%";
  },
  closeNav: function (component, event, helper) {
    component.find("myNav").getElement().style.height = "0%";
  },
})

.THIS {
  font-family: "Lato", sans-serif;
}
.THIS.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: blue;
  background-color: turquoise;
  overflow-y: hidden;
  transition: 0.5s;
}
.THIS .overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.THIS.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.THIS.overlay a:hover,
.THIS.overlay a:focus {
  color: #f1f1f1;
}

.THIS.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .THIS.overlay {
    overflow-y: auto;
  }
  .THIS.overlay a {
    font-size: 20px;
  }
  .THIS.overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .