The Ultimate Windows7 Desktop Using Pure css3 & jQuery

Published on March 27, 2013

I guys, Welcome! I always want to create windows 7 desktop User Interface using only CSS3. Today, at last, I did it. I already made Window 7 Explorer , Windows 7 Calculator and Windows 7 Start Menu. Now I combining all these three and making the actual desktop. You can go back and see how I made those. Have a look at the demo below.

After I combine all those three codes I add different functionality like window drag, task bar sort and minimize close functionality to it. I used jQuery UI for drag and sort functionality. JavaScript for display clock time and data.

First look

CSS3 and HTML5

For this project, i use html5 and css3 for UI design. Thanks to CSS3 I couldn’t create it if there is any css3.

Uni-codes

To minimize the size I used some uni-codes instead of images.

Jquery

I used jquery for selection of dom. For close,minimize and toggle functionality.

Jquery UI

I used jquery UI Draggable for window dragging and Sortable for task bar items sorting.

Jquery code

$(function() {
  $(".start").click(function() {
    $("#startmenu").toggle();
  });
  $(".taskbar").delegate("#t-explor", "click", function() {
    $(".window").toggle();
  });
  $(".taskbar").delegate("#t-calc", "click", function() {
    $(".calc").toggle();
  });
  $(".wcmd").delegate(".min", "click", function() {
    $(this)
      .parent()
      .parent()
      .parent()
      .hide();
  });
  $(".wcmd").delegate(".close", "click", function() {
    $(this)
      .parent()
      .parent()
      .parent()
      .hide();
  });
  $(".taskbar ul").sortable({
    scroll: false,
    containment: "parent",
    revert: true,
    start: function() {
      $(this)
        .children()
        .undelegate("click");
    },
    stop: function() {
      $(this)
        .children()
        .delegate("click");
    }
  });
  $(".taskbar ul").disableSelection();
  $(".drag").draggable({
    handle: "div.head",
    scroll: false,
    stack: "#wrapper div"
  });

  //date time
  var dt = new Date();
  $(".datetime").html(
    dt.getHours() +
      ":" +
      dt.getMinutes() +
      "<br />" +
      dt.getDate() +
      "-" +
      dt.getMonth() +
      "-" +
      dt.getFullYear()
  );
});

This is the jquery code I use to add drag functionality and minimize and close functionality. Date time section is for display system clock and date.

Browser Support

It supports in all major css3 support browser. Sorry for IE6,7,8 users. I suggest using Google Chrome or Firefox for best view.

Conclusion

I learned a lot of thing by doing this experiment. I understood the strengths of CSS3 as well as weakness. But I think CSS3 is a great gift for developers. Jquery UI is also a powerful tool with great functionality. I hope you all like it. If you have any questions please comment below. Please share it if you like it. Thank you all.