Here goes a great Javascript gallery I found today. The gallery was created with JQUERY and the plugin GALLERIA. It’s a very light and handy gallery that uses CSS for the layout and scales your images to create the thumbnails and all the images are loaded in the background. Very usefull, hope you enjoy…

Demo 1: http://devkick.com/lab/galleria/demo_01.htm#img/grass-blades.jpg
Demo 2: http://devkick.com/lab/galleria/demo_02.htm
Details and instructions on how to apply it: http://devkick.com/lab/galleria/

The new demo site with an example of the type of project information that can be easily built up is available to see at http://79.170.43.15/visualhistory.org.uk/googlemaps/jqmap/click-and-pop.html  .  The visual with markers is shown in the first image.  

By clicking on the markers a pop-up screen appears with limited detail (including a thumbnail image) of the point that is being illustrated.  This links to more detail in a separate web page opened in a new window.

Articolo molto ben fatto di  Matteo Casati di Aspitalia.

http://www.aspitalia.com/articoli/asp.net/javascript-jquery-overview.aspx

Sei que existem muitos “modais” na internet feito com diversos frameworks de javascript e/ou CSS mas hoje trago um modal que chamou muito minha atenção por sua agilidade e compatibilidade com diversos tipos de arquivos a serem abertos nele.

O TopUp é construído com jQuery / jQuery UI & pode exibir imagens, vídeos, páginas web ou qualquer conteúdo HTML.

As imagens utilizadas no interior (backgrounds, botões, etc) são exibidos com sprites CSS, assim haverá menos pedidos durante o carregamento assim evitando sobrecarga de objetos na pagina e tambem diminuindo a banda consumida do site.

É possível trabalhar com requisições Ajax e os efeitos ao exibir a janela modal ou de transição de conteúdo pode ser personalizado.

• Requisitos: jQuery, jQuery UI
• Compatibilidade: todos os principais navegadores
• Website: http://gettopup.com/
• Demo: http://gettopup.com/demo

João Lucas Palácio Soares -

Estudante de Bach. Ciências da Computação e apaixonado pela programação WEB. Estagiário atualmentte da LuzPrópria Soluções WEB – há 8 meses – trabalhando nas áreas de SEO, Desenvolvimento e analista.

I’ve done creating my first jQuery plugin

the plugin will perform the inline edit task to update database record via AJAX

I’ve sent it to nettuts+ , we will see if my tutorial will be posted soon there

Parse XML with jQuery without a plugin

Jgfeed es un plugin para jquery que nos permite leer fuentes RSS devolviendonos los feed (entradas) en formato JSON.

Jgfeed utliza la API AJAX de Google para feeds para obtener las entradas de una fuente RSS y devolvernos una estructura JSON de una forma sencilla y optima que nos permitira incluir contenido sindicado en nuestras páginas de forma fácil. Ademas podemos utlizar Jgfeed con otros plugins de jquery para conseguir unas interficies de usuario al estilo Google Reader .

Ejemplo de implementación de jgfeed

$.jGFeed('http://yokese.wordpress.com/feed/rss/',
function(feeds){
  // revisamos que no haya errores
  if(!feeds){
    // si se ha encontrado un error salimos de la función
    return false;
  }
  // recorremos los feeds y mostramos la información deseada
 for(var i=0; i < feeds.entries.length ; i++){
    var entry = feeds.entries[i];
    // titulo de la entrada
    entry.title;
  }
}, 10); // 10 son el numero de entradas a devolver por el rss

Campos de la estructura JSON que devuelve jgFeed

Argumentos que puede recibir el constructor de jgfeed

Updating the following script with this one. 1st script check/uncheck all checkbox in gridview , and the second script give user alert message prior to save if not checkbox is selected.

function SelectAllCheckboxes(chk) {
$('#').find("input:checkbox").each(function() {
if (this != chk) {
this.checked = chk.checked;
}
});
}
function CheckBeforeSave(chk) {
var checkFound = 0
var ddText = $('#').val();
$('#').find("input:checkbox").each(function() {
if (this != chk) {
// this.checked = chk.checked;
if (this.checked == true)
checkFound = 1;
}
});
// alert($('#').val());
//alert(checkFound);
if ((checkFound == 1) && (ddText != 0))
return true;
else
return false;
}

