<?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>Christian Schenk&#187; javascript</title>
	<atom:link href="http://www.christianschenk.org/blog/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.christianschenk.org</link>
	<description>Writing about my experiences with technology and all different kinds of projects and experiments</description>
	<lastBuildDate>Sun, 29 Aug 2010 09:08:16 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>HTML select box to download files</title>
		<link>http://www.christianschenk.org/blog/html-select-dropdown-download-files/</link>
		<comments>http://www.christianschenk.org/blog/html-select-dropdown-download-files/#comments</comments>
		<pubDate>Thu, 21 Jan 2010 07:55:43 +0000</pubDate>
		<dc:creator>Christian Schenk</dc:creator>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[dropdown]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[select]]></category>

		<guid isPermaLink="false">http://www.christianschenk.org/?p=744</guid>
		<description><![CDATA[Just recently I wanted to have a simple HTML select element where the user should be able to click on a specific option to download a certain file. I came up with a solution that contains some JavaScript and straight forward HTML markup.
The HTML markup consists of a simple HTML select element that triggers a [...]]]></description>
			<content:encoded><![CDATA[<p>Just recently I wanted to have a simple HTML select element where the user should be able to click on a specific option to download a certain file. I came up with a solution that contains some JavaScript and straight forward HTML markup.</p>
<p>The HTML markup consists of a simple HTML select element that triggers a certain JavaScript function via the <code>onChange</code> hook. The JavaScript function in turn just sets the <code>window.location</code> to the given file and so the browser starts downloading.</p>
<p><span id="more-744"></span></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #000000; font-weight: bold;">function</span> download<span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>d <span style="color: #339933;">==</span> <span style="color: #0000ff;">'Select document'</span><span style="color: #009900;">&#41;</span> <span style="color: #b1b100;">return</span><span style="color: #339933;">;</span>
        window<span style="color: #339933;">.</span>location <span style="color: #339933;">=</span> <span style="color: #0000ff;">'http://example.com'</span> <span style="color: #339933;">+</span> d<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span>
&nbsp;
<span style="color: #339933;">&lt;</span>select name<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;download&quot;</span> onChange<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;download(this.value)&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>option<span style="color: #339933;">&gt;</span>Select document<span style="color: #339933;">&lt;/</span>option<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>option value<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;a_file.pdf&quot;</span><span style="color: #339933;">&gt;</span>A PDF document<span style="color: #339933;">&lt;/</span>option<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>option value<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;another_file.pdf&quot;</span><span style="color: #339933;">&gt;</span>Another PDF document<span style="color: #339933;">&lt;/</span>option<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>select<span style="color: #339933;">&gt;</span></pre></div></div>

<p>This technique can be used to jump to any page you want, e.g. you may use a select box instead of a large menu on your page. It helps you to include information &#8211; e.g. a long list &#8211; in a page with the compact select dropdown box that can be placed almost everywhere without consuming much space.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christianschenk.org/blog/html-select-dropdown-download-files/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress: Using custom fields to load scripts and styles</title>
		<link>http://www.christianschenk.org/blog/wordpress-custom-fields-load-scripts-styles/</link>
		<comments>http://www.christianschenk.org/blog/wordpress-custom-fields-load-scripts-styles/#comments</comments>
		<pubDate>Sat, 12 Dec 2009 06:12:44 +0000</pubDate>
		<dc:creator>Christian Schenk</dc:creator>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[custom fields]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[scripts]]></category>
		<category><![CDATA[styles]]></category>
		<category><![CDATA[tuning]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.christianschenk.org/?p=716</guid>
		<description><![CDATA[If you&#8217;re developing a WordPress plugin that depends on JavaScript or CSS you may advice WordPress to include these things for you. It&#8217;s as easy as using two functions &#8211; wp_enqueue_script and wp_enqueue_style &#8211; and your script or style will be embedded into each and every page generated by WordPress.
Most of the time this is [...]]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;re developing a WordPress plugin that depends on JavaScript or CSS you may advice WordPress to include these things for you. It&#8217;s as easy as using two functions &#8211; <code>wp_enqueue_script</code> and <code>wp_enqueue_style</code> &#8211; and your script or style will be embedded into each and every page generated by WordPress.</p>
<p>Most of the time this is a good thing because it&#8217;ll be easier for your users to implement the plugin on their sites. It gets really ugly if the theme loads certain scripts by default which are incompatible with the scripts needed by your plugin. And users concerned about performance &#8211; e.g. using Yahoo! YSlow or Google&#8217;s PageSpeed &#8211; may want to include only things that are really needed on a particular page.</p>
<p>This post presents a solution using custom fields that allows the user to tell the plugin when to include scripts and styles. Doing it this way helps the user to manage your plugin because of it&#8217;s added flexibility without hacking the code. Newbies trying to circumvent a certain incompatibility and power users tuning their sites to maximum performance both will love this feature of your plugin.</p>
<p><span id="more-716"></span></p>
<h2>Prerequisites</h2>
<p>In my experience custom fields aren&#8217;t very popular and not everybody using WordPress knows what one could do with them. Regarding this lack of knowledge you should make it as easy as possible to use your plugin even if somebody doesn&#8217;t know what custom fields are. By default your plugin shouldn&#8217;t use custom fields altogether but just load scripts and styles on each and every page.</p>
<p>Your plugin should work out of the box without any further modification. Just loading necessary JavaScript and CSS on every page seems to be a good default. So, just testing whether a certain custom field is set to a predefined value isn&#8217;t the way to go. In case your plugin hasn&#8217;t got a configuration page in the admin area yet it&#8217;s time to add one now. Allow the user to enable the usage of custom fields there.</p>
<p>Once a user tells your plugin to use custom fields you shouldn&#8217;t load the scripts and styles like you did before but only on posts/pages with a certain custom field. In case your plugin needs some configuration options allow the user to use the value of the custom field to set these options.</p>
<h2>Bringing it all together</h2>
<p>Above, I outlined some of my ideas on how things should work. You can do it different here and there but in the end I guess it would be great if all plugin/theme developers would use more or less the same strategy when it comes to using custom fields; this would help the users using your plugin if they&#8217;re familiar with custom fields from another plugin.</p>
<p>The code needed is pretty simple: just check whether the user wants to use the custom fields and then evaluate whether the current post/page has got one. It may look like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// right at the beginning of an action like:</span>
<span style="color: #666666; font-style: italic;">// wp_print_scripts, wp_head or wp_footer </span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>get_option<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'my_plugin_use_cf'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span>
  <span style="color: #000088;">$meta</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_custom_field'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$meta</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #b1b100;">return</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// use wp_enqueue_script and wp_enqueue_style here...</span></pre></div></div>

<p>In case the user wants to use the custom fields but the current post/page hasn&#8217;t got one the scripts and styles won&#8217;t be loaded. If the user may add options to the custom field you should parse them here.</p>
<h2>Conclusion</h2>
<p>From a plugin/theme developer&#8217;s perspective it&#8217;s straight forward allowing your users to use custom fields controlling how your plugin behaves. As a user it&#8217;s great having the possibility to use custom fields in case one wants to control how scripts and styles get included. Not only adds this extra flexibility to a plugin but makes updating a snap: you don&#8217;t have to remember how and where you changed the code.</p>
<p>I haven&#8217;t covered the issue that using custom fields may get tricky if your plugin is called directly &#8211; rather during the loop &#8211; maybe via an iFrame. If you do things like that it&#8217;s likely that you know how to access the database yourself or bootstrap WordPress to use <code>$wpdb</code> anyway.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christianschenk.org/blog/wordpress-custom-fields-load-scripts-styles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Remove clutter from WordPress 2.5</title>
		<link>http://www.christianschenk.org/blog/remove-clutter-from-wordpress-25/</link>
		<comments>http://www.christianschenk.org/blog/remove-clutter-from-wordpress-25/#comments</comments>
		<pubDate>Wed, 16 Apr 2008 07:20:11 +0000</pubDate>
		<dc:creator>Christian Schenk</dc:creator>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[HowTo]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.christianschenk.org/remove-clutter-from-wordpress-25/</guid>
		<description><![CDATA[This post shows you how to remove some clutter from your WordPress installation. Namely: RSD and WLW links and some JavaScript.]]></description>
			<content:encoded><![CDATA[<p>After upgrading to WordPress 2.5 I noticed some extra tags in the HTML header of my site: an RSD link, a link to the <code>wlwmanifest.xml</code> and a meta tag with the name set to <code>generator</code>.</p>
<p>While the link tags were introduced in an earlier release of WordPress the meta tag came with 2.5. I&#8217;m pretty sure that the latter will cause incompatibilities with a lot of existing themes that have a line like this in their <code>header.php</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;meta</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;generator&quot;</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">&quot;WordPress 2.3.2&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #808080; font-style: italic;">&lt;!-- leave this for stats please --&gt;</span></pre></div></div>

<p>In this post I&#8217;d like to share my ideas about removing some clutter from your WordPress installation. <span id="more-93"></span>Namely:</p>
<ul>
<li>RSD and WLW links</li>
<li>generator tag</li>
<li>some JavaScript</li>
</ul>
<h2>Removing RSD and WLW links</h2>
<p>Getting rid of this stuff is as easy as using the <a title="WLW Disabler" href="http://www.planetmike.com/plugins/wlw-disabler/">WLW Disabler</a> plugin. After installing and activating the plugin the links are gone. That&#8217;s great.</p>
<h2>Getting rid of the generator tag</h2>
<p>Maybe it&#8217;s possible to write a nice plugin that removes this tag too but a quick and dirty hack is to edit the file <code>general-template.php</code>; you can find it in <code>wp-includes</code>. On line 1187 set the variable <code>$gen</code> to an empty string:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// ...</span>
<span style="color: #000088;">$gen</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">return</span> apply_filters<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;get_the_generator_<span style="color: #006699; font-weight: bold;">{$type}</span>&quot;</span><span style="color: #339933;">,</span> <span style="color: #666666; font-style: italic;">// ...</span></pre></div></div>

<p>If you come up with a clean solution to this please <a href="#respond">leave a comment</a>.<br />
<em>Update</em>: I found a nice solution and <a title="Removing the WordPress Generator meta tag completely" href="/blog/removing-wordpress-generator-meta-tag-completely/">wrote</a> about it.</p>
<h2>Living without JavaScript</h2>
<p>Although this isn&#8217;t really related to the previous two I&#8217;d like to share this one too. I&#8217;ve disabled most of the JavaScript that comes with WordPress quite some time ago. And it works great for me: especially the admin pages load a lot faster.</p>
<p>Furthermore I got rid of <a href="http://www.prototypejs.org/">Prototype</a> that doesn&#8217;t play well with SmoothGallery. So, if you&#8217;re using the <a href="http://www.christianschenk.org/projects/wordpress-smoothgallery-plugin/">WordPress SmoothGallery plugin</a> this might be something for you.</p>
<p>Just open the file <code>wp-includes/script-loader.php</code> and comment out the line saying:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">default_scripts</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>That&#8217;s it.</p>
<h2>Conclusion</h2>
<p>If you don&#8217;t use Windows Live Writer and the like, using WLW Disabler should be of no harm for you. Disabling some of the JavaScript will give you a performance boost but you&#8217;ll lose some of the nifty features at the same time.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christianschenk.org/blog/remove-clutter-from-wordpress-25/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
