Git Product home page Git Product logo

outtext's Introduction

OutText

OutText is a jQuery plugin that generates links for randomly-selected (and not-so-randomly-selected) words throughout an HTML document.

Dependencies

  • jQuery 1.7.1+ (may work with even older versions)

Features

  • Can be used on the entire page, or within a select portion of the document.
  • Random link generation according to a configurable frequency.
  • Restricts link creation within certain element types.
  • Allows configurable "priority words" that will always yield OutText links.
  • Recognizes leading and trailing punctuation, ignoring them when creating links.
  • Tested with Chrome, Firefox, IE10 (including IE8 mode)

Usage

OutText can be registered in two different ways.

  • Apply OutText to the entire document:
$.OutText({
	// ...
});
  • Apply OutText to a selected portion of the document:
$("#bodyText").OutText({
	// ...
});

There are a number of configuration properties supported at registration time, but none of them are required.

Configuring the OutText Link

The HREF of the link created by OutText can be specified using the link_template property.

$.OutText({
	link_template: "https://www.google.com/#q={t}"
});

The {t} token represents where the inner text of an OutText link will be used to construct the URL. For example, if an OutText link is generated from the word javascript using the above example, the final link will resemble the following:

<a href="https://www.google.com/#q=javascript">javascript</a>

If no {t} token is present, the HREF will be created exactly as specified.

Default: #

Configuring the Frequency of Link Generation

The default behavior of OutText is to randomly-generate links from the pool of available words on the page. The frequency at which links are generated can be configured using the frequency property.

$.OutText({
	frequency: 0.3
});

The frequency property accepts any number between zero (no OutText links will be randomly generated) and one (all available words will be turned into OutText links).

Default: 0.1

Blocking Link Generation within Certain Element Types

On most web pages, there are a number of elements that may not behave or appear correctly if an OutText link were to be created within them. At registration time, these elements can be excluded from consideration when generating links.

$.OutText({
	excluded_elements: ["p", "b", "i", "u"]
});

The excluded_elements accepts an array of case-insensitive strings, each element of which is the name of an HTML node. If a matching node is encountered anywhere within the OutText registration area, no OutText links will be created within it.

This property has the highest priority of all available configuration properties. Even with a configured frequency of 100%, no OutText links will be created within these nodes.

Default: ["button", "a"]

Always Generate Links from Specific Words

If OutText is to be used in some sort of a targeted link campaign, it may be valuable to always generate an OutText link from a specific set of words. This is possible.

$.OutText({
	forced_words: ["bacon", "hoagie"]
});

When OutText encounters these words in the document, it will ignore any configured frequency setting and always generate a link from this word. This setting will still respect, however, any configured excluded element types.

OutText will not force link generation on a word that contains extra characters, including leading or trailing punctuation, or a word that is split by additional inner HTML tags.

<!-- This will generate a forced OutText link. -->
George: Some bacon would be really nice right now.

<!-- So will this. -->
Bob: But you ATE ALL THE BACON last night!

<!-- But this won't. -->
George: I can't help it if I can't resist the wonders of bacon!

<!-- And neither will this. -->
Bob: Stop saying B<b>A</b>C<i>O</i>N so much!

Default: []

Author

outtext's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.