From KynetxDocs

Contents 1 Actions 1.1 Action Configuration 1.1.1 delay 1.2 Actions 1.2.1 alert(<message>) 1.2.2 float(<position>, <vertical>, <horizontal>, <url>) 1.2.3 float_html(<position>, <verical>, <horizontal>, <expr>) 1.2.4 move_after(<anchor>, <item>) 1.2.5 move_to_top(<item>) 1.2.6 notify(<header_text>, <message>) 1.2.7 close_notification(<selector>) 1.2.8 popup(<top>, <left>, <width>, <height>, <url>) 1.2.9 redirect(<url>) 1.2.10 replace(<id>, <url>) 1.2.11 replace_html(<id>, <expr>) 1.2.12 replace_image_src(<id>, <url>) 1.2.13 annotate_search_results(<selector_func>)

Actions

KRL supports a number of build-in actions. The purpose of an action is to produce JavaScript that is executed on the browser.

Action Configuration

All actions can be augmented with the with keyword following the action like so

alert("Hello world!")
  with delay = 3

The right hand side of the configuration can be any valid KRL expression.

Multiple configuration options are separated by and like so

      float("absolute", "top: 10px", "right: 10px",
            "/cgi-bin/weather.cgi?city=" + city + "&tc=" + tc)
        with delay = 0 and
             draggable = true and
             effect = "appear";

The following configuration options are applicable to all actions:

delay

The delay in seconds before the action takes place. Note that this is from when the JavaScript is finished loading on the page, not when the page start to display. Applicable to all actions.

Actions

alert(<message>)

Pop an alert box on the client with the message given in the argument string.

alert("The market is down by " +  change +  "!!! The DOW is at " + 
            current_price +  "! Buy Something!")

float(<position>, <vertical>, <horizontal>, <url>)

Float a window above the current contents of the browser (z=.9999). This is not a pop-up.

• <position> is either "absolute" or "relative"

• <verical> is a colon separated pair (written as a string) where the first part is either top or bottom and the second part is a measurement in CSS format. For example "right: 10px" would instruct window to have an initial position 10 pixels from the top of the viewable area.
• <horizontal> is a colon separated pair (written as a string) where the first part is either left or right and the second part is a measurement in CSS format. For example "top: 10px" would instruct window to have an initial position 10 pixels from the right of the viewable area.
• <url> is the place where the window content will be retrieved. Because of restrictions on cross site scripting (XSS) by browsers, if URL is not on the same site as the site hosting the KOBJ tags the content of the URL will be downloaded on the Kynetx engine and inserted.

float("absolute", "top: 10px", "right: 10px",
            "/cgi-bin/weather.cgi?city=" + city + "&tc=" + tc)

The following options are available float:

• draggable Boolean value stating whether the window is draggable or not.
• effect Takes the value "appear", "blind", or "slide".

These can be set with a with action modification.

float_html(<position>, <verical>, <horizontal>, <expr>)

<p> Like float but content from evaluating the expression rather than a URL.

move_after(<anchor>, <item>)

Move the element with the id given by item just after the element with the id given by anchor

move_after("friend-list", "kristen")

move_to_top(<item>)

Move the element with the id given by item to the top of whatever container it's in.

move_to_top("category")

notify(<header_text>, <message>)

Place a notification over the page. Similar to Growl notification on OS X. The parameters are

• <header_text> - The header. Empty string results in empty header.

• <message> - A string representing the message.

The following options are available:

• <sticky> - (defaults to false) If true, the message will stay until the user dismisses it. If false the message will fade after 3 seconds.

• <opacity> - (defaults to 0.8) Real number between 0 and 1 that sets opacity of the notification box and anything in it.

• <pos> - (defaults to top-right) A string specifying where to place the notification. Valid values are "top-left", "top-right", "bottom-left", and "bottom-right".

