GS Design » Javascript http://www.gsdesign.ro/blog Just another developer blog Fri, 23 Jul 2010 07:33:05 +0000 en hourly 1 http://wordpress.org/?v=3.0 Javascript ‘Variable’ Variables http://www.gsdesign.ro/blog/javascript-variable-variables/ http://www.gsdesign.ro/blog/javascript-variable-variables/#comments Mon, 17 Nov 2008 17:00:33 +0000 Gabi Solomon http://www.gsdesign.ro/blog/?p=233 If you havent figure it out by now, my "expertise" is more on the back-end ( php & mysql ) than with front end. So i sometimes look for solutions in javascript that i know how to do in php.

One of this is the concept of variable variables. A ‘variable’ variable is when the identifier of a variable is a variable itself. To be more specific, this works by taking a string as the name, and then defining a variable with that name. That variable can then be used as a normal variable.

The solution in Javascript

1. Using Eval
the first solution i found was to use eval.

PLAIN TEXT
JAVASCRIPT:
  1. var x='street';
  2. eval('name_' + x + ' = "Lincon Road"');
  3. document.write('got ' + name_street);

This should result in having a variable name_street with the value Lincon Road.

However from my small knowledge of JS, i have come to understand that you should avoid using eval when possible.
2. Better Solution - Using Window Array

PLAIN TEXT
JAVASCRIPT:
  1. var x='street';
  2. window['name_' + x] = 'Lincon Road';
  3. document.write('got ' + name_street);

Same effect, with no eval :D

This is all for today,
cheers

]]> http://www.gsdesign.ro/blog/javascript-variable-variables/feed/ 1 How to use ternary operator in javascript? http://www.gsdesign.ro/blog/how-to-use-ternary-operator-in-javascript/ http://www.gsdesign.ro/blog/how-to-use-ternary-operator-in-javascript/#comments Thu, 06 Nov 2008 11:13:42 +0000 Gabi Solomon http://www.gsdesign.ro/blog/?p=243 The ternary operator will accept three operands and is used to assign a certain value to a variable based on a condition. The syntax is condition ? result1 : result2;

So if the the condition is evalued as true the result1 is runned else result2.

Example:

PLAIN TEXT
JavaScript:
  1. <script language=javascript>
  2. var x=3;
  3. (x == 3) ? y="true" : y="false";
  4. document.write(y);
  5. </script>

This will print out: true

Pretty simple, cheers.

]]> http://www.gsdesign.ro/blog/how-to-use-ternary-operator-in-javascript/feed/ 4 Dynamic form input Text With Javascript http://www.gsdesign.ro/blog/dynamic-form-input-text-with-javascript/ http://www.gsdesign.ro/blog/dynamic-form-input-text-with-javascript/#comments Thu, 07 Aug 2008 09:20:45 +0000 Gabi Solomon http://www.gsdesign.ro/blog/?p=141 For a lot of forms there is a need to display a text as a default one in the inputs. But it is to nice that the users has to delete that text before entering his own, but you don't really want to give up on the predefined / default text since it sometimes offer some useful tips for the user to understand that inputs purpose.

Another well know scenario are the search forms .. where you see written search and when you click the forms goes empty, that doesn't offer to much information but it makes for a better user experience by providing an elegant dynamic search form.

Well the way to do it is JavaScript. I saw a lot of ways to do it, with functions, but that all seems to complicated to me for such a simple thing. My way is to write the JS directly in the input code:

PLAIN TEXT
JAVASCRIPT:
  1. <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  2. <input type="text" name="s" value="Search site..."
  3.  onfocus="if(this.value=='Search site...')this.value=''" onblur="if(this.value=='')this.value='Search site...'" />
  4. <input type="submit" value="Search" />
  5. </form>

DEMO

Because people asked for a demo, i will point them to the right bar, called search ;) . That is the effect you will get.

hope you enjoy this,
Cheers

]]> http://www.gsdesign.ro/blog/dynamic-form-input-text-with-javascript/feed/ 2 Cross-window Javascript pop-up detector http://www.gsdesign.ro/blog/cross-window-javascript-pop-up-detector/ http://www.gsdesign.ro/blog/cross-window-javascript-pop-up-detector/#comments Sat, 05 Jul 2008 13:58:40 +0000 Gabi Solomon http://www.gsdesign.ro/blog/?p=89 I have started working on a music directory project recently and one on the task i had to do is to make the user experience more desktop-like with the current wimpyplayer.

The main problem that they were facing was that how the code was originally setup the player would open in a new pop-up window and load the songs you selected. The problem was that upon navigating to a new page and selecting new songs, the pop-up would refresh and clear the old songs and load the new ones.

The challenge was to make so that the player would support appending new tracks to its playlist. That was not quite the big problem .. since wimpyplayer has all the functions needed to do this, but how to detect the pop-up and trigger those functions ?

At first i tried a code to detect the pop-up that seem to work :

PLAIN TEXT
JAVASCRIPT:
  1. if (!winPlayer.closed && winPlayer.location) {
  2.         alert('window focus');
  3.         winPlayer.focus(); 
  4.     }
  5.     else {
  6.         alert('Window Create.');
  7.         winPlayer = window.open("about:blank","player_window",'toolbar=0,menubar=0,scrollbars=0,status=1,resizable=0,width=' + popup_W + ',height=' + popup_H);
  8.         winPlayer.document.write(html);
  9.         winPlayer.document.close();
  10.     }

But if you would navigate to a different page in the parent window it would lose its reference to that pop-up and reopen it. :(

So i started to do some more googling to find a new solution, one that would be cross window. Luckily i did on the blog of Martin Laine.

Apparently he had the same challenge, and found a more low tech solution in 2005 that he called Cross-window Javascript communication where basicly he had the pop-up window remind the opener that reference to it at a small interval of 200 milliseconds.

Later Robert Emmery left a comment on his blog giving him a new solution, that i adopted as well .. and i will post here also in the hope that you will find it upon needed :)

