Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Wednesday, June 22, 2011

500 jQuery tutorials

Web site with 500 jQuery tutorials

SelectSwitcher jQuery Plugin
jquery-select-switcher.jpg
A plugin to switch content visibility based on the selected option of a select. Use the full power of jQuery to define your affected elements.

gSlider Lightweight jQuery Image Slider
jquery-image-slider-2.jpg
gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.
Read more: jQueryRain

Thursday, June 16, 2011

Exposing Silverlight functions to Javascript

Sometimes we need to interact between our Silverlight application and our host page. In this beginners post, I'll describe how to do it along with a mapping example. The target is to choose a state in the host page (which filled from a silverlight function) and then zoom and highlight the state on the Silverlight map.
First we create a class and give it the ScriptableMember attribute. This enables the hosting page to gain access to the class.  The function fill_states will read the the fifty states from the server and run the JS addToStates to add them all to the list in the hosting page. Calling JS from silverlight is easy with HtmlPage.Window.Invoke function.

public class MyScriptableManagedType
{
        [ScriptableMember()]
        public void fill_states()
        {
            QueryTask pQueryTask = new QueryTask("http://sampleserver..../ESRI_Census_USA/MapServer/5");
            pQueryTask.ExecuteCompleted += fill_states_ExecuteCompleted;
            Query pQuery = new Query();
            pQuery.OutFields.AddRange(new string[] { "STATE_NAME" });
            pQuery.ReturnGeometry = false;
            pQueryTask.ExecuteAsync(pQuery);
        }
        private void fill_states_ExecuteCompleted(object sender, QueryEventArgs e)
        {
            IOrderedEnumerable<Graphic> pSorted = null;
            pSorted = e.FeatureSet.Features.OrderBy(g => g.Attributes["STATE_NAME"]);
            
            foreach (Graphic graphic in pSorted)
            {
                string pStateName = graphic.Attributes["STATE_NAME"].ToString().Trim();
                object o = HtmlPage.Window.Invoke("addToStates", pStateName);
            }
        }

The next function is goto_state : gets the state name from JS and then zoom and highlight it on the map.

[ScriptableMember()]
    public void goto_state(string sStateName)
    {
            QueryTask pQueryTask = new QueryTask("http://sampleserver.../ESRI_Census_USA/MapServer/5");
            pQueryTask.ExecuteCompleted += goto_state_ExecuteCompleted;
            Query pQuery = new Query();
            pQuery.ReturnGeometry = true;
            pQuery.Where = "STATE_NAME = '" + sStateName + "'";
            pQueryTask.ExecuteAsync(pQuery);
        }

Read more: Oren Gal

Tuesday, June 14, 2011

10 superb jQuery plugins for working with images

This is collection of most interesting fresh jQuery plugins for images. Here are plugins to perform different animations and effects with images: zooming, and more.

1. AJAX-ZOOM
This plugin are very interesting. This is and ajax zoomer, and pan gallery, and also possibility to rotate objects (3D effect). Online demo you can find here.

img1.jpg


2. Transformable
Possibilities to transform image: rotate, skew, and scale (commonly – possible to work even with DIV elements). Online demo you can find here.
img2.jpg


Read more: Script tutorials

Sunday, June 05, 2011

Компилятор .NET в JavaScript и пример XNA-демо в браузере

202e863d9f54d1499bf8d8959c86c422.png

Разработчик Kevin Gaad, который судя по его профилю работает в компании Mozilla, представил свою разработку – компилятор .NET(C#) кода в JavaScript. Для демонстрации работоспособности библиотеки Кевин опубликовал портированный пример демонстрационного проекта игры на базе XNA 3.1.

Игра работает в браузерах IE9+, Firefox 4+, and Chrome 11. Разработчик пишет, что Opera не поддерживается из-за проблем браузера с ECMAScript5 и в Chrome 12 и 13 есть баги, которые мешают нормальной работе.

Read more: microGeek

Monday, May 30, 2011

Getting started with Script#

Script# is a powerful framework that allows us to write C# code and be automatically translated into JavaScript. This article will present how Script# works and in what way can increase our productivity and improve the maintenance of our client-side libraries. Script# is created by Nikhil Kothari

What is Script#
Script# is C# to JavaScript compiler. That means that you write C# code and this code gets translated into JavaScript. This process I happening at development time and not at runtime. So, when you finish authoring your scripts in C# a JavaScript file will be produced in the output folder that you can then reference inside your project.

NOTE
Script# is not a tool that will help you port your .NET application into JavaScript. Instead is a tool that will help you write JavaScript code you normally would write with C#.

Why Script#
Naturally the first question that pops in to your mind is why? Why someone would want to create another dependency to the project?
As I mention above Script# will help you deal with JavaScript code that you would normally write by hand. The output of Script# is a JavaScript file. That means that you haven't added any dependencies to your project. You had JavaScript files before Script#, you have JavaScript files after.
But, those files are auto-generated. Auto-Generated files are often bad-written. If I wanted to leave Script# behind me and go back to writing pure JavaScript could I edit those files?
Script# produces scripts that feel hand-written. This is handy in a situation where you want to manually edit those files or you want to debug those files client-side (ex: with Firebug)
Let's see our first example. We have a function that takes a string and creates and alert message. After this message is displayed and the user clicks OK a callback function a being executed.

private void ShowMessage(string message, Action callback)
{
    Script.Alert(message);
    callback();
}
function _showMessage(message, callback) {        
alert(message);
callback();
}

Read more: dot Net Slackers

Thursday, May 19, 2011

Node.js on Android

I'm trying to make the recently popular (well, maybe not so recently) Node.js run on Android. So far, I've succeeded in getting it to run on the ISO1, a smartphone running Android 1.6, but only by doing the following.

Here are the basic steps:

Root the IS01
Use qemu to build a Linux on an ARM environment
Use the ARM Linux environment to build Node.js
Copy the Node.js binary to the IS01


Rooting the IS01

This step requires root permissions on Android to get Node.js running, since we need to create a lib directory in which to place shared libraries.
To root the device quickly, we'll follow the directions in the MobileHackerz Blog: Getting Root Permissions for the au IS01, build 01.00.09(Japanese).
Following the directions there is an easy way to get root.

Things to watch out for:
Turn USB debugging on.
Settings => Applications => Development => USB debugging
Install ChainsDD Superuser.
Install it from the Android Market
Try repeatedly until it works.
Using qemu to build Linux on an ARM environment
Using qemu allows us to emulate an ARM CPU, and build a virtual environment. We'll install debian on qemu, and from there build Node.js. This will get us a Node.js binary that can run on an ARM processor.

Read more: AMT blog

netMonkey

Project Description

netMonkey is a .net wrapper around SpiderMonkey, Mozilla's javascript implementation.
It will let you embed javascript scripts in your app with ease.
It is written in C# 4 and will eventually run on both the .net framework and mono.
Features:

Run on .net framework and mono from any .net compliant language.
Call .net functions and use .net classes straight from javascript.
API looks like C# code as opposed to C code.

Read more: Codeplex

Wednesday, May 18, 2011

Sunday, May 01, 2011

Getting Started with Script#

At MIX11, I presented a session on Script# titled "Script#: Compiling C# to JavaScript" ... and I did a follow up blog post highlighting the key points from the presentation.
This blog post covers the Hello World demo, which will show how you can get started with script#, and deploy scripts authored using this approach. It doesn't go into more advanced topics, but hopefully it will also demonstrate a couple of key principles at play:
  • Script# doesn't introduce some new and odd abstractions. You're still very much authoring script against the DOM and standard APIs, and existing knowledge of web development carries forward.
  • The generated script is similar to script you might have authored directly, and can be distributed or deployed into a web application like any other script library, without a dependency on the compiler at runtime.
Script# enables you to leverage Visual Studio, C# syntax and existing familiar and robust set of .NET tools to scripting. In my MIX talk, I demonstrated some of this. In this post, you'll see some basic benefits such as intellisense and compile errors.

Creating a Script# Project
I am going to start with a solution that contains an ASP.NET Web Application (DemoWeb), which is going to contain my pages and scripts. I can of course deploy script#-generated scripts into any server application.

Next I am going to add a Script Library project, named DemoScript. This is a project template that gets installed into Visual Studio when you install script#. The project template creates a C# project, with a custom msbuild target that invokes the script# compiler msbuild task after the C# compiler is done with its part to produce an assembly.

Read more: nikhilk.net

Wednesday, April 27, 2011

What is difference between jQuery and Microsoft Ajax? When do you use Ajax and When do you use jQuery? What is the significance of each?

jQuery is like the ASP.NET AJAX Client Framework (MicrosoftAjax.js), with selectors, DOM selections/ manipulations, plug-ins, and better animation support.  jQuery is more powerful than MS AJAX on the client side due to its light weight nature .  This is the reason Microsoft integrated jQuery with Visual Studio. JQuery is integrated for post  VS versions 2008, no explicit download of jQuery file is required for the versions above VS2010.  
Ajax is a Technology for Asynchronous Data Transferring. AJAX is a technique to do an XMLHttpRequest  from a web page to the server and send or receive data to be used on the web page.
jQuery can be used
If you love and comfortable with JavaScript
Most interaction is client-side only
If a custom solution is required
For stunning look and feel of client side UI
If animations ,DOM Selection are required
Ajax can be used
If you are using ASP.NET & VS
When server side Integration is required.
If you need json and WCF Support

Tuesday, April 26, 2011

JSPP – Morph C++ Into Javascript

C++ has a new standard called C++0x (Wikipedia, Bjarne Stroustrup) that includes many interesting features such as Lambda, For Each, List Initialization ... Those features are so powerful that they allow to write C++ as if it was Javascript.
The goal of this project is to transform C++ into Javascript. We want to be able to copy & paste Javascript into C++ and be able to run it. While this is not 100% feasible, the result is quite amazing.
This is only a prototype. In about 600 lines of code we manage to make the core of the Javascript language.

Read more: Vjeux

Sunday, April 17, 2011

Create REST service with WCF and Consume using jQuery

What is REST ? 
Rest=Representational state transfer which is an architecture design to represent the resources. Rest provide the uniform interface through additional constraints around how to identify resources, how to manipulate resources through representations, and how to include metadata that make messages self-describing. Rest is not tied with any platform and technology but WEB is only platform which satisfy the all constrain. So any thing you build using Rest constrain, you do it on Web using HTTP. Following are the HTTP methods which are use full when creating Rest Services.

HTTP Mehtods
GET - Requests a specific representation of a resource
PUT - Create or update a ersoure with the supplied representation
DELETE - Deletes the specified resource
POST - Submits data to be processed by the identified resource
HEAD - Similar to GET but only retrieves headers and not the body
OPTIONS - Returns the methods supported by the identified resource

In this article I am going discuss how to design and consume REST web service using WCF framework of .net service. As Example I am going to create  REST service which create, update and select Employee. Now start following the steps given below.

Designing of the URI 
To designing Rest services you need to design URI, so for that you need to list out the resources that going to be exposed by the service.  As I am going to design Employee Create,updae and select service, so resource is
Employee
Now to be more specific towards the operation
List of Employees
A Employee by Id
Create Employee
Update Employee
Delete Employee 
For example service is hosted on on local IIS server  and URL to locate it is     
In below discussion I am going to design the URL presentation for each operation
List  Employees   
URL is to get list of all employee                
But there are no. of Employee in system and to apply filter on Employees   
Note : In above url get list of employee of the type specified {type} of url.         
To Get single Emplyee by using uniqid of Employee.    
Note : In above URL {EmployeesID} is get replaced by ID of Employee.          
Extension to above scenario, If want to get employee by using id with the type 
Create Employee 
          URL is to create employee is             

Read more: Codeproject

Script#: Compiling C# to JavaScript using Visual Studio

Script#, a C# to JavaScript compiler, brings the power of Visual Studio and .NET Tools to build a productive development model for creating, testing and managing applications using HTML, CSS and JavaScript along with popular frameworks such as jQuery. This session provides a hands-on look at using Script#, shares success stories and experiences from real-world use, along with a project road-map.

Read more: Channel9

Friday, April 08, 2011

Checking whether page is secure or not in ASP.NET or JavaScript

Recently in one the project we require to check whether page is secure or not as we are going to open a new popup window from that page and that why we need to pass https protocol if we have that page secure. I have search lots of things on internet and I have found following ways of finding whether page is secure or not in ASP.NET or JavaScript.

In ASP.NET There are two way of doing it. Either we can use current request to check whether it is secured or not or we can use server variables to check whether it it secure or not just like following.
HttpContext.Current.Request.IsSecureConnection
Here in above code If this returns true then Page is secured otherwise it is not Or you can use following server variable to check the protocol.

Request.ServerVariables["SERVER_PROTOCOL"];

Read more: DotNetJalps

Thursday, April 07, 2011

טיפ: איך לעבוד עם jQuery בתוך ויז’ואל סטודיו 2010

כדי לספק ממשק משתמש עשיר וחוויתי באפליקציות Web, קשה להמנע כיום משימוש בספריית JavaScript כלשהי. jQuery היא ספריית ה- JavaScript הפופולריות ביותר כיום, ואם עדיין לא יצא לכם להתנסות בה, כדאי שתציצו במדריך jQuery באתר וובמאסטר.
פוסטים קשורים שכדאי לקרוא:
NuGet – תשתית קוד פתוח לניהול ספריות ותוספות לאפליקציות Web
jQuery בגירסה 1.5.1 כעת תומך באינטרנט אקספלורר 9
מיקרוסופט תורמת קוד ל- jQuery (מנוע תבנית צד לקוח להצגת מידע)
הקבצים שכדאי להכיר
החל מ- Visual Studio 2010, כל פרוייקט Web חדש מכיל ספריית Scripts המכילה 3 קבצים של ספריית jQuery (נכון להיום בגירסא 1.4.1 ששוחררה לפני מספר חודשים).
image_2DD365D9.png

Read more: MSDN

Thursday, March 24, 2011

Silverlight Tip of the Day #15 – Communicating between JavaScript & Silverlight

Communicating between Javascript and Silverlight is, fortunately, relatively straight forward. The following sample demonstrates how to make the call both ways.

Calling Silverlight From Java script:
In the constructor of your Silverlight app, make a call to RegisterScriptableObject().This call essentially registers a managed object for scriptable access by JavaScript code. The first parameter is any key name you want to give. This key is referenced in your Javascript code when making the call to Silverlight.
Add the function you want called in your Silverlight code. You must prefix it with the [ScriptableMember] attribute.

In Javascript, you can now call directly into your Silverlight function. This can be done through the document object. From my example below:
document.getElementById("silverlightControl").Content.Page.UpdateText("Hello from Javascript!"); where “silverlightControl” is the ID of my Silverlight control.

Calling Javascript From Silverlight:

Javascript can be directly called via the HtmlPage.Window.Invoke() function.
Example for both:

Page.xaml:
namespace SilverlightApplication
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            HtmlPage.RegisterScriptableObject("Page", this);            
            HtmlPage.Window.Invoke("TalkToJavaScript", "Hello from Silverlight");
        }
        [ScriptableMember]
        public void UpdateText(string result)
        {
            myTextbox.Text = result;
        }
    }
}

