Let me have a blog

This service allows upload Flash files for sharing games, animations, etc... But we can use it for upload our screencasts made with Jing, Captivate or Camtasia and share with the community.

The upload doesn't require registration, it is totally anonymous, or if you want it, you can register and upload the files using your alias name.

Also it is easy upload files as public or private access, you can attach directly in your web the uploaded file or link to the page. Now you can share screencast with anyone although you don't have a personal hosting service.

Sample of screencast attached or linked

Labels: e-learning, flash

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