PDA

View Full Version : Problem (probably css) with jQTransform (jQuery)



windbrand
12-27-2011, 02:15 AM
Hiya is anyone familiar with jQTransform of jQuery?
I'm building a contact form (tutorial found here: http://tutorialzine.com/2009/09/fancy-contact-form/, but comment section is closed and there is no way to contact author), and jQTransform is used to stylize some form buttons and textboxes. Everything works if I just open the php from the demo package, however when I migrate the code over and include the contact form as a div on my webpage (in the demo the entire php file was the contact form, I copy/pasted the code over and enclosed it in a div), and updated all the css/js links/sources, the textbox and dropdown images are all incorrectly sized, and for some reason the font becomes darker (either bold or changes into black color). I'm almost certain jqtransform.css and jquery.jqtransform.js are causing the problem, as if I do not link them, then the form will appear correctly (but with ugly default html form style).

Here's what it looks like when the contact form is placed in a div:
http://i.imgur.com/dGte4.jpg

Here's what it's supposed to look like (notice how the font is lighter like a grey tone):
http://i.imgur.com/3Ol4C.jpg

I noticed an extra style "width:45px" added in which is causing the textboxes to not display correctly, probably by some javascript, and I'm pretty sure it's from the jquery.jqtransform.js file, but I can't trace what's doing it:
http://i.imgur.com/WXroo.png

Thanks.

jscheuer1
12-27-2011, 08:34 AM
Please post a link to the page on your site that contains the problematic code so we can check it out.

windbrand
12-27-2011, 06:00 PM
Yes the website is: http://thesoloconcerto.com
The contact form is on the About -> Contact page. Thanks.

jscheuer1
12-27-2011, 08:58 PM
I'm not sure what the problem is. I se no differences in the markup or script for that part of the process. You could try adding a size attribute to the inputs, the script should read that. But the css is not involved unless you modified the css that comes with the code. It could be used to fix this though. You could put an overriding style in the stylesheet:


.jqTransformInputWrapper input {width: 200px !important;}

That also may take care of it.

windbrand
12-27-2011, 10:01 PM
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:


<!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:



<!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:



<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">&nbsp;</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>&nbsp;</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>&nbsp;</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">&nbsp;</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">&nbsp;</td>
</tr>

<tr>
<td valign="top">&nbsp;</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:


#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.

jscheuer1
12-27-2011, 10:31 PM
Try putting this in the stylesheet:


#contact-form input {width: 200px !important;}

windbrand
12-27-2011, 10:46 PM
Thanks that fixed the width of the text boxes, but the input area is still messed up since the jQuerytransform problem still exists, I have to hover the mouse around 10px above the textbox in order for the cursor to change into the input one. I'm gonna try moving all my sources into the same directory as the main php file and not editing anything from the demo file to see if that works. If not I guess I just have to place a direct link to the demo file since that's working and forget about putting the contact form on the same page.

jscheuer1
12-27-2011, 11:13 PM
Well the main issue with the directory for .js and .css isn't so much where the those files are, but where the images, if any that those files reference are.

For a css file the image path is relative to the css file.

For a js file the image path is relative to the page that is using the js file.

If there is ever any doubt in either type of file, the absolute paths to images may be used.

However, in a case like this your strategy of setting things up with the same directory structure as the demo should take care of any image location issues as well as any other issues that there might be relating to the location of files.

windbrand
12-29-2011, 09:15 PM
I put all the files in the same directory, and now the fade in/out effect of the pages are not working, and none of the pages are displaying either (since the fade in/out effect requires display:none style)... I have no idea what the heck is going on here, all I did was move files to a different directory and updated all the ref links, and now none of my javascripts are running (including the javascripts used by the contact form)...
I guess this contact form is just terribly designed and can only work when it's by itself on a separate php page. Do you know of any php contact forms with validation that works well when installed in a div somewhere on a page?

XicoXperto
07-26-2012, 10:24 PM
I know this is dead for a big while.
But still, i got the same problem and i searched around and this topic was the only thing that I've found, so I got to get the answer from myself...

This is a great plugin and it should do all the work...

Changing the CSS with "!important" is an idea, but what to do when the data inside the select get bigger than the select? Go change the CSS?

That was why I needed to find the problem.

somewhere in the code, theres a function that will get the with of the elements, and when the form is hidden the size of the elements is 0, so if you wanna convert with jqTransform, you must be sure that the form is visible when it will transform all inputs.

If you know, or have this, I would like to see if you could confirm this, or if it is a different problem.

louko
11-23-2012, 12:58 PM
Thanks that fixed the width of the text boxes, but the input area is still messed up since the jQuerytransform problem still exists, I have to hover the mouse around 10px above the textbox in order for the cursor to change into the input one. I'm gonna try moving all my sources into the same directory as the main php file and not editing anything from the demo file to see if that works. If not I guess I just have to place a direct link to the demo file since that's working and forget about putting the contact form on the same page.

For the input, the soluce is in the jqtransform.css :
line 81 :
.jqTransformInputInner div input {
padding: 0px;


line 87 :
.jqTransformInputInner div input {
line-height: 31px;

But this script is complicated !

jscheuer1
11-23-2012, 04:05 PM
As this is an old thread and applications vary from page to page, and jQuery has been updated many times since, and the underlying script may have changed/updated and/or there may be another approach entirely at a solution, if you have a further question(s) or advice about it, please start a new thread because I'm closing this one.

If it's a question, please include a link to a demo page on your site that shows the problem as well as a link to where you got the script.

Make sure you're using the latest available version of the script and have read the documentation for all of the available options for it.

Another thing to check is whether or not this script has its own support forum or is actively being supported in the jQuery forum. If so, those might be better avenues for assistance.

If creating a new thread, you may refer (link) back to this thread if you like.