Categories
JavaScript

popup windows created with JavaScript

var winProps = ‘width=400,height=300,location=yes’;
var newWin = open(‘about.html’,’aWin’,winProps);

newWin.close();

  • height dictates the height of the window, in pixels. You can’t specify percentage values or any other measurement besides pixels. If you don’t specify a height, the Web browser matches the height of the current window.
  • width specifies the width of the window. As with height, you can only use pixels, and if you leave this property out, the Web browser matches the width of the current window.
  • left is the position, in pixels, from the left edge of the monitor.
  • top is the position, in pixels, from the top edge of the monitor.
  • resizable specifies whether a visitor can resize the window by dragging.
  • scrollbars appear at the right and bottom edges of a browser window whenever a page is larger than the window itself. To completely hide the scrollbar, set this property to no. You can’t control which scrollbar is hidden (it’s either both or neither).
  • status controls the appearance of the status bar at the bottom of the window. Firefox and Internet Explorer normally don’t let you hide the status bar, so it’s always visible in those browsers.
  • toolbar sets the visibility of the toolbar containing the navigation buttons, bookmark button, and other controls available to the particular browser. On Safari, the toolbar and location settings are the same: turning on either one displays both the toolbar buttons and the location field.
  • location specifies whether the location field is visible. Also known as the address bar, this field displays the pages URL and lets visitors go to another page by typing a new URL. Opera, IE 7, and Firefox don’t let you hide a page’s location entirely. If you don’t turn on the location property, then the page’s URL appears up in the title bar. This feature is supposed to stop nefarious uses of JavaScript like opening a new window and sending you off to another site that looks like the site you just left. Also, Safari displays the toolbars as well as the location field with this property turned on.
  • menubar applies to browsers that have a menu at the top of their windows (for example, the common File and Edit menus that appear on most programs). This setting applies only to Windows browsers—Macs have the menu at the top of the screen, not the individual window. And it doesn’t apply to IE 7, which doesn’t normally display a menu bar.
Categories
HTML Templates JavaScript JavaScript Effects Index

Index of JavaScript effects and HTML Templates

NOTE: For the actual files (since wordpress is failing to upload) see http://onsubject.com/localhost
  1. lightbox: (uunet.zip in localhost)
  2. cycle (several slide show animations, shuffle, fade, etc): http://localhost/uunet/index.php?action=buy
  3. Simple text horizontal menus (floated and in-line versions): http://localhost/html_template/horizontal_menu.html
  4. Belated, pure CSS buttons: http://localhost/html_template/belated_css_buttons.html
  5. Fish dynamic horizontal menu with sub-menu options: http://localhost/html_template/fish_dynamic_menu/
  6. JQuery date picker: http://localhost/html_template/datepicker/ The actual css / images / support files can be downloaded from: http://jqueryui.com/download
  7. JQuery form validation: http://localhost/html_template/form_validation/
  8. JQuery accordion: http://localhost/html_template/accordion/
  9. JQuery tabs: http://localhost/html_template/tabs/
  10. JQuery tooltips: http://localhost/html_template/tooltip/
  11. JQuery sortable table: http://localhost/html_template/table_sorter/
  12. Rounded corners bubble: http://localhost/css_tutorial/rounded%20corners/ another example of this is on: http://localhost/jobs/hgm/hgm_exercise.html
Categories
JavaScript

JavaScript events and the bind() function

The format is: 

$('#selector').bind('click', myData, functionName);
The first argument (in this case click) is the event attached to the element.
The second argument is a data structure, to pass more data to the handling function.
The third argument is the handing function itself. It can be an anonymous function.
Example of usage:
var linkVar = { message:'Hello from a link'};
var pVar = { message:'Hello from a paragraph};
function showMessage(evt) {
    alert(evt.data.message);
}
$('a').bind('click',linkVar,showMessage);
$('p').bind('mouseover',pVar,showMessage);
Categories
JavaScript

JavaScript Event Object

Event object stores information about the event happening on a page.

You can get a hold of it in JQuery by using the handle argument that contain it:

$(document).click(function(evt) {
 var xPos = evt.pageX;
 var yPos = evt.pageY;
 alert(‘X: ” + xPos + ‘ Y: ‘ + yPos);
});

In this case, evt holds the event object. This is an arbitrary name, it can be set by the developer to anything.

Some common event properties:

  • pageX – Distance in pixels of the mouse pointer from the left edge of the browser window
  • pageY – Distance in pixels of the mouse pointer from the right edge of the browser window
  • screenX – Distance in pixels of the mouse pointer from the left edge of the monitor
  • screenY – Distance in pixels of the mouse pointer from the right edge of the monitor
  • shiftKey – True if the shift key down when the event occurs
  • which – Use with the keypress event to determine the numeric code of the key pressed
  • target – The target object of the event (example: in click() event, what event was clicked)
  • data – JQuery propietary object used with the bind() function to pass data to an event handling function

To prevent the current event default behavior from happening, you can use the handle and call the preventDefault() method, that is native of the Event Object, or just return false as well:

         evt.preventDefault(); // don’t follow the link

To remove events using JQuery, you can do the following (example):

$('.tabButton').unbind('click'); // For elements with .tabButton class, they won't respond to the click event
When an event is bind to an element, the children of that element also inherit the event binding.
For instance, if you attach an event to a <div> tag, the elements inside will also have it.
To stop this behavior, you can use the function evt.stopPropagation()
Categories
JavaScript

Avoid console.log error messages in IE

Use the following piece of code:

if (typeof console == “undefined” || typeof console.log == “undefined”) var console = { log: function() {} };

Categories
JavaScript

JavaScript global and local variables

Any variable that is initialized inside a function using the var keyword will have a local scope. If a variable is initialized inside a function without var, it will have a global scope. A local variable can have the same name as a global variable.

Categories
JavaScript

JavaScript looping through objects

Use the following example:

for (prop in google_news.sections) {
    console.log(“result:”,google_news.sections[prop].link);
  }

And the object:

var google_news = {
 sections : {
  ‘0’: {
    link : “this is the first link”,
    contents : “content for first link”
   },
  ‘1’: {
    link : “this is the second link”,
    contents : “content for second link”
   },
  ‘2’: {
    link : “this is the third link”,
    contents : “content for third link”
   },
  ‘3’: {
    link : “this is the four link”,
    contents : “content for four link”
   },
  ‘4’: {
    link : “this is the fifth link”,
    contents : “content for fifth link”
   }
 }
};

Categories
Images

Image size reduction and image optimization

Use the following website:

http://www.gracepointafterfive.com/punypng

Categories
JavaScript

Jquery toggle function

This function respond to click events in an element, calling the functions specified as you click or toggle actions on it:

function showSubmenu() {
  $('#submenu').show();
}
function hideSubmenu() {
  $('#submenu').hide();
}
$('#menu').toggle(showSubmenu, hideSubmenu);
Categories
JavaScript

JQuery onhover function

Example:

function showSubmenu() {
  $('#submenu').show();
}
function hideSubmenu() {
  $('#submenu').hide();
}
$('#menu').hover(showSubmenu, hideSubmenu);
You can also use anonymous functions inside the hover()