scriptygoddess

Found a very cool tutorial to make swirling text in photoshop. There's more tutorials on that site too, like this one for smoke.

(found via Creativebits)

Here's a new fun little colortool someone sent me a link to yesterday: Genopal. There are a bunch of pre-made "themes", or you can play around with the controls to create a new one. Click on any of the colors in the theme will reveal what HEX value it is.

Another mini-cheatsheet… I know this stuff, but I'm always looking it up for the exact syntax.

Connect to MySQL and to the database – mysql_connect
$connect = mysql_connect("localhost", "mysqluser", "userpassword") or die(mysql_error());

Select the database – mysql_select_db
mysql_select_db("databasename", $connect) or die(mysql_error());

Close connection – mysql_close
mysql_close($connect) or die(mysql_error());

Select data from the database – mysql_query
$myquery = "SELECT tablefield, tablefield2 FROM tablename WHERE tablefield = '" .$variable. "' AND tablefield2 = '" .$variable2. "'";
(or)
$myquery = "SELECT * FROM tablename WHERE tablefield = '" .$variable. "' AND tablefield2 = '" .$variable2. "'";
$myresult = mysql_query($myquery ) or die(mysql_error());

Selecting, Grouping, and Ordering the data
SELECT [ALL | DISTINCT] column1[,column2] FROM table1[,table2] [WHERE "conditions"] [GROUP BY "column-list"] [HAVING "conditions] [ORDER BY "column-list" [ASC | DESC] ]

Display Data – mysql_fetch_array
while ($row = mysql_fetch_array($myresult)) {
echo $row["tablefield"] . " and " . $row["tablefield2"] . "<br />";
}

Insert data
$query_insert = "INSERT INTO tablename(tablefield, tablefield2) VALUES('" .$variable. "', '" .$variable2. "')";
$result_insert = mysql_query($query_insert) or die(mysql_error());

Insert data, multiple rows
$query_insert = "INSERT INTO tablename(tablefield, tablefield2) VALUES ('" .$variable. "', '" .$variable2. "'),
('" .$variable. "', '" .$variable2. "'),
('" .$variable. "', '" .$variable2. "')";
$result_insert = mysql_query($query_insert) or die(mysql_error());

Update data
$query_update = "UPDATE tablename SET tablefield = '" .$variable. "', tablefield2 = '" .$variable. "' WHERE tablefield3 = '" .$variable3. "'";
$result_update = mysql_query($query_update) or die(mysql_error());

Delete a row from a table
$query_delete = "DELETE FROM tablename WHERE tablefield = '" .$variable. "'";
$result_delete = mysql_query($query_delete) or die(mysql_error());

Some good references:
http://sqlcourse.com
http://www.w3schools.com/sql/

Just some random stuff. This post was saved as a draft a long time ago because I needed to refer to one of these – but was waiting until I could find the original source to publish. It's pretty generic/basic stuff, though, (and a really small snippet) so I'm finally posting it.

To set the value of a text element, the following syntax is used:
document.formName.elementName.value = elementValue;

To set a select element, the following syntax is used:
document.formName.elementName.selectedIndex = elementValue;(also see this post: Javascript Sect Selection in Select Element)

To set a radio element, the following syntax is used:
document.formName.elementName[elementValue].checked = true;

To set a checkbox element, the following syntax is used:
document.formName.elementName.checked = true

I was recently asked to embed a map into a web site. Basically, the client wanted a map, with a marker, indicating where their business was, and an easy way for the user to get directions to where they were located.

The first thing you need to do is get a Google Map API key. Just a little warning – once you sign up for the API key – it will show up on the top of the page – and after you leave that page, I have yet to find where you can go to retrieve it again. So copy and paste that key in a safe place! LOL!

Here are a couple of resources that helped me out:
Of course there's the Google Maps API documentation.
Also, this was a pretty good tutorial.

In order to place a marker on the map, you need to know the longitude and latitude of your location. Originally I found "Bud's Blog, which linked to geocoder.us (US locations only) , but for some reason, it couldn't find the address I wanted to mark. I also found this this site which will give you the longitude and latitude (and that one DID find the location). Another source is TerraServer. (US locations only) Here's another one that seemed pretty good. Also, here's another one that will let you click on the map to place a marker – and then if you click on the marker it will give you the lattitude and longitude. (This was particularly useful, because for some reason the address, Google, Mapquest, and Yahoo maps all don't seem to know where the location of this particular client was). (Although you can also kind of do this with Yahoo maps by clicking on an area and then right click in the spot and selecting "drive to here" – on the left side it will give you the long./lat. location of the spot you clicked…)

You can also pull that information from the URL you get from Google Maps.
For example..
If you look up the Red Butte Gardens in Utah, (that place is GORGEOUS by the way!), and click the button to "link to this page", it will give you this URL. If you break down the pieces of that URL, you will see that one part of it looks like this:
ll=40.771182,-111.809063 (not the "sll" value, the "ll" value) That is the longitude and latitude.

I should note that there is some variances/weirdnesses depending on the source you use. If I type in the address in Google Maps, the marker looks like it is where I want it, and if I grab that "ll" value longitude and latitude and use that value on my own map – it shows the marker quite a bit off the road. (Probably more accurate to where the main building is, after their long driveway, but I want to show the location of where their driveway entrance is.) TerraServer was more accurate in that regard.

UPDATE 6/9/07: Just got this link to Tech-recipes off Lifehacker: Once your location in in the center of the map, enter the following Javascript in the address bar. This will pop up a little "alert" type window with the coordinates:javascript:void(prompt('',gApplication.getMap().getCenter()));

(FYI – you can right click on an area of the map and select "center map here" from the little menu you get)

Moving along to creating the map…
When I first started working with the map, I was using one of the samples from "Buds Blog" – however, the sample you get when you first sign up for your API key includes some code that is necessary so that IE doesn't choke. If you've already stripped that info out, and IE is choking, here is a post I found that will explain how to fix it.

Anyway, use the base-starter sample you get when you sign up for the API key and you'll be fine.

Their example had one line for setting the point and setting the point at the center, but I needed to separate it into two statements. (As well, I needed to change the long. and lat. coordinates for my location.

So this:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Became this:
var gardenPoint = new GLatLng(40.7628,-111.8246);
map.setCenter(gardenPoint, 15)
This sets a point and puts it in the center of the map. The "15" is the "zoom" level. (The higher the number the closer the zoom). Another trick with this is that if you play around with a map directly on Google Maps – do the "Link to this page" thing – look at the URL, and look for the value of "z"… that is the number of what your zoom is.

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());This adds the typical controls to the map. If you would prefer smaller controls, use this:map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

var gardenMarker = new GMarker(gardenPoint);
map.addOverlay(gardenMarker);This creates a new marker at that point, and puts it on the map. (FYI "gardenPoint" and "gardenMarker" are just variable names I made. You can actually make then anything you want.)

var gardenHtml = '<b>Red Butte Botanical Garden</b>,<br /><a href="http://www.redbuttegarden.org/">They have beautiful flowers</a><br />300 Wakara Way<br />Salt Lake City, Utah 84108<br /><br /><a href="http://maps.google.com/maps?f=d&hl=en&daddr=300+Wakara+Way,+Salt+Lake+City,+UT+84108">Get Directions to here</a>';
That makes one of those little "bubbles" and you can pretty much put anything you want to in there. I even put a link to Google maps to get directions with this address as the ending destination.

gardenMarker.openInfoWindowHtml(gardenHtml);This connects that buttle to the marker and makes it so that it's open when the map loads.

Here's the complete example.

I know that's pretty basic – but should I ever need to do that again, I wanted to save all the links and information I needed to create the same map.

I'm just curious… is there a fancy way to do something like this in CSS:

Introduction …………… Page 1
Information ……………. Page 2
More Info ……………… Page 3

… where the "Page" text lines up and the "….." just fills in until it reaches the "Page" text… kind of like you'd see in a table of contents in a book? (Ideally the "…." wouldn't even be text in the markup. It would just be a background fill or something…) Is that even possible?

