JQuery: Toggle display of a div

Javascript:

// show 'more-attributes' for ad if user clicks 'Show attributes' link
$('.show-hide-attributes').live('click', function () {
var $this = $(this);
$(this).closest('.meta-attrbt').find('.more-attributes').slideToggle(0,
function () {
$this.text($(this).is(':visible') ? "Hide attributes" :
"Show attributes");
});

return false;
});


HTML

<dd class="p-ads-dd meta-attrbt">
<a class="show-hide-attributes" href="#">Show attributes</a>
<div style="display: none;" class="more-attributes">
<p>Attribute 1: This is a detail</p>
<p>Attribute 2: This is another detail</p>
<p>Areas of expertise: Expertise 1</p>
<p>Areas of expertise: Expertise 2</p>
</div>

</dd>


JSFiddle:

http://jsfiddle.net/25QC7/



Attach function to click event of .show-hide-attributes

We are using classes ('more-attributes', 'show-hide-attributes)
because there are multiple instances of these on the page.

We are using .find() to attach the slideToggle() because there are
multiple rows containing these attributes. Each set of attributes is
specific to a single record.

Added function to slideToggle() so that label changes from 'Show
attributes' if attribute div is hidden, to 'Hide attributes' if the
div is displayed.

Java: Anti-pattern - make your method names as terse as possible.

Just came across a mock class used in unit tests that has:


cr()

b()

Of course there was no doco on the method names.

Took me a while to realise this was:

create()

build()


So why the fuck did they have to make them that short? Probably
because they were using vi.

IntelliJ: recommended vmoptions settings to improve performance

Currently using these settings

-Xms512m
-Xmx2048m
-XX:MaxPermSize=512m
-XX:ReservedCodeCacheSize=256m
-XX:+UseCodeCacheFlushing
-XX:+UseConcMarkSweepGC
-ea
-Dsun.io.useCanonCaches=false
-Djava.net.preferIPv4Stack=true

If that doesn't work, I'll try and update bin/idea64.vmoptions to:

-server
-Xms1024m
-Xmx1024m
-XX:NewSize=128m
-XX:MaxNewSize=128m
-XX:PermSize=256m
-XX:MaxPermSize=256m
-XX:+UseParNewGC
-XX:ParallelGCThreads=4
-XX:MaxTenuringThreshold=1
-XX:SurvivorRatio=8
-XX:+UseCodeCacheFlushing
-XX:+UseConcMarkSweepGC
-XX:+AggressiveOpts
-XX:+CMSClassUnloadingEnabled
-XX:+CMSIncrementalMode
-XX:+CMSIncrementalPacing
-XX:+CMSParallelRemarkEnabled
-XX:CMSInitiatingOccupancyFraction=65
-XX:+CMSScavengeBeforeRemark
-XX:+UseCMSInitiatingOccupancyOnly
-XX:ReservedCodeCacheSize=64m
-XX:-TraceClassUnloading
-ea
-Dsun.io.useCanonCaches=false



REF: http://p7h.blogspot.com.au/2012/12/intellij-idea-tuning-parameters.html

UNIX: Copy a file to multiple subdirectories

I have a directory tree and in each of the lowest level directories, I
have a file called "attributes"

I've updated the contents of one of them, and want to copy it to the
other directories.

1. Find the files
find . -name attributes > target_directories.log

2. Edit "target_directories.log" and remove the "attributes" so it is
a list of subdirectories.

./building_trades/carpentry/attributes
./building_trades/concreting_paving/attributes
./party_catering/attributes

becomes

./building_trades/carpentry/
./building_trades/concreting_paving/
./party_catering/

Do this in vi using:

:%s/search_string/replacement_string/g

:%s/\/attributes/\//g

We have to use the / in our search and replace, as doing

:%s/attributes//g

didn't seem to work

The "\" has to be there to escape the "/" character

3. Copy our updated file to other subdirectories:

cat target_directories.log |xargs -n 1 cp attributes

Unix: replacing a block of text in multiple files

I was trying to do this in IntelliJ using Structural Search but this
function doesn't seem to work on non-recogised files (ie, java/ xml/
etc).. I just wanted to replace the contents of a plain text file with
a larger block of text.

Ended up doing this manually but if I wanted to fiddle, perhaps this
approach using sed would have been the right way to go:

http://stackoverflow.com/questions/6524896/unix-easiest-way-of-recursively-replacing-a-block-of-multi-line-text

JQuery: disable options on a 2nd select box, when a specific selection is chosen in 1st select box

Backing up this JSFiddle I was playing around with at:

http://jsfiddle.net/hatft/3/


Scenario:

* User has selectboxes to enter "Opening hours", starting time and
closing times using two select boxes.

* When user selects "Closed" in first selectbox, the 2nd select box
must not allow the user to choose any times, and must have "-" as the
value.

* When user changes from "Closed" to some other value, the 2nd select
box must work as normal, allowing user to choose anything

Strictly speaking, we would probably want to do more validation so that:

- closing time is mandatory when start time is selected
- closing time is not earlier than starting time


HTML:

<h3 class="margin-bottom10">Your opening hours</h3>

