<?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>Pixel Bind</title>
	<atom:link href="http://pixelbind.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://pixelbind.com</link>
	<description></description>
	<lastBuildDate>Tue, 24 Mar 2020 13:59:10 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>http://pixelbind.com/wp-content/uploads/2018/02/cropped-1-32x32.jpg</url>
	<title>Pixel Bind</title>
	<link>http://pixelbind.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>SEO as the Best Online Marketing Strategy</title>
		<link>http://pixelbind.com/seo-as-the-best-online-marketing-strategy/</link>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Mon, 23 Apr 2018 15:01:01 +0000</pubDate>
				<category><![CDATA[SEO]]></category>
		<guid isPermaLink="false">http://pixelbind.com/?p=67</guid>

					<description><![CDATA[If you are serious about making money online, then SEO Marketing strategies are tactics that must be mastered if you want to be successful. Having [...]]]></description>
										<content:encoded><![CDATA[<p>If you are serious about making money online, then SEO Marketing strategies are tactics that must be mastered if you want to be successful. Having the best product in the world does you no good if your content ends up on page 55 on the search engines. Any content that you publish online should be optimized as much as possible for the search engines. Regardless of what kind of marketing method you are using to drive traffic, if it is not optimized you are just wasting your time, money, and resources. Using the SEO marketing strategies that are working now will result in increased traffic to your website, which in turn will drive your business more sales and profits.</p>
<p><img fetchpriority="high" decoding="async" class="aligncenter wp-image-76 size-large" src="http://redmoonrapture.com/wp-content/uploads/2018/04/business-close-up-commerce-266176-1024x838.jpg" alt="" width="660" height="540"></p>
<p><strong>SEO Tips That Produce High Rankings In The Search Engines</strong></p>
<p>The goal here is to drive as much traffic to your site as possible and than to monetize that traffic. Just like in real estate where the location is most critical, in online marketing it&#8217;s all about traffic and the more you have, the more internet real estate you control. It not hard to imagine that websites ranked on the first page of the search engines have a much higher probability of being visited than those who are not Typically, if you are not on the first page of the search engine results, the chances of getting traffic are slim to non.</p>
<p>Utilizing the right <a href="https://jsainteractive.com/">SEO marketing</a> will drive massive traffic to your website. So what are these SEO marketing strategies and how do you find them. The most important factor in determining where you are going to land on the search engine is the content of your keywords. You can use a keyword tool called Wordtracker to identify thousands of high ranking keywords with little or no competition. Wordtracker gives you statistics like keyword effectiveness, word counts in Google, and even how many times the keyword is listed in the title tags. Another SEO Marketing strategy is to use a social bookmarking site, like dig.com. Which allow users to bookmark your content just like you would bookmark one of your favorite websites on your own computer. This dramatically increases your page rank because it tells the search engine that its quality content.</p>
<p>There are many SEO marketing strategies and tactic you can use to drive quality targeted traffic to your website or business. The bottom line is to use quality keywords that are a low incompletion, are being searched for on a daily basis, and have as many links going back to your website as possible. Following these tips and strategies will get you to the top of search engines fast.</p>
<p><strong>How SEO Started</strong><br />
The Internet and its constantly growing reach and scope was the beginning of SEO. After that, search engines would be the second turning point in the history of the Internet, presenting the opportunity to put businesses at the fingertips of prospective clients. Next, SEO would follow after problems arose as to how to best organize websites on search engines.</p>
<p>During the mid &#8211; the 1990s, content providers, and Webmasters started utilizing websites for search engines as they were indexing the web pages located all over the Internet. In the beginning, the only thing needed to be submitted was the URL. Following that, the search engines would have web crawlers, also known as spiders, to find and return any information about that web page. The web crawler would also extract links to additional pages and than index those pages on its own server. So when a person was looking for something specific, he/she could type in a word or a group of words and a listing of websites would appear. Sometimes the search query was an exact match, and sometimes it wasn&#8217;t exactly a match.</p>
<p><img decoding="async" class="wp-image-77 size-full aligncenter" src="http://redmoonrapture.com/wp-content/uploads/2018/04/advertising-alphabet-business-270637.jpg" alt="" width="2566" height="1704"></p>
<p>The Internet in its infancy was ripe with ranking manipulation and other abuses by a number of webmasters. It did not take long for some of them to understand the value of keywords, and using SEO to their advantage. Before the coming of algorithms or any SEO Agency, <a href="http://www.foxnews.com/us/2016/10/17/4-things-every-entrepreneur-needs-to-know-about-seo.html">webmasters</a> would stuff web pages with meta tags containing data that was sometimes found to be unreliable. Web pages being ranked on search engines depended on the way webmasters would place keywords. The knowledge of keyword density was also important because traffic equals money. Webmasters also knew how to manipulate HTML attributes on web pages so that these pages would rank higher. Things were looking up for dishonest webmasters, but it did not take long search engines to combat ranking manipulation.</p>
<p>In order to counteract lots of inaccurate representation among some web site&#8217;s web pages, better SEO was implemented. Now websites were ranked according to relevance. The need for someone who could properly manipulate these new standards in determining page rank allowed SEO agencies to take center stage.<br />
SEO first became recognized when websites owners realized the importance of having their websites ranked and seen among the very first search engine results. The first documented usage of the term &#8220;search engine optimization&#8221; was by John Audete, founder of Multimedia Marketing Group in 1995. SEO is the best of all Web design and online marketing strategies. Make use of it and you will definitely like the results. I wish you all the best.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Up and Running</title>
		<link>http://pixelbind.com/up-and-running/</link>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Mon, 04 Dec 2017 08:49:01 +0000</pubDate>
				<category><![CDATA[Web Development]]></category>
		<guid isPermaLink="false">http://pixelbind.com/?p=19</guid>

					<description><![CDATA[Finally, we’re up and running. &#160;Welcome to PixelBind.com. &#160;I’ve been trying to get a blog up and running for a little over a year now. [...]]]></description>
										<content:encoded><![CDATA[<p><span style="color: #000000;">Finally, we’re up and running. &nbsp;Welcome to PixelBind.com. &nbsp;I’ve been trying to get a blog up and running for a little over a year now. &nbsp;I finally sacrificed a few days over the weekend to code out my theme. &nbsp;I know I’ll have to adjust it here and there, but for now, it’ll do the job. &nbsp;Let’s start writing and sharing already!</span></p>
<p><span style="color: #000000;">Allow me to introduce myself. &nbsp;My name is Jonathan Carter. &nbsp;I’ve been a web developer since 2007. &nbsp;I currently work for a county government agency in the Myrtle Beach, SC area. &nbsp;Yes, living at the beach is a delight, but I have to say I’m guilty for forgetting it’s there sometimes. &nbsp;I graduated Coastal Carolina University in 2006 with a bachelors in graphic design. &nbsp;Shortly after graduating, I started working at a marketing agency here in Myrtle Beach and started diving into HTML, CSS, and JavaScript. &nbsp;That got old real quick and I started learning my first server-side language, ColdFusioon (I think it was ColdFusion MX at the time). &nbsp;A couple of years in the marketing agency left me thirsty for web development, so I got a job with the county government as an ASP.NET web application developer. &nbsp;I mainly work with VB.NET, C#, ADO.NET, SQL Server, and DotNetNuke. &nbsp;Don’t worry, I’ll be covering other categories. &nbsp;I don’t particularly care for the Microsoft .NET framework, and think it’s a little bloated in my opinion.</span></p>
<p><span style="color: #000000;">I come across little snippets of code, or simple methods daily and thought it would be a great way to give back if I started a blog of my own. &nbsp;Thanks for visiting – first blog post… complete!</span></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Responsive Page Layouts with jQuery and CSS</title>
		<link>http://pixelbind.com/80-responsive-page-layouts-with-jquery-and-css/</link>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Mon, 04 Dec 2017 08:46:02 +0000</pubDate>
				<category><![CDATA[Web Development]]></category>
		<guid isPermaLink="false">http://pixelbind.com/?p=17</guid>

					<description><![CDATA[Screen resolutions vary tremendously these days. &#160;As a web developer, you want your site to present itself nicely no matter what platform you’re viewing it [...]]]></description>
										<content:encoded><![CDATA[<p>Screen resolutions vary tremendously these days. &nbsp;As a web developer, you want your site to present itself nicely no matter what platform you’re viewing it on. &nbsp;For years now, many companies thought the best approach to delivering content to a mobile device would be to create a clone of the site specifically styled for mobile devices. &nbsp;Nice thought I guess. &nbsp;If you don’t have the budget, or the time to invest in a mobile site or a mobile app, there’s a quick and easy way to have your website go from a static width to a responsive one, and this is all possible with some basic CSS and javascript (I use jQuery, but you can accomplish this with traditional JavaScript).</p>
<h3>So here’s what I’m thinking:</h3>
<p>I’ll create a site as I normally would with a main stylesheet. &nbsp;This stylesheet will be where most of my rules are defined for the layout minus the main width of the site. &nbsp;Keep this in mind when you’re writing your CSS so it will be a simple modification to change the width of the site. &nbsp;I’m also going to include a copy of jQuery right above the stylesheet.</p>
<div>
<div id="highlighter_84441" class="syntaxhighlighter nogutter pbCode xml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="xml plain">&lt;!</code><code class="xml keyword">DOCTYPE</code>&nbsp;<code class="xml plain">html&gt;</code></div>
<div class="line number2 index1 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">html</code>&nbsp;<code class="xml color1">xmlns</code><code class="xml plain">=</code><code class="xml string">"http://www.w3.org/1999/xhtml"</code><code class="xml plain">&gt;</code></div>
<div class="line number3 index2 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">head</code><code class="xml plain">&gt;</code></div>
<div class="line number4 index3 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">meta</code>&nbsp;<code class="xml color1">http-equiv</code><code class="xml plain">=</code><code class="xml string">"Content-Type"</code>&nbsp;<code class="xml color1">content</code><code class="xml plain">=</code><code class="xml string">"text/html; charset=utf-8"</code>&nbsp;<code class="xml plain">/&gt;</code></div>
<div class="line number5 index4 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">title</code><code class="xml plain">&gt;My Website&lt;/</code><code class="xml keyword">title</code><code class="xml plain">&gt;</code></div>
<div class="line number6 index5 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">script</code>&nbsp;<code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code>&nbsp;<code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"js/jquery-1.7.1.min.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div>
<div class="line number7 index6 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">link</code>&nbsp;<code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"css/main.css"</code>&nbsp;<code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"stylesheet"</code>&nbsp;<code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/css"</code>&nbsp;<code class="xml plain">/&gt;</code></div>
<div class="line number8 index7 alt1"><code class="xml plain">&lt;/</code><code class="xml keyword">head</code><code class="xml plain">&gt;</code></div>
<div class="line number9 index8 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></div>
<div class="line number10 index9 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"container"</code><code class="xml plain">&gt;</code></div>
<div class="line number11 index10 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Website content goes here...</code></div>
<div class="line number12 index11 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div>
<div class="line number13 index12 alt2"><code class="xml plain">&lt;/</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></div>
<div class="line number14 index13 alt1"><code class="xml plain">&lt;/</code><code class="xml keyword">html</code><code class="xml plain">&gt;</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>Then, I’ll create another stylesheet and give it an ID of “smartCSS” so I can reference it via JavaScript (jQuery). &nbsp;This stylesheet will basically be used set the width of the site to the industry standard. &nbsp;It should also be placed directly below the existing “main.css” file like so…</p>
<div>
<div id="highlighter_264866" class="syntaxhighlighter nogutter pbCode xml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="xml plain">...</code></div>
<div class="line number2 index1 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">title</code><code class="xml plain">&gt;My Website&lt;/</code><code class="xml keyword">title</code><code class="xml plain">&gt;</code></div>
<div class="line number3 index2 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">script</code>&nbsp;<code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code>&nbsp;<code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"js/jquery-1.7.1.min.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div>
<div class="line number4 index3 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">link</code>&nbsp;<code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"css/main.css"</code>&nbsp;<code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"stylesheet"</code>&nbsp;<code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/css"</code>&nbsp;<code class="xml plain">/&gt;</code></div>
<div class="line number5 index4 alt2 highlighted"><code class="xml plain">&lt;</code><code class="xml keyword">link</code>&nbsp;<code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"css/normal.css"</code>&nbsp;<code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"stylesheet"</code>&nbsp;<code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/css"</code><code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"smartCSS"</code>&nbsp;<code class="xml plain">/&gt;</code></div>
<div class="line number6 index5 alt1"><code class="xml plain">...</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>normal.css:</p>
<div>
<div id="highlighter_879309" class="syntaxhighlighter nogutter pbCode css">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="css plain">body {</code></div>
<div class="line number2 index1 alt1"><code class="css spaces">&nbsp;&nbsp;</code><code class="css keyword">background</code><code class="css plain">:</code><code class="css value">#AAAAAA</code><code class="css plain">;</code></div>
<div class="line number3 index2 alt2"><code class="css plain">}</code></div>
<div class="line number4 index3 alt1"><code class="css plain">div#container {</code></div>
<div class="line number5 index4 alt2"><code class="css spaces">&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">500px</code><code class="css plain">;</code></div>
<div class="line number6 index5 alt1"><code class="css plain">}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>Now, I’m going to prepare a 3rd stylesheet called “wide.css”. This will be replacing “normal.css” with jQuery when the browser window is wider than 800 pixels.</p>
<p>wide.css:</p>
<div>
<div id="highlighter_327457" class="syntaxhighlighter nogutter pbCode css">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="css plain">body {</code></div>
<div class="line number2 index1 alt1"><code class="css spaces">&nbsp;&nbsp;</code><code class="css keyword">background</code><code class="css plain">:</code><code class="css value">maroon</code><code class="css plain">;</code></div>
<div class="line number3 index2 alt2"><code class="css plain">}</code></div>
<div class="line number4 index3 alt1"><code class="css plain">div#container {</code></div>
<div class="line number5 index4 alt2"><code class="css spaces">&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">700px</code><code class="css plain">;</code></div>
<div class="line number6 index5 alt1"><code class="css plain">}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>Here’s where the power comes in… jQuery. This code can be placed anywhere in the document. Some popular places are within the &lt;head&gt; (if you’re going to place it here, it should be directly before the closing head tag. You’re stylesheets and jQuery source file should be above this). You could also put it directly before the closing body tag.</p>
<div>
<div id="highlighter_101741" class="syntaxhighlighter nogutter pbCode jscript">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="jscript plain">&lt;script type=</code><code class="jscript string">"text/javascript"</code><code class="jscript plain">&gt;</code></div>
<div class="line number2 index1 alt1"><code class="jscript spaces">&nbsp;&nbsp;</code><code class="jscript keyword">function</code>&nbsp;<code class="jscript plain">setWidth() {</code></div>
<div class="line number3 index2 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code>&nbsp;<code class="jscript plain">theWidth = $(window).width();</code></div>
<div class="line number4 index3 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code>&nbsp;<code class="jscript plain">(theWidth &gt; 800) {</code></div>
<div class="line number5 index4 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"#smartCSS"</code><code class="jscript plain">).attr(</code><code class="jscript string">"href"</code><code class="jscript plain">,&nbsp;</code><code class="jscript string">"css/wide.css"</code><code class="jscript plain">);</code></div>
<div class="line number6 index5 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}&nbsp;</code><code class="jscript keyword">else</code>&nbsp;<code class="jscript plain">{</code></div>
<div class="line number7 index6 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"#smartCSS"</code><code class="jscript plain">).attr(</code><code class="jscript string">"href"</code><code class="jscript plain">,&nbsp;</code><code class="jscript string">"css/normal.css"</code><code class="jscript plain">);</code></div>
<div class="line number8 index7 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></div>
<div class="line number9 index8 alt2"><code class="jscript spaces">&nbsp;&nbsp;</code><code class="jscript plain">}</code></div>
<div class="line number10 index9 alt1"><code class="jscript spaces">&nbsp;&nbsp;</code><code class="jscript plain">$(document).ready(</code><code class="jscript keyword">function</code><code class="jscript plain">() { setWidth(); });</code></div>
<div class="line number11 index10 alt2"><code class="jscript spaces">&nbsp;&nbsp;</code><code class="jscript plain">$(window).resize(</code><code class="jscript keyword">function</code><code class="jscript plain">() { setWidth(); });</code></div>
<div class="line number12 index11 alt1"><code class="jscript plain">&lt;/script&gt;</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Allow me to explain:</h3>
<p>Line 2 creates a function that gets the width of the browser window. It then checks if the window is greater than 800 pixels. If it is, it sets the “href” attribute of the smartCSS stylesheet to “css/wide.css”. Otherwise, it sets it to “css/normal.css”. This is just defining a function. It never runs unless it’s called. On line 10, it does just that. When the page is loaded, it fires off the function once. This will make the website determine your browser’s width and set it accordingly when the page is loaded. The neat part is on line 11. The jQuery resize() function is called hundreds of times while the browser window is being resized by the user. Every time this occurs, the site is making a choice on how to display the content.</p>
<p>I prepared a demo for you so you can see it in action:</p>
<p><a class="linkButton" href="https://web.archive.org/web/20160317135126/http://www.pixelbind.com/examples/responsive-layouts-with-jQuery/" target="_blank" rel="noopener noreferrer">View the Demo</a></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Removing a Stylesheet from the DOM with jQuery</title>
		<link>http://pixelbind.com/80-removing-a-stylesheet-from-the-dom-with-jquery/</link>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Mon, 04 Dec 2017 08:43:25 +0000</pubDate>
				<category><![CDATA[Internet]]></category>
		<category><![CDATA[Web Development]]></category>
		<guid isPermaLink="false">http://pixelbind.com/?p=15</guid>

					<description><![CDATA[I was coding a DotNetNuke skin today (pardon me while I throw up), and got sick and tired of the interference of it’s default stylesheet. [...]]]></description>
										<content:encoded><![CDATA[<p>I was coding a DotNetNuke skin today (pardon me while I throw up), and got sick and tired of the interference of it’s default stylesheet. &nbsp;Many of you right now are probably thinking the quick fix would be to remove the content from the stylesheet on the server, but the problem is that I am dealing with DotNetNuke Professional, where you can host multiple domains. &nbsp;Every skin on every domain that’s hosted on the DNN CMS references this stylesheet and you simply can’t do that without screwing up pre-existing sites. &nbsp;Unfortunately, there is no option to remove the inclusion in the site settings, or anywhere within DotNetNuke.</p>
<p>Today, enough was enough. &nbsp;I looked at the source code from the browser and thought that since the stylesheet had a unique ID, I could just remove it with the jQuery “.remove()” function. &nbsp;You can add this small script anywhere on your page, it just has to be placed after the corresponding stylesheet you want to remove.</p>
<h3>Here’s the link tag I want to remove:</h3>
<div>
<div id="highlighter_272165" class="syntaxhighlighter nogutter pbCode plain">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="plain plain">&lt;link id="APortals__default_" rel="stylesheet" type="text/css" href="/Portals/_default/default.css" /&gt;</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>…and here’s how I removed it with jQuery:</h3>
<div>
<div id="highlighter_227363" class="syntaxhighlighter nogutter pbCode jscript">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="jscript plain">&lt;script type=</code><code class="jscript string">"text/javascript"</code><code class="jscript plain">&gt;</code></div>
<div class="line number2 index1 alt1"><code class="jscript spaces">&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"#APortals__default_"</code><code class="jscript plain">).remove();</code></div>
<div class="line number3 index2 alt2"><code class="jscript plain">&lt;/script&gt;</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Creating a Caption Slider with jQuery</title>
		<link>http://pixelbind.com/80-creating-a-caption-slider-with-jquery/</link>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Mon, 04 Dec 2017 08:41:02 +0000</pubDate>
				<category><![CDATA[Web Development]]></category>
		<guid isPermaLink="false">http://pixelbind.com/?p=12</guid>

					<description><![CDATA[I know I’ve been on a jQuery kick. &#160;I guess I’ve been doing a lot of user-interface coding lately. &#160;I really enjoy using jQuery. &#160;It [...]]]></description>
										<content:encoded><![CDATA[<p>I know I’ve been on a jQuery kick. &nbsp;I guess I’ve been doing a lot of user-interface coding lately. &nbsp;I really enjoy using jQuery. &nbsp;It really makes a developer’s life easier as it handles most cross-browser problems. &nbsp;Also, the way you write it just seems to make logical sense to me.</p>
<p>Anyway, here’s what I’ll be creating today… (go ahead and mouse over Jack).</p>
<div class="theBox">
<p><img decoding="async" src="https://web.archive.org/web/20160204032926im_/http://www.pixelbind.com/wp-content/uploads/2012/03/jack.jpg" alt="Jack, the springer spaniel" width="325" height="200"></p>
<div class="theBoxCaption">Hello, my name is Jack</div>
</div>
<div>
<div id="highlighter_14210" class="syntaxhighlighter nogutter pbCode coldfusion">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>No need for an independent sample page. &nbsp;This script is pretty easy. &nbsp;It’s really just a few lines of JavaScript/jQuery.</p>
<h3>The HTML…</h3>
<div>
<div id="highlighter_800364" class="syntaxhighlighter nogutter pbCode plain">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="plain plain">&lt;div class="theBox"&gt;</code></div>
<div class="line number2 index1 alt1"><code class="plain spaces">&nbsp;&nbsp;</code><code class="plain plain">&lt;img src="jack.jpg" alt="Jack, the springer" /&gt;</code></div>
<div class="line number3 index2 alt2"><code class="plain spaces">&nbsp;&nbsp;</code><code class="plain plain">&lt;div class="theBoxCaption"&gt;Hello, my name is Jack&lt;/div&gt;</code></div>
<div class="line number4 index3 alt1"><code class="plain plain">&lt;/div&gt;</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>The CSS…</h3>
<div>
<div id="highlighter_143301" class="syntaxhighlighter nogutter pbCode css">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="css plain">div.theBox {&nbsp;</code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">325px</code><code class="css plain">;&nbsp;</code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">200px</code><code class="css plain">;&nbsp;</code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">relative</code><code class="css plain">;</code><code class="css keyword">overflow</code><code class="css plain">:</code><code class="css value">hidden</code><code class="css plain">; }</code></div>
<div class="line number2 index1 alt1"><code class="css plain">div.theBox img {&nbsp;</code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">325px</code><code class="css plain">;&nbsp;</code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">200px</code><code class="css plain">;&nbsp;</code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">; }</code></div>
<div class="line number3 index2 alt2"><code class="css plain">div.theBoxCaption {&nbsp;</code><code class="css keyword">background</code><code class="css plain">:</code><code class="css value">#000000</code><code class="css plain">;&nbsp;</code><code class="css keyword">color</code><code class="css plain">:</code><code class="css value">#FFFFFF</code><code class="css plain">;</code><code class="css keyword">padding</code><code class="css plain">:</code><code class="css value">10px</code><code class="css plain">;&nbsp;</code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">200px</code><code class="css plain">;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">305px</code><code class="css plain">;&nbsp;</code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">relative</code><code class="css plain">;</code></div>
<div class="line number4 index3 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css plain">opacity:</code><code class="css value">0.75</code><code class="css plain">; filter:alpha(opacity=</code><code class="css value">75</code><code class="css plain">);}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>The JavaScript/jQuery…</h3>
<div>
<div id="highlighter_243115" class="syntaxhighlighter nogutter pbCode jscript">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="jscript plain">&lt;script type=</code><code class="jscript string">"text/javascript"</code><code class="jscript plain">&gt;</code></div>
<div class="line number2 index1 alt1"><code class="jscript plain">$(</code><code class="jscript string">".theBox"</code><code class="jscript plain">).hover(</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></div>
<div class="line number3 index2 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code>&nbsp;<code class="jscript plain">mainHeight = $(</code><code class="jscript keyword">this</code><code class="jscript plain">).height();&nbsp;</code><code class="jscript comments">//height of the main container</code></div>
<div class="line number4 index3 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code>&nbsp;<code class="jscript plain">captionHeight = $(</code><code class="jscript keyword">this</code><code class="jscript plain">).find(</code><code class="jscript string">"div.theBoxCaption"</code><code class="jscript plain">).innerHeight();&nbsp;</code><code class="jscript comments">//height of caption box</code></div>
<div class="line number5 index4 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code>&nbsp;<code class="jscript plain">finalPosition = mainHeight - captionHeight;&nbsp;</code><code class="jscript comments">//calculates where the caption box needs to end up at end of animation</code></div>
<div class="line number6 index5 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript keyword">this</code><code class="jscript plain">).find(</code><code class="jscript string">"div.theBoxCaption"</code><code class="jscript plain">).animate({top:finalPosition +</code><code class="jscript string">'px'</code><code class="jscript plain">},{queue:</code><code class="jscript keyword">false</code><code class="jscript plain">, duration:500},&nbsp;</code><code class="jscript string">'swing'</code><code class="jscript plain">);&nbsp;</code><code class="jscript comments">//mouseEnter animation</code></div>
<div class="line number7 index6 alt2"><code class="jscript plain">},&nbsp;</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></div>
<div class="line number8 index7 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code>&nbsp;<code class="jscript plain">mainHeight = $(</code><code class="jscript keyword">this</code><code class="jscript plain">).height();</code></div>
<div class="line number9 index8 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript keyword">this</code><code class="jscript plain">).find(</code><code class="jscript string">"div.theBoxCaption"</code><code class="jscript plain">).animate({top:mainHeight +</code><code class="jscript string">'px'</code><code class="jscript plain">},{queue:</code><code class="jscript keyword">false</code><code class="jscript plain">, duration:750},&nbsp;</code><code class="jscript string">'swing'</code><code class="jscript plain">);&nbsp;</code><code class="jscript comments">//mouseOut animation</code></div>
<div class="line number10 index9 alt1"><code class="jscript plain">});</code></div>
<div class="line number11 index10 alt2"><code class="jscript plain">&lt;/script&gt;</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>English Translation:</h3>
<p>Starting with the HTML, I use a DIV with a class of “theBox” as my main container. I used a class and not an ID intentionally, so it gives me the option to add another image with a caption on the same page (thinking ahead is always good programming practice). The CSS is pretty standard. The important part is to have a position of relative and overflow:hidden on “theBox”. Then, when you set a position:relative for “theBoxCaption”, you need to set the “top” property to match the height of “theBox”. The rest is really powered by jQuery. I’ve seen a lot of plugins out there and always wanted to come up with a way to do this on my own.</p>
<p>The only property I’m animating here is the “top” property on “theBoxCaption”. Initially, this gets set by the CSS of the page (it’s set to 200px). Then, I do some calculating to find out what the top value needs to be at the end of the animation. I subtract the height of the “captionBox” from the height of “theBox”. Then, it’s just a matter of sending that value in an animate function. The second argument of my .hover() function is actually the mouseOut event. A lot of people don’t realize that you don’t need a separate MouseOut event and that you simply just write that in the 2nd argument for the .hover() function. For this example, I’m just reversing what I did and animating the “top” value of “theCaptionBox” back to the height of the main parent container (“theBox”).</p>
<p>This has sort of encouraged me to write my own plugin – maybe I’ll repost this topic at that time. I hope you find this useful.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Not Receiving Apple ID Verification Email</title>
		<link>http://pixelbind.com/80-not-receiving-apple-id-verification-email/</link>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Mon, 04 Dec 2017 08:38:41 +0000</pubDate>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Web Development]]></category>
		<guid isPermaLink="false">http://pixelbind.com/?p=10</guid>

					<description><![CDATA[My mother recently bought an iPhone (Go Mom!). I think the main reason was to FaceTime with my siblings and myself. I was showing her [...]]]></description>
										<content:encoded><![CDATA[<p>My mother recently bought an iPhone (Go Mom!). I think the main reason was to FaceTime with my siblings and myself. I was showing her a few little tricks on the phone when I realized she hasn’t downloaded any apps from the app store. I told her how she needed an Apple ID, and once she signed up for one, she could download some neat stuff for the phone. Easy enough, right?</p>
<p>I continued to sign up for an Apple account on her phone. After filling in the long form, I finally got a message telling me to verify the account through the email that was sent to her. I signed in to her email… nothing. I tried multiple times to resend the email from her phone… still nothing hours later. I even tried signing her into iTunes thinking I’d be able to manage her account in there, but iTunes wouldn’t even let me sign in without verifying the account.</p>
<p>I finally went searching online a way to manage my apple account without it being verified and I found a little hidden nugget. Go to&nbsp;<a title="Manage your Apple ID" href="https://web.archive.org/web/20160204032926/https://appleid.apple.com/" target="_blank" rel="noopener noreferrer">https://appleid.apple.com</a>&nbsp;and click on “Manage your account”. From there you can sign in and have the system resend the verification email. This was the only time the email functionality worked. It finally came through and I was able to click on the encrypted link to verify my account.</p>
<p><a href="https://web.archive.org/web/20160204032926/http://www.pixelbind.com/wp-content/uploads/2012/04/AppleID.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-76" title="AppleID" src="https://web.archive.org/web/20160204032926im_/http://www.pixelbind.com/wp-content/uploads/2012/04/AppleID.jpg" alt="Apple ID Verification Email Instructions" width="500" height="332"></a></p>
<p>I hope this helps someone out there. I was about ready to pull my hair out on this. No wonder why technology annoys so many people. Apple, if you’re reading this, you may need to investigate your email function coding. I read a ton of forums of people barking about this same issue with no resolutions.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Sorting Indicators on ASP.NET GridView</title>
		<link>http://pixelbind.com/80-sorting-indicator-aspnet-gridview/</link>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Mon, 04 Dec 2017 08:35:40 +0000</pubDate>
				<category><![CDATA[Web Development]]></category>
		<guid isPermaLink="false">http://pixelbind.com/?p=8</guid>

					<description><![CDATA[I was recently trying to sort an ASP.NET gridview and realized it was no easy task to show the column that the grid was sorted [...]]]></description>
										<content:encoded><![CDATA[<p>I was recently trying to sort an ASP.NET gridview and realized it was no easy task to show the column that the grid was sorted by. &nbsp;I don’t know if 4.0 or 4.5 .NET has this capability, but it seems like the GridView control should have parameters that you could assign an ascending/descending icons to. &nbsp;Unfortunately, it doesn’t.</p>
<p><a href="https://web.archive.org/web/20160204032926/http://www.pixelbind.com/wp-content/uploads/2012/05/GridView_Seinfeld.jpg"><img loading="lazy" decoding="async" class="size-full wp-image-82 aligncenter" title="ASP.NET GridView Sort Indicators" src="https://web.archive.org/web/20160204032926im_/http://www.pixelbind.com/wp-content/uploads/2012/05/GridView_Seinfeld.jpg" alt="ASP.NET GridView Sort Indicators" width="500" height="300"></a></p>
<p>In a few lines of code I was able to add an image next to the column header like the example above (see that little triangle?). &nbsp;I was amazed on what I found online when researching this. &nbsp;Many developers have a tendency of over-complicating things, so my code below is as bare-bones as possible.</p>
<h2>VB.NET (Code-Behind on GridView RowCreated Event):</h2>
<div>
<div id="highlighter_876045" class="syntaxhighlighter nogutter pbCode vb">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="vb keyword">If</code>&nbsp;<code class="vb plain">e.Row.RowType = DataControlRowType.Header&nbsp;</code><code class="vb keyword">Then</code></div>
<div class="line number2 index1 alt1"><code class="vb spaces">&nbsp;&nbsp;</code><code class="vb keyword">For</code>&nbsp;<code class="vb keyword">Each</code>&nbsp;<code class="vb plain">field&nbsp;</code><code class="vb keyword">As</code>&nbsp;<code class="vb plain">DataControlField&nbsp;</code><code class="vb keyword">In</code>&nbsp;<code class="vb plain">gv1.Columns</code></div>
<div class="line number3 index2 alt2"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb keyword">If</code>&nbsp;<code class="vb plain">field.SortExpression = gv1.SortExpression&nbsp;</code><code class="vb keyword">Then</code></div>
<div class="line number4 index3 alt1"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb keyword">Dim</code>&nbsp;<code class="vb plain">sortImage&nbsp;</code><code class="vb keyword">As</code>&nbsp;<code class="vb keyword">New</code>&nbsp;<code class="vb plain">Image()</code></div>
<div class="line number5 index4 alt2"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb keyword">If</code>&nbsp;<code class="vb plain">gv1.SortDirection.ToString =&nbsp;</code><code class="vb string">"Ascending"</code>&nbsp;<code class="vb keyword">Then</code></div>
<div class="line number6 index5 alt1"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb plain">sortImage.ImageUrl =&nbsp;</code><code class="vb string">"images/asc.png"</code></div>
<div class="line number7 index6 alt2"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb keyword">Else</code></div>
<div class="line number8 index7 alt1"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb plain">sortImage.ImageUrl =&nbsp;</code><code class="vb string">"images/desc.png"</code></div>
<div class="line number9 index8 alt2"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb keyword">End</code>&nbsp;<code class="vb keyword">If</code></div>
<div class="line number10 index9 alt1"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb plain">sortImage.AlternateText =&nbsp;</code><code class="vb string">"Sorted "</code>&nbsp;<code class="vb plain">&amp; gv1.SortDirection.ToString</code></div>
<div class="line number11 index10 alt2"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb plain">e.Row.Cells(gv1.Columns.IndexOf(field)).Controls.Add(sortImage)</code></div>
<div class="line number12 index11 alt1"><code class="vb spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="vb keyword">End</code>&nbsp;<code class="vb keyword">If</code></div>
<div class="line number13 index12 alt2"><code class="vb spaces">&nbsp;&nbsp;</code><code class="vb keyword">Next</code></div>
<div class="line number14 index13 alt1"><code class="vb keyword">End</code>&nbsp;<code class="vb keyword">If</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>Line-By-Line:</h2>
<p>It’s assumed you already have a GridView databound to an object datasource and you have sorting enabled. This code-behind should be under the gridview (gv1) RowCreated event.</p>
<ul>
<li>1 – Checks if the row being generated is a header row (otherwise, the row is ignored)</li>
<li>2 – Sets up a loop to go through each cell, or field, in the row</li>
<li>3 – Checks if the sort expression of the GridView matches the current field/column</li>
<li>If the sort expression matched – enter lines 4 – 11</li>
<li>4 – Creates a new image object called ‘sortImage’</li>
<li>5 – 9 – Tests the GridView’s current sort direction. &nbsp;If it’s ‘Ascending’, assign an ImageUrl (you need ascending/descending icons – mine are in my ‘/images’ folder). &nbsp;Otherwise, assign the descending image to the ImageUrl</li>
<li>10 – Sets ALT text to the image so we keep W3C compliance – Mine is a concatenated string that would be something like ‘Sorted Descending’</li>
<li>11 – Adds the image to the header cell</li>
</ul>
<p>I hope this helps someone out there. &nbsp;I know there are many ways to do this, but this seemed to be the most light-weight scenario I could come up with without using a third-party solution.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Make a DIV stick when you scroll</title>
		<link>http://pixelbind.com/80-make-a-div-stick-when-you-scroll/</link>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Mon, 04 Dec 2017 08:32:43 +0000</pubDate>
				<category><![CDATA[Web Development]]></category>
		<guid isPermaLink="false">http://pixelbind.com/?p=6</guid>

					<description><![CDATA[I’ve seen this method used a lot around the web and I’ve recently been working on a website where I wanted to incorporate it. &#160;After [...]]]></description>
										<content:encoded><![CDATA[<p>I’ve seen this method used a lot around the web and I’ve recently been working on a website where I wanted to incorporate it. &nbsp;After finding zero results in about a minute of research, I thought this would be a neat topic to write a post about.</p>
<p>So my main concept here is to have a sidebar that would stick to the top of the page once the window was about to pass it by while scrolling. This could be used for dozens of reasons. Perhaps you want to ensure your advertisements are being shown the maximum amount of time possible; or maybe you want to offer your visitors an area of&nbsp;quick-links&nbsp;so they wouldn’t have to scroll to the top of the page to navigate somewhere else. &nbsp;The site I’m working on is&nbsp;e commerce, so it will be an area to up-sell other products relative to the page the user is viewing.</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-106" title="Stick a DIV" src="https://web.archive.org/web/20160204032926im_/http://www.pixelbind.com/wp-content/uploads/2012/07/sticker-div.jpg" alt="stick a div when it scrolls" width="500" height="300"></p>
<p>In the code below, I have two DIVs floating that represent the main content area and the sidebar. &nbsp;Sidebars are usually shorter than the main content area, so this is where my sticky DIV will be. &nbsp;I give it an id of “sticker” (original, huh?). &nbsp;With some jQuery, I’m able to fire off a function every time I scroll on the page. &nbsp;This function calculates my current position, or viewport, or distance from the top. &nbsp;It also calculates how far from the top my “sticker” div is. &nbsp;Then, there’s an IF statement that’s fired off…</p>
<p>IF my current position is greater or equal to the “sticker” position, give the sticker div a class of “stick”. &nbsp;This changes the CSS of the div to have a FIXED position as long as the viewport is lower than the position of the sticker.</p>
<p><strong>HTML</strong>&nbsp;– Nothing crazy going on here – a mere 2-column setup</p>
<div>
<div id="highlighter_802211" class="syntaxhighlighter nogutter pbCode xml">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"wrapper"</code><code class="xml plain">&gt;</code></div>
<div class="line number2 index1 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"mainContent"</code><code class="xml plain">&gt;</code></div>
<div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml comments">&lt;!--Content for your main div - like a blog post--&gt;</code></div>
<div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div>
<div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"sideBar"</code><code class="xml plain">&gt;</code></div>
<div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml comments">&lt;!--Some content in your right column/sidebar--&gt;</code></div>
<div class="line number7 index6 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"sticker"</code><code class="xml plain">&gt;...start scrolling to watch me stick&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div>
<div class="line number8 index7 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div>
<div class="line number9 index8 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"clear"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div>
<div class="line number10 index9 alt1"><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p><strong>CSS</strong>&nbsp;– &nbsp;Again, nothing super high-tech – just not the styles applied to div#sticker and the class “.stick”</p>
<div>
<div id="highlighter_10547" class="syntaxhighlighter nogutter pbCode css">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="css plain">div#wrapper {</code></div>
<div class="line number2 index1 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">margin</code><code class="css plain">:</code><code class="css value">0</code>&nbsp;<code class="css value">auto</code><code class="css plain">;</code></div>
<div class="line number3 index2 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">900px</code><code class="css plain">;</code></div>
<div class="line number4 index3 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">background</code><code class="css plain">:</code><code class="css value">#FFF</code><code class="css plain">;</code></div>
<div class="line number5 index4 alt2"><code class="css plain">}</code></div>
<div class="line number6 index5 alt1"><code class="css plain">div#mainContent {</code></div>
<div class="line number7 index6 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">560px</code><code class="css plain">;</code></div>
<div class="line number8 index7 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">padding</code><code class="css plain">:</code><code class="css value">20px</code><code class="css plain">;</code></div>
<div class="line number9 index8 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">float</code><code class="css plain">:</code><code class="css value">left</code><code class="css plain">;</code></div>
<div class="line number10 index9 alt1"><code class="css plain">}</code></div>
<div class="line number11 index10 alt2"><code class="css plain">div#sideBar {</code></div>
<div class="line number12 index11 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">230px</code><code class="css plain">;</code></div>
<div class="line number13 index12 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">padding</code><code class="css plain">:</code><code class="css value">20px</code><code class="css plain">;</code></div>
<div class="line number14 index13 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">margin-left</code><code class="css plain">:</code><code class="css value">30px</code><code class="css plain">;</code></div>
<div class="line number15 index14 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">float</code><code class="css plain">:</code><code class="css value">left</code><code class="css plain">;</code></div>
<div class="line number16 index15 alt1"><code class="css plain">}</code></div>
<div class="line number17 index16 alt2"><code class="css plain">.clear {</code></div>
<div class="line number18 index17 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">clear</code><code class="css plain">:</code><code class="css value">both</code><code class="css plain">;</code></div>
<div class="line number19 index18 alt2"><code class="css plain">}</code></div>
<div class="line number20 index19 alt1"><code class="css plain">div#sticker {</code></div>
<div class="line number21 index20 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">padding</code><code class="css plain">:</code><code class="css value">20px</code><code class="css plain">;</code></div>
<div class="line number22 index21 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">margin</code><code class="css plain">:</code><code class="css value">20px</code>&nbsp;<code class="css value">0</code><code class="css plain">;</code></div>
<div class="line number23 index22 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">background</code><code class="css plain">:</code><code class="css value">#AAA</code><code class="css plain">;</code></div>
<div class="line number24 index23 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">190px</code><code class="css plain">;</code></div>
<div class="line number25 index24 alt2"><code class="css plain">}</code></div>
<div class="line number26 index25 alt1"><code class="css plain">.stick {</code></div>
<div class="line number27 index26 alt2"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">fixed</code><code class="css plain">;</code></div>
<div class="line number28 index27 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">0px</code><code class="css plain">;</code></div>
<div class="line number29 index28 alt2"><code class="css plain">}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p><strong>jQuery</strong>&nbsp;– Calculates the position of the sticker div and makes its position fixed if the page has scrolled that far</p>
<div>
<div id="highlighter_872150" class="syntaxhighlighter nogutter pbCode jscript">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="jscript plain">$(document).ready(</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></div>
<div class="line number2 index1 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code>&nbsp;<code class="jscript plain">s = $(</code><code class="jscript string">"#sticker"</code><code class="jscript plain">);</code></div>
<div class="line number3 index2 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code>&nbsp;<code class="jscript plain">pos = s.position();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></div>
<div class="line number4 index3 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(window).scroll(</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></div>
<div class="line number5 index4 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code>&nbsp;<code class="jscript plain">windowpos = $(window).scrollTop();</code></div>
<div class="line number6 index5 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">s.html(</code><code class="jscript string">"Distance from top:"</code>&nbsp;<code class="jscript plain">+ pos.top +&nbsp;</code><code class="jscript string">"&lt;br /&gt;Scroll position: "</code>&nbsp;<code class="jscript plain">+ windowpos);</code></div>
<div class="line number7 index6 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code>&nbsp;<code class="jscript plain">(windowpos &gt;= pos.top) {</code></div>
<div class="line number8 index7 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">s.addClass(</code><code class="jscript string">"stick"</code><code class="jscript plain">);</code></div>
<div class="line number9 index8 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}&nbsp;</code><code class="jscript keyword">else</code>&nbsp;<code class="jscript plain">{</code></div>
<div class="line number10 index9 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">s.removeClass(</code><code class="jscript string">"stick"</code><code class="jscript plain">);</code></div>
<div class="line number11 index10 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></div>
<div class="line number12 index11 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">});</code></div>
<div class="line number13 index12 alt2"><code class="jscript plain">});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p><strong>Conclusion&nbsp;</strong>– I used to think these sticker DIVs were annoying, but I’m coming across more and more ideas to implement them to help the visitor. I have also thrown&nbsp;<a href="https://web.archive.org/web/20160204032926/http://www.pixelbind.com/examples/stick-a-div" target="_blank" rel="noopener noreferrer">a demo page</a>&nbsp;together if you want to see it in action.&nbsp;<a href="https://web.archive.org/web/20160204032926/http://www.pixelbind.com/examples/stick-a-div/stick-a-div.zip">Download zipped source code</a></p>
<p>*&nbsp;<b>UPDATE</b>&nbsp;– per David’s request, the sticker stops at the large footer –&nbsp;<a href="https://web.archive.org/web/20160204032926/http://www.pixelbind.com/examples/stick-a-div/2/" target="_blank" rel="noopener noreferrer">demo page 2</a>&nbsp;–&nbsp;<a href="https://web.archive.org/web/20160204032926/http://www.pixelbind.com/examples/stick-a-div/stick-a-div-2.0.zip">Download zipped source code (2.0)</a></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>WordPress Http Error on Media Uploader</title>
		<link>http://pixelbind.com/80-wordpress-http-error-on-media-uploader/</link>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Mon, 04 Dec 2017 08:29:22 +0000</pubDate>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Internet]]></category>
		<guid isPermaLink="false">http://pixelbind.com/?p=4</guid>

					<description><![CDATA[Out of the blue, I was receiving a red “HTTP Error” while attempting to upload images with WordPress’ core image uploader (WordPress version 3.6.x). This [...]]]></description>
										<content:encoded><![CDATA[<p>Out of the blue, I was receiving a red “HTTP Error” while attempting to upload images with WordPress’ core image uploader (WordPress version 3.6.x). This was occurring while using the mult-file uploader (ajax) and the legacy browser uploader. It even reported a HTTP Error while setting a featured image. There was a lot of users reporting this on WordPress.org, but I couldn’t find any solid answers. Here’s mine:</p>
<p>Make sure you’re running PHP 5.3 – as soon as I made this change, all 3 sites (including this one) started behaving normally again. You can make this change by adding the following code to you .htaccess file for each of your wordpress applications:</p>
<p><code>AddHandler application/x-httpd-php53 .php</code></p>
<p>Sidenote: I use bluehost as my hosting provider and the default configuration is PHP 5.2 with a single php.ini file. I did not change this setting in the PHP Config section of cPanel. I simply updated each .htaccess file in the root of each website. I hope someone finds this useful out there.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
