Friday, June 9, 2023

Dropdown Menu with Checkbox

$(".chkbox-menu").on("change", "input[type='checkbox']", function() {
   $(this).closest("li").toggleClass("active", this.checked);
});

$(document).on('click', '.allow-focus', function (e) {
  e.stopPropagation();
});

</script>

<style>

.chkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}
.chkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}

.chkbox-menu li.active label {
    background-color: #cbcbff;
    font-weight:bold;
}

.chkbox-menu li label:hover,
.chkbox-menu li label:focus {
    background-color: #f5f5f5;
}

.chkbox-menu li.active label:hover,
.chkbox-menu li.active label:focus {
    background-color: #b8b8ff;
}

</style>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="DDMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown Menu <span class="caret"></span>
  </button>
  <ul class="dropdown-menu chkbox-menu allow-focus" aria-labelledby="DDMenu">
  
    <li >
      <label>
        <input type="checkbox"> Item 1
      </label>
    </li>
    
    <li >
      <label>
        <input type="checkbox"> Item 2
      </label>
    </li>
    
    <li >
      <label>
        <input type="checkbox"> Item 3
      </label>
    </li>
    
  </ul>
</div>

Friday, May 12, 2023

Push into an Array in JavaScript

let myarray = [1,2,3,4,5]

// Add to the start of an array

Array.unshift(element);

myarray.unshift(100); // output 100,1,2,3,4,5

// Add to the end of an array

Array.push(element);

myarray.push(100); // output 1,2,3,4,5,100

// Add to a specified location

Array.splice(start_position, 0, new_element...);

myarray.splice(2, 0, 100,200); // output 1,2,100,200,3,4,5

// Add with concat method without mutating original array

let newArray = [].concat(element);

let newmyarray = myarray.concat(10,20);

Monday, April 17, 2023

Image CSS property aspect-ratio, object-fit and mix-blend-mode

Three CSS properties will help you to display images

1) The aspect-ratio property maintains the aspect ratio of an element, even if its size changes.

2) Object-fit controls how an image or video is displayed within its container, allowing for versatile scaling and cropping options.

3) Mix-blend-mode creates stunning visual effects by blending the colors of overlapping elements.

These powerful techniques can elevate your website's design to the next level, impressing your visitors with visually stunning layouts.

Before

After

Monday, April 10, 2023

_sppagecontextinfo Get current user details

While using CSOM, we have mostly required some details of the current users, like, Name, Email, Title (Designation), Manager, etc., Following code, will help to know all this with simple API calls.

Monday, April 3, 2023

Get week number of month from Date

People struggle a lot when it needs to get a week from a date, here below is a simple example to get the week number of the month from a Date.

Monday, January 9, 2023

Responsive and Animated Pie Charts with HTML and CSS

Responsive and Animated Pie Charts

///////////////////
// HTML
//////////////////

body {
  font-family: "Open Sans", Arial;
  background: #EEE;
  text-align: center;
}
body * {
  font-weight: 300;
  margin: 0;
  padding: 0;
}

@-webkit-keyframes bake-pie {
  from {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

@keyframes bake-pie {
  from {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}
.pie-chart {
  font-family: "Open Sans", Arial;
}
.pie-chart--wrapper {
  width: 400px;
  margin: 30px auto;
  text-align: center;
}
.pie-chart__pie, .pie-chart__legend {
  display: inline-block;
  vertical-align: top;
}
.pie-chart__pie {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px auto 35px;
}
.pie-chart__pie::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: #EEE;
  border-radius: 50%;
  top: 50px;
  left: 50px;
}
.pie-chart__pie::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.1);
  margin: 220px auto;
}

.slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 200px, 200px, 100px);
  -webkit-animation: bake-pie 1s;
          animation: bake-pie 1s;
}
.slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
}

.pie-chart__legend {
  display: block;
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  background: #FFF;
  padding: 0.75em 0.75em 0.05em;
  font-size: 13px;
  box-shadow: 1px 1px 0 #DDD, 2px 2px 0 #BBB;
  text-align: left;
  width: 65%;
}
.pie-chart__legend li {
  height: 1.25em;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}
.pie-chart__legend em {
  font-style: normal;
}
.pie-chart__legend span {
  float: right;
}

.pie-charts {
  display: flex;
  flex-direction: row;
}
@media (max-width: 500px) {
  .pie-charts {
    flex-direction: column;
  }
}

///////////////
// HTML
///////////////
  
