Multidimensional Arrays (associative) + load randomly.

The assignment was to randomly display a set of data on my page (& the preferable option was to use server side scripting).

Here’s the data that needed to be displayed:

[Thumbnail1] [entry name1] [user name1]
[Thumbnail2] [entry name2] [user name3]
[Thumbnail3] [entry name3] [user name3]

The solution mentioned below users multi-dimensional arrays to achieve this.
You can refer to http://www.webcheatsheet.com/php/multidimensional_arrays.php for more details.

Here’s the solution (originally written by one of my colleagues):

<ul>
<?php

$allEntries = array(

0 => array(
“link” => “http://www.google.com&#8221;,
“thumbnail” => “http://www.google.com/intl/en_ALL/images/srpr/logo1w.png&#8221;,
“entryname” => “Google”,
“firstname” => “Google User”
),
1 => array(
“link” => “http://www.yahoo.com&#8221;,
“thumbnail” => “http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png&#8221;,
“entryname” => “Yahoo”,
“firstname” => “Yahoo User”
),
2=> array(
“link” => “http://www.votigo.com&#8221;,
“thumbnail” => “http://www.votigo.com/corp/img/votigo-logo.gif&#8221;,
“entryname” => “Votigo”,
“firstname” => “Votigo User”
),
3 => array(
“link” => “http://www.php.net&#8221;,
“thumbnail” => “http://static.php.net/www.php.net/images/php.gif&#8221;,
“entryname” => “Php”,
“firstname” => “Php User”
)

);
shuffle($allEntries);

?>
<?php foreach ($allEntries as $myEntry): ?>

<li>
<a href=”<?php echo $myEntry[“link”]; ?>”><img src=”<?php echo $myEntry[“thumbnail”]; ?>” width=”108″ height=”82″ alt=”<?php echo $myEntry[“firstname”]; ?>” /></a>
<strong><?php echo $myEntry[“firstname”]; ?></strong>
<i><?php echo $myEntry[“entryname”]; ?></i>
</li>

<?php endforeach; ?>
</ul>

CLICK HERE to see the result.
(refresh this page to see the results load in a random order)

Make your forms look pretty with css

this is going to be my first post. and you’ll notice as i go along, my writing style is extremely informal. a lot of hyphens, no capitalization, lots of sentences ending with periods – well, that’s just me….

i’m going to start my first post with some tips on making input boxes and dropdowns look pretty.
at my current workplace, i was asked to work on making all our forms look nice and pretty. web 2.0’ish form elements – big, rounded…

so i started looking to see if i could find nice rounded input boxes and dropdowns that are created using css. i haven’t found a solution for dropdowns yet, but here are a couple that can be used for input boxes.

solution 1. this one does not work in IE, but works across all other browsers.

apply this css to your input box:

input {
border-width: 2px;
border-style: solid;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
font-size: 1.7em;
outline: none;
border-color:#cccccc;
width:250px;
font-family:Trebuchet MS, Georgia, arial;
}

your input box will end up looking like this –

solution 2: this is the other way you can apply the same effect, and this one will work across all browsers. this uses a background image instead.

input {
background:url(input-bg.gif);
width:455px;
height:40px;
border:0px;
font-size:16px;
background-repeat:no-repeat;
padding:2px 0px 0px 10px;
font-family:Trebuchet MS, Georgia, arial;
}

and here’s the bg image.

input css background

and finally, here’s a way to make your select boxes look pretty and web 2.0’ish using css.

select {
border: 2px solid #cccccc;
padding:6px;
font-family:Trebuchet MS, Georgia, arial;
}

your select box will look like this –