jQuery Forum

1. $("#report").click(function() {
       $(".report_topper_head").clone().insertAfter(".driver-report-driver");
   });

$( "#administration, #history, #vehiclereport, #plantreport, #trailers" ).click(function() {
    $(".btn-toolbar-image").hide();
});

$( "#fleet, #fuel, #improvingbehaviour, #safety, #report, #summary, #trend" ).click(function() {
    $(".btn-toolbar-image").show();
});

1. $( ".sidebar-icon" ).click(function() {
       $("#sidebar-wrapper .list-group").css('width','0');
       $(".navigation-warnj").css('width', '0');
   });

2.     var tabChange = function(){
3.         var tabs = $('.nav-tabs > li');
4.         var active = tabs.filter('.active');
5.         var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a');
6.         // Bootsrap tab show, para ativar a tab
7.         next.tab('show')
8.     }
9.     // Tab Cycle function
10.     var tabCycle = setInterval(tabChange, 1000)
11.     // Tab click event handler
12.     $(function(){
13.         $('.nav-tabs a').click(function(e) {
14.             e.preventDefault();
15.             // Parar o loop
16.             clearInterval(tabCycle);
17.             // mosta o tab clicado, default bootstrap
18.             $(this).tab('show')
19.             // Inicia o ciclo outra vez
20.             setTimeout(function(){
21.                 tabCycle = setInterval(tabChange, 1000)//quando recomeça assume este timing
22.             }, 1000);
23.         });
24.     });

<?php while ($row = $statement->fetch()) { ?>
<div class="sticker">
    <input type="hidden" class="category" value="<?php echo $row['category'];?>" />
    <input type="hidden" class="path" id="<?php echo $row['hiddenid'];?>" value="http://www.jbiddulph.com/adbuild/assets/images/<?php echo $row['path'];?>" class="last"  />
    <img src="http://www.jbiddulph.com/adbuild/assets/images/<?php echo $row['path'];?>" class="<?php echo $row['classname'];?>" width="50" />
</div>
<?php } ?>

$(".sticker").on("click", function(){

var stickerclass = $(this).find("img" ).attr("class");
var this_overlay = $(this).find(".path").attr('id');
var this_category = $(this).find(".category").val();

var _overlay = $('#'+this_overlay+'');
console.log(_overlay);
if( $(element).hasClass(stickerclass) ) {
   var overlay = _overlay.val();
   overlay = petUtil.getImage(overlay);
   fabric.Image.fromURL(overlay, function (image) {
      if (this_category == "Badges") {
         image.set({
            left: 0, top: 0, angle: angle, cornersize: 0, absolutePositioned: true,
            hasControls: false
         });
      } else {
         image.set({
            left: 0, top: 0, angle: angle, cornersize: 0, absolutePositioned: true,
            hasControls: true
         });
      }

      image.scale(scale).setCoords();
      _canvas.add(image);
      _canvas.bringToFront(image);
   });
};
});

<?php while ($row = $statement->fetch()) { ?>
    <div class="sticker">
        <input type="hidden" class="stickerid" id="<?php echo $row['stickerid'];?>">
        <input type="hidden" class="path" id="<?php echo $row['hiddenid'];?>" value="/adbuild/assets/images/<?php echo $row['path'];?>" class="last"  />
        <img src="/adbuild/assets/images/<?php echo $row['path'];?>" class="<?php echo $row['classname'];?>" width="50" />
    </div>
<?php } ?>

$('.sticker').each(function (index){

   var stickerclass = $("img").attr("class");
   var _overlay = $(".path").attr('id');

   console && console.log(stickerclass);
   console && console.log(_overlay);

             if( $(element).hasClass(stickerclass) ) {
       var overlay = _overlay.val();
      overlay = petUtil.getImage(overlayBadge1);
      fabric.Image.fromURL(overlay, function (image) {
         image.set({
            left: 0, top: 0, angle: angle, cornersize: 0, absolutePositioned: true,
            hasControls: false
         });
         image.scale(scale).setCoords();
         _canvas.add(image);
         _canvas.bringToFront(image);
      });
   }
});

Any help is much appreciated!

1. $("#sub").click( function(){
       debugger;
     var canvas = document.getElementById('canvas');
   
     //var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
       var dataURL = canvas.toDataURL({format: 'png' });
   
       document.getElementById("canvas").src = dataURL;
       $.ajax({
          type: "POST",
          url: "saveDesign.php",
          data: { img: dataURL, adname:$('#adname').val(),user_id:$('#user_id').val(),templatesize:$('#templatesize').val() }
          // window.location.href = "http://www.jbiddulph.com/adbuild/checkout.php?adname="+adname+"&file="+dataURL+"&user_id="+user_id+"&templatesize="+$templatesize+"";
       }).done(function(msg){
          alert(msg);
   
       });
   
   
   });

$('.tyre_data').each( function(){

    // Tyre Tread
    if($(this).val().length >= 4) {
        console.log('in here');
        $(this).closest(".check-option").find(".error-message").show();
        $("html, body").animate({
            scrollTop: $(".container").offset().top
        }, 500);
        return false;
    }

});

1. $.tablesorter.addParser({
       id: 'monthYear',
       is: function(s) {
           return false;
       },
       format: function(s) {
           var date = s.match(/^(\w{3})[ ](\d{4})$/);
           var m = date ? date[1] + ' 1 ' || '' : '';
           var y = date && date[2] ? date[2] || '' : '';
           return new Date(m + y).getTime() || '';
       },
       type: 'Numeric'
   });

