Wednesday, November 12, 2008

Stupid jquery tricks

•You have a form that needs an intermediate confirmation page.

This is easiest done by making the form a self-submit form. Use jquery styles to hide the plaintext version of what is input, so it only shows during confirmation, Make a class called confirmation and hide it during the first run. On the second run, show the plaintext and hide the input boxes (or change them to type hidden).

<script language="JavaScript" type="text/javascript" src="./jquery.js">

<script language="javascript">

$(document).ready(function() {

$('.confirmation').hide();

$('.inputfields').show();

});


</script>
•Modify a style for an html element without access to the header section of the document.

<script language="JavaScript" type="text/javascript" src="./jquery.js">

<script language="javascript">

$(document).ready(function() {

$('label').css("font-weight","bold");

});

</script>

•Make an item by id show or hide by clicking on anchors.

By applying a unique id to anchors with class 'edit', we can distinguish which items they are supposed to show and hide by appending to that id and making a new unique id based off of the original.


<script language="JavaScript" type="text/javascript" src="./jquery.js">

<script language="javascript">

$(document).ready(function() {

$('a.edit').click(function() {

$('#' + this.id + '_hide').toggle(400);

});

});


</script>

No comments: