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