<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>GS Design &#187; Front-End Developing</title>
	<atom:link href="http://www.gsdesign.ro/blog/category/front-end-developing/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.gsdesign.ro/blog</link>
	<description>Just another developer blog</description>
	<lastBuildDate>Thu, 06 Jan 2011 22:28:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Automated Model-Based Testing of Web Applications</title>
		<link>http://www.gsdesign.ro/blog/automated-model-based-testing-of-web-applications/</link>
		<comments>http://www.gsdesign.ro/blog/automated-model-based-testing-of-web-applications/#comments</comments>
		<pubDate>Sun, 23 Nov 2008 13:41:10 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Programing]]></category>
		<category><![CDATA[Web Aplications]]></category>
		<category><![CDATA[automated]]></category>
		<category><![CDATA[microsoft]]></category>
		<category><![CDATA[testing]]></category>
		<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=256</guid>
		<description><![CDATA[If you are a developer than you are well aware of the importance of testing your applications, and i dont mean testing it your self since that is really not going to be very helpful beyond the development stage. Since you ( or your team ) have build this application you will not be tester, [...]]]></description>
			<content:encoded><![CDATA[<p>If you are a developer than you are well aware of the importance of testing your applications, and i dont mean testing it your self since that is really not going to be very helpful beyond the development stage.</p>
<p>Since you ( or your team ) have build this application you will not be tester, since you already know how the application will perform. The best thing to do is to do a test with more subjects, of all knowledge levels if possible and give them a series of events and tasks to perform to see how the application handles and how easy it is for them to perform those tasks.</p>
<p>I found that in all test groups there is always a &#8220;bird brain&#8221; (as the speaker in the presentation reffered to it) that will execute a series of actions that will crash your application (usually things you havent thought of anybody doing). Although some developers hate those type of testers ( how the F did you managed to get there) i like them. At my old job i used to have a secretary that would find any bug i might have overlooked in a matter of minutes, just by clicking around <img src='http://www.gsdesign.ro/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ).</p>
<p>Anyway, the point i was trying to make ( beside the fact that testing is important ) is that human driven tests although very creative at times, have a few limitations and will not managed to test the full amount of possibilities. And above this will take quite a few resources ( human and financially ) to execute this tests, and they cant be reused if the application changes.</p>
<p>So there are some really smart persons that are looking into making an automated system for testing web applications. Some the research in this field are also done by <strong>microsoft</strong> ( this is a small inside info for all those microsoft haters <img src='http://www.gsdesign.ro/blog/wp-includes/images/smilies/icon_razz.gif' alt=':-P' class='wp-smiley' />  ).</p>
<p>I am not going to go into much more details and let you watch the presentation.<br />
Enjoy.</p>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/6LdsIVvxISU&#038;hl=en&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/6LdsIVvxISU&#038;hl=en&#038;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/automated-model-based-testing-of-web-applications/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript &#8216;Variable&#8217; Variables</title>
		<link>http://www.gsdesign.ro/blog/javascript-variable-variables/</link>
		<comments>http://www.gsdesign.ro/blog/javascript-variable-variables/#comments</comments>
		<pubDate>Mon, 17 Nov 2008 17:00:33 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[eval]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[variable]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=233</guid>
		<description><![CDATA[If you havent figure it out by now, my "expertise" is more on the back-end ( php &#038; 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 [...]]]></description>
			<content:encoded><![CDATA[<p>If you havent figure it out by now, my "expertise" is more on the back-end ( php &#038; mysql ) than with front end. So i sometimes look for solutions in javascript that i know how to do in php.</p>
<p>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. </p>
<h3>The solution in Javascript</h3>
<p><strong>1. Using Eval</strong><br />
the first solution i found was to use eval.</p>
<div class="igBar"><span id="ljavascript-3"><a href="#" onclick="javascript:showCodeTxt('javascript-3'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-3">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> x=<span style="color: #3366CC;">'street'</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">eval</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'name_'</span> + x + <span style="color: #3366CC;">' = &quot;Lincon Road&quot;'</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'got '</span> + name_street<span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>
This should result in having a variable name_street with the value Lincon Road.</p>
<p>However from my small knowledge of JS, i have come to understand that you should avoid using eval when possible.<br />
<strong>2. Better Solution - Using Window Array</strong></p>
<div class="igBar"><span id="ljavascript-4"><a href="#" onclick="javascript:showCodeTxt('javascript-4'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-4">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> x=<span style="color: #3366CC;">'street'</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">window<span style="color: #66cc66;">&#91;</span><span style="color: #3366CC;">'name_'</span> + x<span style="color: #66cc66;">&#93;</span> = <span style="color: #3366CC;">'Lincon Road'</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'got '</span> + name_street<span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>
Same effect, with no eval <img src='http://www.gsdesign.ro/blog/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>This is all for today,<br />
cheers</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/javascript-variable-variables/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>How to use ternary operator in javascript?</title>
		<link>http://www.gsdesign.ro/blog/how-to-use-ternary-operator-in-javascript/</link>
		<comments>http://www.gsdesign.ro/blog/how-to-use-ternary-operator-in-javascript/#comments</comments>
		<pubDate>Thu, 06 Nov 2008 11:13:42 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[ternary operator]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=243</guid>
		<description><![CDATA[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: &#60;script language=javascript&#62; var x=3; &#40;x == [...]]]></description>
			<content:encoded><![CDATA[<p><strong>The ternary operator</strong> 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;</p>
<p>So if the the condition is evalued as true the result1 is runned else result2.</p>
<h3>Example:</h3>
<div class="igBar"><span id="ljavascript-6"><a href="#" onclick="javascript:showCodeTxt('javascript-6'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div id="javascript-6">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;script language=javascript&gt;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> x=<span style="color: #CC0000;color:#800000;">3</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#40;</span>x == <span style="color: #CC0000;color:#800000;">3</span><span style="color: #66cc66;">&#41;</span> ? y=<span style="color: #3366CC;">"true"</span> : y=<span style="color: #3366CC;">"false"</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">&#40;</span>y<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;/script&gt; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>This will print out: <em>true</em></p>
<p>Pretty simple, cheers.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/how-to-use-ternary-operator-in-javascript/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Dynamic form input Text With Javascript</title>
		<link>http://www.gsdesign.ro/blog/dynamic-form-input-text-with-javascript/</link>
		<comments>http://www.gsdesign.ro/blog/dynamic-form-input-text-with-javascript/#comments</comments>
		<pubDate>Thu, 07 Aug 2008 09:20:45 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[dynamic]]></category>
		<category><![CDATA[forms]]></category>
		<category><![CDATA[input]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[predefined]]></category>
		<category><![CDATA[search]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=141</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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. </p>
<p>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.</p>
<p>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:</p>
<div class="igBar"><span id="ljavascript-8"><a href="#" onclick="javascript:showCodeTxt('javascript-8'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-8">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;form method=<span style="color: #3366CC;">"get"</span> id=<span style="color: #3366CC;">"searchform"</span> action=<span style="color: #3366CC;">"&lt;?php bloginfo('url'); ?&gt;/"</span>&gt;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;input type=<span style="color: #3366CC;">"text"</span> <span style="color: #000066;">name</span>=<span style="color: #3366CC;">"s"</span> value=<span style="color: #3366CC;">"Search site..."</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000066;">onfocus</span>=<span style="color: #3366CC;">"if(this.value=='Search site...')this.value=''"</span> <span style="color: #000066;">onblur</span>=<span style="color: #3366CC;">"if(this.value=='')this.value='Search site...'"</span> /&gt;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;input type=<span style="color: #3366CC;">"submit"</span> value=<span style="color: #3366CC;">"Search"</span> /&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;/form&gt; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<h3>DEMO</h3>
<p>Because people asked for a demo, i will point them to the right bar, called search <img src='http://www.gsdesign.ro/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> . That is the effect you will get.</p>
<p>hope you enjoy this,<br />
Cheers</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/dynamic-form-input-text-with-javascript/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>How to make money online</title>
		<link>http://www.gsdesign.ro/blog/how-to-make-money-online/</link>
		<comments>http://www.gsdesign.ro/blog/how-to-make-money-online/#comments</comments>
		<pubDate>Mon, 04 Aug 2008 13:43:57 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[Programing]]></category>
		<category><![CDATA[Freelancing]]></category>
		<category><![CDATA[money]]></category>
		<category><![CDATA[online]]></category>
		<category><![CDATA[Outsourcing]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=137</guid>
		<description><![CDATA[Sorry for those of you that got hear thinking you will get a great scheme on how to make easy / no work money online, this is how to make money working . This article is for people who are Programmers, designers or editors. Some companies want to subcontract some of there work to other [...]]]></description>
			<content:encoded><![CDATA[<p>Sorry for those of you that got hear thinking you will get a great scheme on how to make easy / no work money online, this is how to make money working <img src='http://www.gsdesign.ro/blog/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> .</p>
<p>This article is for people who are Programmers, designers or editors.<br />
Some companies want to subcontract some of there work to other smaller companies, process called <a href="http://en.wikipedia.org/wiki/Outsourcing">outsourcing</a>.<br />
But instead of doing to a different company's instead of outsourcing works to a company , plan to outsource the work directly to programmers like you using specialized websites that act like a market place for company's and <a href="http://www.gsdesign.ro/blog/tag/Freelancing/">freelancers </a>.</p>
<p>There are a lot of such websites out there, but a few have managed to climb and stay in the Top 5. I will try and do a small review of them. As a note this is my personal top 5, not an official one.</p>
<h3>1. Odesk </h3>
<p><a href="http://www.odesk.com/referrals/track/gsolomon"><img src="http://www.odesk.com/images/banners/banner_buyer_468x60.gif" alt="The On Demand Global Workforce - oDesk" width="468" height="60" /></a><br />
This is one of may favorite freelancing websites, and it got good reviews from a lot of websites and magazines. It is very popular because it has some build in features that are not found on other websites like:<br />
- hourly payd jobs ( that are guaranted );<br />
- desktop client that tracks hours worked for hourly projects<br />
- free professional test for providers to show theyr skills<br />
and much more</p>
<p>You can see a more detailed tour of odesk <a href="http://www.odesk.com/w/feature_tour">here</a>.</p>
<h3>2. getafreelancer.com</h3>
<p><a href="http://www.getafreelancer.com/affiliates/solomongaby/"><img src="http://www.getafreelancer.com/img/affiliates/afbanner.gif" width=468 height=60 alt="Get custom programming done at GetAFreelancer.com!" border=0></a></p>
<p>A very well famous website, which is very nice because you will get many projects to choose from. It suports escrow payments wich is nice to limit your "do the job, not get payed" situations, and has a few payment methods such as  GetAFreelancer.com Debit card, PayPal, Moneybookers.com, E-Gold, Wired Transfer. </p>
<h3>3. eufreelance.com</h3>
<p><a href="http://www.eufreelance.com/affiliates/solomongaby/"><img src="http://www.eufreelance.com/img/affiliates/banner_providers_468x60_2.gif" width=468 height=60 alt="Earn Money with EUFreelance.com!" border=0></a></p>
<p>This is the same company as getafreelancer.com but its intead for europe because the currency you get payed is euros wich is nice especially for me because in my country the dollar has sunk to quite a low rate.</p>
<h3>4. rentacoder.com</h3>
<p><a href="http://www.rentacoder.com/"><img src="http://www.gsdesign.ro/blog/wp-content/uploads/2008/08/rentacoder-300x60.jpg" alt="" title="rentacoder" width="300" height="60" class="aligncenter size-medium wp-image-138" /></a></p>
<p>Yet another famous website, RAC features literally thousands of open projects, available in fields ranging from Data Entry to Writing to Web Design to Programming. RentACoder is probably one of the best freelance web site around, so be sure to sign up here.</p>
<h3>5. scriptlance.com</h3>
<p><a href="http://www.scriptlance.com/?ref=solomongaby "><img src="http://www.scriptlance.com/banners/banner_9_468x60.gif" alt="Find freelance programmers at ScriptLance.com - Search worldwide" width="468" border="0" height="60"></a></p>
<p>This a new websites i signed on for, havent really tested it out. ScriptLance is a project web site in which freelancers can bid on projects and then complete them and get paid. This site isn’t quite as<br />
reliable as RentACoder, as funds aren’t always escrowed like on RAC, but it is still a site worth checking out. Project fees are usually $5, which is very cheap.</p>
<p>That is it about making money online and freelancin, hope you enjoyed it.</p>
<p>I know some of you might not like these these websites, because of the low quotes that are found there, but i believe they have there purpose, and by making some projects on this website you can potentially find some contractors that will give you constant flow of projects in the future and you will build your online reputation in the process as well.</p>
<p>I might be wrong, but this is my perspective on freelancing websites.<br />
Cheers.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/how-to-make-money-online/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Cross-window Javascript pop-up detector</title>
		<link>http://www.gsdesign.ro/blog/cross-window-javascript-pop-up-detector/</link>
		<comments>http://www.gsdesign.ro/blog/cross-window-javascript-pop-up-detector/#comments</comments>
		<pubDate>Sat, 05 Jul 2008 13:58:40 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Cross-window]]></category>
		<category><![CDATA[detector]]></category>
		<category><![CDATA[googling]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[pop-up]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=89</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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 <a href="http://www.wimpyplayer.com/">wimpyplayer</a>. </p>
<p>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. </p>
<p>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 <a href="http://www.wimpyplayer.com/">wimpyplayer</a> has all the functions needed to do this, but how to detect the pop-up and trigger those functions ?</p>
<p>At first i tried a code to detect the pop-up that seem to work :</p>
<div class="igBar"><span id="ljavascript-12"><a href="#" onclick="javascript:showCodeTxt('javascript-12'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-12">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>!winPlayer.<span style="color: #006600;">closed</span> &amp;&amp; winPlayer.<span style="color: #006600;">location</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'window focus'</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; winPlayer.<span style="color: #000066;">focus</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;&nbsp; </div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'Window Create.'</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; winPlayer = window.<span style="color: #000066;">open</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"about:blank"</span>,<span style="color: #3366CC;">"player_window"</span>,<span style="color: #3366CC;">'toolbar=0,menubar=0,scrollbars=0,status=1,resizable=0,width='</span> + popup_W + <span style="color: #3366CC;">',height='</span> + popup_H<span style="color: #66cc66;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; winPlayer.<span style="color: #006600;">document</span>.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">&#40;</span>html<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; winPlayer.<span style="color: #006600;">document</span>.<span style="color: #000066;">close</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>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. <img src='http://www.gsdesign.ro/blog/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> </p>
<p>So i started to do some more <a href="http://www.gsdesign.ro/blog/tag/googling/">googling</a> to find a new solution, one that would be cross window. Luckily i did on the blog of <a href="http://www.1pixelout.net/about-me/">Martin Laine</a>. </p>
<p>Apparently he had the same challenge, and found a more low tech solution in 2005 that he called  <a href="http://www.1pixelout.net/2005/04/19/cross-window-javascript-communication/">Cross-window Javascript communication</a> where basicly he had the pop-up window remind the opener that reference to it at a small interval of 200 milliseconds. </p>
<p>Later <strong>Robert Emmery</strong> left a comment on his blog giving him <a href="http://www.1pixelout.net/2006/12/15/cross-window-javascript-communication-20/">a new solution</a>, that i adopted as well .. and i will post here also in the hope that you will find it upon needed <img src='http://www.gsdesign.ro/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  </p>
<p>In the main window:</p>
<div class="igBar"><span id="ljavascript-13"><a href="#" onclick="javascript:showCodeTxt('javascript-13'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-13">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> popupWin = <span style="color: #003366; font-weight: bold;">null</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> openPopup<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> url = <span style="color: #3366CC;">"popup.htm"</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; popupWin = <span style="color: #000066;">open</span><span style="color: #66cc66;">&#40;</span> <span style="color: #3366CC;">""</span>, <span style="color: #3366CC;">"popupWin"</span>, <span style="color: #3366CC;">"width=500,height=400"</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span> !popupWin || popupWin.<span style="color: #006600;">closed</span> || !popupWin.<span style="color: #006600;">doSomething</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; popupWin = window.<span style="color: #000066;">open</span><span style="color: #66cc66;">&#40;</span> url, <span style="color: #3366CC;">"popupWin"</span>, <span style="color: #3366CC;">"width=500,height=400"</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> popupWin.<span style="color: #000066;">focus</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> doSomething<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;&nbsp; openPopup<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;&nbsp; popupWin.<span style="color: #006600;">doSomething</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>In the popup:</p>
<div class="igBar"><span id="ljavascript-14"><a href="#" onclick="javascript:showCodeTxt('javascript-14'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-14">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">self.<span style="color: #000066;">focus</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> doSomething<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"I'm doing something"</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/cross-window-javascript-pop-up-detector/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SPAW Editor &#8211; web based in-browser WYSIWYG HTML editor control</title>
		<link>http://www.gsdesign.ro/blog/spaw-editor/</link>
		<comments>http://www.gsdesign.ro/blog/spaw-editor/#comments</comments>
		<pubDate>Fri, 27 Jun 2008 10:42:49 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[editor]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[SPAW]]></category>
		<category><![CDATA[web2.0]]></category>
		<category><![CDATA[WYSIWYG]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=83</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>I have been looking for a replacement for tinyMCE for a while, and i think today i found it ( thanks <a href="http://latest-mtv.net/">XSS Master</a> ).</p>
<p><a href="http://spaweditor.com/en/disp.php/en_products/en_spaw">SPAW Editor v.2</a> is a web based in-browser WYSIWYG HTML editor control. It is a replacement for standard HTML textarea fields for rich text content editing.</p>
<p>The best features of it are :</p>
<p><a href="http://www.gsdesign.ro/blog/wp-content/uploads/2008/06/tabs.gif"><img class="alignleft size-full wp-image-84" title="spaw editor tabs preview" src="http://www.gsdesign.ro/blog/wp-content/uploads/2008/06/tabs.gif" alt="" width="200" height="150" /></a></p>
<h3>Tabbed Multi-document Interface</h3>
<p>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.</p>
<p><a href="http://www.gsdesign.ro/blog/wp-content/uploads/2008/06/floating_tb.gif"><img class="alignleft size-full wp-image-85" title="spaw floating toolbar" src="http://www.gsdesign.ro/blog/wp-content/uploads/2008/06/floating_tb.gif" alt="" width="200" height="150" /></a></p>
<h3>Floating/Shared Toolbars</h3>
<p>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)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/spaw-editor/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>HORIZONTAL IMAGE MENU</title>
		<link>http://www.gsdesign.ro/blog/horizontal-image-menu/</link>
		<comments>http://www.gsdesign.ro/blog/horizontal-image-menu/#comments</comments>
		<pubDate>Thu, 19 Jun 2008 19:12:48 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[mootols]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[menus]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[Phatfusion]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=75</guid>
		<description><![CDATA[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 &#38; close href passed to onClick events stays [...]]]></description>
			<content:encoded><![CDATA[<p>Phatfusion image menu is a horizontal image menu that reveals more of the image as you rollover it.</p>
<p><a href="http://www.gsdesign.ro/blog/wp-content/uploads/2008/06/phatfusion.jpg"><img class="aligncenter size-full wp-image-77" title="phatfusion" src="http://www.gsdesign.ro/blog/wp-content/uploads/2008/06/phatfusion.jpg" alt="phatfusion demo" width="500" height="199" /></a></p>
<p>This sort of unique image menu works very well, I like how all images play along whatever section is active. Highly recommended.</p>
<h3>Features</h3>
<ul>
<li>2 optional onClick events - open &amp; close</li>
<li>href passed to onClick events</li>
<li>stays open when clicked</li>
<li>closes when clicked</li>
<li>select item to pre-open</li>
</ul>
<p><strong><a href="http://www.phatfusion.net/imagemenu/imagemenu.zip">Download Horizontal Image Menu</a></strong> | <a href="http://www.phatfusion.net/imagemenu/index.htm">Demo</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/horizontal-image-menu/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Tabs without JavaScript</title>
		<link>http://www.gsdesign.ro/blog/tabs-without-javascript/</link>
		<comments>http://www.gsdesign.ro/blog/tabs-without-javascript/#comments</comments>
		<pubDate>Thu, 19 Jun 2008 09:35:51 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[tabs]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=81</guid>
		<description><![CDATA[Today i found an interesting article about Tabs without JavaScript. Turns out you can do a tabbing system without needing to use JavaScript, only by CSS and standard (X)HTML. The downside is that you won't get styling on the active tab to indicate that it is active. Here is the code: PLAIN TEXT CSS: div.tabcontainer [...]]]></description>
			<content:encoded><![CDATA[<p>Today i found an interesting article about Tabs without JavaScript. Turns out you can do a tabbing system without needing to use JavaScript, only by CSS and standard (X)HTML. The downside is that you won't get styling on the active tab to indicate that it is active.</p>
<p>Here is the code:</p>
<div class="igBar"><span id="lcss-17"><a href="#" onclick="javascript:showCodeTxt('css-17'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-17">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">div<span style="color: #6666ff;">.tabcontainer </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">width</span>: 500px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">background</span>: #eee;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">border</span>: 1px <span style="color: #993333;">solid</span> #000000;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.tabnav </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">list-style-type</span>: <span style="color: #993333;">none</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">margin</span>: <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">padding</span>: <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">width</span>: <span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">overflow</span>: <span style="color: #993333;">hidden</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.tabnav </span>a <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">display</span>: <span style="color: #993333;">block</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">width</span>: <span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.tabnav </span>a<span style="color: #3333ff;">:hover </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">background</span>: #ccc;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.tabnav </span>li <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">float</span>: <span style="color: #000000; font-weight: bold;">left</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">width</span>: 125px;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">margin</span>: <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">padding</span>: <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">text-align</span>: <span style="color: #993333;">center</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">div<span style="color: #6666ff;">.tabcontents </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">height</span>: 290px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">background</span>: #ccc;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">overflow</span>: <span style="color: #993333;">hidden</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">border-top</span>: 1px <span style="color: #993333;">solid</span> #011;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">padding</span>: 3px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">div<span style="color: #6666ff;">.tabcontents </span>div<span style="color: #6666ff;">.<span style="color: #000000; font-weight: bold;">content</span> </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">float</span>: <span style="color: #000000; font-weight: bold;">left</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">width</span>: <span style="color: #cc66cc;color:#800000;">100</span>%;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">height</span>: <span style="color: #cc66cc;color:#800000;">102</span>%;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;overflow-y: <span style="color: #993333;">auto</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">div<span style="color: #6666ff;">.tabcontents </span>div<span style="color: #6666ff;">.<span style="color: #000000; font-weight: bold;">content</span> </span>h2 <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000000; font-weight: bold;">margin-top</span>: 3px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<div class="igBar"><span id="lhtml-18"><a href="#" onclick="javascript:showCodeTxt('html-18'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-18">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"tabcontainer"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">&lt;ul</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"tabnav"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#tab1"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Tab 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#tab2"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Tab 2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#tab3"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Tab 3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#tab4"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Tab 4<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"tabcontents"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"content"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"tab1"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">&lt;h2&gt;</span></a></span>Tab 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h2&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"content"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"tab2"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">&lt;h2&gt;</span></a></span>Tab 2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h2&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"content"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"tab3"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">&lt;h2&gt;</span></a></span>Tab 3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h2&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"content"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"tab4"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">&lt;h2&gt;</span></a></span>Tab 4<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h2&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p><a href="http://demos.texotela.co.uk/nojstabs.html">Demo page</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/tabs-without-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript Confirm Delete</title>
		<link>http://www.gsdesign.ro/blog/javascript-confirm-delete/</link>
		<comments>http://www.gsdesign.ro/blog/javascript-confirm-delete/#comments</comments>
		<pubDate>Fri, 13 Jun 2008 21:20:59 +0000</pubDate>
		<dc:creator>Gabi Solomon</dc:creator>
				<category><![CDATA[Front-End Developing]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[confirm]]></category>
		<category><![CDATA[delete]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.gsdesign.ro/blog/?p=72</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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. </p>
<p>There are 2 methods of doing a javascript confirm.</p>
<h3>Using a separate function</h3>
<div class="igBar"><span id="lhtml-21"><a href="#" onclick="javascript:showCodeTxt('html-21'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-21">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">function confirmDelete(delUrl) {</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; if (confirm(&quot;Are you sure you want to delete&quot;)) {</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; document.location = delUrl;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; }</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"javascript:confirmDelete('delete.page?id=1')"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Delete<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<h3>Confirming directly in the link</h3>
<div class="igBar"><span id="lhtml-22"><a href="#" onclick="javascript:showCodeTxt('html-22'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-22">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"delete.page?id=1"</span> <span style="color: #000066;">onclick</span>=<span style="color: #ff0000;">"return confirm('Are you sure you want to delete?')"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Delete<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>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 <img src='http://www.gsdesign.ro/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<p>I hope this has been of some help to you.</p>
<p>Cheers </p>
]]></content:encoded>
			<wfw:commentRss>http://www.gsdesign.ro/blog/javascript-confirm-delete/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