• <text_color> - (defaults to #FFF) A string giving the CSS RGB value of the foreground color. Must contain a preceding '#'.

• <background_color> - (defaults to #222) A string giving the CSS RGB value of the background color. Must contain a preceding '#'.

Examples:

notify("Attention!", "This is a test message.  It will fade away in time.");

notify("Attention again!", "This is another test message.  This one is sticky.")
  with sticky = true;

close_notification(<selector>)

Attach a close event for a notification to an element or set of elements identified by the selector string that is the argument.

The elements selected *must* be inside the notification for this to work since it finds the notification window that is a parent of the selected elements to close.

popup(<top>, <left>, <width>, <height>, <url>)

Pop up a window above the current contents of the browser. This is a pop-up. <top> is pixels to position the new window from the top of the current window <left> is pixels to position the window from the left of the current window <width> is width of the new window in pixels <height> is height of the new window in pixels <url> is the place where the window content will be retrieved. Because this is a separate window, the URL can be on any site.

popup(250, 250, 150, 400, "/kynetx/google_ad.inc");

The defaults for other options are no toolbar, no statusbar, no menbar, resizable, and scrollable. Note the I'm seeing a bug in Firefox 2 that doesn't recognize some of these options and the left to right positioning.

redirect(<url>)

Redirect to the given URL.

redirect("http://www.google.com")

replace(<id>, <url>)

Replace the page element (usually a <div>) with the id given by <id> with content given by the URL. Because of restrictions on cross site scripting (XSS) by browsers, if URL is not on the same site as the site hosting the KOBJ tags the content of the URL will be downloaded on the Kynetx engine and inserted.

replace("kobj_test", "/kynetx/newsletter_invite.inc")

replace_html(<id>, <expr>)

Replace the page element (usually a <div>) with the id given by <id> with content given by the result of evaluating the expression (a string, var, extended quote, or string concatenation).

replace("kobj_test", "<p>Hello World</p>")

replace_image_src(<id>, <url>)

Replace the source of the image tag having ID of <id> with the given URL. The effect is that the picture changes without flicker on modern browsers if the image tag has height and weight attributes and replacement image has the same size.

replace("kobj_test", "/images/new_logo.png")

annotate_search_results(<selector_func>)

Annotates Google and Yahoo! search results according to the result of applying <selector_func> to each result. The selector function should be written in such a way as to return the HTML element that should be used to annotate the search result. The function is a javascript function that should be defined before it is called. The selector function needs to be written in such a way so as to work on both Google and Yahoo! Search.

The following example shows a selector function that matches the "citation" host name on either Google of Yahoo! Search against the keys in a Javascript object. The the key's value is defined then a simple text string is place next to the item in the search results.

emit <<
function my_select(obj) {
var host = KOBJ.get_host($K(obj).find("span.url, cite").text());
  var o = boa[host];
  if(o) {
     return "<span>This is the one!</span>
  } else {
    false;
  }
}
>>;
annotate_search-results(my_select)

If multiple annotations are applied to a single search result, the action puts them in a single structure and separates them using a user specifiable separation element.

The annotate_search_results action has options that can be changed to affect its behavior:

• name - (defaults to "KOBJ") - changing the name creates a "new" annotation box. Annotation with the same name are grouped together.
• sep - (defaults to "<div style='padding-top: 13px'>|</div>") - the separation element
• text_color - (defaults to "#CCC") - the default text color
• height - (defaults to "40px") - the height of the annotation div
• left_margin - (defaults to "15px") - the left margin in between the annotation and the result
• right_padding - (defaults to "15px") - right padding
• font_size - (defaults to "12px") - default font size
• font_family - (defaults to "Verdana, Geneva, sans-serif") - default font
• tail_image - (defaults to null) - background image for end of the annotation box
• head_image - (defaults to null) - background image for start of the annotation box

These can be changed using the with modifier syntax for actions:

annotate_search_results(boa_selector)
  with name = "remindme" and
       head_image = url_pf + "remindme_bar40_l.png" and
       tail_image = url_pf + "remindme_bar40_r.png" and
       left_margin = "46px";