The following html makes use of the jQuery UI to implement a simple drag and drop feature. Make sure you have download the jQuery UI and put those files in the correct directory. Continue reading jQuery UI Drag and Drop Example
Tag Archives: jQuery
jQuery – Wrap children div with Page Number and Index
jQuery can be used to modify the html before it is rendered in the browser. In the following example, i will wrap those children div with page number and index. Then we can apply css on those newly created div for better layout. Continue reading jQuery – Wrap children div with Page Number and Index
jQuery – Select Box and Change Event
I found a very good article which shows how to manipulate the change event in select box using jQuery.
JETLOGS.ORG – jQuery: Select Boxes and change() events
Create the following .html and try it. Continue reading jQuery – Select Box and Change Event
Drupal – Add Javascript in Theme
As discussed before, we can add Javascript/JQuery in Drupal modules.
Drupal – Create Javascript for Module
So if the Javascript/JQuery is related to the layout and independent of the module, we should add it in the theme instead. For example, i want to have a alert box whenever a page is loaded, i should then add it to my current Drupal theme. The steps are listed below.
1. Open you current theme folder and add the following line in the theme.info.
- scripts[] = js/theme.js
Drupal – Add Javascript in Module
In Drupal, you can add your Javascript to module or theme. If the javascript is related to the module logic and independent of the theme, we should add the .js file in the module. Moreover, Drupal already includes the JQuery library. So we can use the JQuery functions in the .js file.
Let’s recall the custom module we have created in previously.
Drupal – Create a Block
i want to show an Javascript alert box whenever the block is shown. Let’s create a custom.js in <drupal_root>/sites/all/custom.
jQuery(document).ready(function() {
alert("Hello World");
});
Integrate CakePHP and jQuery UI
jQuery UI provides many fancy user interfaces for web developers. You can follow the steps below in order to use jQuery UI in CakePHP.
1. Download the jQuery UI library at jqueryui.com
2. Unzip the downloaded archive and copy the css folder and two .js files to <CAKEPHP_PROJECT>/app/webroot Continue reading Integrate CakePHP and jQuery UI
jQuery – Avoid Conflict with other Javascript Libraries
Recently start learning jQuery =)
When you are using jQuery with other Javascript libraries such as Prototype. There will be conflict on the $() function. There are 3 ways to bypass the conflict.
1. Only use jQuery() for the jQuery calls and revert the $() to Prototype
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
Continue reading jQuery – Avoid Conflict with other Javascript Libraries
Eureka! 