Default.aspx:
<script type="text/javascript"> 
        function TalkToJavaScript( data)
        {
            alert("Message received from Silverlight: "+data);
            
            var control = document.getElementById("silverlightControl");            
            control.Content.Page.UpdateText("Hello from Javascript!");
        }    
</script>

Page.xaml:
<UserControl x:Class="SilverlightApplication7.Page"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock x:Name="myTextbox">Waiting for call...</TextBlock>
    </Grid>
</UserControl>

Friday, March 04, 2011

Basic JQuery Interview Questions

If you put jQuery in your CV, then beware, you should be able to answer following questions. Better you read on, and test yourself how much you can score.

1. What is jQuery & its significance? Why it is so popular?
2. What is jQuery UI?
3. What are various jQuery Features?
4. What do Dollar ($) sign significance in jQuery?
5. Does document.ready() function similar to onload()? (Or)Explain the importance of document.ready()?
6. How did you use jQuery in ASP.Net Application? Explain with an example?
7. Explain How jQuery Works?
8. What are the advantages using jQuery?
9. Do you prefer jQuery over JavaScript? Explain Why?

Read more: Beyond Relational

Jquery Grid in ASP.NET MVC application Part2

לפני כמה חודשים כתבתי פוסט על השימוש ב- Jquery Grid באפליקציות ASP.NET MVC מאז עברו מים (מעטים מדאי) בירדן וגיליתי שההתקנה קצת יותר מורכבת, בפוסט הנוכחי ריכזתי את כל שלבי ההתקנה בצורה מסודרת.
בהצלחה
שלב 1: התקנה
מכאן אפשר להוריד את ה – Plug in. כדאי להוריד את כל האפשרויות.
מתוך מחיצת ה – src יש להעתיק את כל קבצי ה – script וה – CSS לאפליקציה, ולבחור מתוך תיקיית ה - i18n את השפה איתה רוצים לעבוד
clip_image002_thumb_5124A6E8.jpg

