Wednesday, December 12, 2012

Day and Night Effect Using jQuery

Day and night effect on any html page can easily mean switching between two different stylesheets to enhance user experience. This tutorial will demonstrate how to switch between two stylesheets efficiently using jQuery.

End Result:



THINGS YOU MIGHT NEED:
jQuery basic knowledge
HTML file 
External CSS files

Saturday, November 24, 2012

Getting the window title in AS3

In AS3, you can easily access the name of the HTML page that the .swf is embedded in. To do this, you can use ExternalInterface. First, import the ExternalInterface library.

import flash.external.ExternalInterface;

Next, call the window location from JavaScript using the call function of ExternalInterface.

flash.external.ExternalInterface.call("window.location.href.toString");

This should work for most browsers; however, there have been reported problems using this method. If you experience difficulties with your browser, try wrapping the call in a JavaScript function.

flash.external.ExternalInterface.call("function(){ return window.location.href.toString();}")

In addition, you may want to find the path of the .swf file. Using the following code will get the path of the .swf:

var swfLocation = this.location.href;

One final note, the ExternalInterface calls only work when JavaScript is enabled on the page, so if it does not work, this may be the issue.

Happy Coding,
kieblera5

Thursday, November 8, 2012

How to Center a Page in CSS

Conflicting margins can be frustrating and confusing when constructing a stylesheet for your website. However, centering your website is a common practice to avoid margin conflicts. Centering your website also helps with readability and works pretty well with dynamic display of content.

The following tutorials will show you how to center your website using an ID selector in CSS.

THINGS YOU MIGHT NEED:
CSS basic knowledge
HTML file 
External CSS file

HTML File:

<body>
  <div id="page-wrap">
  all websites HTML here 
  </div>
</body>
External CSS File:

#page-wrap {     width: 800px;
     margin: 0 auto;
}
In other to avoid margin conflicts when resizing your window, it is very important to set the width of the selector to a giving pixel ( e.g 800px ) and also set the margin's initial value to 0 and auto to horizontally center the page.