LESS TALK, MORE CODE: jquery

Thursday

jquery dialog example

HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<body>
 <table id="table">
   <tr>
     <td style="padding:0px 0px; border-top:0px 0px; width:100%;">
        <div id="header">Header</div>
     </td>
     <td rowspan="2" style="padding:0px 0px 0px; border-top:0px; width:100%;">
         <div id="sidebar" >
           Sidebar
         </div>
      </td>
  </tr>
   <tr>
      <td style="width: 100%;padding:0px 0px 0px; border-top:0px; width:100%;">
        <div id="content" >
           <button type="button" id="opener1">Open the dialog full</button>
           <button type="button" id="opener2">Open the dialog half</button>
        </div>
      </td>
   </tr>
 </table>

   <div id="dialog" >Dialog</div>
    
</body>
</html>

CSS:

#dialog {   
    background: green;
    font-size: 24pt;
    text-align: center;
}

#header {
  border: solid 1px;
  height: 20px;
  width: 100%;
  margin-top: 20px;
}

#content {
  border: solid 1px;
  margin-top: 0px;
  margin-right: 0px;
  height: 300px;
  width: 100%;
}

#sidebar {
  border: solid 1px;
  margin-top: 20px;
  margin-left: 0px;
  height: 324px;
  width: 55px;
}

.ui-dialog-titlebar-close, .ui-dialog-titlebar {
  display: none;
}

.ui-dialog {
    z-index: 999999 !important ;
    margin-left: 0px;
}

.ui-dialog, .ui-dialog-content {
    box-sizing: content-box;
}

JS:

 function closeDilalogIfClickedOutside(event) {
    if($('#dialog').dialog('isOpen')
        && !($('#dialog')).is(event.target)
        && $('#dialog').has(event.target).length == 0 ) {
            $('#dialog').dialog('close');
    }
}

$(window).on("click", function(event){   
    closeDilalogIfClickedOutside(event);
});

function catchOutsideClickEvent() {
    var i;
    for(i = 0; i < (window.frames).length; i++) {
        try {
            var win = window.frames[i];
            if(win.frameElement.id != 'dialogIframe') {
                $(win).on("click", function(event){   
                    closeDilalogIfClickedOutside(event);
                });         
            }
        } catch(err) {
            console.log("frame: " + i + " y:" + y + " err: " + err);
        };
    };
}

$(document).ready(function () {
  $(function() {
    $("#dialog").dialog({
        autoOpen: false, 
        modal: false,
        hide: {effect:"slide", direction:"right", duration: 700},
        show : {effect:"slide", direction:"right", duration: 700},
        open: function(event, ui) {
            catchOutsideClick();
        }
    });
  });
});

function resizeDialog(sizeType) {
    var relativeDiv, relativeHeight, relativeWidth, relativeMy;

    if(sizeType == 'full') {
        relativeDiv = '#sidebar';
        relativeHeight = $('#sidebar').height();
        relativeWidth = '200';
        relativeMy = 'left top';

    } else {
        relativeDiv = '#content';
        relativeHeight =  $('#content').height();
        relativeWidth = $(window).width() / 2;
        relativeMy = 'right top';
    }

    $("#dialog").dialog({
        width:relativeWidth,
        height:relativeHeight,
        position: {
            my: relativeMy,
            at: relativeMy,
            of: relativeDiv
        }
    });
}

$('#opener1').click(function() {
      resizeDialog("full");
      $("#dialog").dialog("open");
});

$('#opener2').click(function() {
      resizeDialog("half");
      $("#dialog").dialog("open");
});


var resizeId;
$(window).bind('resize', function(event) {
    if($('#dialog').dialog('isOpen') && !$(event.target).hasClass('ui-resizable')){
      clearTimeout(resizeId);
      resizeId = setTimeout(resizeDialog, 250);
    }
});

Monday

Web push notification example - with notify.js plugin

I will show an example of web push notification by using notify.js (https://notifyjs.com/) plugin and styling it.

- jquery-1.11.2.js >>You can download from: https://code.jquery.com/jquery-1.11.2.js

- bootstrap.min.css >> For button styling we'll use, but you don't have to add this. You can download it from: https://getbootstrap.com/docs/3.3/getting-started/

- notify.js >>go to 'https://notifyjs.com/' >> 'Download notify.js' section

- notify.min.js >>go to 'https://notifyjs.com/' >> 'Download notify.min.js' section

- notify.custom.js will be written by us, we'll add our styling and function.

$.notify
.addStyle("info", {
   html:
     "<div class='clearfix'>"
        +"<div class='pull-left notifyjs-icon' style='float:left'></div>"
          +"<div class='notifyjs-title pull-left' data-notify-html='title'/>"
             + "<button id='yesInfo' class='btn btn-success btn-sm notifyjs-btn' data-notify-text='button'>OKE</button>"
     +"</div>",
});


$(document).on('click', '#yes', function () {
    $(this).trigger('notify-hide');
});

function notify(msg) {
       $.notify({
           title: msg
       }, {
           style: 'info'
       });
}

- test.jsp file

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"  pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Give your title</title>
</head>

<body>
       <link rel="stylesheet" href="js/bootstrap.min.css">
       <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
       <script type="text/javascript" src="js/notify.js"></script>
       <script type="text/javascript" src="js/notify.custom.js"></script>
       <script>
             notify('<h4>Hello</h4>You can see our notification. Click to <b>OKE</b> button to close notification.');
       </script>
</body>
</html>

-notify.style.css

.notifyjs-icon{width:140px;height:150px; background:url(../../your img path) no-repeat 50% #3A423A}
.notifyjs-title h4{font-weight:normal;color:#3A423A}
.notifyjs-title b{color:#3A423A}
.notifyjs-title{width:290px;color:#333;padding: 0 5px 4px 10px}
.notifyjs-info-base{width:450px;display:inline-block;padding:10px;position:relative;background-color:#F0F8FF;autoHide:false;clickToHide:false}

.notifyjs-btn{position:absolute! important;bottom:20px;right:20px;}

Output: