TechnoBuzz

A Techno Blog, mainly about Java

FOUC! (Flash of Unstyled Content)

It occurs when applying styles with JavaScript on page load.

The problem is most evident when there is some content that needs to be hidden initially and when the document is large or complex.

< ul id=”flash” >

In the On Ready function , you would apply :

$ (‘#flash’).hide();

A whole lot of document that has to be ready before anything inside the ready() function can be executed.

Putting the tags just inside the closing  body tag doesn’t help either

http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

Advertisements

September 10, 2012 Posted by | Uncategorized | , | Leave a comment

JQueryUI Tab – The Uncola

Lets say you are using knockoutjs , so your tabs might look something like this in your form data.

< div id=”tabs” data-bind=”jqTabs: { fx: { opacity: ‘toggle’ } }”>
< ul>
{{each tabs}}
< ul>
< li>< a href=”#tab-${id}” data-bind=”click: function(event,ui) {$root.ClickedTab(event,ui);}”>${title}
< /li>< /ul>

Handling the screen interaction is what I am interested in.

Such as the Tab  events.  Getting what was selected .

The  JQueryUI tabs documentation  lists Methods , EventsOptions

For example, under methods,

tabsselect, tabsload, tabsadd

selected: Get or set the selected option, after init.-
var selected = $( ".selector" ).tabs( "option", "selected" );
$('#tabs').tabs("option", "selected")
$('#tabs').data()

$('#tabs').tabs({
        selected: selection.parent().index(),
    });
 

As well the live demos under contents feature information :

Events

A series of events fire when interacting with a tabs interface:

  • tabsselect, tabsload, tabsshow (in that order)
  • tabsadd, tabsremove
  • tabsenable, tabsdisable

Event binding example:

$('#example').bind('tabsselect', function(event, ui) {

    // Objects available in the function context:
    ui.tab     // anchor element of the selected (clicked) tab
    ui.panel   // element, that contains the selected/clicked tab contents
    ui.index   // zero-based index of the selected (clicked) tab

});

tab fiddle  , tab jsbin , tabs stackoverflow

August 15, 2012 Posted by | Uncategorized | , | Leave a comment

Knockout jQuery Binding and Visibility

Reading more on Knockout js

Here is the panel we will enable or disable:

< div id=”optionalPanel” style=”color: red;” data-bind=”visible:isEnabled”>The following is an example div</div>

Here we have a button that sends an event when it is clicked

< input type=”button” id=”Button1″ value=”My Button” data-bind=”event: { click:buttonEvent } ” /> 

Here is what the associated binding  (javascript) looks like:

function viewModel() {
   var self = this;

    myValues = ko.observableArray([]);

    this.isEnabled = ko.computed(function () {   return myValues().length > 0;  }    );

    // Here when er receive event we enable div tag by making size of myValues greater than zero

    buttonEvent = function (selectedSection, userAction) { myValues.push(“some value”);   };

};

//Must apply a model to bindings
ko.applyBindings(new viewModel());

The documentation for this example (also an example with booleans).

Likewise, here is an example of using anonymous function in html to reference the javscript bindings.

A  dropdown  binding example

More binding techniques

Site point series : 1 2 3

special comments for “if” binding

select list  example (i.e. picklist) , alternate select list example

July 21, 2012 Posted by | Uncategorized | , | Leave a comment

Knockout jQuery

In the GWT ecosystem , the Model View Presenter (MVP) pattern is the architecture of choice. However, the model requires some special capabilities when  dealing with the state (i.e. what the user did should force some special visibility rules).

In MVP the model typically refers to just the domain objects that will be displayed, things like a Customer, Contact or Account. From a Presentation Model perspective the term model encompasses the domain data plus all additional state that can change during the normal operation of the UI.

Likewise, pure javascript libraries have to deal with these type of issues too. They have a name for the MVP + (Editors/Pectin) pattern.  Its called MVVM.

Model–View-ViewModel talks of creating a new model (in addition to your domain model). This model normally adds additonal properties from the prespective of View (as we understand that View has controls in addition to data which it’s displaying).

Knockout  handles data binding :  “Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes)”.

A simple example always explains it best.

The ViewModel can be considered a specialized Controller that acts as a data converter. It changes Model information into View information, passing commands from the View to the Model.

For example, let us imagine that we have a model containing a date attribute in unix format (e.g 1333832407). Rather than our models being aware of a user’s view of the date (e.g 04/07/2012 @ 5:00pm), where it would be necessary to convert the address to it’s display format, our model simply holds the raw format of the data. Our View contains the formatted date and our ViewModel acts as a middle-man between the two.

KnockoutJS interprets the ViewModel as the represtation of data and operations that can be performed on a UI. 

Another simple example with code.

The intent of Knockout and other MVVM framework offerings is to move those conditional logic statements into the ViewModel and let the ViewModel be the sole source of the business logic

more: http://learn.knockoutjs.com/#/?tutorial=intro

July 18, 2012 Posted by | Uncategorized | , | Leave a comment

From Sencha to jQuery

After learning alot about EXTJS, it makes sense to get familiar with jQuery. If you have 15 minutes, this is a good overview. Similarly, try this slide share too as it provides good explanations.  As well, there is a jQuery fundamentals, an  online book or  jQuery in Action. As the first chapter says :

If you’ve spent any time at all trying to add dynamic functionality to your pages, you’ve found that you’re constantly following a pattern of selecting an element or group of elements and operating upon those elements in some fashion. You could be hiding or revealing the elements, adding a CSS class to them, animating them, or modifying their attributes.

This javascript library make it easier to accomplish these routine blocks of code in your client code.
To collect a group of elements, we use the simple syntax:

$(selector)
or
jQuery(selector)

The $ () function (an alias for the jQuery() function)  returns a special javascript object containing an array of DOM elements (known as the wrapped set or wrapper)  that match the selector.

Then, jQuery provides methods (or sometimes known as commands or actions) that can act on the group of elements. Some of these actions when completed return the same set of elements that can then again be acted on (known as chaining).

jQuery. or $. is the notation for utility functions.

15 days of jQuery

Selectors

Dimensions

Traversing

Maniplulation

Utilities

Events , Event Object

Ajax

July 14, 2012 Posted by | Uncategorized | , | 1 Comment

jQuery basics

I am in the process of learning about jQuery. I have used some dojo, and recently most my work on client side has been in GWT . I figured the best place to start is in a slide share.  As well, there is a jQuery fundamentals, an  online book.  jQuery in Action is also online. As the first chapter says :

If you’ve spent any time at all trying to add dynamic functionality to your pages, you’ve found that you’re constantly following a pattern of selecting an element or group of elements and operating upon those elements in some fashion. You could be hiding or revealing the elements, adding a CSS class to them, animating them, or modifying their attributes.

This javascript library make it easier to accomplish these routine blocks of code in your client code.
To collect a group of elements, we use the simple syntax:

$(selector)
or
jQuery(selector)

Known as a wrapper or a wrapped set.

September 6, 2010 Posted by | Uncategorized, Web Design | | Leave a comment