This code section has an older version of code which might be helpful in some case, see my facebook blog for the old code using the same title.

For details on the upcoming Sparklines online workshop, see the end of this article, or click here.

Edward Tufte, who coined the term “sparklines”, describes them as “data-intense, design-simple, word-sized graphics.”
While traditional charts aggregate information from a full list, and are set off the flow of text, a sparkline pictures an individual item, and is directly embedded in the list.
You’ll find a good introduction to sparklines on this page from BonaVista.

The most common type is a line graph (hence the name), like in this screenshot from Google Finance. But sparklines come in various other shapes, as you can see from the (jQuery) samples on this page.

For example, you’ll use:
- line and bar graphs to track data against time
- progress bar or bullet chart to assess data against thresholds or objectives
- pies for categories (e.g. region, product line)
- discrete charts for status (project phases, game results)

Sparklines apply to many situations:
- enterprise dashboards (revenue, expenses, market share, all within one list)
- healthcare (patient stats)
- education (attendance rate, success rate)
- project management (issues resolution, costs)
- products/services dashboard (sales, support calls)
- transportation (passenger traffic, delayed flights)
- sports and games (won, lost or drawn)
- website stats: pageviews, visitors (cf. Google Analytics)
- baby name trends for a given year
- etc.

Sparklines can also be placed on supports other than lists, like maps, although I find this more difficult to read. Here is an example with the New-York subway.

How about SharePoint?

I already published last year a tutorial showing how to include Google sparklines in SharePoint lists. The Google approach is very convenient, but has its downside. First, in your corporate environment, you may not have access to the Google charts website. Then, even if you can access it, you may not like the idea that your data goes public, as you send it on the Internet to get the charts in return. If so, you’ll have to find an in-house solution to build your sparklines.
In a couple days, I’ll publish a tutorial to explain how to I created simple, homemade graphs for SharePoint lists (see screenshot below).

If you are wondering how I built the pie charts, check out this picture for a clue. More details after Thanksgiving…

To apply the tutorials, you’ll need to know about the “HTML Calculated Column”. For a refresher on this method, start with the post I published last week, and follow the links.

The above bar graphs and pies are basic solutions, but their great advantage is that they don’t have any external dependency.

If you are looking for more advanced charting capabilities, check out Gareth Watts’ sparklines plugin for jQuery. Back in March, I showed an example combining this plugin with SharePoint.

Inline charts are the central theme of our upcoming live online SharePoint workshop, scheduled on December 2nd at 1 pm (EST). Mark Miller and I will guide you through the steps to implement these customizations. Like for the other workshops, you’ll receive a SharePoint sandbox, where you can directly try out the solutions.

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig. jQuery is free, open source software Dual-licensed under the MIT License and the GNU General Public License.

[category jquery, web development, web design]

We may not provided you JQuery scripts in this blog. But we can share excellent reference URLs to you.

http://remysharp.com/visual-jquery/
http://viralpatel.net/blogs/category/javascript/jquery
http://malsup.com/jquery/form/#ajaxSubmit
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

Today I released v0.4.6 of my jQuery Library for SharePoint Web Services.  This version was fun to work on because I’ve got quite a few people out there in the world (California, North Carolina, Sweden) using the library actively, so we were able to work together pretty much real time to get enhancements and bug fixes into the library together.  This was also the first release where I decided to keep a current alpha version posted on Codeplex while I was doing the work.  This was rewarding because there was a real feedback loop going on.  I think this is a better way to go in the future, so watch for more alpha versions you can kick the tires on for me (actually for all of us).

This release has two really nice enhancements:

• SPCascadeDropdowns now works with multi-select child columns. This was the most requested enhancements over the last few months, and to be honest I dragged my feet on it.  The controls that SharePoint uses for multi-select choices are just plain complicated.  There’s also a whole pile of JavaScript which sites behind it all (groupeditempicker.js) that took some time to dig through.  The good news is that I was able to take advantage of those “native” JavaScript functions and write less of my own code.

