PAWDD E-Training
2Jun/100

Web Development Unites Design and Programming

Web design and Web Programming are united to create Web Development. Many beginning web designers never develop skills that include programming. However, it is imperative to gain knowledge of programming to introduce dynamic elements to your designs.

More to come...

26May/100

Evaluating Variable Status

While using php you will need to evaluate or test your variables using conditional statements or functions. Or by using functions in your conditional statements. there are a few functions that can assist us to determine whether our variables have a value assigned to them, or to check if they are empty or not. They are as follows:

  • isset()
  • empty()
  • unset()

isset() Takes your variable as an argument and returns TRUE if it has a value or FALSE if it does not.

empty() Takes your variable as an argument and returns TRUE if it is empty or FALSE if it is not.

unset() Will allow you to take any set variable and obliterate it by removing its value and the variable from memory all together.

Remember: You can reverse the functions output by placing the ("!" NOT) operator in front of it.

<?php
  $myVar = "test";
 
  IF !empty($myVar) //normally empty would return FALSE because we set or variable, the "!" reverses this to TRUE
  {
    echo "I am set"; //This will be returned
  }else{
    echo "I am not set"; //This will NOT be returned
  }
?>
26May/100

Functions for Variables

Variables need special attention. Especially when you are using the ===(identical too) comparison operator, which will ensure you have a stricter set of conditional statements. They are as follows:

  • gettype() will return the a string containing the type name or "unknown" if it is not one of the following types (integer, double, string, array, or object)
  • settype() will set a variable to a specific type that is specified. takes two arguments.. (variable, type)
  • is_array() will return true or false dependant on whether the variable passed is an array
  • is_double(), is_float(), is_real() (all equivalent) will return true or false dependant on whether the variable passed is an integer with a decimal or negative
  • is_long(), is_int(), is_integer() (all equivalent) will return true or false dependant on whether the variable passed is an whole integer
  • is_string() will return true or false dependant on whether the variable passed is an string
  • is_object() will return true or false dependant on whether the variable passed is an object

These variable functions can be useful prior to working with a variable that needs to be of a specific type. This can ensure your programs do not crash.

22Sep/090

Styling Lists Menus with Images that Expand

It is common to see a list styled as a vertical or horizontal menu. Our menus are usually very simple but why limit ourselves to simple text lists as a menu.

Especially when CSS is so powerful and can be used along with the tag to allow for genuine gorgeous list menus styled with images that expand and contract with link text length.

The following is CSS that will allow you to have beautiful image styled menus that expand and contract with content.

This example only expands horizontally, not vertically, so it is not a good idea to have multi-line text in your lists.

The Image

Image to use for your list menu up/down states

Image to use for your list menu up/down states

This example used an image that is 300x48, thusly taking into account that your link will never be more than 296px wide, and accounting for a 24 pixel high menu item, with a hover state built into the image using a stacked image that contains both states in one image, thus reducing load on your server, and removing the need for OnLoad events on the body.

The CSS

#menu li {
     list-style:none;
     float:left;
     margin-right:4px;
}
* html #menu li {
     height:24px;
     display:inline;
}
#menu li a {
     height:24px;
     display:block;
     background:url(images/nav.png) no-repeat left top;
     padding-left:15px;
     color:#405768;
     font:700 0.88em/26px Arial, Helvetica, sans-serif;
     text-decoration:none;
     cursor:pointer;
}
#menu li a span {
     height:24px;
     display:block;
     background:url(images/nav.png) no-repeat right top;
     line-height:24px;
     padding-right:15px;
}
#menu li a:hover, #menu li a.s {
     background-position:left bottom;
}
#menu li a:hover span, #menu li a.s span {
     background-position:right bottom;
}
* html #menu li a, * html #menu li a span {
     width:1%;
     white-space:nowrap;
     cursor:pointer;
}
* html #menu li a span {
     position:relative;
}

The XHTML

<ul id="menu">
	<li><a title="button 1" href="http://"><span>Button 1</span></a></li>
	<li><a title="Button 2" href="http://"><span>Button 2</span></a></li>
	<li><a title="Button 3" href="http://"><span>Button 3</span></a></li>
</ul>
10Sep/092

Make Lists Align Properly

Bulleted lists can present many issues in formatting in older and newer browsers.  I consistently run into a problem where my bulleted lists will slam up against the far left side of my division.

The fix for this issue is to use CSS to replace the standard bullet image with a left side margin and a background image as the bullet, or to remove the bullet image completely by placing a transparent background image as the bullet.

The CSS for the ul and li is as follows: 

ul  {
     white-space: normal;
     display: block;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 5px;
}
li  {
     margin: 0px;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 3px;
     padding-left: 10px;
     list-style: disc url(none) outside;
     background-image: url(../images/bullet/bullet.gif);
     background-repeat: no-repeat;
     background-position: left top;
}
   

Dashboard

Training Categories

Shaded Pixel LLC

Monthly Archive

Page Links

PAWDD E-Training