Eureka!

名言五十

ykyuen — Sat, 26 May 2012 04:00:46 +0000

The world is a dangerous place to live; not because of the people who are evil, but because of the people who don’t do anything about it.

Albert Einstein

The following quote is the chinese version with similar meaning.

知識分子應該對世界上任何不合理的現象表示自己的態度, 否則你就是幫兇。

愛因斯坦

Filed under: Philosophy Tagged: Albert Einstein, Dictum

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

ykyuen — Fri, 25 May 2012 04:00:40 +0000

We know the difference between display: none and visibility: hidden as we talked about it previously.
jQuery – Animation on Visibility

The fadeIn() and fadeOut() jQuery functions are very convenient to use but they does not allow us to add animation during the fadeIn and fadeOut process. So we have to do it with a slightly different way.

Initially we have a hidden div.

#show-me {
  visibility: hidden;
  opacity: 0.0;
  position: relative;
}

And then we have a jQuery script which show the hidden element and the text will move from the left to the right during the fadeIn process.

$(document).ready(function() {
  $('#show-me')
    .css('visibility', 'visible')
    .animate({opacity: 1.0, left: '100px'}, 2000);
});

This is the complete example.

We can also use display instead of visibility.

Here is another example for fading out HTML element with animation.

Done =)

Reference: StackOverflow – How do you fadeIn and animate at the same time?

Filed under: jQuery Tagged: CSS, Javascript, jQuery

jQuery – Animation on Visibility

ykyuen — Thu, 24 May 2012 04:00:00 +0000

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.

First, set the element with visibility: hidden and opacity: 0.0.

#show-me {
  visibility: hidden;
  opacity: 0.0;
}

Second, make the element visible when the DOM is ready.

$(document).ready(function() {
  $('#show-me').css('visibility', 'visible').animate({opacity: 1.0}, 2000);
});

Here is the complete example.

On the other hand, if you wanna hide an element, try the following example.

Done =)

Reference: StackOverflow – Visibility option in jquery

Filed under: jQuery Tagged: CSS, Javascript, jQuery

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

ykyuen — Wed, 23 May 2012 04:00:12 +0000

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

latest_car.module

 t('Car'),
    'page callback' => 'display_latest_car',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK
  );

  return $items;
}

/**
 * Redirect to latest car node
 */
function display_latest_car() {
  // Get the latest node id of the car content type
  $query = new EntityFieldQuery();
  $query->entityCondition('entity_type', 'node')
    ->entityCondition('bundle', 'car')
    ->propertyCondition('status', 1)
    ->propertyOrderBy('created', 'DESC')
    ->range(0, 1);
  $result = $query->execute();
  
  if (isset($result['node'])) {
    // Rediret to the latest node page
    drupal_goto(drupal_lookup_path('alias', "node/" . key($result['node'])));
  } else {
    // Redirect to front page if the query returns no result
    drupal_set_message('Page not found', 'error');
    drupal_goto('');
  }
}

Enable the module and then visit http:///car, you should be redirect to the latest car node page.

Done =)

Filed under: CMS Tagged: Drupal, Drupal 7, Drupal Development

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

ykyuen — Tue, 22 May 2012 04:00:28 +0000

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 _submit($form, &$form_state) {
  $form_state['redirect'] = 'node/1'
}

But if you want to redirect with query strings, the following piece of code will NOT WORK.

function _submit($form, &$form_state) {
  $form_state['redirect'] = 'node/1?abc=1&def=2#ghk'
}

You will be redirected to node/1%3Fabc%3D1%26def%3D2%23ghk. Here is the CORRECT way to add query strings in the redirect path.

function _submit($form, &$form_state) {
  $form_state['redirect'] = array(
    'node/1',
    array(
      'query' => array(
        'abc' => '1',
        'def' => '2'
      ),
      'fragment' => 'ghk',
    ),
  );
}

Done =)

Reference: Drupal forum – Redirecting with query string

Filed under: CMS Tagged: Drupal, Drupal 7, Drupal Development

.htaccess – Deny access for a specific folder under webroot

ykyuen — Mon, 21 May 2012 04:00:17 +0000

We can deny the access for a specific folder in webroot. Create the following .htaccess file in that restrictive folder.

order deny,allow
deny from all
allow from 127.0.0.1

All access from other IPs are denied except for 127.0.0.1.

Done =)

Reference: .htaccess: Deny From All – Prohibit, Forbid or Restrict Directory Access

Filed under: Apache Tagged: .htaccess, Apache

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

ykyuen — Sun, 20 May 2012 04:00:29 +0000

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);
  }

Here is the updated example from CSS3 – Text Rotation by 3D Transforms

Eureka!

Check it out again~

For Firefox which uses the Gecko engine, the anti-aliasing is enabled by default but the effect varies among different Firefox versions.

For Internet Explorer, LET’S FORGET ABOUT IT. =P

Done =)

Reference: StackOverflow – Improve css3 text rotation quality

Filed under: CSS, CSS3 Tagged: Chrome, CSS, CSS3, Firefox, Gecko, Internet Explorer, Safari, WebKit

CSS3 – Text Rotation by 3D Transforms

ykyuen — Sat, 19 May 2012 04:19:31 +0000

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);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

Here is an example which demonstrates text rotation.

Eureka!

Check it out~

Done =)

Reference: W3Schools – CSS3 3D Transforms

Filed under: CSS, CSS3 Tagged: CSS, CSS3

jQuery – Get the CSS value without the px unit

ykyuen — Fri, 18 May 2012 04:00:59 +0000

When we use jQuery to retrieve the CSS values such as width and height, the unit px is included.

For example, if you have a div which is 100px wide.

Call .css() to get the width value.

$('#eureka').css('width'); // Return '100px'

But most of the time we would like to have a numeric value rather than a string. Here comes the numeric solution.

parseFloat($('#eureka').css('width')); // Return 100

You don’t need to worry about the unit em. This is because .css() must return the value in unit px.

Done =)

Reference:

Filed under: CSS, jQuery Tagged: CSS, Javascript, jQuery

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

ykyuen — Thu, 17 May 2012 04:00:08 +0000

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.

The most straight forward way to add the jQuery is to edit the html.tpl.php directly. To avoid conflict with the jQuery provided by Drupal, we need to add it new one before Drupal one. Here is the html.tpl.php of Omega theme.

html.tpl.php


version . $rdf->namespaces; ?>>
profile; ?>>
  
  <?php print $head_title; ?>  
  

  
    
    
  

  
  
  

  
  
  

>

Check if it works in Chrome.

I found that for those 3rd party Javascript libs which are included in the .info, they cannot be used with the latest jQuery. The workaround is to include those libs right after the latest jQuery include statement as shown in the html.tpl.php.

And for the custom Javascript files which are included in the .info. You can use both jQuery as shown below.

// Use latest jQuery
$j(function($){
  $(document).ready(function(){
    alert($().jquery);
  });
});

// Use Drupal jQuery
(function($){
  $(document).ready(function(){
    alert($().jquery);
  });
})(jQuery);

Done =)

Filed under: CMS Tagged: Drupal, Drupal 7, Drupal Development, jQuery