bavotasan.com » text

Add a Copyright Notice to Copied Text

c.bavota — Mon, 01 Nov 2010 19:17:47 +0000

I was checking out the CBC website and I noticed that if you copy and paste any text from the site a reference link appears at the bottom, indicating the source. I thought that was kind of neat and tried to figure out how to do it. Turns out, they use a service called Tynt. That’s cool and all, but I wanted to see if I could make it happen using JavaScript. All I needed my function to do was grab the copied selection, tack on a copyright notice and then add the two to the clipboard.

It took a lot of messing around and I was finally able to put something together that worked in most browsers. Sorry IE people, this one won’t work for you, though if anyone figures out a fix for IE let me know. Then the function will work for all major browsers.

Here is the JavaScript:

<script type="text/javascript">
function addLink() {
	var body_element = document.getElementsByTagName('body')[0];
	var selection;
	selection = window.getSelection();
	var pagelink = "

 Read more at: "+document.location.href+"
Copyright © c.bavota"; // change this if you want
	var copytext = selection + pagelink;
	var newdiv = document.createElement('div');
	newdiv.style.position='absolute';
	newdiv.style.left='-99999px';
	body_element.appendChild(newdiv);
	newdiv.innerHTML = copytext;
	selection.selectAllChildren(newdiv);
	window.setTimeout(function() {
		body_element.removeChild(newdiv);
	},0);
}
document.oncopy = addLink;
script>

Just add this between your page’s head tags, and change the copyright notice to whatever you want.

Demo

To test it out, copy something from the paragraph below and paste it into your favorite text editor.

Aenean vel massa tellus. Aliquam imperdiet ante a justo luctus et bibendum erat porta. Morbi varius, erat et cursus ornare, elit augue bibendum leo, sed imperdiet nulla risus ut ipsum. Maecenas laoreet neque vitae magna porta sed euismod urna ornare. Nulla facilisi. Maecenas congue ligula eu arcu rhoncus volutpat. Etiam pretium pulvinar sapien, et ultrices augue euismod sagittis. Pellentesque sodales, velit tempor pharetra ultricies, lacus odio mattis ligula, vel sollicitudin erat nisl sed nisi. Pellentesque vestibulum suscipit libero, sit amet scelerisque purus aliquam vulputate. Etiam semper mauris ac felis convallis volutpat dictum ante placerat. Proin tempus elementum nisl ac eleifend. In hac habitasse platea dictumst. Duis et neque at mi lacinia luctus non ut neque. Praesent mollis metus at quam ornare bibendum. Cras augue tortor, tempor vitae adipiscing at, pulvinar vel massa. Curabitur et orci massa, sit amet malesuada diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae orci id lectus convallis tempus vel quis mauris.

Use jQuery to Replace a Word with a Link

c.bavota — Mon, 09 Aug 2010 20:54:46 +0000

If you use a word multiple times on your site and you don’t feel like going through all your posts to replace every instance of it, you can use jQuery to search your page and do the replacing for you. I wanted to replace a word throughout an entire site with a link and all it took was a small piece of code.

If you don’t already have jQuery loaded into your page, include this before your closing .

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'>script>

That will load up jQuery from Google.

Now you just need to include this in your site’s footer, before the closing . (Why in the footer? Because including your JavaScript after all of your code is the efficient way to do it.)

<script type="text/javascript">
(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/jQuery/ig, 'jQuery')); 
})(jQuery)
script>

Since jQuery doesn’t have a core function for replacing text, we will use the JavaScript replace() function. The i after the slash makes the search and replace case-insensitive, and the g makes it global.

I have the script working on this page to replace every instance of the word jQuery with a link to the jQuery Web site.

A Simple CSS Trick to Vertically Align Text

c.bavota — Thu, 05 Aug 2010 17:33:08 +0000

I was trying to vertically align text within a div container and it just wasn’t working for me. You would think that using vertical-align in your CSS would accomplish just that, but you would be wrong. I found a way to do it using three div containers and absolute positioning but I felt that was a little overkill for my purposes.

This was the box I was designing:

Some Text

After doing a lot of digging around, I discovered that you could set the line-height of your text to be the same as the height of your div container and this is what you would get:

Some Text

That did it.

Here is the CSS I used:

div.container {
  width: 100px;
  height: 100px;
  background: #666;
  color: #fff;
  text-align: center;
  line-height: 100px; /* where the magic happens */
}

The only way this technique wouldn’t work for you was if you had text on two lines, then the second line would be 100 pixels below the first. Hmm… maybe I could figure out a solution to that one as well.

10 Great Free Mac Apps for Web Developers

c.bavota — Fri, 13 Nov 2009 21:06:15 +0000

I have been a Mac man for almost ten years now, and though many Web developers swear to working on a PC, I find my Mac has everything I need to develop, design and program Web sites. Luckily there are tons of great free apps available to help any developer work more efficiently on their Mac.

Here is a list of 10 great free Mac apps for Web developers that I use:

TextWrangler

TextWrangler is the powerful general purpose text editor with some great features. Whether you are working with HTML, CSS, PHP or any other Web programming language, TextWrangler has everything you need to easily edit your code.
http://www.barebones.com/products/textwrangler/index.html

MAMP

MAMP installs Apache, Mysql and PHP on your Mac to create a fully functioning Web environment which will allow you to test all aspects of your Web site locally. It’s smart to have an environment to test and work with offline before making your changed on your live site.
http://www.mamp.info/en/mamp/index.html

Paparazzi!

Paparazzi! is a small utility for Mac OS X that takes screen shots of Web pages. This is helpful for creating your portfolio or sending screen shots to clients.
http://derailer.org/paparazzi/

YemuZip

