How to make entire row or div clickable

 Step1:

 We are goi



 data-href="dashboard-add.html"



<script>
$('[data-href]').on("click", function() {
    document.location = $(this).data('href');
});
</script>

How to make on click function using thumb and large image

Step1:

Welcome to designer dairy blog. We are going to discuss about jquery on click function thumb and large image

Step2:

Large image html mock up design. ID (Switcher) is use to append the src(url ) value according to image clicking on thumb


   <div class="chart-wrapper" >
              
              <img class="img-responsive"  id="switcher" src="images/quarter-1.png" />
       
               </div>



Step3:

Thumb html mark up design. from src="images/quarter-1.png" it will show display in the large image.when hover the thumb we should show the overlay div and gray background.



               <div class="chart-wrapper" >
                 <div class="chart"> <img class="img-responsive" src="images/quarter-1.png" /></div>
                 <div class="overlay" style="display:none;">
                  
                   <span class="overlay-text">Add to dashboard</span>
                  
                 </div>
                <div class="chart-notes">quarter 1 sales</div>
              
               </div>
                </div>
         

Step4:

hover function for script

<script>
$(document).ready(function() {
$(".chart-wrapper").mouseover(function() {
  $(this).find('.overlay').show();
});

$( ".chart-wrapper").mouseout(function() {   
   $(this).find('.overlay').hide();
});
});
</script>


Step5:

On Click function script for large image.

 <script>
$(function () {
    $(".overlay").click(function() {   
    // overlay
     var imageUrl=$(this).parent().find('.chart img').attr('src');
     $("#switcher").attr("src", imageUrl);   
     });
});
</script>

Step6:

Enjoy.

How to make jquery on click function thumb and large image

Step1:

Welcome to designer dairy blog. We are going to discuss about jquery on click function thumb and large image

Step2:

Large image html mock up design. ID (Switcher) is use to append the src(url ) value according to image clicking on thumb


   <div class="chart-wrapper" >
              
              <img class="img-responsive"  id="switcher" src="images/quarter-1.png" />
       
               </div>



Step3:

Thumb html mark up design. from src="images/quarter-1.png" it will show display in the large image.when hover the thumb we should show the overlay div and gray background.



               <div class="chart-wrapper" >
                 <div class="chart"> <img class="img-responsive" src="images/quarter-1.png" /></div>
                 <div class="overlay" style="display:none;">
                  
                   <span class="overlay-text">Add to dashboard</span>
                  
                 </div>
                <div class="chart-notes">quarter 1 sales</div>
              
               </div>
                </div>
         

Step4:

hover function for script

<script>
$(document).ready(function() {
$(".chart-wrapper").mouseover(function() {
  $(this).find('.overlay').show();
});

$( ".chart-wrapper").mouseout(function() {   
   $(this).find('.overlay').hide();
});
});
</script>


Step5:

On Click function script for large image.

 <script>
$(function () {
    $(".overlay").click(function() {    
    // overlay
     var imageUrl=$(this).parent().find('.chart img').attr('src');
     $("#switcher").attr("src", imageUrl);   
     });
});
</script>

Step6:

Enjoy.

How to make a entire row clickable and opening the text new tab using jquery

 Step1:

Welcome to designer dairy blog..  Here we are going to see how to make a entire row  as clickable and opening the text new tab window using jquery

Step2:

Table Structure

<table class="task-list table table-striped">
                                   <tbody>
                        <tr class="odd" role="row" data-href="task.html">
                          <td> To-do</td>
                          <td> Kick-Off Upload TFL - Kick-Off Meeting    </td>
                           <td>Kick-Off</td>
                          <td> Not Started</td>
                        <td>08-Jun-2016</td>
                
                        </tr>
                      
                      </tbody>
                    </table>

Step3:

 My requirements for the solution were:
1. The entire row should be linked without having to link each and every cell.
2. The html of the table should not be permanently altered by the script.
3. The right click context menu should work as if it was a normal link.
4. Control + click should result in the link being opened in a new tab/window, same as a normal link.
5. The target link should be possible to specify with a data attribute on the row, or by setting one of cells in the row.
6. The JavaScript should be unobtrusive and work with most browsers.

Step4:

<script>
jQuery(function () {

$('table tr td').on('mousedown', function (e) {
   
    clickableRowListener(this, e);
   
function clickableRowListener(that, e) {
   var c = $(that).html(), url = $(that).parent().data("href");

   if (url && c.indexOf("<a") == -1) {
       $(that).html("<a href='" + url + "' target='" + (e.ctrlKey || e.which === 2 ? "_blank" : "") + "'>" + c + "</a>");
       
  }
}
});

});
</script>

Step5:

Enjoy Folks

Our current Train Status System

Step1:

Welcome to designer dairy blog..  Here we are going to look how to apply the  java script conditional

statement for various output

