Javascript hints and intro to JQuery

Posted in Technical | Comments Off on Javascript hints and intro to JQuery

Submit form using javascript

Simply to submit a form using javascript you can write:

In the following code you will see a special case where the form is not appearing directly on the page but through an iFrame element.

 

This code tested on Chrome, FF, IE and Safari Windows.

 

Source Code

Posted in Technical | 2 Comments

Call container page function from child iframe

The simplest way i got to call a function that exists in the iframe container page is using:

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>title>
head>
<body>
    <form id="form1" runat="server">
    <div>
        <script language="javascript" type="text/javascript">
            function AlertFromParent() {
                alert('I am parent');
            }
        script>
        <iframe src="IFramePage.aspx" id="myIframe">
        iframe>

    div>
    form>
body>
html>

 

 

Notes:

– This function is working just if the 2 pages ‘the parent and the child’ are in the same domain name, and if they are in 2 different domains you will get permission denied error.

– If you will run the javascript code inside the iframe on load ‘as in the previous example’, make sure that the parent script function exists before the iframe tag, because the iframe will break loading the page till it finish loading and everything after it will wait till it completely loads.

Posted in Technical | Comments Off on Call container page function from child iframe

Flash Javascript communication first look

 

I did a fast research about how to make flash interact with the container website, and i collected some good information.

4_flash

There are 2 main techniques to implement communications between flash and the container website:

Example: http://www.kongregate.com/developer_center/docs/kongregate-api

1- Client API technique:

Reference: http://www.adobe.com/devnet/flash/javascript_api.html

Using this technique, the flash will communicate with the website through JavaScript.

So in brief, the flash can send and receive variable from the website using Javascript, and for this first research I got 2 main ways to make flash interact with Javascript:

a- Using the ExternalInterface which exist in the action script classes, http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html, http://kb2.adobe.com/cps/156/tn_15683.html#about,

Example: http://jodieorourke.com/view.php?id=122&blog=news

b- Using normal Javascript calls as in this example: http://www.permadi.com/tutorial/flashjscommand/ which describes the main functions to interact with the flash using Javascript.

2- Server API technique:

Example: http://www.puarcade.com/demo/classic-games/snake

Using this technique, flash will call the server side APIs directly, and will post variables to the API URL, also there is another way is to send these variables using Querystrings, which will not be the right way all the time and may be not possible in some cases ‘put in mind for example the max number of query string characters’.

Conclusion:

Most of game websites use the server side APIs, but big famous website give both options, server or client side APIs. http://www.kongregate.com/developer_center/docs/kongregate-api

Server Side advantages from my point of view:

– More secure calls.

– Works whatever the user enabled javascript in the browser or not.

– No problems with different browsers compatibilities.

Client Side advantages:

– Middle layer, between the server side code and the flash, which encapsulates the server side methods and don’t let the flash call the server APIs directly but will be through this JS layer.

– Gives the ability to submit values to the server using Ajax style ‘without refreshing the whole page’.

– The flash will need less information from the website, as the Javascript code will handle most of the common variables ‘such as the current user, the current page URL, …’.

By the way in both cases we will need to implement the server side API first and then will let the Javascript and flash code interact with this APIs.

http://stackoverflow.com/questions/3179476/whats-the-best-practices-to-let-flash-files-communicate-with-my-website

Posted in Technical | Comments Off on Flash Javascript communication first look

Me in a cartoon

Posted in Geeky Life | 2 Comments

HOW TO TELL WHEN IMAGES HAVE LOADED

4328553366_e4789ac407_z

Its a common requirement in some websites specially which are dealing with many images and JavaScript, such as image galleries websites or websites that has images slide shows made using JavaScript.

In a project i just finished, i was making a slide show animation which start automatically when the page load and animate to a certain image based on a query string.

I was using JQuery to implement this simple slide show.

The Problem i faced is that the JQuery animation start to run before the images inside the slide show are loaded, and them make the animation seams as its animate on white screens not images, and will look worse on IE browsers which may give the ‘x’ sign on images which didn’t load yet.

So my mission was to find a way to don’t start the automatic animation until all images have loaded.

At first i just wrote my code in the document.ready JQuery function, but this made my code to run just after JUST the document html have loaded and will not wait till images load.

I found a good solution:

See $(document).ready vs. $(window).load

 

Also found a solution which will work with just an image, incase you want to wait just for an image to load:

Posted in Technical | 2 Comments

Nice article about large file upload using asp.net

http://weblogs.asp.net/jgalloway/archive/2008/01/08/large-file-uploads-in-asp-net.aspx

heavy_box

Posted in Technical | Comments Off on Nice article about large file upload using asp.net

Different ways to watermark html input text

watermarktext

 

There are many ways to add a watermark text to an input text, which will go when you focus the control or start writing inside.

I will list here some good ways to this behavior:

This is an easy and short way to it just using the onfocus and onblur events of the textbox or input field.

But lets make the code cleaner by geting this text from the server side, which will give us many options such as supporting localization.


 Also you can find online a lot of other ways which will fit in some cases such as the following:

jQuery Watermark

Watermark Input Plugin

TextBoxWatermark (AjaxToolKit)

In-Field Labels jQuery Plugin

Posted in Technical | Comments Off on Different ways to watermark html input text

Guidelines for high-quality URLs

url-1024x768

Usability expert Jakob Nielsen (www.useit.com) urges developers to pay attention to URLs and
provides the following guidelines for high-quality URLs:
❑ A domain name that is easy to remember and easy to spell
❑ Short URLs
❑ Easy-to-type URLs
❑ URLs that refl ect the site structure
❑ URLs that are “hackable” to allow users to move to higher levels of the information
architecture by hacking off the end of the URL
❑ Persistent URLs, which don’t change

 

 

copied from wrox professional mvc 1.0

Posted in Technical | Comments Off on Guidelines for high-quality URLs

Thomas Edison, from code complete 2nd edition

When you come up with a first design attempt that seems good enough, don't stop! The second attempt is nearly always better than the first, and you learn things on each attempt that can improve your overall design. After trying a thousand different materials for a light bulb filament with no success, Thomas Edison was reportedly asked if he felt his time had been wasted since he had discovered nothing. "Nonsense," Edison is supposed to have replied. "I have discovered a thousand things that don't work." In many cases, solving the problem with one approach will produce insights that will enable you to solve the problem using another approach that's even better.

Posted in Quotes | Comments Off on Thomas Edison, from code complete 2nd edition