Let me have a blog

I need one menu with horizontal accordion, but the plugins that I have looked doesn't like me, too much requirements or code, really I need something more simple, so in few minutes I write a simple plugin.

v0.1

It is very simple, with a few parameters: speed set the velocity of the animation, headerclass set another classname for header divs (by default "header"), contentclass set another classname for content divs (by default "content"), contentwidth is the final with of each content panel.

HTHML Sample:

  .haccordion .header, .haccordion .content{
   float: left;
   height: 250px;
  }
  
  .haccordion .header{
   width: 20px;
   background: #ccc;
   color: #fff;
   cursor: pointer;
  }
  
  .haccordion .content{
   display: none;
   width: 0px;
   overflow: auto;
  }
  
  .haccordion .content p{
   margin: 5px;
  }

 

  
*1

  
This is a sample of content for Content1 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

  
*2

  
This is a sample of content for Content2 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

  
*3

  
This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

 

JavaScript Sample code:

  $(function(){
   $(".haccordion").haccordion();
  });

Demo:

Download jquery.haccordion.js code.

Labels: javascript, jquery, programming

Recently I have had a small dilemma, because I needed to load in a web page, a list of locations with the associated map image. Google maps is very good but overload too much the page with JavaScript, I only need images and not one complete map container because possibly the page need display ten or more map images.

I could read the Yahoo Map Image API, is perfect for my project because I only download a simple gif image, the problem is that, first, in the API help only we can see the output of the rest call in XML and PHP stringfy. This is a problem for me because the IP limitation of Yahoo and Google API's requires that in big projects must be the users that they query the API using JavaScript, because if I use the server, the API blocks the calls when I pass the max number of calls.

Well, using JavaScript I have two possibilities, call the API with XML responses (problem with XMLHttpRequest domain restrictions, it is neccesary a proxy and the same problem with the IP calls in the proxy server), or a hidden possibility with JSON responses calling with scripts tags (not AJAX).

Althought Yahoo Map Image API doesn't show any possibility about JSON, all REST API calls of Yahoo share the same parameters, so I tried the params "&output=json&callback=myfunction" and voilà I have the JSON response. With the callback function I can execute a function from my code receiving as params the API response.

The problem now is making multiple calls asyncronously to the API. The callback function doesn't know the related image for to associate the src url of the map image (or associate div). So I thought in one solution, this is a small code of a extension for load multiple map images by ID.

    var yahoo = {
      calls: new Array(),
      apikey: "YahooDemo",
      callImageApi: function(latitude, longitude, imgobj, iwidth, iheight){
        iwidth = (typeof iwidth != "undefined")?iwidth:"70";
        iheight = (typeof iwidth != "undefined")?iheight:"70";
        var index = yahoo.calls.push([imgobj, function(data){
          this[0].src = data.ResultSet.Result;
        }]) - 1;
        var miscript = document.createElement("script");
        miscript.src = "http://local.yahooapis.com/MapsService/V1/mapImage?appid=YahooDemo&latitude="
                       +latitude+ "&longitude=" 
                       +longitude+ "&image_height="
                       +iheight+"&image_width="
                       +iwidth+"&output=json&callback=yahoo.calls["
                       +index+"][1]";
        miscript.type = "text/javascript";
        head = document.getElementsByTagName("head")[0];
        head.appendChild(miscript);
      }
    }

With this HTML of example, we can call to the library using yahoo.callImageApi(latitude, longitude, imageobj, width, height):

      yahoo.callImageApi("36.8402","-2.46792", document.getElementById("test1"),300,300);
      yahoo.callImageApi("38.01504422431762","-1.1742335557937622", document.getElementById("test2"),400,400);

Download the example.

Labels: javascript, programming

I use PHP CodeIgniter support for GZIP compression but I had to do some changes in a CI library for to compress javascript libraries but thanks to Joan Piedra and his post in jQuery Mail list I see this solution better:

