bgallz.org | Web coding & design tutorials, scripts, resources and more. http://bgallz.org Web coding & design tutorials, scripts, resources and more. Fri, 03 Sep 2010 23:46:33 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 PHP Pagination with Mysql http://bgallz.org/556/php-pagination-mysql/ http://bgallz.org/556/php-pagination-mysql/#comments Thu, 02 Sep 2010 16:52:26 +0000 admin http://bgallz.org/?p=556 So you have a Mysql table you want to pull data from, but you don’t want to flood the page with everything in the table right! So you need some pagination to seperate all the content in the table into easy to open pages.

So let’s say this is your mysql query:

$sql = mysql_query("SELECT * FROM table1 ORDER BY id DESC") or die(mysql_error());

So this will grab everything from table1 and order it by the field id in descending order.

If we have a lot of rows in this table this is going to return all of them, so we need to make a pagination for all the rows returned. This requires modifying the query and adding some variables. I like to have the PER_PAGE,OFFSET, and PAGE_NUM variables defined so you can use them globally in every class and function.

Here is the header PHP:

// === START Pagination definitions === //
$pgNperPage=15;
$pgNpageNum=1;
if(isset($_GET["p"])){
$pgNpageNum=(int)$_GET["p"];
}
$pgNoffset = ($pgNpageNum - 1) * $pgNperPage;
// definitions
define("PER_PAGE",$pgNperPage,true);
define("OFFSET",$pgNoffset,true);
define("PAGE_NUM",$pgNpageNum,true);
// === END Pagination definitions === //

So we have to modify the query we use in $sql to include a limit with the offset and per page values used.

Here is the new query:

$sql = mysql_query("SELECT * FROM table1 ORDER BY id DESC LIMIT ".OFFSET.",".PER_PAGE."") or die(mysql_error());
$count = mysql_num_rows($sql);

Now we just need to include the HTML and CSS classes for the pagination so viewers can navigate through the pages returned from this query.

Pagination CSS:

<style type="text/css">
.pagination {
margin: 0px;
background-color: #eaeaea;
padding: 0px;
}
.a_page {
margin: 0px;
padding: 2px;
color: #343434;
background-color: #f5f5f5;
font-size: 11px;
font-family: tahoma;
}
.a_page a {
color: #000;
text-decoration: underline;
}
.page_selected {
background-color: #ffffff;
color: #000;
font-weight: bold;
padding: 1px;
border: 1px solid #d9dbdc;
font-size: 11px;
font-family: tahoma;
}
.page_selected a {
color: #000;
}
</style>

Pagination HTML:

$totalCount = mysql_query("SELECT COUNT(id) AS numrows FROM table1") or die(mysql_error());
$total = mysql_fetch_array($totalCount);

// We must grab the total number of rows in the table to determine how many pages there will be.
// This pagination is set up to return PAGE1 | PREVIOUS PAGE | PAGES | NEXT PAGE | LAST PAGE
// The current page determines if certain things will be shown, like the first/last page buttons.

echo "<p>
<div align=\"left\">Displaying ".$count." of ".$total["numrows"]." videos.</div>
<table border=\"0\" align=\"left\" cellpadding=\"0\" cellspacing=\"1\"><tr>";
echo "<td>Page ".PAGE_NUM." of ".ceil($total["numrows"] / PER_PAGE)."</td>";
if(PAGE_NUM > 1){
echo "<td><a href=\"".SITE_URL."index.php?p=1\">«</a></td>";
echo "<td><a href=\"".SITE_URL."index.php?p=".(PAGE_NUM - 1)."\">‹</a></td>";
}
for($page=1;$page<=(ceil($this->total["numrows"] / PER_PAGE));$page++){
if($page == PAGE_NUM){
echo "<td>".$page."</td>";
} else {
echo "<td><a href=\"".SITE_URL."index.php?p=".$page."\">".$page."</a></td>";
}
}
if(PAGE_NUM < ceil($this->total["numrows"] / PER_PAGE)){
echo "<td><a href=\"".SITE_URL."index.php?p=".(PAGE_NUM + 1)."\">&amp;amp;amp;rsaquo;</a></td>";
echo "<td><a href=\"".SITE_URL."index.php?p=".(ceil($this->total["numrows"] / PER_PAGE))."\">&amp;amp;amp;raquo;</a></td>";
} else {
echo "<td>&amp;amp;amp;rsaquo;</td>";
echo "<td>&amp;amp;amp;raquo;</td>";
}
echo "</tr></table></p>";