In the main window:

PLAIN TEXT
JAVASCRIPT:
  1. var popupWin = null;
  2.  
  3. function openPopup() {
  4.     var url = "popup.htm";
  5.     popupWin = open( "", "popupWin", "width=500,height=400" );
  6.     if( !popupWin || popupWin.closed || !popupWin.doSomething ) {
  7.         popupWin = window.open( url, "popupWin", "width=500,height=400" );
  8.     } else popupWin.focus();
  9. }
  10.  
  11. function doSomething() {
  12.      openPopup();
  13.      popupWin.doSomething();
  14. }

In the popup:

PLAIN TEXT
JAVASCRIPT:
  1. self.focus();
  2.  
  3. function doSomething() {
  4.     alert("I'm doing something");
  5. }

]]> http://www.gsdesign.ro/blog/cross-window-javascript-pop-up-detector/feed/ 0 SPAW Editor – web based in-browser WYSIWYG HTML editor control http://www.gsdesign.ro/blog/spaw-editor/ http://www.gsdesign.ro/blog/spaw-editor/#comments Fri, 27 Jun 2008 10:42:49 +0000 Gabi Solomon http://www.gsdesign.ro/blog/?p=83 I have been looking for a replacement for tinyMCE for a while, and i think today i found it ( thanks XSS Master ).

SPAW Editor v.2 is a web based in-browser WYSIWYG HTML editor control. It is a replacement for standard HTML textarea fields for rich text content editing.

The best features of it are :

Tabbed Multi-document Interface

Version 2 introduces new industry unique tabbed multi-document interface feature. Now you can edit virtually unlimited number of HTML snippets in a single WYSIWYG instance. This can save a lot of screen space, unnecessary scrolling and loading time compared to other solutions where you have to load as many WYSIWYG instances as HTML snippets you want to edit.

Floating/Shared Toolbars

Multiple instances of SPAW Editor v.2 can be controlled by a single toolbar. This toolbar can either be attached to one of the instances or float around the screen. This way you can save loading time and achieve a better level of integration of the editing area into complex designs (no toolbar overhead)

]]> http://www.gsdesign.ro/blog/spaw-editor/feed/ 3 HORIZONTAL IMAGE MENU http://www.gsdesign.ro/blog/horizontal-image-menu/ http://www.gsdesign.ro/blog/horizontal-image-menu/#comments Thu, 19 Jun 2008 19:12:48 +0000 Gabi Solomon http://www.gsdesign.ro/blog/?p=75 Phatfusion image menu is a horizontal image menu that reveals more of the image as you rollover it.

phatfusion demo

This sort of unique image menu works very well, I like how all images play along whatever section is active. Highly recommended.

Features

  • 2 optional onClick events - open & close
  • href passed to onClick events
  • stays open when clicked
  • closes when clicked
  • select item to pre-open

Download Horizontal Image Menu | Demo

]]> http://www.gsdesign.ro/blog/horizontal-image-menu/feed/ 2 Javascript Confirm Delete http://www.gsdesign.ro/blog/javascript-confirm-delete/ http://www.gsdesign.ro/blog/javascript-confirm-delete/#comments Fri, 13 Jun 2008 21:20:59 +0000 Gabi Solomon http://www.gsdesign.ro/blog/?p=72 On all my projects there was at least one delete buton or a diferent action that would be irevocable. And many times during the developing phase i forgot to put a method of preventing clicking that link by mistake. Of course you can do a confirmation page from php that would be better since it will not depend on the user having javascript activated, but during the developing phase it is better to put a simple javascript confirm even if you will develop a php confirmation page. This will save some load of the server if the user has javascript activated, and save the user some time. Also it is best to always have a confirmation method since many times the user is in a hurry to click and might click the worng button.

There are 2 methods of doing a javascript confirm.

Using a separate function

PLAIN TEXT
HTML:
  2. function confirmDelete(delUrl) {
  3.   if (confirm("Are you sure you want to delete")) {
  4.     document.location = delUrl;
  5.   }
  6. }
  7. </script>
  8.  
  9. <a href="javascript:confirmDelete('delete.page?id=1')">Delete</a>

Confirming directly in the link

PLAIN TEXT
HTML:
  1. <a href="delete.page?id=1" onclick="return confirm('Are you sure you want to delete?')">Delete</a>

I have gotten my slef used to use the last method on all my delete buttons even if i develop a confirmation page later on. It prevents even me from clicking the delete button by mistake :) .

I hope this has been of some help to you.

Cheers

]]> http://www.gsdesign.ro/blog/javascript-confirm-delete/feed/ 1 How to Reload the Page With JavaScript http://www.gsdesign.ro/blog/how-to-reload-the-page-with-javascript/ http://www.gsdesign.ro/blog/how-to-reload-the-page-with-javascript/#comments Sat, 07 Jun 2008 21:42:07 +0000 Gabi Solomon http://www.gsdesign.ro/blog/?p=66 There are a few ways you can reload a page with javascript. I will post them all below, and for demonstration i will put them as button onclick action.

Using location.reload

PLAIN TEXT
HTML:
  1. <input onclick="window.location.reload()" type="button" value="Reload Page" />

Using history method

PLAIN TEXT
HTML:
  1. <input onclick="history.go(0)" type="button" value="Reload Page" />

Using location.href

PLAIN TEXT
HTML:
  1. <input onclick="window.location.href=window.location.href" type="button" value="Reload Page" />

]]> http://www.gsdesign.ro/blog/how-to-reload-the-page-with-javascript/feed/ 1