Owned By eL-CeWaD / Millikuvvetler.Net » JavaScript http://thecssbug.com Owned By eL-CeWaD / Millikuvvetler.Net Wed, 28 Mar 2012 11:23:40 +0000 http://wordpress.org/?v=2.9 en hourly 1 onChange Internet Explorer bug http://thecssbug.com/onchange-internet-explorer-bug http://thecssbug.com/onchange-internet-explorer-bug#comments Wed, 22 Jul 2009 21:08:32 +0000 admin http://thecssbug.com/?p=115 Ever tried to use the onChange event to catch a change of state in a radio button group? The following code works alright in Firefox, but not in Internet Explorer:


<input type="radio" name="options" id="option1" onChange="alert('option1')">
<input type="radio" name="options" id="option2" onChange="alert('option2')">

IE treats the onChange event in a different manner: it recognizes something changed just after you lose focus on that element. The solution for this problem is to use the onClick javascript event instead of onChange.


<input type="radio" name="options" id="option1" onClick="alert('option1')">
<input type="radio" name="options" id="option2" onClick="alert('option2')">
]]> http://thecssbug.com/onchange-internet-explorer-bug/feed 0 HTML 5 Today http://thecssbug.com/html-5-today http://thecssbug.com/html-5-today#comments Mon, 06 Jul 2009 20:24:09 +0000 admin http://thecssbug.com/?p=99 New Features for Web App Developers

With HTML 5’s emphasis on web application development, there’s plenty of new features for developers to use, some of which we can use today:

  • A 2D drawing API for scripting graphics using the new canvas element, which is supported in all the major browsers except for Internet Explorer.
  • registerProtocolHandler and registerContentHandler, which allow web applications to register for certain protocols or MIME types. Both are available in Firefox.
  • A manifest caching mechanism to support offline web applications, available in Firefox and Safari.
  • Video and audio APIs. The majority of the API works in Firefox, Opera (experimental build), and Safari—although Safari only uses Apple’s proprietary .mov format, rather than the open-source Ogg formats supported by Firefox and Opera.
  • window.postMessage: cross-document messaging implemented in all major browsers.
  • history.pushState to enable better back-button support in Ajax apps. (No implementations yet, but window.onhashchange is supported in IE8.)
  • A drag and drop API with a draggable attribute, supported in Firefox 3.5.
  • An editing API that hooks into the contenteditable attribute allowed on any element, already in all major browsers.
  • Client-side persistent storage using key/value pairs and support for embedded SQL databases: key/value pairs are in Firefox, Safari, and IE8, while SQL is supported only in Safari at this point.

For more read the full SitePoint article

]]> http://thecssbug.com/html-5-today/feed 0 Javascript lose focus http://thecssbug.com/javascript-lose-focus http://thecssbug.com/javascript-lose-focus#comments Fri, 03 Jul 2009 11:19:30 +0000 admin http://thecssbug.com/?p=97 When making fancy web 2.0 javascript form validations, sometimes you may want to validate a html textfield right after the data was entered. What you need is to cacth the ‘textfield lose focus’ event‘, that is when a user enters some data into the textfield and then either clicks outside the field or ‘tabs’ to the next field.

The JavaScript lose focus event is actually called onBlur, and is suppoerted by the following HTML tags:


<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>,
<dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>,
<hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>,
<legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>,
<td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

and the following JavaScript objects:


button, checkbox, fileUpload, layer, frame, password, radio, reset, submit,
text, textarea, window

Usage example:


<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value;
document.getElementById("fname").value=x.toUpperCase();
}
</script>
</head>
<body>

Enter your name:
<input type="text" id="fname" onblur="upperCase()">

</body>
</html>
]]> http://thecssbug.com/javascript-lose-focus/feed 0 SyntaxHighlighter Plus problem http://thecssbug.com/syntaxhighlighter-plus-problem http://thecssbug.com/syntaxhighlighter-plus-problem#comments Mon, 06 Apr 2009 21:03:37 +0000 admin http://thecssbug.com/?p=67 As I  started to build this blog, I clearly needed some solution for displaying code on a wordpress blog.

Asfter studying a few solutions with more or less results, I decided uppon SyntaxHighlighter Plus which seams to be the best solution out there.

However, although it worked great with the default Wordpress theme I realised that as soon as I applied the “ProBlogger” theme, the javascripts that do the highlighting work would not function corectllyany more. The documentation did offer some solutions, but not the one I needed.

So, if you run into problems when installing SyntaxHighlighter Plus on some wordpress theme, be sure that the header.php file in your theme, contains the following line, somewhere in the head portion of the file:

<?php wp_head(); ?>
</head>
]]> http://thecssbug.com/syntaxhighlighter-plus-problem/feed 0 Prototype Ajax PHP application (simple) http://thecssbug.com/prototype-ajax-php-application-simple http://thecssbug.com/prototype-ajax-php-application-simple#comments Thu, 02 Apr 2009 09:13:11 +0000 admin http://thecssbug.com/?p=3 Ajax for newbies: verify if record exists in database table using prototype and PHP.

Step 1: include prototype.js

Create a new page (index.php). Add this line of code in the tag of index.php to include prototype framework:

<script type="text/javascript" src="prototype.js">
</script>

Step 2: HTML code for index.php


<input type="text" name="name" id="name" />
<input type="submit"  value="Verify" onclick="javascript:verifyName()"/>

<span id="result" style="color:#009900"> </span>

Step 3:Create insert.php

Create a new page (verify.php). This page contains a simple query to verify if record exists in database table (Users):

<?php
if(isset($_GET['name']))
{
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$name = strip_tags($_GET['name']);

$sql    =    'SELECT *
FROM Users
WHERE user_name="'.$name.'"';
$result=mysql_query($sql);
if(mysql_num_rows($result)&amp;gt;0)
echo $name.'the username already exists!';
else
echo $name.'the username does not exist!';
}
else
{
echo '0';
}
?>

Step 4: Javascript function to enable Ajax Request

This code enable ajax request with prototype. Add this lines of code in the index.php file:


<script type="text/javascript">

function verifyName()
{
var name = $F('name');
var url = 'verify.php?';
var pars = 'name=' + name;
new Ajax.Request(url, {method: 'get',parameters: pars,onComplete: showResponse});
}

function showResponse(originalRequest)
{
$('result').innerHTML = originalRequest.responseText;
}

</script>

We pass the value we want to search for to index.php  using this simple code:

method: 'get',parameters: pars

onComplete we show in the tag the response text, returned by the Ajax Request method:

if(mysql_num_rows($result)&amp;amp;gt;0)
echo $name.'the username already exists!';
else
echo $name.'the username does not exist!';

The echo function returns the response text which is displayed in the “result” container in index.php, without ever leaving the page.

]]> http://thecssbug.com/prototype-ajax-php-application-simple/feed 0