This code is based off of the page index.php just adding the url parameter p to give the page number based on which they click.

This will return something that looks like this:

Displaying 15 of 44 videos.
Page 2 of 3 « ‹ 1 2 3 › ››

There you have it, simple pagination!

]]> http://bgallz.org/556/php-pagination-mysql/feed/ 0 PHP Date() Function http://bgallz.org/549/php-date-function/ http://bgallz.org/549/php-date-function/#comments Thu, 26 Aug 2010 22:55:57 +0000 admin http://bgallz.org/?p=549 The date() function converts a given timestamp into a readable date format.

Here is the syntax for this function:

Syntax

date(format,timestamp);

Parameters:

format
This parameter determines the format and how the date will read.

For example: “Saturday, Nov. 16th 2009” would be the following code:

$timestamp = time();
date("l, M. jS Y",$timestamp);

timestamp
This parameter is the timestamp you want to use to format a date from. This timestamp is a number of seconds since a certain date, since we used the current timestamp of time() we are making the date for the current time.

We’ll break down our example to see what each set of letters represents as part of the date’s format.

  • l – day of the week, textual, long; i.e. ‘Friday’
  • M – month, textual, 3 letters; i.e. ‘Jan’
  • j – day of the month without leading zeros; i.e. ’1′ to ’31′
  • S – English ordinal suffix, textual, 2 characters; i.e. ‘th’,‘nd’
  • Y – year, 4 digits; i.e. ’1999′

View the complete date format reference here.

]]> http://bgallz.org/549/php-date-function/feed/ 0 PHP Date Formats Reference http://bgallz.org/533/php-date-formats-reference/ http://bgallz.org/533/php-date-formats-reference/#comments Sun, 22 Aug 2010 04:38:13 +0000 admin http://bgallz.org/?p=533 Here is a table for formatting the PHP function date() and the letters used to represent different parts of a timestamp.

a ‘am’ or ‘pm’
A ‘AM’ or ‘PM’
B Swatch Internet time
d day of the month, 2 digits with leading zeros; i.e. ’01′ to
’31′
D day of the week, textual, 3 letters; i.e. ‘Fri’
F month, textual, long; i.e. ‘January’
g hour, 12-hour format without leading zeros; i.e. ’1′ to ’12′
G hour, 24-hour format without leading zeros; i.e. ’0′ to ’23′
h hour, 12-hour format; i.e. ’01′ to ’12′
H hour, 24-hour format; i.e. ’00′ to ’23′
i minutes; i.e. ’00′ to ’59′
I (capital i) ’1′ if Daylight Savings Time, ’0′ otherwise.
j day of the month without leading zeros; i.e. ’1′ to ’31′
l (lowercase ‘L’) day of the week, textual, long; i.e. ‘Friday’
L boolean for whether it is a leap year; i.e. ’0′ or ’1′
m month; i.e. ’01′ to ’12′
M month, textual, 3 letters; i.e. ‘Jan’
n month without leading zeros; i.e. ’1′ to ’12′
r RFC 822 formatted date; i.e. ‘Thu, 21 Dec 2000 16:01:07 +0200′
(added in PHP 4.0.4)
s seconds; i.e. ’00′ to ’59′
S English ordinal suffix, textual, 2 characters; i.e. ‘th’,
‘nd’
t number of days in the given month; i.e. ’28′ to ’31′
T Timezone setting of this machine; i.e. ‘MDT’
U seconds since the epoch
w day of the week, numeric, i.e. ’0′ (Sunday) to ’6′ (Saturday)
Y year, 4 digits; i.e. ’1999′
y year, 2 digits; i.e. ’99′
z day of the year; i.e. ’0′ to ’365′
Z timezone offset in seconds (i.e. ‘-43200′ to ’43200′). The
offset for timezones west of UTC is always negative, and for those east
of UTC is always positive.
]]> http://bgallz.org/533/php-date-formats-reference/feed/ 1 PHP Upload and Resize Image http://bgallz.org/502/php-upload-resize-image/ http://bgallz.org/502/php-upload-resize-image/#comments Tue, 27 Jul 2010 17:21:42 +0000 admin http://bgallz.org/?p=502 Many times when you upload a image somewhere you want to resize it to different dimensions based off of a maximum width or height. Here is a simple script that does this for you, using a HTML form and a PHP script. We start with the PHP script that will run if our $_GET['do'] is set to “upload.” Then we include the HTML form that has three inputs (max width, max height, image file).