• Both SPCascadeDropdowns and SPDisplayRelatedInfo now have a new CAMLQuery option which allows you to specify additional filters on the relationshipList.  You specify this as an additional CAML fragment which is then <And>ed with the filters which the library uses to grab the allowable values.  For example, the CAMLQuery option can contain a CAML fragment like:

CAMLQuery: "<Gt><FieldRef Name='ID'/><Value Type='Counter'>1</Value></Gt>"

or

CAMLQuery: "<Eq><FieldRef Name='Status'/><Value Type='Text'>Active</Value></Eq>"

Additionally, the $().SPServices.SPCascadeDropdowns and $().SPServices.SPSPDisplayRelatedInfo functions are now *much* more efficient.  As part of the refactoring I did in v0.4.5, there were some unnecessary Web Services calls happening.  With this efficiency change, there are no unneeded calls, so the dropdowns ought to behave almost as fast as they would without the functions sitting behind them.Of course there are some bug fixes as well.

Introduction

JQuery is a Java script libarary/ Java Script framework that simplifies the interaction process or access process of traversing in HTML document. It provides methods to make animations, add ajax interaction to the page, provides an easy way to apply CSS to any items and provides an easy mechanism for binding and unbinding events. Huge code written using Java script can easily replaced by few lines of code in JQuery.

History of JQuery

Initially it’s was released in January 2006 but the very first stable version of JQuery 1.0 was released in August 2006. This version had support for CSS, events and Ajax. After that many version of JQuery were released but the latest version is JQuery 1.3.2. You can download this from JQuery website.

What can be done using JQuery

1. Allows to access elements in the document

If one need to access the DOM tree without any JavaScript libarary, one has to write many lines of code. JQuery provides a selector mechanism to access any part of DOM.

2. Easily apply CSS

As it’s known that CSS is the most powerful and mostly used for good appreance of any webpage. JQuery provides CSS Selectors which allows to change the CSS classes or individual style for any portion of the document. This can be done even after the page is rendered.

3. Make Animation

For better user experience, animation can do the job for you. JQuery provides many methods to perform animations like show,hide, fade, wipe, start, stop etc. Doing all this with JQuery is fun as No huge lines of code, no complex logic.

4. Ajax Interaction

In today’s world, Ajax is one of the most popular technology used in almost every website for better user experience. Jquery provides support for ajax also which allows to access server side event without refreshing the web page.

5. API to change document’s content

JQuery provides API (Application Program Interface) which allows to change the content of the document. Changing Text, inserting images, ordering of list can be done with few keystrokes with JQuery API. Entire structure of HTML can be rewritten or extended.

6. Event handling

Any technology is a failure if it cannot responsed to the user when any event takes place. Jquerys’s event handling is one the decent feature. It quickly responsed to any event such as user clicking a button.

Demo

