jQuery UI dialog is a simple way to create overlay/popup content in web development. Include jQuery UI and you could wrap the content in a overlay/popup using the following Javascript.
Continue reading jQuery UI – Add background color on Dialog overlay
Tag Archives: Javascript
Drupal 7 – Pass values from PHP to Javascript
During Drupal development, sometimes we may need to manipulate some server data in Javascript. In this case, we could create a custom module to retrieve the database data and pass it to browser such that we can it it in Javascript.
1. Implement the hook_init().
function <module-name>_init() {
drupal_add_js(
array(
'eureka' => array( // we should use module name for best practice
'data' => array(
'Name' => 'ykyuen',
'Blog' => 'Eureka!',
'URL' => 'https://eureka.ykyuen.info/',
),
)
),
'setting'
);
}
Continue reading Drupal 7 – Pass values from PHP to Javascript
jQuery – Synchronize Text Input
In Drupal Development, very often we will use Views and Views Filter for searching data. For example, I have a content type which has two name fields.
- English Name – field_english_name
- Chinese Name – field_chinese_name
I would like to have a single text input filter which could search for these 2 fields with an Or condition.
Continue reading jQuery – Synchronize Text Input
Javascript – Get YYYY-MM-DD string from a Date object
The following piece of code shows you how to get the YYYY-MM-DD formatted string from a Javascript Date Object.
// GET CURRENT DATE
var date = new Date();
// GET YYYY, MM AND DD FROM THE DATE OBJECT
var yyyy = date.getFullYear().toString();
var mm = (date.getMonth()+1).toString();
var dd = date.getDate().toString();
// CONVERT mm AND dd INTO chars
var mmChars = mm.split('');
var ddChars = dd.split('');
// CONCAT THE STRINGS IN YYYY-MM-DD FORMAT
var datestring = yyyy + '-' + (mmChars[1]?mm:"0"+mmChars[0]) + '-' + (ddChars[1]?dd:"0"+ddChars[0]);
Done =)
Reference: StackOverflow – Get String in YYYYMMDD format from JS date object?
Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 2
We talk about how to generate a taxonomy term selection list in the following post.
Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 1
So we continue to add the jQuery/Javascript code such that when the term is selected, the browser will open the corresponding term page.
The following piece of jQuery/Javascript is redirect you to the selected term page.
Continue reading Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 2
jQuery – Validate the form when the submit button is clicked
Here is a simple jQuery script which could use the validate a mandatory input.
(function ($) {
$(document).ready(function() {
$('#<submit-button-id>').click(function(event){
var x = $('<input-id>').val();
if (x == null || x == '';) {
alert('Please fill in the input.');
event.preventDefault();
}
})
});
})(jQuery);
Done =)
Reference: StackOverflow – Intercept a click on submit button and check validity of form jQuery
Superfish – Add active class to current menu link
Superfish is a jQuery plugin for creating drop down menu. You can download it @ GitHub – karevn / superfish.
It works well but there is no CSS class for identifying the menu item of the current page. Luckily i found a solution in StackOverflow.
The following jQuery code will find out the menu item which match the current URL and add the active class to it. Continue reading Superfish – Add active class to current menu link
jQuery Cycle Plugin – Customize pager anchor HTML
Cycle Plugin is the most common plugin which could be found in my projects. This article shows you how to customize the pager of the Cycle Plugin slide show.
Let’s create the following HTML first.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="slides-wrapper">
<div id="slide-1" style="width: 200px; height: 200px; background-color: red;"></div>
<div id="slide-2" style="width: 200px; height: 200px; background-color: green;"></div>
<div id="slide-3" style="width: 200px; height: 200px; background-color: blue;"></div>
</div>
<div id="nav"></div>
</body>
</html>
Continue reading jQuery Cycle Plugin – Customize pager anchor HTML
HTML – Include .html using jQuery
There are some methods like Server Side Includes which allow us to include other HTML files into a web page on a webserver like
<!-- #include virtual="./common.html" -->
But this technique require server side setting and may be not supported by some web hosting.
Another way to include .html in a web page is using jQuery insertion.
Continue reading HTML – Include .html using jQuery
Javascript – How to Shuffle an array
You can use the following function to shuffle a Javascript array. Kudos to Ashley Pond V. The author applies the Fisher-Yates shuffle algorithm which is also known as the Knuth shuffle in Javascript.
function fisherYates(myArray) {
var i = myArray.length;
if (i == 0) return false;
while(--i) {
var j = Math.floor(Math.random()*(i+1));
var tempi = myArray[i];
var tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
}
Done =)
Reference: Randomize arrays in JavaScript with the Fisher-Yates shuffle algorithm
Eureka! 