1. $('table.tablesorter').tablesorter({
       headers: {
           0: {
               sorter: 'monthYear'
           }
       }
   });

2. <table class="company-ultracheck-summary table table-striped tablesorter">
3.     <thead class="thead-dark">
4.     <tr>
5.                         <th class="header headerSortDown" scope="col">Month / Year</th>
6.         <th class="header" scope="col">Checks</th>
7.         <th class="header" scope="col">Unique vehicles checked</th>
8.         <th class="header">&nbsp;</th>
9. 
   
10.     </tr>
11.     </thead>
12.     <tbody>
13.         <tr>
14.             <td>Apr 2018</td>
15.             <td>254</td>
16.             <td>46</td>
17.             <td><span data-show="unique_20184" class="oi oi-list pointer month-summary-check"></span></td>
18.         </tr><tr>
19.             <td>Aug 2018</td>
20.             <td>635</td>
21.             <td>81</td>
22.             <td><span data-show="unique_20188" class="oi oi-list pointer month-summary-check"></span></td>
23.         </tr><tr>
24.             <td>Dec 2018</td>
25.             <td>915</td>
26.             <td>127</td>
27.             <td><span data-show="unique_201812" class="oi oi-list pointer month-summary-check"></span></td>
28.         </tr><tr>
29.             <td>Feb 2019</td>
30.             <td>1385</td>
31.             <td>148</td>
32.             <td><span data-show="unique_20192" class="oi oi-list pointer month-summary-check"></span></td>
33.         </tr><tr>
34.             <td>Jan 2019</td>
35.             <td>1272</td>
36.             <td>138</td>
37.             <td><span data-show="unique_20191" class="oi oi-list pointer month-summary-check"></span></td>
38.         </tr><tr>
39.             <td>Jul 2018</td>
40.             <td>429</td>
41.             <td>64</td>
42.             <td><span data-show="unique_20187" class="oi oi-list pointer month-summary-check"></span></td>
43.         </tr><tr>
44.             <td>Jun 2018</td>
45.             <td>478</td>
46.             <td>54</td>
47.             <td><span data-show="unique_20186" class="oi oi-list pointer month-summary-check"></span></td>
48.         </tr><tr>
49.             <td>Mar 2018</td>
50.             <td>8</td>
51.             <td>1</td>
52.             <td><span data-show="unique_20183" class="oi oi-list pointer month-summary-check"></span></td>
53.         </tr><tr>
54.             <td>Mar 2019</td>
55.             <td>262</td>
56.             <td>105</td>
57.             <td><span data-show="unique_20193" class="oi oi-list pointer month-summary-check"></span></td>
58.         </tr><tr>
59.             <td>May 2018</td>
60.             <td>425</td>
61.             <td>52</td>
62.             <td><span data-show="unique_20185" class="oi oi-list pointer month-summary-check"></span></td>
63.         </tr><tr>
64.             <td>Nov 2018</td>
65.             <td>1125</td>
66.             <td>121</td>
67.             <td><span data-show="unique_201811" class="oi oi-list pointer month-summary-check"></span></td>
68.         </tr><tr>
69.             <td>Oct 2018</td>
70.             <td>1068</td>
71.             <td>113</td>
72.             <td><span data-show="unique_201810" class="oi oi-list pointer month-summary-check"></span></td>
73.         </tr><tr>
74.             <td>Sep 2018</td>
75.             <td>762</td>
76.             <td>98</td>
77.             <td><span data-show="unique_20189" class="oi oi-list pointer month-summary-check"></span></td>
78.         </tr></tbody>
79. </table>

$(".check-option").each(function() {

    if($(this).hasClass("selected")) {
        console.log("has been selected");
        return false;
    } else {
        console.log("has NOT been selected");
        return false;
    }

});

1. <div class="button mover" id="contact" data-href="{{ contact_link }}" data-toggle="tooltip" data-placement="top" title="go to our contact form" id="contact_ultra">CONTACT ULTRA</div>

1. var touch_contact_start = false;
       $("#contact").on("click touchend", function(){
   
           {% if app.config.mode == 'dev' %}
           console && console.log("touchstart on contact ");
           {% endif %}
           if(touch_contact_start != true) {
               {% if app.config.mode == 'dev' %}
               console && console.log("click on contact ");
               {% endif %}
               document.location.href = $(this).data('href');
           }
   
       })
       $("#contact").on("mousemove touchmove", function (event) { touch_contact_start = true; })
       $("#contact").on("click touchstart", function (event) { touch_contact_start = false; });

2. <div id="space_manager_saved_search_selection">
3.   <div class="saved_filter_tile firstfour" data-filter-id="5">
4.   <h5>john</h5>
5.   </div>
6.   <div class="saved_filter_tile firstfour" data-filter-id="9">
7.   <h5>christine</h5>
8.   </div>
9.   <div class="saved_filter_tile firstfour" data-filter-id="10">
10.   <h5>christine1</h5>
11.   </div>
12.   <div class="saved_filter_tile firstfour" data-filter-id="12">
13.   <h5>johndc</h5>
14.   </div>
15.   <div class="saved_filter_tile afterfour" data-filter-id="13">
16.   <h5>here is the 5th one</h5>
17.   </div>
18.   <div class="saved_filter_tile afterfour" data-filter-id="14">
19.   <h5>6th one here</h5>
20.   </div>
21. </div>

2. $('.townslist select').change(function() {
3. alert("Selected");
4. var town = $(this).val();
5.   alert( "Selected " + town );
6. });
7. 
   
8.