כך נראה ה – Solution לאחר ההתקנה.

clip_image00211_thumb_377A3D70.jpg

בתוך ה – loader יש לשנות את הכתובת כך שהוא יטען את הקבצים

clip_image00213_thumb_2E00BD53.jpg

ב – MasterPage צריך לטעון את ה – Jquery, loader, JqModel ו – JqDnR.

clip_image00216_thumb_6E82BE28.jpg

Read more: Dovi Perla's Blog

Thursday, March 03, 2011

Sencha Touch

touch-hero.png
Built with Web Standards
Sencha Touch is the world's first app framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization. We make specific use of HTML5 to deliver components like audio and video, as well as a localStorage proxy for saving data offline. We have made extensive use of CSS3 in our stylesheets to provide the most robust styling layer possible.
Altogether, the entire library is under 120kb (gzipped and minified), and it's trivial to make that number even smaller by disabling unused components or styles.

The World’s Best Devices

Sencha Touch is a cross-platform framework aimed at next generation, touch enabled, devices. It's currently compatible with Apple iOS and Android devices, and very soon with RIM Blackberry 6 devices. Together these devices represent over 95% of current US mobile traffic. Android and Blackberry developers can also make use of special themes we've created just for those devices. With the ever-rising number of Android models and the widespread popularity of WebKit on mobile devices, we expect our supported device list to grow very rapidly.

