Categories
Bookmarked Javascript

Dropzone.js: A great plugin

I recently try Dropzone JavaScript library to ease the upload process. It is really a lightweight and good library. I have a existing PHP form that take multiple images, and transfer/upgrading it to dropzone was as easy as include it’s library.

I have little to mention, but a link to site is what I want to include in this post. http://www.dropzonejs.com a must library if you need multiple image upload by user. I use it for a scientific application, where client need to bulk upload about 1000s of image file for database, and it speed up their process. There is nothing much to add for tutorial as their basic tutorial is good enough to start even for newbie.

Categories
Javascript

Javascript Base64 Encode, Decode for UTF-8/unicode string

Complete article that works for me : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding 

Part where we encode from unicode/utf-8 is

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

// Usage:
utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"

 This is one of most used thing now a days.

Categories
Javascript JQuery

Short Note: Colorbox moving Close button on Top right

By default Colorbox Close button is on Bottom Right. However moving it back to top is as simple as changing Position of div from bottom to top. All I have done is change bottom: x to top: x for all child of cboxContent class. which include cboxLoadedContent, cboxTitle, cboxCurrent, cboxSlideshow, ,cboxPrevious ,cboxNext,cboxClose

Note for myself, and those who find it useful.

Categories
Concept/algorithm HTML/CSS Javascript JQuery

Selecting menu item using Javascript

Okay, I create a pure CSS menu that use UL/LI structure to maintain the child relationship. All was great with this menu except that when you are on any of menu item page it doesn’t highlight that menu item explicitly. If you consider this it is not a big deal. What you can do is simply, iterate through the Menu Items which are probably in LI A tags. Once you iterate, find the URL in A tag and match the Page URL with the Menu ITEM link. If they match change the Class of respective LI or A as your liking.

try {
    var path = window.location.pathname.replace("/User/", "");
    if (path == "" )
        path="Userhome.aspx";
    $("#mainemnu a").each(function () {

        if ($(this).attr("href").toLowerCase() == path.toLowerCase() ) {
            if ($(this).parent().hasClass("submenuitem")) { //it is sub menu
                $(this).parent().parent().parent().addClass("selectedmenu");
            } else {
                $(this).parent().addClass("selectedmenu");
            }
        }
    });
} catch (err) { }

That was a simple Jquery Driven Javascript function that I call in Document ready function of Jquery.

Categories
.NET ASP.NET C#.NET JQuery JSON VB.NET/VB

ASP.NET JavascriptSerializer for Array

I need to throw some database entry which are as simple as TIME, for this I got a string array in my ASP.NET code behind. I was throwing this String Array in JSON format after using JavascriptSerialize.Serialize method and it is making not so perfect Json script. I said it is not making perfect json because the expect result for me was something like this:

[“10:20″,”10:30″,”10:40”]

but it was returing something like

{“d”:”[\”10:20\”,\”10:30\”,\”10:40\”]”}

the difference is that it is converting the array in to string, however the ideal result can be

{“d”:[“10:20″,”10:30″,”10:40”]}

But we cannot change that functionality now, so what I realise we should use the eval function of javascript to make our Jquery or whatever JSON parse you are using. So my Jquery code looks like

….

success: function(data) {
var items = [];
$.each(data, function(ind, val) {
var myobject = eval(val);
$.each(myobject, function(i, v) {                   
items.push(‘<option value=”‘ + v + ‘”>’ + v+ ‘</option>’);
});
});
}

this convert the String to Javascript object using Eval function. Easy enough !!!

Categories
Article Blog: My thoughts Javascript

JavaScript: New Presentation

We all have experienced some cool effects while we do web surfing. Its Twitter, Facebook, Google, Windows Live website, whatever you name it, they all use great web interface easy and to the point user interaction. This all belongs to one unified solution Javascript. I have been using JS since I start web programming. I found working with Javascript is second best option after working on XNA Game framework. It wasn’t that good since start, but I really blame it on Jquery that it really make something which is good to something great. Recently I am using lot of Jquery modules and functions. This not only the presentation of our web work but it also reduce work to more organized way of coding.

However the JQuery is good in itself, but I realise that it depends on few things, and one of those is good HTML, if you are using Javascript especially with these libraries make sure you first validate your HTML. You don’t necessarily need to validate using HTML validator such as W3C validation, but a symmetric HTML is what you need. With Libraries like Jquery, I really wonder if we need Flash and Silverlight anymore ? Though I love to work on silverlight, never got a chance to use that in my project. But from Banner Flash to Jquery Banner, I opt for Jquery Banner, because they are simpler and faster to work. It took me 2 hrs to ingrate Paypal on HTML site, without making any new public page on site, as I just use Jquery Dialog to show the form and proceed with order. Client didn’t expect that and they are excited to get it that way. It make their money worth, and it ease out my work to make a form in template. which is indeed quite a work as compare to plain HTML form with no style at all.

If you are looking for web programming career, Javascript is must to learn with HTML. Without this if you want to be a programmer, then you won’t be. If you want any help on concept I am happy to help as it also help me learn more and more.

Categories
Javascript

Colorbox: Alternative for Lightbox

I have got lot of queries on my Lightbox + Videobox merge code. But over time I realize my merged code is not good enough as now with dynamic web, that code is limited. It is said to see such great software didn’t evolve much. But as a developer we cannot stop for one code and hence here is great alternative for virtually all sort of Lightbox effect for anything, It is called Colorbox (http://colorpowered.com/colorbox/). I used it so far to display, Tell a Friend form, Dynamic Form created based on User Input, a Cool Slideshow. Not much, but all looks great with its control using Jquery.

I am really a great fan of Jquery, it change the web developer’s life to make Great website out of Good websites. Long Live JQuery and ColorBox. Thanks for sharing it with us.