<ifmodule mod_headers.c>

  <ifmodule mod_deflate.c>

 # Compress some text file types

  AddOutputFilterByType DEFLATE text/html text/css text/xml application/x-javascript

  

  # Deactivate compression for buggy browsers

  BrowserMatch ^Mozilla/4 gzip-only-text/html

  BrowserMatch ^Mozilla/4\.0[678] no-gzip

  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

  </ifmodule>

</ifmodule>

NOTE: It doesn't work with Apache version < 2 web servers. You need deflate and headers module.

Labels: programming, web

I am bored watching the bad use of JavaScript detection. You can see that I tell you simply looking for "requires javascript" in Google. Normally, the programmer set a space in the web page for display the error message like "This web site requires JavaScript enabled", and, when with JavaScript the programmer hides this message.

The problem is that, if the page is a big size HTML code, or we have many pictures and execute our code on window load, probably, you can see this horrible warning before hide it, while the page is loading. This is a bad way for display this message.

Looking for the standars

Well, we can look in the HTML standars. We have the "noscript" tag. All the HTML code inside of this tag is interpreted by the browser if the JavaScript engine is not enabled. So we can make a top warning message for show that the page requires JavaScript:

  
  
  

    Disable JavaScript in your browser for display the warning message. In Firefox Tools menu - Options - Content - Enable JavaScript unchecked.
  

Now in the #web layer we have our page, and #jswarning only is displayed if JavaScript is not enabled.

Making more beautiful

Also you can use CSS in the elements as allways. I copy the same style of Firefox warnings:

body{
  margin: 0;
}

.jswarning{
  font-family:Arial, Helvetica, sans-serif;
 font-size: 9px;
 height: 20px;
 border: #d6d8d6 1px solid;
 width: 100%;
 padding-top: 10px;
 padding-left: 30px;
 background: #ffffe1 url(imgs/exclamation.gif) 4px 8px no-repeat;
}
#web{
  font-weight: bold;
  color: #666;
}

 The final result is like this:

You can test yourself with this online example.

Labels: accessibility, css, programming

This is one of the works for the new Sym.posium project. My first idea was that I'd need store more information about the user in the session (statistics, authentification, session preferences of the user, ....). My first problem is that, my RsAuth library (Really Simple Authentification) store username logged and other authentification info in the cookies, this is unsecure because somebody can change the cookie data and hack the authentification.

CodeIgniter has the option for encrypt the cookie data, but, anyway somebody can uncrypt the data (knowing the encryptation key or brute force), so I needed the same session class logic but not store the sensitive data in the cookie and store in the database. Lukely CodeIgniter also has an option for save some information of the sessions in a table in the database (session_id, last_activity,....) but the session variables is stored in the cookie and it does not in the database.

This solution (that I think), is not good, because, the sensitive data is exposed in the cookie, and the cookie data (if is big) is transfered in all communication server-client, so I am loosing bandwidth. Also, because a stupid bug in IE 5.5 cookies, CodeIgniter does not implement non persistent cookies (deleted when the browser close), if another user use your computer before the session end, although you have closed the page tab or the browser, the new user can use the same session cookie, and gets your authentification, and this is not good.

CodeIgniter has the possibility of extend the core classes, for customize your code. So this is my session class extension for support non-persistent cookies and session variables stored in database.

Download

Download MY_Session.php

Installation

1. You need configure your sessions for to use the database. In config.php:

$config['sess_encrypt_cookie'] = TRUE;
$config['sess_use_database'] = TRUE;
$config['sess_table_name']  = 'sessions';
$config['sess_match_ip']  = TRUE;
$config['sess_match_useragent'] = TRUE;
$config['sess_cookie_isnonpersistent'] = TRUE;  //Cookie hack

This simple configuration sets the cookie encryption, the database use, and we add some security settings like match_ip and match_useragent. The latest setting is for nonpersistent cookies support, if is FALSE, cookies has the normal behaviour with session expiration time, and if is TRUE, cookies is deleted when the browser is closed, but also, session is expired when the session time is expired.

