Posted by: twmeier
on Jul 31, 2009
There are times when you want to use an image as a button to submit a form. One case is when you need to use JavaScript to check the html form was submitted correctly. Here is the code:
<script>
function checkForm()
{
var msg = "Please correct the following: \n\n";
var error = false;
if(document.formName.elementName.value=="") {
msg += "You must enter a date.\n";
error = true;
}
if(error){
alert(msg);
}else{
if(confirm("Are you sure you want to submit this form?")){
document.formName.submit();
}
}
}
</script>
<form name="formName" action="/index.php?&task=something" method="post">
<input type="text" name="elementName" id="elementId" value="">
....
</form>
<a href="#" onclick="checkForm(); return false;"><img src="/images/brown_submit.jpg" /></a>
The method above works in all browsers, and is easy to use. When you click the image, the JavaScript function is called. If there are no errors in the form, the function submits the form. Its that easy.
Posted by: twmeier
on Jun 30, 2009
There is a great php function takes a variable and changes the new lines (\n) into breaks (<br/>).
For example, a user submits a form on your website and used a textarea to submit a couple of paragraphs. You then retrieve this data from the database and echo it out in html. You will notice that it is now just one big paragraph.
To fix this problem, you the function: nl2br
Here is how you might use this:
<?php
$paragraphs = nl2br($paragraphs);
echo $paragraphs;
?>
Posted by: jstartup
on Jun 11, 2009
For basic content edits a WYSIWYG editor is a great tool to have. The HTML it generates, however, is not so great. Sometimes there's a chunk of text that it just doesn't seem to want to make changes to, and the reason is usually that style tags were left behind from previous changes. The good news, though, is it's not difficult to clean up HTML. Doing so will restore content to its default state, and will make it respond to the editing tools the way it should.
Posted by: twmeier
on Apr 10, 2009
I came across a problem this week, with a form that submitted when a user hit the "enter" or "return" button even though the submit button had an onclick function that should have kept the form from submitting. The problem only manifested itself on Google's Chrome browser.
I found the following JavaScript code to keep this from happening:
// Disables enter button from submitting the form
var nav = window.Event ? true : false;
if (nav) {
window.captureEvents(Event.KEYDOWN);
window.onkeydown = NetscapeEventHandler_KeyDown;
} else {
document.onkeydown = MicrosoftEventHandler_KeyDown;
}
function NetscapeEventHandler_KeyDown(e) {
if (e.which == 13 && e.target.type != 'textarea' && e.target.type != 'submit') { return false; }
return true;
}
function MicrosoftEventHandler_KeyDown() {
if (event.keyCode == 13 && event.srcElement.type != 'textarea' && event.srcElement.type != 'submit')
return false;
return true;
}
This worked great and fixed my problem (and hopefully your too).
Posted by: jstartup
on Mar 23, 2009
By default the JCE Editor will insert an uploaded image into a content area separated from the text before and after it. This is passable on a particularly wide image, but most common is to wrap the text around any images in the content. In order to set this up well there are some parameters to get to know.
Posted by: twmeier
on Mar 18, 2009
There are times when you may want to open a page in a new browser window. You may also want to be able to determine the size of the new window, whether or not to have scroll bars, tool bars, status bars etc.. There is a ready-made JavaScript function that you can use to do this:
window.open('url', 'window name', 'attribute1', 'attribute2', .....)
- 'url'
This is the url of the page you would like to appear in the new window. - 'window name'
You can name your window whatever you like, which can be used if you need to make a reference to the window later. - 'attributes'
Attributes determine how the new window will look, and are listed below.
Attributes
Posted by: gbluma
on Jan 15, 2009
So you want to revamp your current site right? Or maybe you want a new site but can't put your finger exactly on what you need.
Here are a few things to consider which might help you decide on the details. I'll also run through a test scenario of a small photography company as an example.
Posted by: jstartup
on Jan 8, 2009
Fonts can be grouped in four main categories: basic, scripted, stylized and shapes. The basic category is used most often for large amounts of text, and particularly for websites since browser cross-compatibility is a high priority in web design. This group contain familiar fonts such as Arial, Times New Roman and Courier New, the most web-friendly choices. Also commonly used are Georgia, Verdana and Helvetica, and any of them will display a large amount of text nicely and offer a design a classic, sophisticated look.
Posted by: jstartup
on Jan 2, 2009
Grid-based layout is a simple method for structuring an effective web page. Balance is easy to maintain, and there is a common element running from page to page without having to stucture each the same way. So, for instance, a website with the content area set to 960x680 could be set up as one of the layouts shown below.