Here is the PHP:

<?php

// index.php

function generate_resized_image(){

$max_dimension = 800; // Max new width or height, can not exceed this value.
$dir = "./images/"; // Directory to save resized image. (Include a trailing slash – /)

// Collect the post variables.
$postvars = array(
"image"    => trim($_FILES["image"]["name"]),
"image_tmp"    => $_FILES["image"]["tmp_name"],
"image_size"    => (int)$_FILES["image"]["size"],
"image_max_width"    => (int)$_POST["image_max_width"],
"image_max_height"   => (int)$_POST["image’_max_height"]
);

// Array of valid extensions.
$valid_exts = array("jpg","jpeg","gif","png");

// Select the extension from the file.
$ext = end(explode(".",strtolower(trim($_FILES["image"]["name"]))));

// Check not larger than 175kb.
if($postvars["image_size"] <= 179200){

// Check is valid extension.
if(in_array($ext,$valid_exts)){

if($ext == "jpg" || $ext == "jpeg"){
$image = imagecreatefromjpeg($postvars["image_tmp"]);
}
else if($ext == "gif"){
$image = imagecreatefromgif($postvars["image_tmp"]);
}
else if($ext == "png"){
$image = imagecreatefrompng($postvars["image_tmp"]);
}
// Grab the width and height of the image.
list($width,$height) = getimagesize($postvars["image_tmp"]);

// If the max width input is greater than max height we base the new image off of that, otherwise we
// use the max height input.
// We get the other dimension by multiplying the quotient of the new width or height divided by
// the old width or height.

if($postvars["image_max_width"] > $postvars["image_max_height"]){

if($postvars["image_max_width"] > $max_dimension){
$newwidth = $max_dimension;
} else {
$newwidth = $postvars["image_max_width"];
}
$newheight = ($newwidth / $width) * $height;

} else {

if($postvars["image_max_height"] > $max_dimension){
$newheight = $max_dimension;
} else {
$newheight = $postvars["image_max_height"];
}
$newwidth = ($newheight / $height) * $width;
}

// Create temporary image file.
$tmp = imagecreatetruecolor($newwidth,$newheight);

// Copy the image to one with the new width and height.
imagecopyresampled($tmp,$image,0,0,0,0,$newwidth,$newheight,$width,$height);

// Create random 4 digit number for filename.
$rand = rand(1000,9999);
$filename = $dir.$rand.$postvars["image"];
// Create image file with 100% quality.
imagejpeg($tmp,$filename,100);
return "<strong>Image Preview:</strong><br/>
<img src=\"".$filename."\" border=\"0\" title=\"Resized  Image Preview\" style=\"padding: 4px 0px 4px 0px;background-color:#e0e0e0\" /><br/>
Resized image successfully generated. <a href=\"".$filename."\" target=\"_blank\" name=\"Download your resized image now!\">Click here to download your image.</a>";

imagedestroy($image);
imagedestroy($tmp);
} else {
return "File size too large. Max allowed file size is 175kb.";
}
} else {
return "Invalid file type. You must upload an image file. (jpg, jpeg, gif, png).";
}
}

if(isset($_GET["do"])){
if($_GET["do"] == "upload"){
$upload_and_resize = generate_resized_image();
} else {
$upload_and_resize = "";
}
} else {
$upload_and_resize = "";
}

?>

Here is the HTML:

