jQuery – Animation on Visibility

Next: jQuery – Using animate() with fadeIn() or fadeOut() at the same time

We can hide and show any HTML elements by the fadeIn() and fadeOut() jQuery functions. Those elements will be set to display: none in CSS. Unlike setting visibility: hidden which the hidden element will still occupied some spaces in the rendered web page, the faded out element will disappear.

So if you want to have the fadeIn and fadeOut features while keeping the elements in the webpage, here is what you could do.
Continue reading jQuery – Animation on Visibility

Drupal 7 – Create a URL which display the latest node of a specific content type

I want to create a URL which will redirect to the latest node of a specific content type so i write a custom module. In this example, the content type car is used.

latest_car.info

name = Latest car
description = Create a URL which will redirect to the latest car node.
package = Eureka;
version = 7.x-1.0
core = 7.x

Continue reading Drupal 7 – Create a URL which display the latest node of a specific content type

Drupal 7 – Set Query Strings in the path for form_state[‘redirect’]

Previously we talked about adding query strings for drupal_goto().
Drupal – Escape the Hex Characters in drupal_goto()

When the form is submitted, we can decide the redirect path in the form_submit() function.
Redirect to node/1 after form submission

function <form id>_submit($form, &$form_state) {
  $form_state['redirect'] = 'node/1'
}

 
Continue reading Drupal 7 – Set Query Strings in the path for form_state[‘redirect’]

CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

Text rotation can be done by CSS3 3D Transforms. But after the transform the text is aliased. For WebKit browser, the anti-aliasing feature could be enabled by adding the following CSS style.

  * {
    -webkit-transform: translate3d(0,0,0);
  }

Continue reading CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

CSS3 – Text Rotation by 3D Transforms

Next: CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

We can rotate text by using the CSS3 transform.

To rotate a text in clockwise direction with 45 degree:

p {
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* IE 9 */
  -o-transform: rotate(45deg);      /* Opera */
  transform:rotate(7deg);
}

 
Continue reading CSS3 – Text Rotation by 3D Transforms

Drupal 7 – Add the latest jQuery on your Drupal 7 without conflicts

A few months ago, i tried to add the latest jQuery to a Drupal 6 website. If you are still working on Drupal 6. Please refer to Drupal – Add Extra jQuery Library.

The approach we used in the above post does not work in Drupal 7 since drupal_set_html_head() has been renamed to drupal_add_html_head() and inline Javascript is no longer supported in this new version. So today i would like to show you another solution which works in Drupal 7.
Continue reading Drupal 7 – Add the latest jQuery on your Drupal 7 without conflicts

Drupal 7 – Order EntityFieldQuery by random using hook_query_TAG_alter()

The EntityFieldQuery does not support any method to select the entities by random. A simple workaround is using the query tag and implement the hook_query_TAG_alter().

Add addTag() in your EntityFieldQuery object.

$query = new EntityFieldQuery();
$query->entityCondition('entity_type', 'node')
  ->entityCondition('bundle', '<node type>')
  ->propertyCondition('status', 1)
  ->addTag('random')
  ->range(0, 1);

Continue reading Drupal 7 – Order EntityFieldQuery by random using hook_query_TAG_alter()

Dream BIG and go for it =)