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.
Continue reading
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
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.
<div id="eureka" style="width: 100px;"></div>Continue reading
Yesterday we talked about playing audio file in HTML5.
HTML5 – Play sound/music with <audio> tag @ 1
We can also take control of it using Javascript. Here is another example with a toggle link which can play and stop the music. jQuery is needed as well as the following Javascript file.
Continue reading
Yesterday we talked about styling the checkbox and radio button as suggested by Ryan Fait.
Styling checkbox and radio button with CSS and Javascript
Here is a simple solution for applying the checkbox and radio button in Drupal 7 webform.
1. Upload the radio.png, checkbox.png and select.png to your subtheme. (Omega subtheme is used in this example.)
Continue reading
I want to style the form elements such as radio button, checkbox or selection list. Google shows me a very good tutorial written by Ryan Fait.
Las Vegas Web Design – Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements
In the above tutorial, those form elements will be replaced by a span element. It works great. Only 1 minor problem which is those span elements could not align well. So i made some change on the CSS. Here is my example.
Continue reading
Add the following function in the template.php inside your theme folder.
function <theme>_js_alter(&$js) {
unset($js['misc/tableheader.js']);
}
You can find other solutions in the reference link below.
Done =)
Reference: Disable sticky table headers
In my previous post, Drupal 7 – Add Javascript files on specific paths by custom module, we try to add .js files for specific paths by creating a custom module. Actually we could implement the same feature by using the theme template.php. Here is an example.
Continue reading
In the past, i always added js files on theme level. This is not a good approach because the aggregated theme js will be quite large and it is loaded on every pages even js code is not used.
So this time i try to add the js on specific path only when it is needed. This is done by creating a custom module. Let’s name the custom module eureka_js.
1. Inside the eureka_js module folder, we have the following files.
Now we have OAuth 2.0 working with the Facebook Javascript SDK as mentioned in the last article.
Facebook Javascript SDK – A Simple Login Page with OAuth 2.0
The above example is incomplete as there is no logout link. Replace the fb-login-oauth2.php as follow. Continue reading
