Create Floating Windows With Vanilla JavaScript – iWin

Category: Javascript | March 4, 2019
Views Total:218 views
Official Page:Go to website
Last Update:March 4, 2019


Create Floating Windows With Vanilla JavaScript – iWin


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.

  onSetTitle:function(wID, obj, title)
    obj.innerHTML = '<span>[X]</span><span>'+ title+ '</span>';
    // Capture phase second
    iWin.addEvent([wID].obj.children[0].children[0], 'press', function(e) {
      var evt = e || window.event;
      evt.preventDefault();[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.

  title: 'Window Title', 

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.;

You Might Be Interested In:

Leave a Reply