Ladysign Dev Blog » javascript

Nice search field

Lee — Wed, 02 Feb 2011 10:21:46 +0000

Difficulty: 3 out of 5 stars

Advanced HTML5 search field with placeholder and fallback for the other browsers.
Styling with gradient + radius + image in field.
With JS logics: Search on input string and search on enter.

HTML:

CSS:

fieldset.search {
	border: none;
	padding: 0;
	position: relative;
}

fieldset.search input {
    -webkit-appearance: none;
    -webkit-box-sizing: content-box;
    background: none;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(250, 250, 250, 1)), to(rgba(250, 250, 250, 0)), color-stop(.3,rgba(250, 250, 250, 0))););
    background-image: -moz-linear-gradient(rgba(250, 250, 250, 1) 0%, rgba(255, 255, 255, 0) 30%);
    border: 1px solid #f2f2f3;
    float: left;
    margin-right: 5px;
    padding: 10px 0 10px 44px;
    background-color: #fff;
}

fieldset.search div.inputsearchgroup {
	position: relative;
	float: left;
}

fieldset.search div.inputsearchgroup span.search_icon {
	background: url(icon_search_glass.png) no-repeat 10px 7px;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 37px;
	height: 33px;
}

/*
 * CSS3
 */
.smallradius {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

JS:

(function(){
	/*
	 * jQuery PlaceHolder + Search Submit
	 * it submits the search query on enter button and on search button.
	 * place holder functionality for browsers which don't support placeholder
	 * @author Lee Boonstra
	 * @since 21 jan 2011
	 * @version 1.0
	 *
	 * @uses jQuery 1.2.6,  or higher
	 */
	$.fn.SearchInput = function(){
		var strSavedString = "";

		/*
		 * Does the browser support placeholder attribute?
		 * @return boolean
		 */
		function isBrowserSupport(){
			var i = document.createElement("input");
			return "placeholder" in i;
		}
		return this.each(function(){
			var button = $(this).parent().parent().find('.submit');
			var url = $(this).parent().find('input[name|=url]').val();
			var e = $(this);

			var strPlaceHolderText = e.attr("placeholder");

			if(e.val().length == 0){
				e.val(strPlaceHolderText);
			}

			/*
			 * On field focus remove placeholder if there is no written text in it.
			 * @return void
			 */
			e.focus(function(){
				strSavedString = e.val();
				if (strSavedString === strPlaceHolderText) {
					e.val("");
				}
			});

			/*
			 * Save the written text in a variable
			 * @return void
			 */
			e.change(function(){
				strSavedString = e.val();
			});

			/*
			 * While leaving the focus of the field, put the placeholder back
			 * or the written text.
			 * @return void
			 */
			e.blur(function(){
				if(isBrowserSupport()===false){
					if(strSavedString !== strPlaceHolderText && strSavedString !== ""){
						e.val(strSavedString);
					} else {
						e.val(strPlaceHolderText);
					}
				}
			});

			/*
			 * Search if the key is enter or button has been clicked,
			 * if there's a input hidden url and the input is not empty and does not contain the    placeholder
			 */
			function search(ev){
				if (ev.keyCode === 13 && strSavedString !== strPlaceHolderText && strSavedString !== "" && url !== null) {
					window.location.href = url + "?q=" + strSavedString;
				}
				if(ev==="click" && strSavedString !== strPlaceHolderText && strSavedString !== "" && url !== null){
					window.location.href = url + "?q=" + strSavedString;
				}
			}

			/*
			 * Submit the query
			 */
			e.keyup(function(ev){
				search(ev);
			})
			button.click(function(){
				search("click");
			});

		});

	};
})(jQuery);

Config LinkedIN Javascript API for multiple environments (OTAP)

Lee — Tue, 01 Feb 2011 10:26:28 +0000

Difficulty: 2 out of 5 stars

This is a solution how you can configure the LinkedIN Javascript API for multiple environments. For example OTAP.

First register all environment API keys @ Linkedin:
https://www.linkedin.com/secure/developer
If you have a Local, Test and Live environment, you should add 3 new applications to LinkedIn, containing the path to the environment.

Now let Javascript, detect the environment, and set you API_KEY.
(change the keys in the code)

Properties = {
	init: function(){
		var url = window.location.href;
		if(url.indexOf("test") != -1){
			this.testEnv();
		} else if(url.indexOf("localhost") != -1) {
			this.localEnv();
		} else {
			this.liveEnv();
		}

	},
	liveEnv: function(){
		console.log("--LIVE--");
		Properties. API_KEY = "LIVE-KEY-HERE";
		this.setScriptTag();
	},
	testEnv: function(){
		console.log("--TEST--");
		Properties.API_KEY = "TEST-KEY-HERE";
		this.setScriptTag();
	},
	localEnv: function(){
		console.log("--LOCAL--");
		Properties.API_KEY = "LOCAL_KEY_HERE";
		this.setScriptTag();
	},
	setScriptTag: function(){
		var script = document.createElement("script");
		script.setAttribute("type","text/javascript");
		script.setAttribute("src","http://platform.linkedin.com/in.js");
		script.setAttribute("id","linkedinScript");
		script.innerHTML = "api_key:" + Properties.API_KEY + "\n authorize: true";
		document.getElementsByTagName('head')[0].appendChild(script);
	}
}
Properties.init();

Mash-ups with YQL

Lee — Sat, 07 Nov 2009 11:00:32 +0000

…and why Corizon mashups suck.

Difficulty: 2 out of 5 stars
It was because of working with Corizon that I became more interested in creating Mash-ups*.
During the last 2 years, I’ve seen a lot of mash-up tools, From the easy (”Lego-like”) Popfly from Microsoft which is recently discontinued, to large handy API’s or serverside Java frameworks; such as the nice but heavy SiteMesh framework.
But it was the Corizon mash-up toolkit that I started to realize, coding mash-ups can have it’s ups and downs.

In my opinion creating a mash-up should be easy & fast. Not buggy and heavy (running 2 or 3 Tomcat servers in the background *kuch*). Also it’s an unwritten rule that for a mash-up you should not first destroy and rebuild it’s components before you gonna mix them up. This means you can only mash-up content what’s in your maintenance and when one of your components changes, your mash-up is broken.
It’s not a wonder that I became extremely positive about YQL, when I first saw this working.
And now, after Fronteers 2009, where I had a presentation and talk with Chris Heilmann from Yahoo.

With YQL (Yahoo Query Language), you can make the same mash-ups, client or serverside and you don’t need thousands lines of code.
Why you should use YQL for a mash-up?

You won’t use your own bandwidth, but the bandwidth from Yahoo.
It’s easy, just the basic SQL knowledge is required.
It’s lightweight.
It’s fast.

But like every Mashup tool, there are also downside’s. So it’s good to consider:

Why you shouldn’t use YQL for a mash-up?

When one of the including components is slow or has timeouts, you result object will be null.

Mash-ups with YQL

Ok enough with the theory. Let’s practice with a simple YQL mash-up. As you might know, I like videogames. So I want to have a website with the release dates of games on my website, which I can watch on YouTube. Fokzine Games (http://games.fok.nl/overzicht.php?action=release) has a nice game release list.

For using this tutorial, you will need a Yahoo Developer Account, which you can create for free.
Unless you like to write full XPath lines without any help,
you’ll also need Mozilla Firefox browser with the Firebug plugin installed.

Register your Yahoo Dev account.
Go to the below URL, register your Yahoo account and login
to the YQL console: http://developer.yahoo.com/yql
Query the content.
YQL is quite similar to SQL. To query content (the videogame
release list) from an external website, I will select all the HTML nodes from an URL. With Xpath I can point to the part of the website I will need. (Now you’ll need Firebug, inspect the website, till you’ll reach the table tag of the release list. – In top of your Firebug screen, you will see the full Xpath line.
– Just right click, and “Copy Xpath”. This will be your YQL query for selecting the table tag on Fok.nl Game Release Page:
```
select * from html where url ='http://games.fok.nl/overzicht.php?action=release' and xpath ='//*[@id="itemtext"]'
//or select the tr tag on Fok.nl Game Release page
//(note that I removed “tbody” from the xpath line to make it work)
select * from html where url ='http://games.fok.nl/overzicht.php?action=release' and xpath ='/html/body/div[4]/table/tr/td[2]/div[2]/div/table/tr'
```
Hit enter (or press “Test”) and you can switch between formatted view or tree view to see the result. Result can be in XML of JSON.
Also note that you can copy the REST URL Query, from the console:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20′http%3A%2F%2Fgames.fok.nl%2Foverzicht.php%3Faction%3Drelease’%20and%20xpath%20%3D%20′%2Fhtml%2Fbody%2Fdiv%5B4%5D%2Ftable%2Ftr%2Ftd%5B2%5D%2Fdiv%5B2%5D%2Fdiv%2Ftable%2Ftr’&format=xml

How the retrieved XML looks like:



true

272
263
3130


 
  
   
  
  
   29-09-2009
  
  
   Tales of Monkey Island episode 3
  
 
  ..

How your JSON (Javascript object looks like:

releaseList({
 "query":{
 "count":"50",
 "created":"2009-09-25T12:10:17Z",
 "lang":"en-US",
 "updated":"2009-09-25T12:10:17Z",
 "uri":"http://query.yahooapis.com/v1/yql?q=select+*+from+html+where+url+%3D+%27http%3A%2F%2Fgames.fok.nl%2Foverzicht.php%3Faction%3Drelease%27+and+xpath+%3D+%27%2Fhtml%2Fbody%2Fdiv%5B4%5D%2Ftable%2Ftr%2Ftd%5B2%5D%2Fdiv%5B2%5D%2Fdiv%2Ftable%2Ftr%27",
 "diagnostics":{
  "publiclyCallable":"true",
  "url":{
   "execution-time":"28",
   "proxy":"DEFAULT",
   "content":"http://games.fok.nl/overzicht.php?action=release"
  },
 "user-time":"36",
 "service-time":"28",
 "build-version":"3130"
 },
"results":{
 "tr":[{
 "bgcolor":"#E0E0E0",
 "td":[.. ]
 }
..
 ]
}}});

Use the YQL widget.
Create a new HTML page. In this page, you’ll include the YQL JS Widget:
http://github.com/sh1mmer/dotnet-yql-tutorial/blob/master/yql_js_widget.js
This is a pre-made Javascript widget. If you check out the links on the end of this article, you can check out other implementations as well. (Such as Dojo-YQL or JQuery YQL).
For this article, we will use vanilla Javascript.
Create the Mash-up.
The only think what you’ll need now is the logic to implement the previous made YQL query, to have the YQL results in your Document Object Model (DOM).
With the Firebug plug-in, you can check the “Net” tab, to see if the correct object is retrieved. You can walk through the results, and implement it in your Javascript to do fancy things with it.



YQL - Game Release

Well that’s it. See how easy it is to create a nice Mash-up? As long as you can reach the DOM, you can mash-up everything. Below my article, I’ve written some nice links. If you liked my article or you would like to discuss with me about YQL or Mash-up technologies; feel free to add me on LinkedIn or Twitter.

YQL Community: http://github.com/yql/
YQL video by Jonathan LeBlanc: http://developer.yahoo.com/yui/theater/video.php?v=leblanc-yql

* In webdevelopment, a mashup is a web page or application that combines
data or functionality from two or more external sources to create a new
service. An example of a Mash-up is a Google Map combined with Wikipedia
town information and a (accuweather.com) Weather indicator.

Invoke a Java Servlet with Javascript

Lee — Thu, 20 Aug 2009 15:05:31 +0000

Difficulty: 3 out of 5 stars
It is possible to invoke a Java Servlet from your Javascript.
Just implement this code. Please see the comments in the function.

var request;
/*
 * doRequest
 * param servletName - Javascript String, Servlet name (as implemented in your config)
 * param servletArguments - Javascript String, any parameters
 */
function doSomeRequest(servletName, servletArguments){
    var servlet = servletName;
    var arg = servletArguments;
    var req = servlet + "?" + arg;

    addRequest(req);
    request.onreadystatechange = function(){
        //do something with the response
    }
}

function addRequest(req) {
    try {   //create a request for netscape, mozilla, opera, etc.
        request = new XMLHttpRequest();
    }catch (e) {

        try {    //create a request for internet explorer
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e) {   //do some error-handling
            alert("XMLHttpRequest error: " + e);
        }
    }

    request.open("GET", req, true);   //prepare the request
    request.send(null);   //send it
    return request;   //return the request
}

Cookies in Javascript

Lee — Wed, 08 Jul 2009 15:10:00 +0000

Difficulty: 2 out of 5 stars
A cookie (also tracking cookie, browser cookie, and HTTP cookie) is a small string of text stored on a user’s computer by a web browser. A cookie consists of one or more name-value pairs containing bits of information.
Beside the name/value pair, a cookie may also contain an expiration date, a path, a domain name, and whether the cookie is intended only for encrypted connections. These pieces of data follow the name=newvalue pair and are separated by semicolons. For example, a cookie can be created by the server by sending a line

Set-Cookie: name=newvalue; expires=date; path=/; domain=.example.org.

With Javascript you can also set cookies. It’s not hard at all. I think it’s useful for folding/unfolding or hiding/displaying CSS content. This part of Javascript I wrote for setting, getting and deleting a cookie:

/*
* Set the cookie
* @param name - the name of the cookie variable
* @param value - the value of the variable which will be saved in the cookie.
* @expires - the
*/
function setCookie(name, value, expires) {
	var today = new Date();  //set new date object
	var defaultDays = 30;
	today.setTime(today.getTime());
	if (expires) {
		expires = expires * 1000 * 60 * 60 * 24;
	}else{
		expires = defaultDays * 1000 * 60 * 60 * 24;
	}

	document.cookie = name + "=" + escape(value) +
        "; path=/" + ((expires == null) ? "" : "; expires=" +
        expires.toGMTString());
}

/*
 * Get Cookie
 * @param: name of the cookie variable you would like to retrieve
 */
function getCookie(name) {
	var cookieValue = null;
	var startPos = document.cookie.indexOf(name+"=");
	var lengthVal = startPos + name.length + 1;

	if((startPos)&&(startPos>0)&&
        (name == document.cookie.substring(0, name.length))){
		var endPos = document.cookie.indexOf( ";", lengthVal);

		if (endPos == -1){
			endPos = document.cookie.length;
		}
		cookieValue = unescape(
                   document.cookie.substring(lengthVal, endPos)
                );
	}

	return cookieValue;
}

/*
 * Delete Cookie
 * @param delete the cookie variable by passing the name
 */
function delCookie(name) {
    document.cookie = name +
    "=; expires=Thu, 01-Jan-70 00:00:01 GMT" + "; path=/";
}

Ladysign Dev Blog » javascript

Nice search field

Config LinkedIN Javascript API for multiple environments (OTAP)

Mash-ups with YQL

…and why Corizon mashups suck.

Mash-ups with YQL

* In webdevelopment, a mashup is a web page or application that combines data or functionality from two or more external sources to create a new service. An example of a Mash-up is a Google Map combined with Wikipedia town information and a (accuweather.com) Weather indicator.

Invoke a Java Servlet with Javascript

Cookies in Javascript

* In webdevelopment, a mashup is a web page or application that combines
data or functionality from two or more external sources to create a new
service. An example of a Mash-up is a Google Map combined with Wikipedia
town information and a (accuweather.com) Weather indicator.