How to remove the inline style using Jquery

Welcome to designer Blog here i have posted how to remove the inline style using Jquery


Step 1:

  <script type="text/javascript">

        $(document).ready(function () {

     
            $("#MyCalendar").find("table, tr, td").eq(1).removeAttr("style");
                    
        });

    </script>

Html Structure

<div id="calendar">
  <h2>Events</h2>
  <table cellspacing="0" cellpadding="1" border="0" style="border-width:0px;border-collapse:collapse;" title="Calendar" class="table table-bordered" id="MyCalendar">
    <tbody>
      <tr>
        <td colspan="7"><table cellspacing="0" border="0" style="width:100%;border-collapse:collapse;" class="month">
            <tbody>
              <tr>
                <td valign="middle" style="width:15%;" class=""><a title="Go to the previous month" style="color:Black" href="javascript:__doPostBack('MyCalendar','V5479')">&lt;</a></td>
                <td align="center" style="width:70%;">February 2015</td>
                <td valign="middle" align="right" style="width:15%;" class="navigation"><a title="Go to the next month" style="color:Black" href="javascript:__doPostBack('MyCalendar','V5538')">&gt;</a></td>
              </tr>
            </tbody>
          </table></td>
      </tr>
      <tr>
        <th align="center" scope="col" abbr="Sunday">Su</th>
        <th align="center" scope="col" abbr="Monday">Mo</th>
        <th align="center" scope="col" abbr="Tuesday">Tu</th>
        <th align="center" scope="col" abbr="Wednesday">We</th>
        <th align="center" scope="col" abbr="Thursday">Th</th>
        <th align="center" scope="col" abbr="Friday">Fr</th>
        <th align="center" scope="col" abbr="Saturday">Sa</th>
      </tr>
      <tr>
        <td align="center" style="width:14%;">25</td>
        <td align="center" style="width:14%;">26</td>
        <td align="center" style="width:14%;">27</td>
        <td align="center" style="width:14%;">28</td>
        <td align="center" style="width:14%;">29</td>
        <td align="center" style="width:14%;">30</td>
        <td align="center" style="width:14%;">31</td>
      </tr>
      <tr>
        <td align="center" style="width:14%;">1</td>
        <td align="center" style="width:14%;">2</td>
        <td align="center" style="width:14%;">3</td>
        <td align="center" style="width:14%;">4</td>
        <td align="center" style="width:14%;">5</td>
        <td align="center" style="width:14%;">6</td>
        <td align="center" style="width:14%;">7</td>
      </tr>
      <tr>
        <td align="center" style="width:14%;">8</td>
        <td align="center" style="width:14%;">9</td>
        <td align="center" style="width:14%;">10</td>
        <td align="center" style="width:14%;">11</td>
        <td align="center" style="width:14%;">12</td>
        <td align="center" style="width:14%;">13</td>
        <td align="center" style="width:14%;">14</td>
      </tr>
      <tr>
        <td align="center" style="width:14%;">15</td>
        <td align="center" style="width:14%;">16</td>
        <td align="center" style="width:14%;">17</td>
        <td align="center" style="width:14%;">18</td>
        <td align="center" style="width:14%;">19</td>
        <td align="center" style="width:14%;">20</td>
        <td align="center" style="width:14%;">21</td>
      </tr>
      <tr>
        <td align="center" style="width:14%;">22</td>
        <td align="center" style="width:14%;"><a href="EventsDescription.aspx?JkV2ZW50c19JRD0zJlByaU1lbnVJRD0wJm1udT1Qcmk=" title="Events" class="calendar-tips">23<br>
          Events Title 08</a></td>
        <td align="center" style="width:14%;">24</td>
        <td align="center" style="width:14%;">25</td>
        <td align="center" style="width:14%;">26</td>
        <td align="center" style="width:14%;">27</td>
        <td align="center" style="width:14%;">28</td>
      </tr>
      <tr>
        <td align="center" style="width:14%;">1</td>
        <td align="center" style="width:14%;">2</td>
        <td align="center" style="width:14%;">3</td>
        <td align="center" style="width:14%;">4</td>
        <td align="center" style="width:14%;"><a href="EventsDescription.aspx?JkV2ZW50c19JRD00JlByaU1lbnVJRD0wJm1udT1Qcmk=" title="Events" class="calendar-tips">5<br>
          Events Title En</a> <a href="EventsDescription.aspx?JkV2ZW50c19JRD01JlByaU1lbnVJRD0wJm1udT1Qcmk=" title="Events" class="calendar-tips"><br>
          Test Title</a></td>
        <td align="center" style="width:14%;">6</td>
        <td align="center" style="width:14%;">7</td>
      </tr>
    </tbody>
  </table>
</div>


Step3:

Here is the javascript code  which remove the inline style

My Calendar is ID of the table and findind the tabe tr td, eq is used for removing the 1st position of

the style attribute

      $("#MyCalendar").find("table, tr, td").eq(1).removeAttr("style");


Step4:

Enjoy Folks

How to design the triangle Menu using css3

Welcome to designers blog here i have posted how to  design the triangle Menu using CSS3



Step1:

To do triangle menu use the css3 property  called before and after .

Step2:

To do this triangle shape we should use the below css class

.menu-navigation .active {
    position: relative;
    color: #fff !important;
    background: #dd052b !important;
    float: left;
    padding: 0px 15px;
}
.menu-navigation .active:after, .menu-navigation .active:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.menu-navigation .active:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #dd052b;
    border-width: 13px;
    margin-left: -13px;
}
.menu-navigation .active:before {
    border-width: 36px;
    margin-left: -36px;
}

Step3:

HTML Markup: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
*
{
    margin:0px;
    padding:0px;
}
ul li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.menu-navigation {
    float: left;
}
.menu-navigation li {
    float: left;
    margin: 0px 3px 0px 0px;
    display: block;
    background-color: #d4d4d3;
}
.menu-navigation li a {
    font-family: 'Andika', sans-serif;
    font-size:14px;
    padding: 5px 15px 5px 15px;
    float: left;
    color: #4c4c4c;
    text-decoration: none;
}
.menu-navigation .active {
    position: relative;
    color: #fff !important;
    background: #dd052b !important;
    float: left;
    padding: 0px 15px;
}
.menu-navigation .active a {
    color: #fff !important;
}
.menu-navigation .active:after, .menu-navigation .active:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.menu-navigation .active:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #dd052b;
    border-width: 13px;
    margin-left: -13px;
}
.menu-navigation .active:before {
    border-width: 36px;
    margin-left: -36px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Andika' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="menu-navigation">
  <ul>
    <li ><a href="#">Home </a></li>
    <li class="active"><a href="#">Domino's</a></li>
    <li><a href="#">Toolbox</a></li>
    <li><a href="#">Departments</a></li>
  </ul>
</div>
</body>
</html>


Step4 :

Out put