Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Problem (probably css) with jQTransform (jQuery)

  1. #1
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Problem (probably css) with jQTransform (jQuery)

    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:


    Here's what it's supposed to look like (notice how the font is lighter like a grey tone):


    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:


    Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Yes the website is: http://thesoloconcerto.com
    The contact form is on the About -> Contact page. Thanks.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    .jqTransformInputWrapper input {width: 200px !important;}
    That also may take care of it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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">&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:
    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.
    Last edited by windbrand; 12-27-2011 at 09:26 PM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    Try putting this in the stylesheet:

    Code:
    #contact-form input {width: 200px !important;}
    Last edited by jscheuer1; 12-27-2011 at 09:37 PM. Reason: better selector
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    windbrand (12-27-2011)

  8. #7
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  11. #10
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •