No I didn't modify any of the CSS. In fact I linked all the demo package css/js files to my webpage, and it still displays incorrectly. The only differences I made in comparison to the demo package were:
- Copy/pasted the code of the contact form into a div
- Changed some of the variable text (such as error messages, thank you messages, my email address, etc) in javascript files
- Have additional sources linked at top of the file (since I use some jQuery fade/animations and jPlayer), also the jQuery easing script
- I use the latest 1.6.4 jQuery library whereas demo uses 1.3.2
This is the <head> section of my file:
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="music, classical, pop, original, composition, arrangement"/>
<title>The Solo Concerto - My Music Journal</title>
<link href="css/thesoloconcerto.css" rel="stylesheet" type="text/css">
<link href="css/fontfaces.css" rel="stylesheet" type="text/css">
<!--jQuery contact form-->
<link rel="stylesheet" type="text/css" href="jQueryfancycontactform/jqtransformplugin/jqtransform.css" />
<link rel="stylesheet" type="text/css" href="jQueryfancycontactform/formValidator/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="jQueryfancycontactform/demo.css" />
<?=$css?>
<!--jQuery library-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jQueryfancycontactform/jqtransformplugin/jquery.jqtransform.js"></script>
<script type="text/javascript" src="jQueryfancycontactform/formValidator/jquery.validationEngine.js"></script>
<script type="text/javascript" src="jQueryfancycontactform/script.js"></script>
<!--jQuery audio/video player-->
<link href="jplayer/prettify-jPlayer.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="jplayer/skin/bluemonday/jplayer.blue.monday.css" rel="stylesheet" /> <!--bluemonday skin-->
<script type="text/javascript" src="jplayer/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="jplayer/js/jplayer.playlist.min.js"></script>
[some javascripts]
</head>
This is the <head> section of the demo package file:
Code:
<!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>Fancy Contact Form | Tutorialzine demo</title>
<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css" />
<link rel="stylesheet" type="text/css" href="formValidator/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<?=$css?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>
<script type="text/javascript" src="formValidator/jquery.validationEngine.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
This is what the code looks like when I put it inside a div:
Code:
<div id="contactpage">
<div id="main-container">
<div id="form-container">
<h1>Contact Form</h1>
<h2>Please feel free to contact me about any questions or suggestions, I will get back to you ASAP</h2>
<form id="contact-form" name="contact-form" method="post" action="jQueryfancycontactform/submit.php">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="15%"><label for="name">Name</label></td>
<td width="70%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
<td> </td>
</tr>
<tr>
<td><label for="subject">Subject</label></td>
<td><select name="subject" id="subject">
<option value="" selected="selected"> - Please choose one -</option>
<option value="Question">Question</option>
<option value="Suggestion">Suggestion/Complaint</option>
<option value="Other">Other</option>
</select>
</td>
<td> </td>
</tr>
<tr>
<td valign="top"><label for="message">Message</label></td>
<td><textarea name="message" id="message" class="validate[required]" cols="35" rows="5"><?=$_SESSION['post']['message']?></textarea></td>
<td valign="top"> </td>
</tr>
<tr>
<td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
<td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top"> </td>
<td colspan="2"><input type="submit" name="button" id="button" class="button" value="Submit" />
<input type="reset" name="button2" id="button2" class="button" value="Reset" />
<?=$str?>
<img id="loading" src="jquerycontactform/img/ajax-load.gif" width="16" height="16" alt="loading" /></td>
</tr>
</table>
</form>
<?=$success?>
</div>
</div>
<center>
<a href="#homepage" class="contactpagehomebutton">
Go back to home page
</a>
</center>
<br>
<br>
</div>
Style of the div ID "contactpage", the IDs "main-container" and "form-container" are all untouched from demo file:
Code:
#contactpage {
display: none; /*hidden when website loads, fades in when click the appropriate link*/
margin-top:50px;
padding-left:50px;
padding-right:50px;
}
I'm thinking it might have something to do with that I put the source files in a folder called "jQueryfancycontactform", whereas the demo put all the source files in the same folder as the main php file. That's why my directory is "jQueryfancycontactform/jqtransformplugin/jqtransform.css", whereas the demo is just "jqtransformplugin/jqtransform.css". Maybe some directory error in the css or javascript files, but I'm unable to find any errors so far.
Problem (probably css) with jQTransform (jQuery)
Bookmarks