<form action="./index.php?do=upload" method="post" enctype="multipart/form-data">
<table width="100%" align="center" border="0" cellpadding="2" cellspacing="0">
<tr>
<td align="left" width="100">
Max Width:</td>
<td align="left"><input name="image_max_width" style="width: 120px" type="text" maxlength="4" /> px.</td>
</tr>
<tr>
<td align="left">
Max Height:</td>
<td align="left"><input type="text" name="image_max_height" style="width: 120px" type="text" maxlength="4" /> px.</td>
</tr>
<tr>
<td align="left">
Image:</td>

<td align="left"><input type="file" name="image" size="40" /></td></tr>
<tr>
<td align="left" colspan="2">
<ol style="margin:0;padding:3px 0px 3px 15px">
<li>Max file size: 175 KB.</li>
<li>Allowed extensions: jpg, jpeg, gif, png.</li>
<li>Max Dimension: <em>800</em>px.</li>
</ol>
</tr>
<tr>
<td align="left" colspan="2">
<input type="submit" name="submit" value="Submit!" style="font: 14pt verdana" />
</td>
</tr>
</table>
</form>

This will create a form that looks like this:

Max Width: px.
Max Height: px.
Image:
  1. Max file size: 175 KB
  2. Allowed extensions: jpg, jpeg, gif, png.
  3. Max Dimension: 800px.

Then we just have to call the functions returned value ($upload_and_resize).

<div id="upload">
<?php echo $upload_and_resize; ?>
</div>

]]> http://bgallz.org/502/php-upload-resize-image/feed/ 17 PHP Favicon Generator Script http://bgallz.org/488/php-favicon-generator-script/ http://bgallz.org/488/php-favicon-generator-script/#comments Sat, 24 Jul 2010 18:12:40 +0000 admin http://bgallz.org/?p=488 I decided to make a free easy to use favicon generating script that uses PHP. The script has a few features and requirements when uploading your image to be converted to a favicon. First the script checks for a few things such as file type, file size, and the specified dimensions. You can create a 16×16 icon or a 32×32 icon.

Click here to check out the demo for this script!

Just select the image file you want converted to a 16×16 or 32×32 icon and hit submit! It’s that easy. Here is how it works:

<?php

// bgallz.org – Web coding &amp;amp; design tutorials, scripts, resources and more.
// favicon Generator Script

function generate_favicon(){
// Create favicon.
$postvars = array("image" => trim($_FILES["image"]["name"]),
"image_tmp"        => $_FILES["image"]["tmp_name"],
"image_size"    => (int)$_FILES["image"]["size"],
"image_dimensions"    => (int)$_POST["image_dimensions"]);

$valid_exts = array("jpg","jpeg","gif","png");

$ext = end(explode(".",strtolower(trim($_FILES["image"]["name"]))));

// Check not larger than 175kb.
if($postvars["image_size"] <= 179200){
// Check is valid extension.
if(in_array($ext,$valid_exts)){
if($ext == "jpg" || $ext == "jpeg"){
$image = imagecreatefromjpeg($postvars["image_tmp"]);
}
else if($ext == "gif"){
$image = imagecreatefromgif($postvars["image_tmp"]);
}
else if($ext == "png"){
$image = imagecreatefrompng($postvars["image_tmp"]);
}
list($width,$height) = getimagesize($postvars["image_tmp"]);
$newwidth = $postvars["image_dimensions"];
$newheight = $postvars["image_dimensions"];
$tmp = imagecreatetruecolor($newwidth,$newheight);

// Copy the image to one with the new width and height.
imagecopyresampled($tmp,$image,0,0,0,0,$newwidth,$newheight,$width,$height);

$rand = rand(1000,9999);
$filename = "./favicon/".$rand.$postvars["image"];
// Create image file with 100% quality.
imagejpeg($tmp,$filename,100);

// Image created, now rename it to its
$ext_pos = strpos($postvars["image"],"." . $ext);
$strip_ext = substr($postvars["image"],0,$ext_pos);
// Rename image to .ico file
rename($filename,"./favicon/".$strip_ext.".ico");
return "<strong>Icon Preview:</strong><br/>
<img src=\"./favicon/".$strip_ext.".ico\" border=\"0\" title=\"Favicon  Image Preview\" style=\"padding: 4px 0px 4px 0px;background-color:#e0e0e0\" /><br/>
Favicon successfully generated. <a href=\"./favicon/".$strip_ext.".ico\" target=\"_blank\" name=\"Download favicon.ico now!\">Click here to download your favicon.</a>";

imagedestroy($image);
imagedestroy($tmp);
} else {
return "File size too large. Max allowed file size is 175kb.";
}
} else {
return "Invalid file type. You must upload an image file. (jpg, jpeg, gif, png).";
}
}