<table>
<tbody>
<tr class="opening-hours-mon-fri display_none">
<td>Monday</td>
<td>
<select id="postad-monFrom" name="openhrs_mon_from">
<option>Please select</option>
<option value="closed">Closed</option>
<option value="0:00am">0:00am</option>
<option value="0:30am">0:30am</option>
<option value="1:00am">1:00am</option>
</select>
<!--<label for="postad-monTo">to</label>-->to
<select id="postad-monTo"
name="attributeMap[appliance_phone_repair.openhrs_mon_to_s]">
<option></option>
<option value="-">-</option>
<option value="0:00am">0:00am</option>
<option value="0:30am">0:30am</option>
<option value="1:00am">1:00am</option>
</select>
</td>
</tr>
<tr class="opening-hours-mon-fri">
<td>
<label for="postad-tuesFrom">Tuesday</label>
</td>
<td>
<select id="postad-tuesFrom"
name="attributeMap[appliance_phone_repair.openhrs_tues_from_s]">
<option>Select time</option>
<option value="closed">Closed</option>
<option value="0:00am">0:00am</option>
<option value="0:30am">0:30am</option>
<option value="1:00am">1:00am</option>
</select>

<label for="postad-tuesTo">to</label>

<select id="postad-tuesTo"
name="attributeMap[appliance_phone_repair.openhrs_tues_to_s]">
<option></option>
<option value="-">-</option>
<option value="0:00am">0:00am</option>
<option value="0:30am">0:30am</option>
<option value="1:00am">1:00am</option>
</select>
</td>
</tr>
</tbody>
</table>



JAVASCRIPT (uses jQuery 1.6.4)


// TEST SELECTORS BY CHANGING BKGROUND COLOR
//$('[class^="opening-hours-"]').css("background-color", "red");
$('[class^="opening-hours-"]').find('select[id$="From"]').css("background-color",
"yellow");

/*

TIL:

1. You need to use .nextAll() instead of .next()

next() ONLY WORKS IF THE SELECT BOX IS THE NEXT ELEMENT.

IF THERE IS ANYTHING IN BETWEEN, LIKE A <label>, then this won't work.

the earlier version of this only works because "to" was not inside a label

2. When "Closed" is chosen, set the "to" selectbox to "-" and don't
allow any other choices

- set disabled attribute on the options that were not selected
- when value of "From" selectbox is NOT "Closed", then remove disabled
attribute on the "To" options


*/


$('[class^="opening-hours-"]').find('select[id$="From"]').change(function () {
if ($(this).val() == 'closed') {
/*
DOES NOT WORK BECAUSE .next() only gets the
immediately following element.
*/
var $toSelect = $(this).nextAll('select[id$="To"]');
$toSelect.css("background-color", "red");
$toSelect.val('-');
$toSelect.find(':not(:selected)').attr('disabled','disabled');
} else {
$(this).nextAll('select[id$="To"]').find(':not(:selected)').removeAttr('disabled');
$(this).nextAll('select[id$="To"]').css("background-color", "white");


}
});

OSX: Opening a terminal from finder

I've used the shortcut in Windows XP to open a cmd window from
explorer. However, I haven't used it in OSX before. Finally got around
to getting it working. Apparently it's now built in to Lion, but my
imac is still on Snow Leopard.

Google brought me here:

http://stackoverflow.com/a/3487098/204255

and then this:

http://jameslow.com/2010/04/22/openterminalhere-and-anthere/

I downloaded the zip file, opened it, then dragged the file to the top
portion of finder, along with the other icons.

HTML5 custom data attributes are case sensitive, and potentially confusing. Just stick to lower-case.

I have a form where the user can enter the hours that a business is
open, and with a pair of select boxes for each day of the week (ie,
"From" and "To" select box with times of the day)

Now I wanted to set this up so that the first time the user sees the
form, it already has default values of 9-5pm for Monday to Friday, and
10-4pm on Saturday and Sunday.

The model class we have has a variable called editMode() that
indicates whether the form is displaying an existing record or a new
record. I planned to use this to toggle the javascript code so it only
sets the values for "opening hours" if the record is not coming from
the database.

I was trying to access some data attributes I had set up as:

<div id="editModeStatus" data-isEditMode="${model.editMode}" ></div>

with jQuery code:

if (!$('#editModeStatus').data('isEditMode')) {
alert('editMode?' + $('#editModeStatus').data('iseditmode'));

And in the alert message, I would get:

editMode? undefined

and changing that code to:

alert('editMode?' + $('#editModeStatus').data('iseditmode'));

gave me

editMode? false

--when it should have been true, because that's the value that was
displaying in the HTML:

<div id="editModeStatus" data-iseditmode="false" ></div>

Googling on "data attribute case sensitive" brought me a couple of
posts discussing the case-sensitivity of html5 data attributes, and
how DATA ATTRIBUTES CAN ONLY BE LOWER-CASE UNLESS THERE IS A HYPHEN
PRECEDING THE UPPER-CASE CHARACTER

Not something I'm likely to remember immediately, so to simplify
things, I'd rather just use lower case in both the HTML and
Javascript.


REF:

http://blog.benpowell.co.uk/2012/03/warning-html5-data-attribute-is-case.html