Read more: Sencha Touch

Monday, February 14, 2011

jQuery Tutorial - Creating an Autocomplete Input Textbox

With jQuery 1.8 came a brand new widget - the autocomplete input field. If used correctly, like in the case of Google's search suggestions, autocomplete can provide a major boost in productivity. Today's tutorial is going to demonstrate how to build and populate one of these autocomplete inputs. We're going to make two identical examples that get their data from two different sources - one will be client-side and the other will be server-side using PHP.

The example dataset will include all of the presidents of the United States. As you begin typing, the input field will automatically popup with suggestions that match your query. Feel free to play with the example below. Some good examples would be "George Washington" or "Abraham Lincoln".

Client Side

The first example we'll build today will be entirely client-side. This is by far the easiest approach to take, but obviously the least powerful. The jQuery demo page for autocomplete has a very nice example that we're basically going to replicate with different data. Let's start with the html.

<html>
 <link type="text/css" rel="stylesheet" media="all"
      href="jquery-ui-1.8.9.custom.css" />
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
 <script type="text/javascript" src="presidents.js"></script>
 <body>
   <label for="presidentsClientInput">Select President (client-side): </label>
   <input id="presidentsClientInput" />
 </body>
</html>

Most of the code here is just getting jQuery included. The important part is the label and the input field. The input needs to have an id so we can reference it later and turn it into an autocomplete field.
Let's jump into the javascript now - the source of presidents.js. The first thing we need is a datasource, which should be a simple array of values. jQuery does the work of iterating through these values to find the ones that match the text already in the input field.

$(function() {
       var presidents = [
               "George Washington",
               "John Adams",
               "Thomas Jefferson",
               "James Madison",
               "James Monroe",
               "John Quincy Adams",
               "Andrew Jackson",
               "Martin Van Buren",
               "William Henry Harrison",
               "John Tyler",
               "James Knox Polk",
               "Zachary Taylor",
               "Millard Fillmore",
               "Franklin Pierce",

Read more: Switch on code