2. Check if the Class Extension prefix is MY_ , if not, rename MY_Session.php file to the correct name. In config.php:

$config['subclass_prefix'] = 'MY_';

3. You need declare sessions table of a new way setting the new user_data field:

CREATE TABLE sessions (
  session_id varchar(40) collate utf8_bin NOT NULL default '0',
  ip_address varchar(16) collate utf8_bin NOT NULL default '0',
  user_agent varchar(50) collate utf8_bin NOT NULL default '',
  last_activity int(10) unsigned NOT NULL default '0',
  user_data text collate utf8_bin,
  PRIMARY KEY  (session_id)
);

4. Finally store your MY_Session.php file in your application/libraries folder.

This extension overwrite the userdata method. This method gets at first the value if exists in database session info, and if it is not found, then tries in session cookie. Also the method set_userdata writes in database session info, and if you need write in cookies, then use the new method set_userdata_cookies. The code of the file is simple and self documented.

Labels: php, programming

At first, What is Twitter?

Well, Don't you know twitter?, it is the new "cool" web 2.0 service of the net. Basically you set a twitter account and, you can send little messages (140 chars) to the web using Jabber IM network (GTalk, Miranda,...) or with SMS in your mobile.

And, what can I do with it?

Twitter service is used for send little pieces of text. As a new "cool" service, teenagers are using it, for send what they are doing in each moment. Some bloggers comments that Twitter produces an attention overload (The Attention Crash), because, when you enter in a blog or a web page, you attention is navegating through the all the information (titles, banners, blog posts, and now, the twitter badger...) So many information and so less time. Normally, these pieces of information are not relevant (I am reading a book, I am go to the bed,...).

Some intelligent ideas for to use Twitter

But, what interesting things can we do?. Twitter only allow 140 characters and this is perfect for to send titulars, of little news to the web, BBC or El Pais knows this well. Twitter is perfect for to share information who is so little that why I have blog it?, simply send it to twitter.

Some authors speaks about the "experimental" use as an Ephemeral learning tool, Twitter allow to share the thinks of the students and the teacher in real time in any place. By example, we can made a simple experiment, in an online class we can use twitter as a chat or send the feedbacks to the teacher.

Rohit Bhargava has some ideas for to use Twitter for marketing, as a tool that gets the instant feedback of a promotion or event. Blog Herald proposes another uses in What do you use twitter for?. Finally Why I didn't use twitter.com yet.

Labels: programming, web

After of the plugin publication, I have had some request about how you alert the errors as "classic" YAV style or how you display all the errors inside a DIV.

In the first time, I question me, Why I want show all the errors inside a only layer?, focusing in accesibility it is better show the errors inside the label of the each field, but... Why not?. This is the idea:

I copy all the errors in the onError function, inside to a div, and remove the old.

	$(document).ready(function(){
		$("#form1").yav({
			onError: function(){
				$("#errorContainer").append($(".error"));
				$(".error").not($("#errorContainer .error")).remove();
				$("#errorContainer").show();
				
				return false;
			}
		});
		$("#errorContainer a.close").click(function(){
			$(".error").remove();
			$("#errorContainer").hide();
		})
	});

Run the example.

The second idea. Really I have deprecated "classic" YAV style (a simple alert) because this is not usable and with a minimal accesibility. But if you want.... you can get the messages in the old jsErrors variable of YAV, but the syntax of this errors have changed a bit in the plugin. An error message is an map object like {id:"the_related_id_field", msg:"the error message"} or the string representation of this object. So:

	$(document).ready(function(){
		$("#form1").yav({
			onError: function(){
				var errorList = "Please check the next errors: \n\n";
				for (var i=0; i					errorList += ((typeof jsErrors[i]=="object")?jsErrors[i].msg:(eval("("+jsErrors[i]+")").msg)) + "\n";
				}
				alert(errorList);
				
				return false;
			}
		});
	});

Run the example.

If you have another idea, please say it to me.

Labels: accessibility, javascript, jquery, programming