<div class="wrapper">
  <h1>Answered Questions</h1>
  <div class="pie-charts">
    <div class="pieID--micro-skills pie-chart--wrapper">
      <h2>Micro-Skills</h2>
      <div class="pie-chart">
        <div class="pie-chart__pie"></div>
        <ul class="pie-chart__legend">
          <li><em>Additive</em><span>642</span></li>
          <li><em>Multiplicative</em><span>358</span></li>
        </ul>
      </div>
    </div>
    <div class="pieID--categories pie-chart--wrapper">
      <h2>Categories</h2>
      <div class="pie-chart">
        <div class="pie-chart__pie"></div>
        <ul class="pie-chart__legend">
          <li><em>Horizontal</em><span>768</span></li>
          <li><em>Vertical</em><span>232</span></li>
        </ul>
      </div>
    </div>
    <div class="pieID--operations pie-chart--wrapper">
      <h2>Operations</h2>
      <div class="pie-chart">
        <div class="pie-chart__pie"></div>
        <ul class="pie-chart__legend">
          <li><em>Addition</em><span>486</span></li>
          <li><em>Subtraction</em><span>156</span></li>
          <li><em>Multiplication</em><span>215</span></li>
          <li><em>Division</em><span>143</span></li>
        </ul>
      </div>
    </div>
  </div>
</div>

/////////////////
//JQuery
/////////////////
  
function sliceSize(dataNum, dataTotal) {
  return (dataNum / dataTotal) * 360;
}

function addSlice(id, sliceSize, pieElement, offset, sliceID, color) {
  $(pieElement).append("<div class='slice "+ sliceID + "'><span></span></div>");
  var offset = offset - 1;
  var sizeRotation = -179 + sliceSize;

$(id + " ." + sliceID).css({
    "transform": "rotate(" + offset + "deg) translate3d(0,0,0)"
  });

$(id + " ." + sliceID + " span").css({
    "transform"       : "rotate(" + sizeRotation + "deg) translate3d(0,0,0)",
    "background-color": color
  });
}

function iterateSlices(id, sliceSize, pieElement, offset, dataCount, sliceCount, color) {
  var
    maxSize = 179,
    sliceID = "s" + dataCount + "-" + sliceCount;

if( sliceSize <= maxSize ) {
    addSlice(id, sliceSize, pieElement, offset, sliceID, color);
  } else {
    addSlice(id, maxSize, pieElement, offset, sliceID, color);
    iterateSlices(id, sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
  }
}

function createPie(id) {
  var
    listData      = [],
    listTotal     = 0,
    offset        = 0,
    i             = 0,
    pieElement    = id + " .pie-chart__pie"
    dataElement   = id + " .pie-chart__legend"

color         = [
      "cornflowerblue",
      "olivedrab",
      "orange",
      "tomato",
      "crimson",
      "purple",
      "turquoise",
      "forestgreen",
      "navy"
    ];

color = shuffle( color );

$(dataElement+" span").each(function() {
    listData.push(Number($(this).html()));
  });

for(i = 0; i < listData.length; i++) {
    listTotal += listData[i];
  }

for(i=0; i < listData.length; i++) {
    var size = sliceSize(listData[i], listTotal);
    iterateSlices(id, size, pieElement, offset, i, 0, color[i]);
    $(dataElement + " li:nth-child(" + (i + 1) + ")").css("border-color", color[i]);
    offset += size;
  }
}

function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }

return a;
}

function createPieCharts() {
  createPie('.pieID--micro-skills' );
  createPie('.pieID--categories' );
  createPie('.pieID--operations' );
}

createPieCharts();

Thanks to Temani Afif, code on CodePen.

OutPut

Micro-Skills

Additive642
Multiplicative358

Operations

Addition486
Subtraction156
Multiplication215
Division143

Tuesday, January 3, 2023

Excel - Add and Remove Line Breaks in a Cell

Many time we struggle for the line break in a multiple excel cells. This article have some useful tricks that will help you to achive this easily.

1) Manully add line break in a cell using "Alt + Enter".
- Edit the cell with F2 or while typing in a cell when you press "Alt + Enter" it will create new line in a cell.
- To remove a line break, edit the cell with F2, go to the start of line break and press "Backspace" and enter.

2) Line break using formula:
- You can use line break character in CHAR(10) function. Here 10 is the line break character.
- example: CONCATENATE("Rakesh" , CHAR(10) , "Patel"), if you can't see the line break when you press ENTER, then apply WRAP TEXT to the cell.

3) Replace "," or any other character with New Line:
- Press CTRL + H, this will open "Find and Replace" window. Under "Find what" you can put your text that you want to search. and under "Replace with" press CTRL + J (you won't able to see anything) just click on "Replace" or "Replace ALL". This will will add line break wherever it finds your text.
- The same way you can replace Line break with any of your text.

If "CTRL + J" does not work for you then you can also try Alt + type 0010.