Create Floating Windows With Vanilla JavaScript – iWin

Preview:

Description:

iWin is a vanilla JavaScript library to create dynamic, draggable, resizable, floating windows on the page.

How to use it:

Import the iWin library into the document.

<script src="iWin.js"></script>

Define a unique ID for the window.

var wID = 'iDemo' + new Date().getTime();

Initialize the iWin.

iWin.init({
  onSetTitle:function(wID, obj, title)
  {
    obj.innerHTML = '<span>[X]</span><span>'+ title+ '</span>';
    // Capture phase second
    iWin.addEvent(iWin.win[wID].obj.children[0].children[0], 'press', function(e) {
      var evt = e || window.event;
      evt.preventDefault();
      iWin.win[wID].onClose(wID, e);
      (e.stopPropagation)? e.stopPropagation(): e.cancelBubble = true;
    }, true);
  }
});

Call the iWin.create function to create the window. The first argument is an object containing parameters which can be changed later by calling various methods.

iWin.create({
  title: 'Window Title', 
  onClose:function(){iWin.destroy(wID)}}, 
  wID
);

Set contents of the window. The second argument indicates that we want window to be automatically resized to fit the content.

iWin.setContent('Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>'+
  'Nulla varius justo tellus, ac aliquam lorem maximus ut. Suspendisse fermentum<br>'+
  'purus euismod quam consequat interdum. Maecenas eget ultrices ligula, sed fringilla<br>'+
  'nisl. Ut eu leo non sem ultricies interdum. Nam et porta metus, sed efficitur felis.<br>'+
  'Proin et mauris magna. Fusce et condimentum dui, id finibus lorem. Nunc volutpat, neque<br>'+
  'nec tincidunt auctor, risus dui congue felis, vel tristique ipsum sapien sed lorem.<br>'+
  'Maecenas tempor vestibulum nunc vel maximus. Nulla varius finibus velit, in aliquet<br>'+
  'felis dignissim in. Pellentesque ut commodo metus. Sed suscipit erat non mauris finibus<br>'+
  'pretium. Phasellus dignissim sem turpis, id suscipit magna suscipit ut. ', wID);
iWin.setContentDimensions(null, wID);
iWin.setPosition(60, (window.innerWidth / 2) - 20, wID);

Show the window on the page.

iWin.show(wID);