HTML5 Archives - Techhysahil Blog

Javascript : Event binding on Dynamically created element

August 20th, 2017admin0 Comments

Whenever we bind events to DOM element, events got attached with all elements which are there in DOM but same events will not get attached to any element which is added dynamically. in order to understand event binding, let’s consider a below DOM structure.

<div class="wrapper">
  <div class="list-item">Static DOM Element(Click me)</div>
</div>

<div class="list-item">Static DOM Element(Click me)</div>

</div>

Let’s apply some Styling to above HTML block.

.list-item{
  font-size: 18px;
  display:inline-block;
  text-transform : capitalize;
  border : 1px solid #ccc;
  padding : 10px;
  margin : 0 auto;
}

.list-item{

font-size: 18px;

display:inline-block;

text-transform : capitalize;

border : 1px solid #ccc;

padding : 10px;

margin : 0 auto;

}

Finally, let’s attach a addEventListener to element with class list-item.

// Add event for existing DOM element
document.querySelector(".wrapper .list-item").addEventListener("click",translateMe);

function translateMe(event){
  event.target.style.transform = "translateY(30px)";
  event.target.style.color ="red";
}

// Add event for existing DOM element

document.querySelector(".wrapper .list-item").addEventListener("click",translateMe);

function translateMe(event){

event.target.style.transform = "translateY(30px)";

event.target.style.color ="red";

}

Now if i click on final link, it will translate 30px in Y-axis. You can test the same in Codepen here. Now let’s add a dynamic DIV element with class list item and wrap it inside element with class …

Horizontally Center content

March 17th, 2017admin0 Comments

There are various methods to center align text as well any HTML content. Center aligning the text is pretty simple and can be done using just text-align:center property as following.

<div class="text-container">
  Any text content....ha ha .....hey hey !!!
</div>

<style>
  .text-container{
     text-align : center;
   }
</style>

Any text content....ha ha .....hey hey !!!

</div>

<style>

.text-container{

text-align : center;

}

</style>

But what if when you have to center align any HTML element with any content inside it. In that case you can use any of the following method: 1. Horizontally Center content using margin : 0 auto You can use margin : 0 auto to any parent element and than your content inside it will be horizontally center align relative to it. Consider the below HTML structure for horizontally center align …

Absolute Horizontal And Vertical Centering In CSS

March 17th, 2017admin0 Comments

There are many situation in CSS coding, when you wants to keep your content/text right at center both horizontally as well as vertically relative to it’s parent container element. In order to do Absolute Horizontal And Vertical Centering In CSS, we used to had various options as follow: Using absolute position & transition together. Let us first quickly dive right into above methods one by one and than we will discuss the new and better method to do it. Using absolute position & transition together: Let’s consider the following HTML structure.

<!-- Container div with Div having just text inside it -->
<div class="app-wrapper">
    <div class="nested-content">
        <!-- Just Text Content -->
	     Just Text Content : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    </div>
</div>

<!-- Container div with Div(with any content) inside it -->
<div class="app-wrapper">
    <div class="nested-content">
        <!-- Any HTML Content -->
            <h4>Any HTML Structure</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </div>
</div>

Just Text Content : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

</div>

<h4>Any HTML Structure</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

</div>

I have two set of HTML structure in it. First having only …

Vertical Center content

March 16th, 2017admin0 Comments

We all know very well that placing the Vertical Center content was always a pain. Previously, we used to achieve this by following 2 techniques but now we can also achieve the same using display: flex. First Method (Using Display : inline-block) Second method (Using Display : table) Third Method (Using Display : Flex) Let’s consider the simple HTML structure:

<div class="content-wrapper">
    <div>Vertical Center content </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</div>

<div>Vertical Center content </div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>

</div>

First Method (Using Display : inline-block) In first method, you can achieve the same using Display : inline-block as following :

.content-wrapper{
   display : inline-block;
   vertical-align : middle;
}
.content-wrapper div{
   display : inline-block;
   vertical-align : middle;
   width : 45%;
   padding : 10px;
   box-sizing : border-box;
   background-color : gray;
   border : 1px solid #666;
   color : #333;
   margin : 10px;
}

.content-wrapper{

display : inline-block;

vertical-align : middle;

}

.content-wrapper div{

display : inline-block;

vertical-align : middle;

width : 45%;

padding : 10px;

box-sizing : border-box;

background-color : gray;

border : 1px solid #666;

color : #333;

margin : 10px;

}

Demo Fiddle : See the Pen vertical center content using Inline-block by Techhysahil (@techhysahil) on CodePen. Second …