Programming

CSS really made adding shadow easy and fun! .my_shadow { -moz-box-shadow: 0 0 5px 5px #888; -webkit-box-shadow: 0 0 5px 5px #888; box-shadow: 0 0 5px 5px #888; } hello All you are adding is the following style code. Then assign the my_shadow class to your box. .my_shadow { -moz-box-shadow: 0 0 5px 5px #888; -webkit-box-shadow: 0 0 5px 5px#888; box-shadow: 0 0 5px 5px #888; } I remember back in the days it was painful to use images surrounding the box… haha, we have come a long way… ;) ...

If you have ever played with jeditable, eventually you will get to this issue, which is dealing with the textarea. The Textile renderer on the official jeditable demo page works perfectly fine, but when I tried it I experienced quite some difficulty. Basically the text I enter would NOT be what I see after pressing the ok button, due to the html rendering of the newline character. I found a lot of people sharing their pain all over the internet: ...

After much research, at least at this point there is no way to include html tags in the mailto body. If a particular email client plays nice then you are in luck, otherwise there is no standard, or cross email client way to include html tags in the mailto body. During my research (just googling around…), I found this nice tool that can help construct the mailto link. You simply need to fill in the to, cc, subject, and body, then the mailto link will be generated for you. Check it out at http://jscode.com/generators/mailto_generator.shtml ...

Sometimes people prefer to use their own email client application to add their own styling. That’s when we will need to pass the relevant email content to the email client. It’s simple enough so I won’t explain much. Here I am passing the email info from php to javascript. $email_to = "johnsmith@somewhere.com"; $email_subject = "some email subject"; $email_body = "some long text, will need to escape this."; //$email_body = urlencode($email_body); // not this one, empty spaces will turn into +'s $email_body = rawurlencode($email_body); // this will encode correctly $email_url = "mailto:$email_to?Subject=$email_subject&Body=$email_body"; $('#email_btn').click(function(){ // bind to the email btn window.location = "$email_url"; }); That’s it! Now upon pressing on the email button, the user’s default email client should pop up a new email window with the fields pre-filled. ...

There are times to open links in the current window, sometimes in a new window, sometimes in background. Here is how to do it. function open2(url, opt){ if (opt == 0) // current window window.location = url; else if (opt == 1) // new window window.open(url); else if (opt == 2) // background window {window.open(url); self.focus();} } The syntax is a bit confusing, I guess these should be standardized in the future. ...

The default sample code for in jeditable has an OK button. That ends up requiring one more click to pick a value from a dropdown. $('.editable').editable('http://www.example.com/save.php', { data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}", type : 'select', submit : 'OK' }); To take away that OK button, just take out that “submit” attribute. Magically, after picking a value from the dropdown the value gets updated. Kudos to the contributor who enabled this feature. ;) ...

Below is what you need for a “select all” checkbox to toggle the rest of the checkboxes. Below assumes your checkboxes all have the name “my_chkboxes[]”. $('#my_select_all').click(function(){ $("input[name='my_chkboxes[]']").each(function (index, el) { if ($('#my_select_all').is(':checked')) { $(el).attr('checked', 'checked'); }else{ $(el).attr('checked', false); } }); });

Say you have a list of drop down select options and you want to pick the last option by default when the page loads, with jquery this is how to do it. $(document).ready(function() { $('#my_select option:last-child').attr('selected', 'selected'); }); Below is how you get the the value of the first, last, and the nth options. var option_first = $('#my_select option:first-child').val(); var option_last = $('#my_select option:last-child').val(); var option_nth = $('#my_select option:nth-child(0)').val();

I want to recommend this awesome plugin to you called Jeditable. Imagine you have a text field you want to let your users make changes to and then save it. Won’t you need a text field and a save button? How nice if the user can click on some text and edit it from there. Um… it’s hard to describe what that looks like, you will have to try out the demo yourself! ...

I don’t think the current jquery syntax to enable/disable form elements is intuitive. But here it is: $("#my_element").attr("disabled", "disabled"); // to disable $("#my_element").removeAttr("disabled"); // to enable