Entries Tagged as 'javascript'

jCalendar: A jQuery Based Calendar Goes The Drupal Way for date type fields jstools drupal5

Jscalender module come with Jstools package in drupal 5 you can download drupal jstools package from the drupal.org site.Jscalender uses the jsCalendar javascript library, like using a special CSS class called via #attribute in the form element array to convert textfields into jcalendar enabled.

The jcalendar module uses hook_form_alter() to look for textfields with the add-jcalendar class, I had to use something different than jcalendar which is used later on the generated form elements by the jQuery code.

This is a sample of how to enable jcalendar from one of your textfields once you’ve installed the module:

To include a jscalendar popup with a textfield, just add the class ‘jscalendar’:(from readme.txt)

$form['date'] = array(
‘#type’ => ‘textfield’,
‘#attributes’ => array(’class’ => ‘jscalendar’),
);

To change the default display and functionality of the calendar, set startup
parameters by adding selectors to your element. The three configurable options
are ‘ifFormat’ (the format of the date/time written to the text field),
’showsTime’ (boolean: should time be displayed on the calendar), and
‘timeFormat’ (values of ‘12′ for 12-hour clock, which is the default, or ‘24′
for 24-hour clock).

Example:
$form['date'] = array(
‘#type’ => ‘textfield’,
‘#attributes’ => array(’class’ => ‘jscalendar’),
// Use only year, month, and day in textfield.
‘#jscalendar_ifFormat’ => ‘%Y-%m-%d’,
// Don’t show time.
‘#jscalendar_showsTime’ => ‘false’,
// Show 24-hour clock.
‘#jscalendar_timeFormat’ => ‘24′,
);

$form['firstdate'] = array(
‘#type’ => ‘textfield’,
‘#title’ => ‘The first date’,
‘#default_value’ => ‘2007-09-29′,
‘#weight’ => -20,
‘#attributes’ => array(’class’ => ‘add-jscalendar’),
‘#description’ => t(’YYYY-MM-DD’),
);

The #jcalendar_year_range custom property allows you to provide a range of years, look at the associative array $years, to show in the calendar. If the property is not passed jcalendar.module defaults to the current year plus 20.

#jcalendar_plot_dates, which is not working yet, should allow passing an array of dates to the calendar to plot. I’m not sure if this should be the job of the Drupal module or jCalendar’s jQuery code.

This first version of jcalendar.module works, it converts your textfield to three select boxes, day, month, year, and a nice table based date picker, easy to theme via CSS, and once you have the right date you can do whatever you want with it. The original textfield is removed later so your form validation and processing functions should consider if jcalendar is enabled (a simple if (module_exists(’jcalendar’))) to handle form elements in a different way.


jquery quick tips to replace javascript code from file learn jquery

The jquery is a simple and quick to use javascript library and provides a
rich set of functionality in just few lines of code.The $ symbol is also set up as
a shortcut for jQuery.If you want the convenience of the $ function for jQuery without colliding with some other use of the global $ function, the jQuery documentation suggests the following idiom:

(function($) {
    // Within this block, $ is a reference to jQuery
    // Neat, and clean
})(jQuery);

Referring elements of document in jquery code.
jQuery(’div.panel’)
    All divs with class=“panel”
jQuery(’p#intro’)
    The paragraph with id=“intro”
jQuery(’div#content a:visible’)
    All visible links inside the div with id=“content”
jQuery(’input[@name=email]‘)
    All input fields with name=“email”
jQuery(’table.orders tr:odd’)
    “odd” numbered rows in a table with class “orders”
jQuery(’a[@href^="http://"]‘)
    All external links (links that start with http://)
jQuery(’p[a]‘)
    All paragraphs that contain one or more links  if (t.val() == title) {
              t.val();
              t.removeClass(‘blur’);

$(‘input:text).hint();

var title = t.attr(‘title’);
    // only apply logic if the element has the attribute
    if (title) {
      // on blur, set value to title attr if text is blank
      t.blur(function (){
        if (t.val() == ) {
          t.val(title);
          t.addClass(‘blur’);
        }
      });
      // on focus, set value to blank if current value 
      // matches title attr
      t.focus(function (){
        if (t.val() == title) {
          t.val();
          t.removeClass(‘blur’);
        }
      });
t.parents(‘form:first()’).submit(function(){
  if (t.val() == title) {
    t.val();
    t.removeClass(‘blur’);
  }
})

$(‘#search, #username, input.hint’).hint(); // etc
 <!--adsensestart-->

Node List Javascript | Traverse nodes Dom Elements In javascript

The NodeList object represents a live collection of Node objects. This means that any alterations to the number or properties of nodes is immediately reflected in the list. This list permits indexed access to individual nodes as well as iteration through the collection. To demonstrate this Object we shall use the following simple XML file ‘library.xml’.

<library>
<book>
<category>fiction</category>
<title>Eyeless in Gaza</title>
<author>Aldous Huxley</author>
</book>
<book>
<category>classics</category>
<title>John Barleycorn</title>
<author>Jack London</author>
</book>
</library>

We shall now create a NodeList object of all the ‘title’ elements using the document’s getElementsByTagName method. The number of nodes in the collection is determined using the length property, and their nodeValue properties are displayed by accessing each in turn through the item method.

Code (JavaScript):
var xml_doc = new ActiveXObject(”Microsoft.XMLDOM”);
xml_doc.async = false;
xml_doc.load(”library.xml”);

var title_nodes = xml_doc.getElementsByTagName(”title”);
var n_titles = title_nodes.length
for (i = 0; i < n_titles; i++)
document.write(title_nodes.item(i).text + “<br>”);

Output:
Eyeless in Gaza
John Barleycorn

There are also Microsoft extensions for this object.
PROPERTIES

length Property
This property returns the number of items in the NodeList collection.

Syntax: NodeList.length

METHODS

item Method
This method returns the item at the specified index of the Node collection. These are numbered from 0 to one less than the value of the length property. Using an invalid index returns null.

Syntax: NodeList.item(index)


Javascript from flash script Accessing javascript from flash getUrl flash

Creating pop-up browser windows in flash

Flash can trigger a browser pop-up in many ways, this sample explains how to do this by JavaScript.We can use javascript in flash in very simple way.Just create a function in javascript and place that in header.In flash file you have only to use getUrl function for accessing that javascript function.

<!–adsencestart–>

Code to write in the flash file

Create a new flash file, create a simple button in it, click the button and type this code on the flash button:

on (release) {
getURL(“javascript:openNewWindow(’http://www.macromedia.com’,'thewin’,
‘height=400,width=400,toolbar=no,scrollbars=yes’)”);
} Code to write in the html page:-

Now open the html page that contains the swf button and place this code between <head>…</head> area of the html code:

<script language=“JavaScript”>
function openNewWindow(URLtoOpen, windowName, windowFeatures) {
newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
</script>

Now you are done. When the flash button is clicked then the flash button will trigger the JavaScript from the html page.

Options

You can adjust the first code (the on on the flash button) in order to adjust pop-up window options as follows: url to open, window name, height, width, toolbars (yes/no) and scroll bars (yes/no).

or also you have another like choice:-Code to go in html page top

<script language=”javascript”>
function redirect_now()
{
window.location=”yahoo.com”;
}
</script>

Now code for flash button:-

on (release) {
getURL(”javascript:redirect_now()”);
}