GS Design Just another developer blog

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.

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

Same effect, with no eval

This is all for today,
cheers

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:

This will print out: true

Pretty simple, cheers.

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:

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

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 :

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:

In the popup:

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)

Phatfusion image menu is a horizontal image menu that reveals more of the image as you rollover it.

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

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

Confirming directly in the link

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

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

Using history method

Using location.href