Update: Jenna got me on the right track…. (Thank you!) 😀

Make each line part of a list item. Apply the background image to <li> style. Wrap each part with another tag. Float one right, the other left, and give them both a solid color background the same as the rest of the page (so that it covers the dot, so it won't show through under the text). I also wanted the right column to line up, so I gave it a width, and told the text to align-left. Here's the example.

It seems like a lifetime ago I first saw that javascript that does the neat "show/hide" trick. Recently I did a search to see what the latest version of that script was and there must have been a dozen different varieties. I think I liked this one the best which is a million times simpler than ones I've previously posted on this site. (I haven't really looked at those scripts in a long time, but for some reason this week alone I've needed to use it on two separate projects.) That one does a toggle:

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}

I actually split it so that I could do a separate show/hide:

function show(menuName) {
var el = document.getElementById(menuName);
el.style.display = 'block';
}

function hide(menuName) {
var el = document.getElementById(menuName);
el.style.display = 'none';
}

Someone help me out before I go crazy.
Why is firefox underlining the image in this example?
Here is a screenshot (in case you're not using firefox) – the above link looks like this in firefox:

The code on that page is simply:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
a img {
text-decoration: none;
border: none;
}
-->
</style>
</head>
<body>
<a href="#"><img src="gecko.gif" alt="gecko" /> Test</a><br />
<a href="#"><img src="gecko.gif" alt="gecko" /></a> <a href="#">Test</a>
</body>
</html>

I thought it might be a doctype issue – but changing it doesn't seem to make a difference.

Added after: Just to make this even more mysterious… This DOES NOT create that line:
<a href="#"><img src="gecko.gif" alt="gecko" /> </a>
It doesn't show up until we add a *character* within the <a> tag that the underline pops up…(I've updated the example to show this…)

Updated 3/30/07 Shaun wins the prize for finding the solution!:a img {
display:block;
border: none;
float: left;
}

The example has been updated…

For the past couple of days, I've been trying to figure out why a design I had been working on was showing extra padding (veritcally) in IE. I think I'd seen every solution such as: write the code like this:

<li>Item one</li><li>
Item two</li>

or make set them to float: left | right (which messed up the way the list was showing up…

The only thing that worked for me – was setting the line-height to the be the same size as the font-size used for the list. ie:

li {
font-size: 12px;
line-height: 12px;
}

And then you can add your own specific padding or margins as needed… Hope that saves someone the headache I just went through!!

Well, this was fun! I just made a store locator for a client using PHP and AJAX! 😀

I was basically following the instructions from this page: SomeCoders.com (Retrieving database information with AJAX, PHP and MySQL)

Take a look…
Read the rest of this entry »