we are going to check

     1. train is running or not ? 
     2. How many trains are available ?
     3. How many trains are running ?
     4. How many trains are not running ?
     5. what are the weekday trains available ?
     6. At what time train is going to start ?

 Step2:

Depending upon  the trainOperational value it will check and satisfied the conditions


var totaltrains = 12

var trainOperational = 8;

//var trainOperational = 12;

var weekday = "friday";


if(trainOperational > 0) {


if(totaltrains == trainOperational)
{
  console.log("All trains are running at the JavaScript Express!");
}

 else {

 for(var trainNumber =1; trainNumber <=totaltrains; trainNumber++)
 {
  
    if(trainNumber<=trainOperational && trainNumber!=3)
     
    {
     
      console.log("Train#" +trainNumber  + " is running");
    }
  
    else if(trainNumber==10 || trainNumber==12 )
    {
      console.log("Train#" +trainNumber  + " is running at noon");
    }
  
    else if(trainNumber==3 && weekday=="friday" )
    {
      console.log("Train#" + trainNumber  + " is running");
    }
  
    else
     
    {
     
      console.log("Train#" + trainNumber  + " is not running");
     
    }
  
 }

}

}
else
{
   console.log("No trains are operational today. Bummer!");
 
}


Step 3:

Enjoy Folks

Step1:

We have already have the script for the Side - navigation and toggle effect...

We faced a problem,, when selecting  the particular item it should be highlight on current item,
What we did was .... giving the class name active  to respected pages (statically)...

Step2:

As of all the menus are static... we have to  highlight the active class on clicking...

so i have added the hand code jquery script and highlighted the items....

Step3:

HTML COde:

 <section style="height: auto;" class="sidebar">       
      <!-- sidebar menu div starts here -->
      <ul class="sidebar-menu">
        <li><a href="#"><i class="fa fa-calendar"></i> <span>Inspections Schedule</span></a></li>
        <li class="treeview"> <a href="#"> <i class="fa fa-pencil-square-o"></i> <span>Inspection Forms</span> <i class="fa fa-angle-left pull-right"></i> </a>
          <ul style="display: none;" class="treeview-menu">
            <li><a href="#">Add Templates </a></li>
            <li><a href="#">View Form Templates </a></li>
             <li><a href="#"> View Submitted Forms</a></li>
          </ul>
        </li>
        <li class="treeview"> <a href="#"> <i class="fa fa-user"></i> <span>Manage User</span> <i class="fa fa-angle-left pull-right"></i> </a>
          <ul style="display: none;" class="treeview-menu">
             <li><a href="#">View Users</a></li>
            <li><a href="#">Add Users</a></li>
            <li ><a href="#"> User Roles</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-book"></i> <span>Reports</span></a></li>
      </ul>
    </section>

Step4:

Sidebar-menu contains parent and child ul class="Sidebar-menu" >  li  > ul  > li



First UL contain class name Sidebar-menu...

So we have to add and remove active class for the first set  ul li  using class name Sidebar-menu.





<script>
$(document).ready(function(e) {
    $('.sidebar-menu li').on('click', function()
    {
        
         $('.sidebar-menu li.active').removeClass('active');
      
    $(this).first().addClass('active');
    });
});
</script>



Step4:

Treeview-menu contains second  ul  class="Treeview-menu" > li

Second UL contain class name Treeview-menu
 
<script>
 
$(document).ready(function(e) {
    $('.treeview-menu li').on('click', function()
    {
         $('.treeview-menu li.current-active').removeClass('current-active');
      
        $(this).addClass('current-active');
    });
});
</script>

Step5:

one important thing... you should not use both active class  for Two UL..

you have keep one for current-active



 <style>
.current-active
{
    background-color: #00c0ef;
    color:#fff;
}
.current-active li a
{

    color:#fff;
}
.skin-blue .treeview-menu > li > a
{
    color:#fff;
}
</style>



 

Welcome to Designer Dairy

Step1:

When the E-mail icon should be enable and disable as per functionality..

So we  what we did is --- given a class name  called resetpass is an <a> Tag

Step 2:

 when  .fa is  clicked it will check  whether  class fa-envelope is there.... it will remove
 
removeClass('fa-envelope') and add  the new class addClass('fa-envelope-o').

we have two different icons with different name..

Step 3:

 We have implemented in the Script using jquery.

<script>
$(document).ready(function(e) {
 $('.resetpass').on('click', '.fa', function(e)
{
 if ($(this).hasClass('fa-envelope') ) {
  $(this).removeClass('fa-envelope').addClass('fa-envelope-o');
   
   }
else
    {
          $(this).removeClass('fa-envelope-o').addClass('fa-envelope');
    }

 event.stopPropagation();   
});
});

</script>

Step 4:

 HTML Code:

<td><a href="#" class="resetpass"><i class="fa fa-envelope fa-2x"></i> </a> </td>

Enjoy Folks