if(isset($_GET["do"])){
if($_GET["do"] == "create"){
if(isset($_POST["submit"])){
$generate_favicon = "<p>".generate_favicon()."</p>";
} else {
$generate_favicon = "";
}
}
}

?>

Then we must include the HTML form that will submit the image and dimensions to PHP:

<form action="index.php?do=create" method="post" enctype="multipart/form-data">
Image Dimensions: <select name="image_dimensions" style="width: 170px">
<option value="16">16px &nbsp;x&nbsp; 16px</option>
<option value="32">32px &nbsp;x&nbsp; 32px</option>
</select><br/><br/>
<span style="font-size: 14pt">Favicon Image:</span><br/>
<input type="file" name="image" size="40" /><br/><br/>
<input type="submit" name="submit" value="Submit!" style="font: 14pt verdana" />
</form>

Be sure to include the HTML head tags in your HTML pages that use the favicon. These are given on the script’s index and on the demo.

Click here to download the script!

]]> http://bgallz.org/488/php-favicon-generator-script/feed/ 0 PHP Ordinalize Numbers – Add Suffix http://bgallz.org/481/php-ordinalize-numbers-add-suffix/ http://bgallz.org/481/php-ordinalize-numbers-add-suffix/#comments Thu, 22 Jul 2010 22:23:29 +0000 admin http://bgallz.org/?p=481 Here is a very simple function to use to ordinalize numbers in PHP. This adds the place value suffix to numbers. So you can turn numbers like 1, 2, 3 into 1st, 2nd, 3rd.

Here is the code:

function ordinalize($int){
if(in_array(($int % 100),range(11,13))){
return $int . "th";
} else {
switch(($int % 10)){
case 1:
return $int . "st";
break;
case 2:
return $int . "nd";
break;
case 3:
return $int . "rd";
break;
default:
return $int . "th";
break;
}
}
}

Basically the function first checks if the number is in the range of 11-13, and if so it returns the number with “th” attached (11th, 12th, 13th). If it is not in this range it checks the remainder of the number divided by 10.

So let’s say our number was 34. 10 goes into 34 three times, with a remainder of 4. Now the function runs this value against three cases, those being 1, 2, and 3. Since it is not one of them, the default value is used, which is “th.” Thus returning “4th.”

Example input:

3
10
999

Example output:

3rd
10th
999th

Enjoy!

]]> http://bgallz.org/481/php-ordinalize-numbers-add-suffix/feed/ 1 Mysql Rows in HTML Option Tag http://bgallz.org/458/mysql-rows-html-option-tag/ http://bgallz.org/458/mysql-rows-html-option-tag/#comments Mon, 12 Jul 2010 05:06:41 +0000 admin http://bgallz.org/?p=458 Let’s say you want to have a simple HTML <select> form as a drop down for rows in a Mysql table. This could be for things like categories, pages, games, anything you want to have in a drop down to navigate to another page or submit a form. What ever the case is, I’m going to make a simple layout for displaying rows returned from a mysql query as <option>’s in a HTML <select> or drop down.

Before we can grab anything from a mysql database we have to connect to it. Find how to connect to a mysql database here.

Let’s make our mysql query first:

<?php
// index.php
// Connect to mysql database here!
$sql = mysql_query("SELECT * FROM table1 ORDER BY id DESC") or die(mysql_error());
?>

This will grab all the rows in “table1″ ordered by the value of “id” descending. You can make this query whatever you want whether you want it ordered differently or with other requirements, etc. Now we will just make a <select> inside of a HTML form that holds each of these values as a option.

<html>
<head>
<title>Categories</title>
</head>
<body>
<form action="./index.php?do=nav" method="post">
<strong>Category:</strong> <select name="catid" style="width:250px">

Here is where we will insert our PHP code to call the returned rows of our Mysql query and display them as HTML <option> tags inside of the <select> tag.

<?php
// Display mysql rows
if(mysql_num_rows($sql) > 0){
// We have some results!
while($row = mysql_fetch_array($sql)){
echo "<option value=\"".$row["id"]."\">".$row["title"]."</option>";
}
}
else {
echo "<option value=\"0\">No categories found.</option>";
}
?>

Now we close up our HTML and see the finished result!

</select> <input type="submit" value="Go!" name="submit" />
</form>
</body>
</html>

If you have rows returned in you mysql query you will have a HTML drop down that looks like this:

Categories:

This HTML form is being submitted to “index.php?do=nav.” Of course you can point this where ever you want to do whatever you want with it, but let’s say we want to have it direct you to a category with PHP. So we are going to run a function on index.php?do=nav that will redirect the viewer to the category.

<?php
// Top of index.php
if(isset($_GET["do"]) && $_GET["do"] == "nav"){
// Form submitted
if($_POST["submit"] && ((int)$_POST["catid"])){
// Redirect them to the new page.
header("Location: ./category?id=".$_POST["catid"]."");
}
}
?>
]]> http://bgallz.org/458/mysql-rows-html-option-tag/feed/ 6 PHP error_reporting() Function http://bgallz.org/447/php-error_reporting-function/ http://bgallz.org/447/php-error_reporting-function/#comments Tue, 22 Jun 2010 15:38:01 +0000 admin http://bgallz.org/?p=447 The error_reporting() function determines what errors are reported from the current script.

Here is the syntax for this function:

Syntax

error_reporting(report_level);

The report_level parameter is optional and specifies what report level to report for the current script. This can be set by its numeric value or its constant name, however for future versions of PHP it is recommended you use the constant name rather than the numeric value.

Report Levels

Value Constant Description
1 E_ERROR Fatal run-time errors. Errors that can not be recovered
from. Execution of the script is halted
2 E_WARNING Non-fatal run-time errors. Execution of the script is not
halted
4 E_PARSE Compile-time parse errors. Parse errors should only be
generated by the parser
8 E_NOTICE Run-time notices. The script found something that might be
an error, but could also happen when running a script normally
16 E_CORE_ERROR Fatal errors at PHP startup. This is like an E_ERROR in the
PHP core
32 E_CORE_WARNING Non-fatal errors at PHP startup. This is like an E_WARNING
in the PHP core
64 E_COMPILE_ERROR Fatal compile-time errors. This is like an E_ERROR
generated by the Zend Scripting Engine
128 E_COMPILE_WARNING Non-fatal compile-time errors. This is like an E_WARNING
generated by the Zend Scripting Engine
256 E_USER_ERROR Fatal user-generated error. This is like an E_ERROR set by
the programmer using the PHP function trigger_error()
512 E_USER_WARNING Non-fatal user-generated warning. This is like an E_WARNING
set by the programmer using the PHP function trigger_error()
1024 E_USER_NOTICE User-generated notice. This is like an E_NOTICE set by the
programmer using the PHP function trigger_error()
2048 E_STRICT Run-time notices. PHP suggest changes to your code to help
interoperability and compatibility of the code
4096 E_RECOVERABLE_ERROR Catchable fatal error. This is like an E_ERROR but can be
caught by a user defined handle (see also set_error_handler())
8191 E_ALL All errors and warnings, except level E_STRICT (E_STRICT
will be part of E_ALL as of PHP 6.0)

Here is an example of the error_reporting function in PHP:

<?php
//Disable error reporting
error_reporting(0);

//Report runtime and notice errors
error_reporting(E_ERROR | E_NOTICE);

//Report all errors
error_reporting(E_ALL);
?>

]]> http://bgallz.org/447/php-error_reporting-function/feed/ 4 Balance and Composure – Only Boundaries EP (2009) http://bgallz.org/414/balance-composure-only-boundaries-ep-2009/ http://bgallz.org/414/balance-composure-only-boundaries-ep-2009/#comments Wed, 09 Jun 2010 16:19:13 +0000 admin http://bgallz.org/?p=414 After their first released EP in 2008 – “I Just Want to Be Pure” – Balance and Composure released a new EP titled “Only Boundaries.” Although this CD only has four tracks they are quite amazing. Written in October of 2009, Blake Solomon describes this EP as “The most memorable 4-song feast of 2009.” The CD holds a very unique emotional connection and their live performance of these tracks is even more sensational. There has yet to be a release that delivers such the emotional message that Only Boundaries does. I couldn’t agree more with Solomon’s words – “It’s just so heavy without being heavy.”

