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
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 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
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
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
I have a HTML div which will be shown from hidden to visible by changing the opacity with jQuery animate(). It works fine in normal browser like Chrome and Firefox. But from the abnormal browser like Internet Explorer, the font/text is distorted.
Internet Explorer has problem with opacity and font antialiasing in animate(). A workaround is to remove the opacity after the animation is completed.
$("#my-div").animate({opacity: 1},500, function() {
$(this).css('opacity', '');
});
Continue reading Font/Text distortion on animate() and opacity in Internet Explorer
jQuery UI is included in Drupal 7 core. By default it is not included in every page, so if u want to implement those jQuery UI features, here is the little tricks you need.
For example, i will to implement the jQuery UI tabs in a node body. In that case, you need to use PHP code as the input text format. ex.
Continue reading Drupal 7 – Implement jQuery UI features
In the past 2 days we have developed a custom module which demonstrates the basic Ajax implementation in Drupal 7.
Today i will continue the example written by Kevin Hankens and make the module more secure. We want to add a token in the Ajax request such that the server could check if it comes from a valid user. This token could be obtained from drupal_get_token() which will return a fixed token value for each user session. Here are the list of changes in the new eureka_ajax.module.
In this post, i will show you how to implement a simple Ajax function in Drupal 7. The following example code is based on the blog post written by Kevin Hankens about implementing Ajax in Drupal 6.
Kevin Hankens’s blog – Drupal, jQuery and $.ajax() easyness
What i am going to do is the same as Kevin’s example. But for simplicity, i removed the access control logic so all content is visible to anonymous users.
Continue reading Drupal 7 – Simple Ajax implementation @ 1
This is an example which will play a beep sound when the mouse enter an element with the help of HTML5.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var beep = $("#beep")[0];
$("#play").mouseenter(function() {
beep.play();
});
});
</script>
</head>
<body>
<audio id="beep" controls preload="auto">
<source src="music.ogg" type="audio/ogg" />
<source src="music.mp3" type="audio/mp3" />
Your browser isn't invited for super fun audio time.
</audio>
<span id="play">play sound</span>
</body>
</html>
Eureka! 