Wait for end of resize event (jQuery)

ref – https://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac?noredirect=1

Number of Lines

github source

What does it do

Calculate how many lines are there when you put a long string into a div/span that has a width.

Getting Started

First, let’s set it up. We create a div with id para. We limit it to 68px so we can see the effects of the word break.

html

js

Getting the width of a string involves first putting test text into your div #para. Then,

1) We need to the get element object of #para first. It will contain all the information you need about this element object. We will be using it in the next step to get font and font size info.

2) By using the global window object, we use getComputedStyle of an element object to get style information such as font-size, font-family, background-color…etc.
We do this by calling getPropertyValue on the style object that’s returned. We specify which style attribute we want to get by inserting the style name.

3) then the font size

4) Using JQuery, create a span in your DOM.
Using jQuery, insert your text, apply the font and font size, and call width on it.
It will give you the pixel width on it.

The $.fn is an alias for jQuery.prototype which allows you to extend jQuery with your own functions.
We create our own function textWidth. It takes a paragraph, font, and a fontSize. Then it returns you
the width in pixels.

We first check to see if there’s a property placeholderEl. If it doesn’t exist, we attach the property
to our function. We then create a span element object and append it to the document’s body. We attach the
property placeholderEl to that span object.

We then insert the text into the span, and apply the font and font size to the text using css function.
then we call width on the span object to get the pixel.

thus, so far, you should have something like this in your JS file:

Logic

Now that we can get an accurate width of a paragraph with applied font, let’s take a look at how we’re going to tackle the issue.
note: limit means the end of the width.

A) no-space long word past limit

In the first basic situation, the long word will stay as is. This is because the browser do not break a word. It will only break a sentence, when it detects a space, but will never break a word in half.

B) long word past limit, then space

The second situation is that our long word goes past the limit. Then it has a space. In this case, we have two parts.
– The string left of the space.
– The string right of the space.

The right part of the space then gets broken and starts at the next line. The space is the last character of the first line.

C) long word past limit, with a previous space

When we reach the limit, but there was a previous space. Thus, we have two parts again.
– The string left of the space.
– The string right of the space.

The string to the right of the space gets broken and start at line two. The string left of the space, remains at line 1.

D) long word past limit, with previous multiple spaces

Sometimes, there will be multiple spaces previously. So when we hit the limit, how do we break it? The answer is that we find the last space. We don’t care any previous spaces. All we care about is the last space because we need to see how to break the substring that just went past the limit.

Implementation

We’ll do this in es5.

We first create a function to be new-ed later. It will contain the object’s property and data. We need the basic things such as:
– text (string)
– the width function we’re going to use to calculate string widths on the browser (function)
– font (string)
– fontSize (string)

We also pass in the div element’s id so that we can get the width.

Then, let’s implement a function in the prototype so that all instances will use it.

We can easily get the width of the text by using our textWidth function. However, when you use space ‘ ‘, you’ll get 0. So we do a workaround by giving the strings ‘a’. Then a space a, (‘a a’). That way, we know the width of a. And then, can calculate the width of space.

We calculate the width of the string. If the string is a space, then we simply give it the width of space, which we pass in.
However, if not a space, then we calculate it by passing our text, our font, and font size. We then pass the result into a callback to be processed by others.

The Logic

Given a long text, we run through each character.

1) get width of the char
2) append the width onto a total width.

For every add of a width, we check to see if our total text has passed the limit.

Thus,

using our prototype function getCharWidth. Also, notice “holder”. Holder basically holds the added character so far.
Another thing to notice is that there is a bool to check to see if a previous space exist.

The key is to check for situations when we hit past the limit.
If after passing the limit, and we detect a space, then we gotta save the left side of the string.

In order to do this, we use a ‘holder’ string to hold everything. Also, notice we have calculated the width of the space also.

– passed the limit
– no previous space was detected
– current char is a space

Thus, we save the everything that was held up to now. But where do we save it to?

We simply save it into an array that will represent the formatting of our paragraph.
First sentence is array[0], second array[1]…etc.

Thus, in our constructor function:

now..back to our calcNumOfLines.

where

Basically, if we pass the limit, but no space is found, we just save it. This will satisfy A).
As each additional character is processed, and we find that the current processed character is a space (assuming no previous space), then we simply store it.
This resolves B).

else if we’re past the limit and the character is NOT a space, and there was a previous space, then we resolve cases
C) and D)

full source
https://github.com/redmacdev1988/NumberOfLines

jQuery lazy loading

Loading the library

Targeting it…and callbacks

Specifying the images

Since your jQuery targets class lazy, we must use lazy for classes on img and div tags.
You use data-src to specify the location of the images.

Note that for img tags, when the images load, it will change to data-src will change to src.
However, if you were to use div, data-src will change to background-image: url(….) .

add header in ajax request using jQuery

ref – http://stackoverflow.com/questions/10093053/add-header-in-ajax-request-with-jquery

Here is an example how to set a Request Header in a JQuery Ajax Call:

in another example,

async to true/false

You set async to false, when you need that ajax request to be completed before the browser passes to other codes:

Does it have something to do with preventing other events on the page from firing?

Yes.

Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called. If you set async: true then that statement will begin it’s execution and the next statement will be called regardless of whether the async statement has completed yet.

retrieve data through ajax

In order to retrieve data via ajax, we give it some parameter data like requestId, andn telNum, then it will return a data through a data parameter. In our case, it is data.

Send html data via jQuery and AJAX to JSON url

You got whole bunch of data in textboxes and combo boxes. You retrieve those data by their id using jQuery like so:

Once you get these data…you pass it into ajax’s data parameter and you’re basically done:

single click on datagrid

This is how you detect single click on datagrids using easyui:

or

get text inside of a td, span, div…etc

If you want to click on a piece of html text inside a td, span, div, p…etc, you’d use jQuery’s on method: