scriptygoddess

“Why am I getting that Javascript error?? WTH is it talking about - submit IS a function!!”

So here’s the deal - if you have a form and an element in the form is named “submit” - if you try to call document.myform.submit() - you’ll end up getting the “submit is not a function” javascript error. (Because to javascript - “submit” is now that object element in your form - not a function)

So the simple solution is if you plan on using the javascript function submit() - do not name any of your form elements “submit”.

That’s all well and good except if you’re working on code that isn’t completely yours - and if the PHP code to process the form is specifically looking for $_POST['submit'] like so:

if (isset($_POST['submit'])) { // process form }

then you now have another problem.

This was the case I ran into with CubeCart recently. Most of the forms do not require a submit element to be in the form in order to process it - but a handful did. The design I was working on needed all the buttons designed and to look the same. So my options were:

1) Just use the regular input type=”submit” button on those forms. (Ok - but then the site is inconsistent)

2) search for all instances of (isset($_POST['submit']) in the code and change it to some other element I can add to the page… ie:

<input type="hidden" name="formsubmitted" />

and then in the code:

if (isset($_POST['formsubmitted'])) { // process form }

(Obviously this is not recommended in the case of CubeCart as it will make it really annoying to maintain/upgrade the cart!)

3) add that other “formsubmitted” element I noted above to the pages that need it - then towards the top of the MAIN index.php page (which is called with all pages on the store) add the following:

if (isset($_POST['formsubmitted'])) $_POST['submit'] = 1;

Thereby setting the value of $_POST['submit'] so it will process the form…

Another tip with using css-styled links for buttons that will submit forms in CubeCart - you don’t need to use document.FORMNAME.submit() - from any form you can use their “submitDoc(’FORMNAME’)” function like so:

<a href="javascript:submitDoc('FORMNAME');" class="myButtonStyle">Send Form</a>

Just make sure the form has a name (some of them don’t).

This isn’t a big deal, but it was something I was fighting with for a bit. If you’re trying to set the properties of a DIV via javascript, and you’re getting the “document.getElementById(”mydiv”) has no properties” javascript warning, there’s probably two big things that will cause it.

1) you didn’t set the id.
Go back and make sure your div has id=”mydiv” (or whatever you named it) in there.

2) the javascript is running BEFORE the div has been defined in the code.
This is what got me. I had the javascript code just above where the div was… and at load time, that div doesn’t exist yet… the browser hasn’t gotten that far down the page yet, so as far as it’s concerned, that div with that id, doesn’t exist. Once I moved the javascript BELOW the div… all was well.

And actually here - they suggest calling it on onload.

Whenever someone asks me for tutorials on one thing or another, I think the first link I send them is w3schools. Recently, one of my clients was asking if I could do XSLT to format their XML document. I’ve heard about XSLT, I even get the basics of XML, and or course I understand HTML and CSS… but I didn’t know how they all fit together. I did a quick little tutorial on their site, and now everything clicks into place. Sure, I’m no expert yet, but I think I have a solid enough understanding to do what they want. I know there’s other good tutorials out there for web technologies (feel free to post some of your favorites in the comments) - but for having only a few minutes this morning, they gave a really good explanation that put everything into place for me.

If you’re designing a page for a mobile web browser, and you want to make the phone number “clickable” so that a mobile web browser can click and dial the number, just add the code below:
<a href="wtai://wp/mc;8015551212">801-555-1212</a>

update: Sadly I really should check out THIS site on a mobile browser, so I have no idea if it’s useful or not - but just in case you’re coming here FROM a mobile browser and want to test it out - here is a sample link: 801-555-1212

update#2: Thanks to a comment from Jane, I’ve now learned that Apple’s iPhone needs that formatted differently:
<a href="tel:1-801-555-1212">1-801-555-1212</a>
I’ve tested it on my phone (which isn’t an iPhone) and it still works. I have an LG-VX8100. If you test it, please leave a comment indicating what kind of phone/browser you’re using and if it worked or not…

Please test the following link:
1-800-555-1212

I’ve been hunting around the last few days, looking for a good tutorial on how to make those glossy/glass-like buttons in photoshop. There are A LOT of tutorials out there. Some of them are just hard to follow. Others only seem to work best with one particular shape. But I did find this one that worked for me no matter what shape I’m using. As well, it’s incredibly simple and easy to follow. The one thing I added which I think helps the effect came from another tutorial I had seen - which was to add a drop shadow - about 75% opacity, 0 distance, and size: 7px.

(The tutorial is somewhat old (in internet years) - dated 2001 in the footer… Makes me wonder if the site is and will be still visible for too much longer…)

There was another one I found that was a little “fancier”. (Side note: I went through so many of these pages today, and now I can’t find the link to the one I’m thinking of. If someone recognizes these steps please make a note in the comments, and I’ll update the post with the appropriate credit link. I’ve even gone through every page in my history. I suspect that I’ve combined a number of tricks from a variety of different tutorials to come up with this one, but with all the sites I saw, I can’t be 100% sure.) I liked this trick - but it didn’t work as well with every shape I tried with it. So click the “read more” to see how to create buttons that look like this:

(Updated 6/2/07 A lot of this is similar to these two tutorials on Bartelme - which I actually DON’T remember seeing before writing this - but I was looking at his badges trying to figure out how he did them, when I wrote this. I hadn’t seen that he had a tutorial on them.)
(more…)

Hit an interesting CSS thing today. A simple “float: left.” A simple clear: both.” Firefox understands it. Even IE 6 understands it. But what the heck is IE 7 doing??? See below.

Here is my example page.

Here is how Firefox and IE 6 render that page:

Here is how IE 7 renders it:

What’s with the blue box moving around?? I was trying to avoid adding a lot of extra markup, so I made an additional class to clear the third div - thinking the next one would “top align” the following div to that one - like firefox and IE 6 do. But in IE 7, that last div is still floating left to the first few DIVs as if I never cleared that third DIV. The only way to *really* clear it is to add the extra markup of <br clear=”all” />

See this example with the extra markup (you’ll only notice the difference between this page and the previous one if you’re running IE 7)

Anyone have any thoughts as to WHY? or how the extra markup can be avoided? I mean I know a simple <br /> tag isn’t the end of the world - but I know adding those just for “layout” issues is “bad”™

(One request I’ll make: when responding - if you’re going to suggest a solution, please make sure that you’ve actually downloaded the sample and tested it there before making your suggestion. In the past I’ve had people suggesting things before they even tried it themselves to see if it’d work. Heh.)

This is a great article/tutorial on how margins work in css (why/when then collapse, and why/when they don’t).

If you’re looking for inspiration, here is a nice long list of web design galleries.

Just found this really incredible list of color utilities via Digg.com:

colorschemes.org: Color Schemes, Color Palettes, Color Theory

WOW! I have a lot playing to do!!

Learn something new everday! I just added the following to the css for this site:
a {
outline: none;
}

Which will remove that little dotted line you get when you click on a linked image. I just learned that from Deziner Folio.

I got to that site because I recently installed the Sphere plugin for Wordpress - (which I found out from reading Matt’s blog) and Deziner Folio was one of the links that popped up from one of my css-related posts.

Incidentally, poking around there I also found a bunch of pre-made for-photoshop gradients and cool “badges” (starbursts, etc.) he was offering up free for the taking. As well as a really neat way to center a single div in the middle of the page using CSS.