YemuZip is an easy-to-use application for making zip files. Just drag, drop, name your zip file and you’re done. The native Mac file compressor utility adds Mac-specific info to zip files that, when extracted on a PC, looks like garbage.
http://www.yellowmug.com/yemuzip/

VirtualBox

VirtualBox is a general-purpose full virtualizer for x86 hardware that allows Mac user to load Windows software on their desktop. Creating an IE testing environment on your Mac is pretty simple using VirtualBox.
http://www.virtualbox.org/

Skype

Everyone probably already uses this, and if you don’t, you should. Skype is great to communicate with clients from around the globe. Skype to Skype is free for instant messaging and calls.
http://www.skype.com/

GIMP

GIMP is an open source versatile graphics manipulation package similar to Adobe’s Photoshop, but it won’t put you in the poor house. It may not be as robust but GIMP has some amazing features and who can beat the price.
http://www.gimp.org/

Cyberduck

Cyberduck is an open source FTP, SFTP, WebDAV, Cloud Files and Amazon S3 browser for the Mac. It features an easy to use interface with quickly accessible bookmarks.
http://cyberduck.ch/

SvnX

SvnX is an open source GUI for most features of the svn client binary. It allows you to browse your working copies, spot changes and operate on them but also to browse logs and revisions of your repositories.
http://www.lachoseinteractive.net/en/community/subversion/svnx/features/

Sequel Pro

Sequel Pro is a fast, easy-to-use Mac database management application for working with MySQL databases.
http://www.sequelpro.com/

Remove the WordPress Generator

c.bavota — Mon, 10 Aug 2009 15:45:41 +0000

WordPress automatically places a line of text between your tags which states the version you currently have installed. I have read that it is there for statistical reasons which is all fine and dandy, but sometimes showing off which version of WP you are using lets hackers know exactly what vulnerabilities your site has.

For security reasons, I suggest removing the generator, and doing so only takes one line of code.

The WordPress generator line looks like this:

To get rid of it, open up your functions.php file. It is located in your theme’s folder. If there is no functions.php file, create one and just add the following code.

remove_action('wp_head', 'wp_generator');

Be sure to place it between tags.

How to Wrap Text within the

 Tag Using CSS

c.bavota — Thu, 23 Apr 2009 15:09:52 +0000

I just came across an issue where I needed to make sure that the text within a

 tag wrapped. The default for this tag it to just let the text run on, no matter if the site’s page has ended. Not very good, if you ask me.



All you need to do is add this one pieces of code to your stylesheet and your text will wrap nicely.

pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

A New Comment Editor

c.bavota — Wed, 22 Apr 2009 21:46:01 +0000

I have had some requests to figure out a way that visitors of bavotasan.com could leave code and simple styling in their comments. I searched and searched and tried many different things but none seemed to work that great. I knew I needed a WYSIWYG editor of some sort but the few I came across didn’t really do what I wanted. I was going to try to create one myself but I have been a bit too busy lately to take that on.

Luckily I stumbled upon the WMD editor and the WordPress plugin created by Chad Coleman. Though, WMD claims not to be a WYSIWYG editor but a WYSIWYM editor, it pretty much does the same thing.

According to the website, WYSIWYM means What You See Is What You Mean.

“WMD produces clean semantic HTML, leaving presentation details like fonts and colors up to style sheets. But you’re not left in the dark about cosmetics; as you type, WMD’s live preview shows you exactly what your text will look like after the current styles have been applied.”

So far, I like the way it works, and the live preview it great.

NOTE: I no longer use this comment editor plugin.

Removing Extraneous Backslashes with PHP

c.bavota — Wed, 11 Mar 2009 19:58:47 +0000

This is something that most people who use PHP already know. I still think it is useful to mention it because some less experienced PHP coders might not have come across this function just yet and they will be grateful.

If you are displaying a string using PHP, sometimes you see something that looks like this, “I was over a my sister\’s place to celebrate my father\’s birthday…”. That is because PHP actually uses quotes for certain functions so when it encounters a quote in a string, is places the backslash “\” before it to signify that is should not be read as code, but as text. This usually happens with textarea boxed and can be easily avoided. extraneous

 stripslashes($string); ?>

Now your string will display like this, “I was over a my sister’s place to celebrate my father’s birthday…”.

Getting Text in your WordPress Search Box

c.bavota — Wed, 10 Dec 2008 03:31:26 +0000

Have you ever wondered how some sites have text in their search box? This one is pretty easy. All you need to do is modify the searchform.php file, which can be found in your theme’s directory. Let’s use the default theme as an example to make it easier for everyone to see what to do.

 bloginfo('url'); ?>/">
 _e('Search for:'); ?>

 the_search_query(); ?>" name="s" id="s" />

Now let’s change…

4	the_search_query(); ?>" name="s" id="s" />

to…

<input type="text" value="Search & Hit Enter" name="s" id="s" onfocus="if (this.value == 'Search & Hit Enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search & Hit Enter';}" />

What does all this do? Oh… So very much.

First, it will automatically fill your search box with “Search and Hit Enter”. If you click on the search box, it will disappear and you can enter text. But if you don’t enter text and click out of the box, “Search and Hit Enter” will appear again.

How to Create an Aqua Button in Adobe Illustrator

c.bavota — Sat, 22 Nov 2008 21:55:38 +0000

I recently needed to create some buttons for a client’s website and I thought it would be a fun little tutorial to put together to show you how quick and easy it is to create one of those nifty looking aqua buttons you see everywhere. It is only really a five step process and you can use any shape you choose.

Here are some samples I created.

Placing text or an image on top of the buttons is pretty simple and these buttons can really add some nice visuals to any professional web design.

Move
Close