Category: HTML5

How to add class in react conditionally

admin0 Comments

During initial day of react coding, all of us must stuck with the question how to add class in react conditionally. One often requires to add class in react DOM element based on some condition. Adding cladd using conditional operator is an very easy way to add class in react conditionally like this.

1
2
3
<div className={"defaultClassName" + (this.state.showLoading ? "" : " hide")}>
 
</div>

  In above code, hide class will be added when this.state.showLoading value will be set to false.  

Continue Reading

center text in SVG shapes

admin0 Comments

Whenever you place text inside any SVG shape (rectangle, ellipse, circle etc), you would like to center text in SVG shape. In HTML placing a text relative to parent can be easily done using “text-align: center” property, similarly you can place text center of SVG shape with help of “text-anchor: middle”.  For SVG, it is not that straight forward but i will explain below, how you can achieve it. Let’s first of all create an svg tag as follow:

1
2
3
<svg width="600" height="600">
 
</svg>

Now lets add a <g> tag inside svg to group multiple tag inside.

1
2
3
4
5
<svg width="600" height="600">
  <g>
 
  </g>
</svg>

Now let’s add a circle and text tag inside <g> tag. …

Continue Reading

Javascript : Event binding on Dynamically created element

admin0 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.

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

Let’s apply some Styling to above HTML block.

1
2
3
4
5
6
7
8
.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.

1
2
3
4
5
6
7
// 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 …

Continue Reading

Horizontally Center content

admin0 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.

1
2
3
4
5
6
7
8
9
<div class="text-container">
  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 …

Continue Reading

Absolute Horizontal And Vertical Centering In CSS

admin0 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 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>

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

Continue Reading

Vertical Center content

admin0 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:

1
2
3
4
<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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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 …

Continue Reading