The overall tone of the band’s latest release follows a similar taste of their first – a harsh look at reality that focuses more on the cheerless parts of their lives. In the song Only Boundaries – “As you grow old you’ll see that it’s useless to make an attempt to escape reality.” I think that this expression is not usually found with such powerful effect as present in Balance and Composure’s latest tracks.

Balance and Composure - Only Boundaries Album Cover

Tracklist:

01. I Can’t Do This Alone
02. Only Boundaries
03. Show Your Face
04. What’s Wrong With Everything

Record Label: No Sleep Records

Band Members:

Jonathan Simmons – Vocals/Guitar
Andrew Slaymaker – Guitar
Matthew Warner – Bass
Erik Peterson – Guitar
Bailey Van Ellis – Drums

Visit Balance and Composure’s Myspace!

May 11th, 2010 Balance and Composure and Tigers Jaw released their split. You can download the split as well as the Only Boundaries EP here.

]]> http://bgallz.org/414/balance-composure-only-boundaries-ep-2009/feed/ 3 CSS Drop-Down Menu http://bgallz.org/392/css-drop-down-menu/ http://bgallz.org/392/css-drop-down-menu/#comments Tue, 08 Jun 2010 04:32:42 +0000 admin http://bgallz.org/?p=392 Drop down menus are very useful for navigation on websites and for holding many links to pages on your site without taking up much space on your web pages. Using just CSS and Javascript we can make a nice simple drop down menu you can put on your web page. To do this we’ll have three files: dropdown.css, dropdown.js, and index.html. Our index.html page will display the drop down menu and our stylesheet – dropdown.css – will hold the styles for the drop down menu.

Here is a preview of what our drop down menu will look like:



Dropdown.css

@charset "utf-8";
#dropdown {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
font: 11px Arial, Helvetica, sans-serif;
}
#dropdown li {
float: left;
margin: 0px;
padding: 5px;
list-style-type: none;
border-bottom: 2px solid #cccccc;
border-right: 1px solid #eeeeee;
}
#dropdown li a {
display: block;
margin: 0;
text-decoration: none;
}

#dropdown div {
position: absolute;
visibility: hidden;
margin: 7px 0px 0px 0px;
padding: 0;
background-color: #e8e8e8;
border-right: 1px solid #c5c5c5;
border-bottom: 1px solid #c5c5c5;
}
#dropdown div a {
position: relative;
display: block;
margin: 0;
padding: 3px 6px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #e2e2e2;
}
#dropdown div a:hover {
background-color: #f1f1f1;
color: #000;
}

Dropdown.js

// Dropdown menu javascript
var timeout    = 500;
var closetimer    = 0;
var ddmenuitem    = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = ‘visible’;

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="./dropdown.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./dropdown.js"></script>
</head>

<body>
<ul id="dropdown">
<li><a href="#">Homepage</a></li>
<li><a href="#" onmouseover="mopen(‘list1′)" onmouseout="mclosetime()">Drop Down Menu #1</a>
<div id="list1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Drop Down Link #1</a>
<a href="#">Drop Down Link #2</a>
<a href="#">Drop Down Link #3</a>
</div>
</li>
<li><a href="#" onmouseover="mopen(‘list2′)" onmouseout="mclosetime()">Drop Down Menu #2</a>
<div id="list2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Drop Down Link #1</a>
<a href="#">Drop Down Link #2</a>
<a href="#">Drop Down Link #3</a>
</div>
</li>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#" onmouseover="mopen(‘list3′)" onmouseout="mclosetime()">Drop Down Menu #3</a>
<div id="list3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Drop Down Link #1</a>
<a href="#">Drop Down Link #2</a>
<a href="#">Drop Down Link #3</a>
</div>
</li>
</ul>
</body>
</html>

Click here to download this drop down menu script!

]]> http://bgallz.org/392/css-drop-down-menu/feed/ 1