Wednesday, November 30, 2016

Sweet Alert JS library - beautiful replacement of JavaScript Alert



You may think JS alert is boring and less flexible. You can use Sweet Alert. You can download and see the demo of sweet alert from:
http://t4t5.github.io/sweetalert/
Then initialize the plugin by referencing the necessary files (js and css):
<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
Example 1: error message:
sweetAlert("Not Allowed", "Average of Chair's Recommended Step  exceeds 1.25!", "error"); 

result:
Example 2: error message:
                    sweetAlert({
                            title:" Are you sure?",
                            text:"You will not be able to edit.",
                            type:"warning",
                            showCancelButton:true,
                            confirmButtonClass: "btn-danger",
                            confirmButtonText: "Yes, Submit & Lock",
                            confirmButtonColor: "#DD6B55",
                            cancelButtonText: "Cancel",
                            closeOnConfirm: true,
                            closeOnCancel:true
                    },
                    function(response){
                            if(response == true){
                           
                            }else{
                                   
                            }
                    });


result:

Sunday, November 13, 2016

Bootstrap Datepicker on change firing 3 times



I used Bootstrap Datepicker in js and it fires three times in post
       $('.date-picker').datepicker({
               format: "yyyy-mm-dd",
                autoclose: true
                                });

       $('.date-picker').change(function() {
                         var row = $(this).parent().parent();
                         var stakeholder_id =row.find(".sid").val();
                         var salutation =  $(this).val();
                         var postdata = {stakeholder_id:stakeholder_id,salutation:salutation};
                         var url = '/tracs/ajax/salaryReview_chair_ajax/update_salaryreviewchair';
                         $.post(url, postdata, function(data) {
                                 $("div#notice").html('Salutation is updated.');
                                 $("div#notice").css('display', 'block');
                                 $("div#notice").fadeOut(5000);
                        });
       });

bootstrap-datepicker.js needs to be fixed, the new version can be found:
 https://github.com/uxsolutions/bootstrap-datepicker/tree/master/js
or used
wget https://raw.githubusercontent.com/uxsolutions/bootstrap-datepicker/master/js/bootstrap-datepicker.js

If you still used old bootstrap-datepicker.js, you can use
var datePicker = $('.date-picker').datePicker().on('changeDate', function(ev) {
    //Functionality to be called whenever the date is changed
});
 
or 
var c=0;var send=false;
    $(document).ready(function() {
        jQuery( ".ed" ).datepicker({ 
            format: "yyyy-mm-dd",
            autoclose:!0
        }).on('change',function() {
            if(c==2){
                c=0;
                send=true;
            }else{
                c++;
                send=false;
            }                
        });

    });
 
Reference:
http://stackoverflow.com/questions/22614041/bootstrap-datepicker-on-change-firing-3-times  

Wednesday, October 19, 2016

SEC_ERROR_UNKNOWN_ISSUER when https in Firefox



When you connect to https website in Firrefox, you may get an error: you connection is not secure and SEC_ERROR_UNKNOWN_ISSUER error.

This is due to that Firefox background ssl certificate process is not updated. We can remove temporary Firefox storage to fix the problem. The process is as following:
 
1) Click Any folder in Windows
2) Click Tool->View at top menu of the folder.
 3)  Check "Show hidden files, folder and drive" checkbox
4) Go to C:\Users, click your user name
 5) Backup Firefox bookmark
6) Go to AppData\Local\Mozilla, remove Firefox folder
7) Go to AppData\Roaming\Mozilla, remove Firefox folder
 8) If  folder AppData\LocalLow\Mozilla exsits, go to AppData\LocalLow\Mozilla and remove Firefox folder.

Wednesday, September 28, 2016

Make bootstrap Modal dialog draggable, move up and change header/footer style


I have Modal code:

<!-- Universal Modal -->
<div class="modal fade" id="universalModal"  style="margin-top:-150px;" tabindex="-1" role="dialog" aria-labelledby="universalModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width:1000px;">                                    
    <div class="modal-content">
      <form role="form" id="universalModalForm">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"> Close</span></button>
          <h4 class="modal-title" id="universalModalLabel"><span class="glyphicon glyphicon-pencil"></span> Edit<span class="modal-title">.model-title</span></h4>
        </div>
        <div class="alert alert-danger fade in" id="universalModal-alert" style="display: none;">
          <span class="alert-body"></span>
        </div>
        <div class="modal-body">.modal-body</div>
        <div class="modal-footer">
          <input type="hidden" id='stakeholder_id' name='stakeholder_id'>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" id="submitBtn"></button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- End Universal Modal -->
 1) To move  bootstrap Modal dialog up, I used style="margin-top:-150px;" for my id in top div including modal class.
2) To make   bootstrap Modal dialog draggable via modal header, body and footer
                 $('#universalModal').modal('show');
                $('#universalModal .modal-dialog').draggable({
                  handle: ".modal-header, .modal-body, .modal-footer"
                 });

3) To change header and footer style
<style>
  .modal-header  {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 20px;
  }
  .modal-footer {
      background-color: #5cb85c;;
  }

</style>

Monday, March 28, 2016

Use Youtube as screencast to record Desktop Screen



We can use Youtube as screencast to record Desktop Screen. It is free and we can directly post to Youtube.

1) Step 1: Sign-in to YouTube.  Got to Creator Studio. Click events under Live Streaming in left panel.

2) Set video a title, Change video from public to  private if you want to keep video private at the beginning,  and click the “Go Live Now”
button.

3) If this is the first time, you will be reminded to Install the Hangouts Plugin to get started.  Click "install plugin" and run GoogleVioceAndVideoSetup.exe.

4) Click video icon to turn off webcam and unmute microphone if you want to record voice.

5) Click the Screenshare button, which is second icon  in the left toolbox. If popup, select full screen in first. If you choose other options, you may not switch between different desktop windows.

6) click Start Broadcast to start recording the screen. After finish, click to stop  Broadcast.

7) Go back Youtube Creator Studio, under Video manager, you can find the video you recorded. Change setting and publish in Youtube.

Compare to other screencast, I did not find pause button using this method,

Video:Use Youtube as screencast to record your Desktop Screen