Saturday, January 18, 2020

Fill element on hover

Create a button so that on hover the background color fills the element from left, right or center side of the element.

.button{
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #D42069;
  color: #D42069;
  font-size: 30px;
  font-family: arial;
  background-image: linear-gradient(#D42069, #D42069);
  background-repeat: no-repeat;
  border-radius:50px;
  transition: background-size .5s, color .5s;
}
.center-right-left, .center-top-bottom, .center-corner {
  background-position: 50% 50%;
}
.to-left {
  background-position: 100% 50%;
}
.to-right {
  background-position: 0% 50%;
}
.to-top {
  background-position: 50% 100%;
}
.to-bottom {
  background-position: 50% 0%;
}
.center-right-left, .to-left, .to-right {
  background-size: 0% 100%;
}
.center-top-bottom, .to-top, .to-bottom {
  background-size: 100% 0%;
}
.center-corner {
  background-size: 0% 0%;
}
.button:hover {
  background-size: 100% 100%;
  color: #fff;
}

<h1>
From center towards left and right</h1>
<div class='button center-right-left'>
NEXT</div>
<h1>
From center towards top and bottom</h1>
<div class='button center-top-bottom'>
NEXT</div>
<h1>
From center towards corners</h1>
<div class='button center-corner'>
NEXT</div>
<h1>
From right to left</h1>
<div class='button to-left'>
NEXT</div>
<h1>
From left to right</h1>
<div class='button to-right'>
NEXT</div>
<h1>
From bottom to top</h1>
<div class='button to-top'>
NEXT</div>
<h1>
From top to bottom</h1>
<div class='button to-bottom'>
NEXT</div>

OUT Put

From center towards left and right

From center towards top and bottom

From center towards corners

From right to left

From left to right

From bottom to top

From top to bottom

Shortcode in a WordPress Template

Shortcodes in WordPress are invoke for some kind of function to accomplish certain tasks. But what if you want to use a shortcode from within a template instead of with the content of a Post/Page?
You can invoke it with a special function:

Thursday, December 5, 2019

Get Table Name with Row Count from SQL Database

Select the database you want to filter the information about the row count and run following SQL Statement

SELECT
T.NAME AS 'TABLE NAME',
P.[ROWS] AS 'ROW COUNT'
FROM SYS.TABLES T
INNER JOIN SYS.PARTITIONS P ON T.OBJECT_ID=P.OBJECT_ID

This help me to know how many rows are there in table. Hope this will help you too.

Monday, November 18, 2019

Block or Disable Cut, Copy and Paste operation Using jQuery

It is required to block the cut, copy and paste operations on some of the textbox. For example, it will be better if we do not allow users to copy paste the data entered in Email and Confirm Email field in order to make the user to type themselves.

The below jQuery code will help us to do the same using preventDefault() method

Move List Items Up and Down Using jQuery

Sometimes, we require moving/scrolling the list items in the select control up and down to sort manually. This little code snippet will help us to do that using jQuery library.

var nextOption = $("#ListBox1 > option[selected]").next("option");

if ($(nextOption).text() != "") {
      $(selectedOption).remove();

$(nextOption).after($(selectedOption));
    }
  }

function MoveUp() {
    var selectedOption = $("#ListBox1 > option[selected]");

var prevOption = $("#ListBox1 > option[selected]").prev("option");

if ($(prevOption).text() != "") {
      $(selectedOption).remove();

$(prevOption).before($(selectedOption));
    }
  }
</script>

Thursday, November 14, 2019

Convert JSON data to CSV

JSON Data

Output as CSV

Wednesday, October 23, 2019

Sorting by Key in An Array of object with Jquery