To start with JQuery, first download the Jquery from it’s official website (http://JQuery.com). Make sure you download the latest copy of the JQuery.

<script src="Script/jquery.js" type="text/javascript"></script>

I have copied the jquery.js and placed it in script directory of the project. In this demo, I am going to show you how easily you can change the CSS and do animation.

Let’s first take a look at HTML

<h2>
History of JQuery</h2>
<div id="content">
Initially it's was released in January 2006 but the very first stable version of JQuery 1.0 was released in August 2006. This version had support for CSS,events and Ajax. After that many version of JQuery were released but the latest version is JQuery 1.3.2. You can download this from JQuery website.
</div>

As you can see, I have placed a div tag with it’s ID set to content. Now, I will show you how you can find the div and apply CSS to it using JQuery.

<style type="text/css">
    .ApplyColor
        {
            background-color: Gray;
            font-family: Arial;
            font-size: 10pt;
            color: White;
        }
    h2
        {
            font-size: 20pt;
        }
</style>

<script type="text/javascript" language="javascript">

    $(document).ready(function() {
        $('#content').addClass('ApplyColor');
    });
</script>

.ready() is a jQuery event handler. This particular event handler will execute when the document is ready to be accessed and scripts have completed loading. A .ready() handler can be placed anywhere on the page and you can even have multiple ready handlers in the page.

Now, if you run this page, you will see the div with content id is having gray background and white color foreground.

Let’s go to the animation part with JQuery.

Place a button and some text in Paragraph tag. Using JQuery, I will add a click event handler.

<asp:Button ID="btnShow" runat="server" Text="Show" />
<p style="display: none;background-color:Red">
    Hello
</p>

Now add this Jquery code to document.ready event

<script type="text/javascript" language="javascript">

    $(document).ready(function() {
        $('#btnShow').click(function() {
              $("p").show("");
              return false;
        });
    });

</script>

Above code will find the btnshow and add a click event handler to it. When the button is click then Jquery will find the p tag and make a call to show function which will display the content of the p tag on the screen.

Like wise there are many more functions for animation. You can find the whole list over here.

Reference

 

http://jquery.com/

Conclusion

This is just an overview of starting with Jquery. Many more complex things can be done via jquery with ease. Go to this main page of Jquery and learn as much as you can.

Happy Programming…

Virendra Dugar

In the new release of .NET 4, the WCF team has added support for JSONP.  There are many resource out on the internet about the need for JSONP, if you are reading this article I’m assuming your familar with the concept of JSONP.  Essentially, JSONP utilitzes the <script /> tag as a work around to the cross domain access limitations of web browsers.  This new feature is exposed as an CrossDomainScriptAccessEnabled setting on the WebHttpBinding, and as such is configurable through code or through configuration.

Download

The full source code is available for download from my website

• JsonpWithWcfAndJquery.zip (46kb)

This code requires the latest download of .NET 4 Beta 2 with Visual Studio 2010

Example

In this example we are returning a list of sample customers.  In a standard JSON service using the WebHttpBinding you would recieve this result:

http://localhost:65025/CustomersService.svc/GetCustomers

[{"Email":"bob@example.com","Name":"Bob"},
{"Email":"mark@example.com","Name":"Mark"},
{"Email":"john@example.com","Name":"John"}]

Now using the same service you can supply the optional callback parameter like this http://localhost:65025/CustomersService.svc/GetCustomers?callback=JsonpCallback, which would return the results as the first argument to a function call with a name equal to the one supplied in the query parameter.

JsonpCallback([{"Email":"bob@example.com","Name":"Bob"},
{"Email":"mark@example.com","Name":"Mark"},
{"Email":"john@example.com","Name":"John"}])

So, if you have a javascript function setup on the page, the function will be called successfully without violating the cross-site scripting exceptions.

function JsonpCallback(customers) {
     alert(cutomers.length);
}

WCF Service with CrossDomainScriptAccessEnabled

Creating the WCF Service with CrossDomainScriptAccessEnabled is the same as it would be for any other web enabled WCF service.  In our example we are exposing a simple CustomersService

[ServiceContract]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class CustomersService
{
    [OperationContract]
    [WebGet(ResponseFormat = WebMessageFormat.Json)]
    public List GetCustomers()
    {
        return Customer.GetSampleData().ToList();
    }
}

The new JSONP feature is exposed via the WebHttpBinding.  The configuration for the CustomersService would looks like this:

<system.serviceModel>
  <behaviors>
    <endpointBehaviors>
      <behavior name="webHttpBehavior">
        <webHttp />
      </behavior>
    </endpointBehaviors>
  </behaviors>
  <bindings>
    <webHttpBinding>
      <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
    </webHttpBinding>
  </bindings>
  <services>
    <service name="ServiceSite.CustomersService">
      <endpoint address="" binding="webHttpBinding"
                bindingConfiguration="webHttpBindingWithJsonP"
                contract="ServiceSite.CustomersService"
                behaviorConfiguration="webHttpBehavior"/>
    </service>
  </services>
</system.serviceModel>

Notice that we’ve created a new bindingConfiguration for webHttpBindingWithJsonP, in this new binding configuration we’ve set the new property of crossDomainScriptAccessEnabled to true.  This enables the new callback parameter and under the covers attaches the JavascriptCallbackMessageInspector.  I’ve choosen to explicitly setup my binding configuration, but it should be noted that .NET 4 has created default configuration features, a sample of this is available for download with the WCF Samples for .NET 4 Beta2.

Consuming JSONP with jQuery

Now, consuming this JSONP endpoint with jQuery couldn’t be easier.  jQuery ships with an ajax convinence function called getJSON that accepts a url, data, and a callback function.  In the url property you can provide a ? following a query parameter and the ajax function will replace it with a dynamic function to handle the JSONP callback.  With that being said this is what the code to access the customers would look like.

// Get the JsonP data
$.getJSON('http://localhost:65025/CustomersService.svc/GetCustomers?callback=?', null, function (customers) {
    alert('Received ' + customers.length + ' Customers');
});

Conclusion

Many of the code samples above use an abridged version of the code in the sample, so for more detail you should download the source code above.  Additionally this article and samples are based on the .NET 4 Beta 2 product.  I’ll do my best to update the code and ensure everything is in order with the official release.

The fiber optics connections to Asia(Seacom and TEAMS) finally arrived in Kenya. Question is, what technologies are used by the websites that receive the highest hits? I decided to do some digging, and here is a quick snapshot of the results based on Alexa:

Clearly, PHP currently rules on the server side, possibly because of its cost implications and the availability of quality CMS with which it easily integrates. I expect to see more of ASP and Ruby based sites as the developer community grows.

Exploitation of available Javascript utilities is limited, with jQuery and Mootools being used to add a few effects for the menus. I would expect more sites to have AJAX to enrich the user experience using such libraries as Ext Js or even Prototype.js.

As far as the duel between Adobe Flex and Microsoft Silverlight is concerned, no front runners have emerged so far.

Most of you might already be aware of the paradigm shift problem in ajax apps in terms of the browser back button not working out of the box.

The problem and some of the generic solutions to it is described in more detail in the following articles. Suffice is to say that by integrating ergonomic display features such as back and forward navigation, we can make it simpler and more intuitive for the end user to immerse into the richer internet applications (RIA) that we can now create:

Fixing the Back Button and Enabling Bookmarking for AJAX Apps

AJAX: How to Handle Bookmarks and Back Buttons, Advanced Example

Fixing the back button that AJAX broke

AJAX: How to Handle Bookmarks and Back Buttons

How to build a cross-browser history management system

Now here’s Microsoft’s effort in solving the problem with the help of ASP.NET AJAX library:

Enable Back button support in ASP.NET AJAX web sites – This is a server-centric solution that gets translated into client side history management code.

Managing browser history from client script

ASP.NET AJAX History Part 2: Client-Side

AJAX History and ASP.NET AJAX Preview 3

Client History Points in ASP.NET 3.5 Extensions

The link below is a Yahoo Developer Network effort in attending the issue:

YUI 2: Browser History Manager

Now onto the implementations by my most favorite JavaScript library (I would love to call it a Framework someday soon!) jQuery. There are tons of jQuery plugins that do this. All but one of them below uses address mangling technique in the form of page.aspx#5 to solve the problem. There are pros and cons for both the techniques as explicitly assigning mangled address like that helps in bookmarking. Whereas, if you don’t want to show the values you want to store in the history to the user, then hidden iframe technique below comes in handy:

jQuery BBQ: Back Button & Query Library

History/Remote – jQuery plugin solution for hijaxing links and enabling history

Restoring conventional page navigation to your javascript application with jQuery history plugin

jQuery History Plugin – Uses hidden iframe technique so that the address is not mangled with hash.

jQuery Address – Deep linking plugin – Supports Deep linking

History plugin

jHistory plugin

Here’s a useful and as yet undocumented feature of jQuery’s attribute selector, the contains word feature – here’s how it works:

suppose you want to select a series of elements based on a class or rel or whatever. In this case I want to select all the links with the class .mylinks – but only those with the rel containing ’something’:

<a href=”#” rel=”something else”>this is a link</a>
<a href=”#” rel=”thething other”>this is a link</a>
<a href=”#” rel=”something more”>this is a link</a>
<a href=”#” rel=”something up”>this is a link</a>
<a href=”#” rel=”nothing down”>this is a link</a>

<script type=”text/javascript” charset=”utf-8″>
$(function() {
//contains word
$(‘.mylinks[rel~=something]‘).addClass(‘foundyou’); //note the important selector: ~=
});
</script>