<?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>Sumit Gupta &#187; HTML/CSS</title>
	<atom:link href="http://www.sumitgupta.net/category/programming/htmlcss/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sumitgupta.net</link>
	<description>bookmarking my life</description>
	<lastBuildDate>Wed, 08 Feb 2012 11:23:49 +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>Selecting menu item using Javascript</title>
		<link>http://www.sumitgupta.net/selecting-menu-item-using-javascript/</link>
		<comments>http://www.sumitgupta.net/selecting-menu-item-using-javascript/#comments</comments>
		<pubDate>Wed, 20 Jul 2011 19:55:41 +0000</pubDate>
		<dc:creator>Sumit Gupta</dc:creator>
				<category><![CDATA[Concept/algorithm]]></category>
		<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://www.sumitgupta.net/?p=487</guid>
		<description><![CDATA[Okay, I create a pure CSS menu that use UL/LI structure to maintain the child relationship. All was great with this menu except that when you are on any of menu item page it doesn&#8217;t highlight that menu item explicitly. If you consider this it is not a big deal. What you can do is [...]]]></description>
			<content:encoded><![CDATA[<p>Okay, I create a pure CSS menu that use UL/LI structure to maintain the child relationship. All was great with this menu except that when you are on any of menu item page it doesn&#8217;t highlight that menu item explicitly. If you consider this it is not a big deal. What you can do is simply, iterate through the Menu Items which are probably in LI A tags. Once you iterate, find the URL in A tag and match the Page URL with the Menu ITEM link. If they match change the Class of respective LI or A as your liking.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> path <span style="color: #339933;">=</span> window.<span style="color: #660066;">location</span>.<span style="color: #660066;">pathname</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;/User/&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>path <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;&quot;</span> <span style="color: #009900;">&#41;</span>
        path<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;Userhome.aspx&quot;</span><span style="color: #339933;">;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#mainemnu a&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;href&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toLowerCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> path.<span style="color: #660066;">toLowerCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;submenuitem&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">//it is sub menu</span>
                $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;selectedmenu&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;selectedmenu&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>err<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #009900;">&#125;</span></pre></div></div>

<p>That was a simple Jquery Driven Javascript function that I call in Document ready function of Jquery.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sumitgupta.net/selecting-menu-item-using-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Facebook SDK: IE redirect loop</title>
		<link>http://www.sumitgupta.net/facebook-sdk-ie-redirect-loop/</link>
		<comments>http://www.sumitgupta.net/facebook-sdk-ie-redirect-loop/#comments</comments>
		<pubDate>Thu, 10 Feb 2011 13:12:00 +0000</pubDate>
		<dc:creator>Sumit Gupta</dc:creator>
				<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Cookie]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[Header]]></category>
		<category><![CDATA[PHP Header]]></category>
		<category><![CDATA[SDK]]></category>
		<category><![CDATA[Security policy]]></category>
		<category><![CDATA[W3C]]></category>

		<guid isPermaLink="false">http://www.sumitgupta.net/?p=446</guid>
		<description><![CDATA[Recently we had problem with Facebook SDK, that on IE it remain in redirect loop and hence our facebook application was not working. I test it to find that it wasn&#8217;t getting the session detail on form submission. The reason is Security policy of IE that prevent 3rd Party Cookie drop which is required for [...]]]></description>
			<content:encoded><![CDATA[<p>Recently we had problem with Facebook SDK, that on IE it remain in redirect loop and hence our facebook application was not working. I test it to find that it wasn&#8217;t getting the session detail on form submission. The reason is Security policy of IE that prevent 3rd Party Cookie drop which is required for SDK to work.</p>
<p>Finally got it working by throwing following header:</p>
<p>header(&#8216;P3P:CP=&#8221;IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT&#8221;&#8216;);</p>
<p>For now I just copy paste it from some site, but be careful all those words has different meaning and you may not want to throw all those words. Hope that help.</p>
<p>This same applies not just to facebook SDK, but anyone using a iframe application with cookie support.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sumitgupta.net/facebook-sdk-ie-redirect-loop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML: Why we need to format it properly</title>
		<link>http://www.sumitgupta.net/html-why-we-need-to-format-it-properly/</link>
		<comments>http://www.sumitgupta.net/html-why-we-need-to-format-it-properly/#comments</comments>
		<pubDate>Thu, 29 Jul 2010 11:02:15 +0000</pubDate>
		<dc:creator>Sumit Gupta</dc:creator>
				<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[CreateElement]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://www.sumitgupta.net/?p=403</guid>
		<description><![CDATA[I have always try to write a Validate HTML, but often I have been asked by my staff member what is the need of validated HTML if everything is working. They ask this question to avoid their little effort in getting HTML in proper shape, as they have to concentrate on open and closing tags [...]]]></description>
			<content:encoded><![CDATA[<p>I have always try to write a Validate HTML, but often I have been asked by my staff member what is the need of validated HTML if everything is working. They ask this question to avoid their little effort in getting HTML in proper shape, as they have to concentrate on open and closing tags etc. But recently I got a perfect example for them. We are using Jquery Ajax in our code where applicable, but soon my developer face a problem that whenever they try to load some dynamic content from Jquery Ajax it fails, but it works with their manual written Ajax code [which is indeed bit unsecure ]. But our problem is not limited to this, the problem we face is that when we add a Dynamic field using Ajax it doesn&#8217;t get submitted with Firefox, but it works fine with IE8 [yes you read it correct Firefox create problem for a chance this time]. I struggle to find the solution, because I didn&#8217;t look in HTML of their but try JS code only. Later I realise that I should check HTML and there I found a little problem.</p>
<p>The code is using DocType for XHTML 1.0 transitional, but what was written is not a valid xHTML, as the developer put &lt;Form&gt; opening tag between two &lt;tr&gt; tags. In XHTML this is not allowed, a Table Cell or Table element cannot take FORM tag as child, It will work for Table Cell [td], but it won&#8217;t work if you put FORM directly in Table Tag. Once the problem is solved, my dynamic fields start getting submitted fine on all browser.</p>
<p>Just little more information, that we were indeed using createElement DOM object, rather than InnerHTML to define our HTML, but still have that problem. So a Valid HTML is what I call a solution.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sumitgupta.net/html-why-we-need-to-format-it-properly/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML Application</title>
		<link>http://www.sumitgupta.net/html-application/</link>
		<comments>http://www.sumitgupta.net/html-application/#comments</comments>
		<pubDate>Tue, 13 Feb 2007 05:23:47 +0000</pubDate>
		<dc:creator>Sumit Gupta</dc:creator>
				<category><![CDATA[Bookmarked]]></category>
		<category><![CDATA[HTML/CSS]]></category>

		<guid isPermaLink="false">http://www.sumitgupta.net/?p=20</guid>
		<description><![CDATA[Recently I come across something new and not a useful as it seems, specially for web development. It is HTML Application (hta) a Microsoft&#8217;s own technology that work on IE browser, It act like a application though Programming language is HTML  Read more about it http://msdn.microsoft.com/library/default.asp?url=/workshop/author/hta/reference/properties/border.asp Its useful for organizational based Intranet application to some [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I come across something new and not a useful as it seems, specially for web development. It is HTML Application (hta) a Microsoft&#8217;s own technology that work on IE browser, It act like a application though Programming language is HTML</p>
<p>  Read more about it <a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/hta/reference/properties/border.asp">http://msdn.microsoft.com/library/default.asp?url=/workshop/author/hta/reference/properties/border.asp</a></p>
<p>Its useful for organizational based Intranet application to some extend though.</p>
<p>Sumit Gupta</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sumitgupta.net/html-application/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML Textarea Word Wrapping</title>
		<link>http://www.sumitgupta.net/html-textarea-word-wrapping/</link>
		<comments>http://www.sumitgupta.net/html-textarea-word-wrapping/#comments</comments>
		<pubDate>Wed, 05 Jul 2006 06:08:00 +0000</pubDate>
		<dc:creator>Sumit Gupta</dc:creator>
				<category><![CDATA[HTML/CSS]]></category>

		<guid isPermaLink="false">http://vikasumit.wordpress.com/2006/07/05/html-textarea-word-wrapping/</guid>
		<description><![CDATA[Today I discovered a new thing, it sound silly to most of developers, and might laugh on me&#8230; But Today I understood the mean of wrap=&#8221;hard&#8221; for Textarea . Actually we hava a textarea for product description, and programmer add wrap=&#8221;hard&#8221; in description, not sure why? And while displaying description for product, we just replace [...]]]></description>
			<content:encoded><![CDATA[<p>Today I discovered a new thing, it sound silly to most of developers, and might laugh on me&#8230; But Today I understood the mean of wrap=&#8221;hard&#8221; for Textarea <img src='http://www.sumitgupta.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<p>Actually we hava a textarea for product description, and programmer add wrap=&#8221;hard&#8221; in description, not sure why? And while displaying description for product, we just replace Line Break, Carriage return (\r\n or vbCRLF) with HTML Line Break <br /> Sound simple, but I found that after doing this I got exact formatting of text that I have in textarea. No matter I put Line break in text or not, it always take line break .. <img src='http://www.sumitgupta.net/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> </p>
<p>This is the result of wrap=&#8221;hard&#8221; in textarea&#8230; It preserve the Formatting of text as its in terms of text wrapping and send that in that manner in POST Header.</p>
<p>Good thing to learn about HTML (Basic of Internet and its success )</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sumitgupta.net/html-textarea-word-wrapping/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

