Thursday, February 26, 2015

Change Image on Select Dropdown HTML+JS

GOAL:  Switch out an image on a webpage based off of a select dropdown option. [HTML + JavaScript]

CODE
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
    <option value="http://cdns2.freepik.com/free-photo/facebook-logo_318-           49940.jpg" selected>Facebook</option>
    <option value="http://cdns2.freepik.com/free-photo/twitter-logo_318- 
    40459.jpg">Twitter</option>
    <option value="http://cdns2.freepik.com/free-photo/instagram-social-network-     logo-of-photo-camera_318-64651.jpg">Instagram</option>
</select>

<img id="imageToSwap" class="profile" src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg">

DEMO
See the Pen Change Image on Select Dropdown by Josh Wentz (@joshwentz) on CodePen.



Thursday, February 12, 2015

Compress Large PDF Files for Emailing [Mac]

PROBLEM:  PDF file is too large to email.
GOAL:  Compress large PowerPoint / Keynote files so that they can be easily emailed.

STEPS

1. In Mac, Open the "Preview" app

  • This process compresses the images in the document. The compressed images look the same as the originals when viewed onscreen, but they may be of lower quality when printed.

2.  Open the large PDF document

3.  File > Export...

4.  Quartz Filter dropdown:  change from None to "Reduce File Size"

5.  Save a document as a PDF file