Dynamically obtaining a DIV's ID - (When the ID itself is set dynamically).

The Problem:

Given a list of elements, find the ID of the element that was clicked upon. The challenge was that the ID itself was generated dynamically.


The Solution:

As the ID is generated dynamically and must be unique, I noticed that it has a constant class attribute like "post" in  the below example. Then, one line of jQuery did the trick.

For example, the given statement was like this:

..
<div id="post_237" class="post">
..
</div>
<div id="post_238" class="post">
..
</div>

Note that the ID changes every time and I had to find the content of that DIV. But the CLASS "post" is constant. Thus, to find the ID, the corresponding jQuery statement is as follows:

var getID = $('.post').attr('id');

There you go, the variable getID now contains the ID of that dynamic element.

Invert and Mirror X and Y axis using CSS Transforms

To invert or mirror an element (text, image, etc.) you need to use the transform: scale property in CSS. You can choose to laterally (sideways) invert or vertically invert an element.

To invert laterally, use the following code:

transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);

To invert vertically:

transform: scale(1, -1);
-ms-transform: scale(1, -1);
-webkit-transform: scale(1, -1);

To invert both ways:

transform: scale(-1, -1);
-ms-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);

Creating and Saving Paths in Photoshop

When you create a path using a pen tool in Adobe Photoshop CS6, it appears as a work path in the Paths panel. Note that a work path is temporary and unsaved. Also, you can have only one work path at a time.

If the work path is selected when you begin another path, your actions are added to the current work path. If the existing work path is hidden and you begin drawing another path, that new work path replaces the existing one.

Make sure that your path is saved before you start creating it. If you select New Path from the Paths panel pop-up menu before you create the path, Photoshop saves the work path, and it becomes a saved path. You can also click the Create New Path icon at the bottom of the Paths panel.

To save a work path, double-click the path in the Paths panel. Or choose Save Path from the Paths panel pop-up menu. (Click the down arrow in the upper-right of the panel to open the menu.) Then, provide a name in the Save Path dialog box that appears and click OK. You can reuse the path again anytime you wish to.

Loading jQuery Mobile in a dynamic environment

I was writing an RSS feed application on PhoneGap powered by jQuery Mobile. I used the default accordion provided by jQM and it worked out well.

However, I encountered a problem that the style wasn't getting applied when the number of accordion isn't known during page load time. The styles weren't applied to the dynamic elements. Here are some of the highlights of the problem I was facing:

• It is a simple RSS feed reader application.
• The number of elements (RSS news items) are not known beforehand.
• The feed is read and parsed into the page only after the page gets loaded.
• The feed items have got no styles at all, as the jQM has already loaded and set the styles for all the static elements and the dynamic elements do not get their styles set by jQM.

Thus, the solution was that I had to somehow 'refresh' jQM alone so that the styles got applied after all the dynamic content is loaded. You need to refresh the DIV that has the dynamic content once it is loaded. 

Assuming your dynamic content is appended to this node:

<div id="loaded-content" data-role="collapsible-set"></div> 

you have to do:

$('.loaded-content').collapsibleset('refresh');

Thus, you now have the dynamic content's styles and behavior using jQuery Mobile. Is there a better way to do this? Do let me know!

Accordion Expand/Collapse all in jQuery Mobile

The default behavior of the Accordion in jQuery Mobile allows you to expand or collapse only one Accordion tab at a time. I came up with a code to expand/collapse all tabs at once.

HTML:

Hello 1
I'm the collapsible content. By default I'm closed, but you can click the header to open me.


Hello 2
I'm the collapsible content. By default I'm closed, but you can click the header to open me.


Hello 3
I'm the collapsible content. By default I'm closed, but you can click the header to open me.
Open All Collapsible
Close All Collapsible

And here is the jQuery Mobile code to achieve the effect. I assume that you have included all the necessary jQM files.

$('#openAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('expand');
    });
});
$('#closeAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('collapse'); 
    });
});

If you have a better way of doing this, let me know! :)

How to count the number of li (list elements) inside ul (unordered list) using Javascript

Yesterday, I was trying to count the number of list elements inside an unordered list. I came up with the following code:

var ul = document.getElementById("myul");
var liNodes = [];
 
for (var i = 0; i < ul.childNodes.length; i++) {
 if (ul.childNodes[i].nodeName == "LI") {
  liNodes.push(ul.childNodes[i]);
 }
}