Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQTransform - Exclude an element from styling?

I'm using JQTransform to style all form elements. Is it possible to disable the styling on a specific element, leaving all the others styled by JQTransform?

like image 774
iltdev Avatar asked Sep 16 '10 14:09

iltdev


3 Answers

I've added if( $input.hasClass('ignore') == true ) { return; } to line 99 of the plugin to ignore any text fields with class=ignore. Maybe this will help you.

like image 192
mattbee Avatar answered Nov 15 '22 07:11

mattbee


Use the class jqtransformdone. It is built in-to the plugin.

like image 20
Felipe Avatar answered Nov 15 '22 07:11

Felipe


I'm confirming that mattbee's solution has worked for me in leiu of a response from the member posting the question. As instructed, I pasted the code on line 99, above the following line:

if($input.hasClass('jqtranformdone') || !$input.is('input')) {return;}

To anyone that it isn't obvious to, paste the code ABOVE line 99 rather than REPLACING line 99 as follows:

/*Custom code: Regarding class for elements exceptional to transformation.*/  
/*Custom code: http://stackoverflow.com/questions/3727517/jqtransform-exclude-an-element-from-styling*/
if( $input.hasClass('ignore') == true ) { return; } 
if($input.hasClass('jqtranformdone') || !$input.is('input')) {return;}

I didn't see an option to comment on mattbee's answer so I've submitted it in the form of an an answer.

EDIT: The above code will prompt jqTransform to skip/exclude/ignore/avoid input elements. In my case I used it to exclude type="text" and type="image". However, applying the .ignore class to my textarea element indeed excluded the undesired transformation but for some reason additionally excluded the transformation of my select elements. Please note that the edit to jquery.jqtransfrom.js for the text area was made within the textarea function starting at line 201 of the original unedited document rather than the function for the text fields starting at line 95 in the above code block.

Here's an example of what I attempted (placed ABOVE line 207):

if( $textarea.hasClass('ignore') == true ) { return; }

To reiterate, it worked but also excluded the transformation of my select boxes which wasn't my intention.

After searching for solutions I came across the following blog post: http://www.deliciouscoding.com/post.cfm?entry=use-jqtransform-and-tinymce-together

Essentially, the table that jqTransform creates to replace textarea elements is replaced by a textarea or more simply put, it undoes the transformation:

<!--Undo textarea transformation.-->
<!--Source: http://www.deliciouscoding.com/post.cfm?entry=use-jqtransform-and-tinymce-together.-->
<script language="javascript">
jQuery(function(){
jQuery("form.transform table").replaceWith('<textarea></textarea>');
});
</script>

For those new to jQuery, the above code is to be placed in with the head of your document (i.e. between <head> and </head>).

like image 42
Dominor Novus Avatar answered Nov 15 '22 07:11

Dominor Novus