Snipplr

(PHP) Intergrating the wordpress media uploader into your plugin - FatFolderDesigner

Sun, 21 Oct 2012 08:29:36 UTC

It's a 3 part process, first is the PHP that you need to run, which includes the appropriate scripts and styles into the admin header, then you need an html button and input field to put the stored value in, then you need some jQuery to open the popup and get the appropriate information from it (then close it again). There more information on implementation at the URL.

(PHP) Perfect PHP .htaccess rewrites - FatFolderDesigner

Sat, 11 Aug 2012 17:02:37 UTC

These two snippets together, the first in the .htaccess file, and the second in your PHP create an elegantly simple solution to arbitrary URLs with php. For a breakdown and example check out the link. Don't want to follow the link, how about the quick version. The .htaccess redirects anything that doesn't exist to the PHP, where the script breaks it apart and places it all in the $_urlvars for your own uses.

(JavaScript) Google Maps API V3 Javascript Full Example - FatFolderDesigner

Mon, 11 Jun 2012 08:31:18 UTC

This javascript will create a complex google javascript map with multiple locations selected marked. The map will be centered in the middle and zoomed so that all point can be seen. It also stylizes the map making it mostly desaturated with bits of orange. More explanation as to how to set this up and change it at the url.

(JavaScript) Google Maps API V3 Javascript Basic Example - FatFolderDesigner

Mon, 11 Jun 2012 08:27:38 UTC

This javascript will create a google map on the div with the ID "the_map" and centered on an address with a marker on it. In this example the address is for Jet City Improv. More information on setup and customization at the link.

(HTML) Google Maps V2 Static Maps - FatFolderDesigner

Mon, 11 Jun 2012 08:23:37 UTC

Below are several different types of google static maps. The first is a map with a single marker on the Space Needle. The second is one with 3 marks, one on the Space Needle, one on the Seattle Science Center, and One on the EMP Museum. The last three have the same 3 markers but varios styles. Generally markers are separated with "|" pipes, styles are a bit more complex and require multiple parts separated with pipes and for more advanced stuff multiple markers. I have a writeup at the url.

(PHP) Wordpress Redirects with wp_redirect() - FatFolderDesigner

Thu, 05 Apr 2012 14:02:57 UTC

This needs to be run on an action, or at least I wanted able to get it to run outside of an action, I suggest template_redirect. More information at the link.

(PHP) jQuery syle DOM navigation in PHP with phpQuery - FatFolderDesigner

Mon, 13 Feb 2012 09:55:58 UTC

Navigating the DOM in jQuery is incredibly simple and thats to phpQuery you can do the same in php. Below are some examples of how it's used, the key change bing that instead of $() you use pq(), and instead of a . you used ->. Theres alot more details information at the link if your interested. Post questions/comments here or there. You can get the phpquery files, and well as read the manual at the google code page here: http://code.google.com/p/phpquery/

(JavaScript) get GET and POST variables in javascript - FatFolderDesigner

Mon, 30 Jan 2012 09:43:54 UTC

Usually when working with form you use a server to handle it, and if your doing it entirely in javascript no reload is required, but what if you wanted to take the information and use it in a javascript on another page, completely client side. I had that problem, and found this solution. First is how to get GET variables in javascript, it works by breaking down the URL location with a regular expression giving you a variable that behaves like the PHP $_GET variable. Second is for POST variables and, unfortunately requires a server side script to work since javascript has no way to acces the POSt on it's own. The code below is for PHP, but should work for any language, it is also untested as I was really aiming for GET at the time. And questions, comments, or concerns let me know here or at the link, you'll find a bit more information this there as well.

(jQuery) Auto-Replace Broken Images - FatFolderDesigner

Sun, 08 Jan 2012 09:47:12 UTC

There are 2 jQuery snippets, both replace broken images with one of your choosing, the difference is that one is "safe" and the other is "persistent". The safe one will quick working, so if your doing something that dynamically changed images on a page it'll only work for the first broken image. The persistent one will keep working, but if your missing image image is missing it'll cause a overflow error.

(CSS) Fix Webkit CSS3 animation flickers - FatFolderDesigner

Sat, 17 Dec 2011 15:57:28 UTC

Ever notice a weird CS3 animation flicker? Annoying right? Add these CSS3 classes to the objects being animated and it should go away (at least it has in my testing). More details at the link, questions can be postsed either here or there.

(jQuery) Flexible Site Layout With Resize Detection, now improved! - FatFolderDesigner

Sat, 05 Nov 2011 11:02:52 UTC

I've previously posted this here: http://snipplr.com/view/59044/flexible-site-layout-with-resize-detection/ This new version is short and more efficient, plus it no longer shows 1 (harmless) error on launch. Works the same as last time, the sizable object has the size to add the class too all the sizable elements, so for this example if the screen is less that 450px it'll add the class "phone" to the body (and the other elements), and if it's larger than 750px, but not 1000px, it'll give it the tablet layout. More information about the script is at the link, questions/comments/concerns can be sent to be from here or the comments section at the link.

(JavaScript) Flexible Site Layout with Resize Detection - FatFolderDesigner

Sat, 24 Sep 2011 07:01:17 UTC

This bit of jquery will take whatever you give it in the selector (which should be a valid jquery selector of any kind) and add or remove additional classas as appropriate based on width. The width and style names are all determined by the last if statement and can easily be changes. The defaults are for sizes 320px or less, 321px to 768px, 768px to 1024px, and greater than 1024px to be given the styles tiny_screen, small_screen, medium_screen, and large_screen respectively. More information plus some additional tips at the link, if you have any questions/comments/criticisms post them below, as well as if you use this in a project or improve upon it and Iâ€™ll update with that information included as well.

(PHP) CSS minifier and color replaces - FatFolderDesigner

Sun, 18 Sep 2011 06:40:30 UTC

With this file you can load stylesheets and minify the code while changing colors. The stylesheets are loaded using file_get_contents and you can attach them one after another if you have multiple sheets. The colors are replaces based on a variable thats commented out of the css code, an example of the way thats formatted is below the cod block. The minification is done with a regular expression that removes all comments, line breaks, and un-needed spaces. The color replacement is done with a different regular expression and the colorize function that takes the variable and returns a color. You can use whatever method you want to get the color, but I personally am using variables from a Wordpress plugin (and stores using the Wordpress options function) to give users color customizability of their site. If you have any questions or comments you can post a comment here or at the link, there is also a more in depth explanation at the link if your interested. UPDATE: improved it's ability to find colors in the CSS declaration, also added the "transparent" keyword in as something it can find.

(PHP) Simple MySQL to CSV - FatFolderDesigner

Sat, 03 Sep 2011 11:34:22 UTC

Just a short little script that takes a mysql query and turns it into a csv file that downloads automatically. If your interested in the details you can hit up the link.

(PHP) Simple single "loop.php" Word Press theme function - FatFolderDesigner

Sat, 20 Aug 2011 13:41:04 UTC

Instead of requiring the loop.php file in your custom themes you can use there two functions, placed in your functions.php file to not only automatically include it, but make a dead simple to filter sections out on a page by page basis negating the need for special loops for specific page types (like a search loop or a main index loop) The first section is the code you put into your functions file. The second is how you would call the new "the_loop()" function, simple but all the individual sections you want filtered out as variables, one after another. The third sections is how you would go about filtering items out. More information at the link, questions or comments can be posted here or there and I'll get back to you whenever I can.

(JavaScript) Local Storage in HTML5 - FatFolderDesigner

Sun, 14 Aug 2011 10:28:29 UTC

This is just a simple explanation of how to use the HTML5 local storage in javascript. The link has a more thorough explanation and an example for those interested. The examples to save, retrive, and clear are marked below.

(HTML) Offline Sites in HTML5 - FatFolderDesigner

Sun, 14 Aug 2011 10:17:44 UTC

The link has a full explanation with more detail about how this all works, as well as an example of it in action. This is just going to be the short-short version. If you have any questions check that out, if you still have questions then leave a comment and I'll help you as best I can. First we need to define a cache manifest, to do that you simple need to add a cache manifest item to your initial HTML tag. The proper extensions is .appcache, check the first section of the source to see an example. Then, if the server isn't set up to support the .appcache file we need to add a line to out .htaccess file, this is important because it must be servered with the proper header. See the second section for the line to add to the htaccess file. The we need to add the files to be cached to the appcache, there is a more complete example at the link, this is just the basic format. It's in the third section below. If you have any questions or problems implementing leave a comment and I'll help you if I can.

(JavaScript) Google Maps API3 made simple - FatFolderDesigner

Sun, 31 Jul 2011 05:21:31 UTC

This is a simple example of the google maps javascript API v3. If you want a map with a marker this is the minimum you need to do to get it done. Theres more talk about how it's all set up, and how to use the other static image map as well at the link. To implement this you'll need an Google Maps API key to replace the one I used (which is for me site and won't work elsewhere due to how google set up the API keys). You can get one of those here: http://code.google.com/apis/maps/signup.html To use you simple need to include the script in the header, the div where you want the map to be located (size that as we want) then fill in the address variable. Again more documentation, a script breakdown, and an example at the link. If you have a question feel free to post a comment.

(jQuery) Simple jQuery Rotator - FatFolderDesigner

Sun, 24 Jul 2011 05:02:20 UTC

The code is in three parts, a HTML layout (with some requirements I'll go over below), some CSS code (again, requirements below) and the actual jQuery code. I go over all the code in detail at the link, but I'll give a quick rundown od the jQuery as well. The HTML: The button that control next and previous are given IDs of "rotator_next" and "rotator_prev" respectively. The content shows in the a div with the ID "rotator_box". Inside the "rotator_box" div there a other divs with the IDs "rotator_set_#" where # is a number, 1 through as many pages as you want. The CSS: The important part of the style is the width, height, and overflow property. The width and height allow you to control the way the items are display, be it column, grid, or standard horizontal orientation. The jQuery: The script runs on document load and sets up a click even for the next and previous buttons. This evens add or subtract the lastviwed accordingly and run the update function, which does the fading out and fading in. After the contents have faded in it sets the opacity to 1, this is just to prevent any overzealous user from clicking so fast it makes a page stop wanting to fade fully in. Like I said, theres more info and an example at the link.

(PHP) Simple inline PHP alternating rows - FatFolderDesigner

Thu, 07 Jul 2011 12:24:00 UTC

Traditionally when you have lost lists of dat you want to alternate rows for usability. The first thing everybody makes to fix this is a simple if statement loop, but this adds a number of lines and is hardly a clean solution. Additionally it required you to have a â€œcounterâ€ or â€œswitchâ€ variable, usually placed at the bottom of the loop, overall very messy. I had a boss who thought he was on the cutting edge by compressing the traditional if statement into a shorthand version (saving 2-3 lines of code), but the system was still using a $class variable and still requires a counting or switch variable. It was still a mess and added clutter to the code. Earlier today I was working on outputting client records forafully customized application. Wanting to avoid such messy code as I looked for a better solution and with a little tweaking and playing I came up with this. I've also included a simple example of how it's used in action. If you have any questions or concerns let me know either here or at the link (there's some more info about this method there too if your intreated).

(jQuery) Case Insensitive contains jQuery selector - FatFolderDesigner

Sun, 05 Jun 2011 05:13:33 UTC

This one was not created by me, but I can't remember who originally created it. It does the same thing as the built in :contains() selector with one important difference, it's case insensitive. Since I usually type in all lower case (bad habit I know) I like to use it for filters. It's also a nice one to use on name filters, that way if the person using the filter doesn't use the proper case it will still pull of the name, for example if they type in "Delsoto", but the proper capitalization is "DelSoto" the default :contains() won't find it, but this modified :Contains() will. Very convient. If you have any questions about this selector, or happen to know who made tit, post and let me know. Use it in a cool project, do the same.

(jQuery) Animated Pitchbars - FatFolderDesigner

Sun, 29 May 2011 05:28:11 UTC

The comments for this are broken down into 2 parts, first the script is talked about, then theres a little about the HTML code that the script relies on. You can find more information at the URL, as well as an example of it in action. You can leave comments here or at the link if you have any questions or comments, or if you found a nice use for it. First the script. Use jquery to load this once the document is complete. The function starts with variables, the first line of them are ones for easy modification, pitches in the number of pitches it will show at once, and the shortdelay/longdelay is the delay between animating individual and pitches and the delay between animating the last displayed pitch and starting from the top again respectively. After that there is a while statement, this takes the appropriate pitch and wraps each element around a span for animation purposes. Then it gets into the main scripting and animation section. The each function runs through each of the spans and starts the animation on it. First is fades the current value out, it inserts the new pitch, pre-set at 0 opacity, and fades it in span-by-span. Once the loops is complete it runs a couple checks; is it the last pitch being displayed, is it the last pitch in the list of all pitches, and what itâ€™s going to be doing next. In the first two cases it resets the appropriate counter, the last check determines if it will run the short delay (between pitches being displayed) or the long delay (between displaying the last pitch and starting the animation cycle again). With this setup the script will run forever, looping when needed. It does require some HTML formatting though, is in the second section. Second, the HTML The first section is the list of pitches, stored in an un-ordered list with the id "pitches". Each pitch simply goes in a list item. Theres nothing more to creating the list of all your pitches. The display goes inside the divs. The class pitchbar is my own simply for formattingand is not required the other one, activepitch# is the area where the the current pitches will be displayed. The "#" is for each pitch that you display at a time from 1 to your max, for example the code below has a pitches of three, so I have 3 divs; activepitch1, activepitch2, activepitch3. The example at the url has 5 divs and a pitches value of 5 as well.

(jQuery) Inline labels with jQuery animations - FatFolderDesigner

Sun, 22 May 2011 05:12:00 UTC

After being tasked with creating inputs like those on the twitter homepage I came up with this inline label system that uses jquery to control the labels (in the vase of the example it fase and slides them). The code is in three parts. First, the input are formatted a very special way, donâ€™t worry itâ€™s basic and easy to implement. Take a look at the first section below. The input is obvious, as is the label, the last div, with the class .inputerror.firstname is some specific code for inline displayed error messages, I may make a post about them if there is any interest. The label is moved over the input box. Because of this itâ€™s important to have the label properly formatted with the for="" element pointing to the appropriate input field. Second is the CSS. Obviously the code below has some styling for looks, which is fully changeable based on your individual implementation, the important stuff is the display, overflow, and the margin-top on the .inputbox label, as well as the previously mentioned background in the .inputbox input style. Youâ€™ll notice that the inputbox doesnt have a width or a height (except where limited by the actual input inside it). That because thats all set via the individual inputs so you can vary it from input to input depending on what will go in it (just like the example has set up). The last bit of code is the scripting. The first bit checks if there is a value to the input, if not it will reanimate the label back in, with a simple fade in in this case, but you do have full control over how it does it. Then, if there is something in the input it will fade it out, in this case by pushing it right while fading out. Once a label is completely faded out it is hidden so it wonâ€™t interfere with normal operation of the input box (like selecting or double clicking). It also makes it visible again before fading it back in. All three parts put together make a nice animated inline label like the ones on the example page located after the url (scroll to the bottom of the post for a direct link). Itâ€™s been tested in IE and on mobile devices and seems to work fine albeit with slow or no animations on mobile devices. If youâ€™ve found a great use for this, converted it to another library (or no a library independent form), or have an questions or would like some help with modifications or implementation on your specific site leave a comment below or on the blog at the link.

(HTML) 100% WIDTH TEXT AREA WITH ADJACENT BUTTON - FatFolderDesigner

Sun, 24 Apr 2011 08:11:36 UTC

A contract I work on uses tables to layout forms (kinda ghetto I know) and I wanted a text field with a button text to it that would work with their 100% width scheme. Normall it places to betton below the text input, but using this HTML and CSS it will go next to it. One thing to note is that the button has to have a width, and you need that width + any margin you give the button to be updated accordingly. In this example the button is 95P with a 5Px right margin on it, the to magic number is 100Px, it has to be updated in both the inline style on the table and in he CSS. Also this will work outside a table, as long as all the divs are in something with an appropriate badding on it. There is no reason that can't all be inline or all be in the stylesheet, it's just based on the way they lay out the becked of their CMS. Questions can be posted here or (preferable) at the link, theres an example of it in action there too (not that it's a complicated thing to make yourself)

(jQuery) Insert alphabetically with jQuery - FatFolderDesigner

Sun, 27 Feb 2011 15:14:31 UTC

This function will insert items into an orders alphabetically (assuming it's already alphabetical). Initially design to make a smooth single page load/save feature that sotred everything in drop down lists, you guessed it, alphabetically. Can simply be modified to work in any sort of layout (ordered lists was just easier for the example) Example at the link, you can post any questions there too.

(jQuery) Simple jQuery content filter with BONUS alternating row reset - FatFolderDesigner

Sat, 19 Feb 2011 18:49:06 UTC

A simple way to filter lists or tables that uses a new "Contains" (note capitalization) selector to clean up the code a bit. Three examples are below, first sorts through a list, second a table, third a tabe and it correctly the alternating row colors so that it keeps a nice clean look. Example at the link, any questions can be posted there too.

(jQuery) Prevent Stale Ajax Data with jQuery - FatFolderDesigner

Sun, 30 Jan 2011 06:14:17 UTC

When running live filters on large, long scripts you can get old, stale results replacing your new, fresh ones. After all, a search for everything containing 'S" in a large database of city names can take a lot longer than "Seattle", so your script gets the results for "Seattle", displays then, then it gets the results for "S" and displays them, replacing the "Seattle" search you really wanted. This script aborts the previous call before making the new one, effectively preventing that from happening. There are 2 caveats though. 1. The server may continue to process the request (depending on setup). 2. The error console logs it as an error, but not a fatal one and no alerts are thrown so the normal end user wont notice. I have some more information available at the URL.

(jQuery) Simple Content Load on Scroll - FatFolderDesigner

Sun, 23 Jan 2011 17:55:47 UTC

Simple jQuery script to load additional content when you near the bottom of the page, same sorta thing Twitter does (although I originally programed it for a different use). Only thing of remark is the fact that it stores the current highest loaded value in a hidden variable, that way, fi the scrip dies or the user does not ave javascript enabled you can use that variable to load the next set of content up through traditions POST/GET methods. I also have a version of the script that does not use jQuery if anybody is interested (although it is much larger and not as smooth). Example is available at the link. UPDATE: A commenter (on my site at the link) noted that there was a problem with the Content load on Scroll with jQuery example in Firefox 5 for windows and linux, and before I could even get off work to take a look he posted a fix. The problem has to do with the browsers cacheing system. When you reload the page it keeps the cached value of the hidden input that keeps track of how far youâ€™ve scrolled, so when you reloaded it would display the initial 50, then jump to wherever you were. The solution is simple, you just need to reset that value once the page is loaded, so that it will overwrite any cached data your browser may be using. The code he posted is as simple as it gets and has been added to the source. You could also fix this by playing with how browser cache your site, but since they usually get the right this seems like a better solution to me.

(PHP) PHP HTML5 multi-file upload - FatFolderDesigner

Sun, 16 Jan 2011 08:49:24 UTC

Uploading multiple files at once used to be strictly in the realm of flash or required javascript to crate multiple upload forms as needed. The first method has the problems with the general incompatibility of flash. The second, well, it's a very low tech method and limits you to selecting only one file per upload form, real pain. First is the HTML form. Pretty standard all you gotta do is add the multiple tag and add brakets to the variable name. Those brakets are the key to the next set, they tell PHP to make the variable an array. Then is the PHP code. First thing you have to do is get the number of files, I used the count() on an variable then run through till you hit the count, using the variable in each $_FIES call. It's easy to retrofit an older system this way. An example of the above code can be found at the link.

(JavaScript) Simple JavaScript Form Check - FatFolderDesigner

Thu, 30 Dec 2010 08:25:02 UTC

This is a simple and effective way yo make sure people are actually filing out a form before submitting it. If you need to verify content it should be done server side (so that if you come across the odd person with javascript turned off it wont break something) but if you want to do a js check then you can easily add the code inside each elements if statement. Also, if your form is larger than just a few items your probably better off doing it from a more advanced, but much smaller script. Oh, and with it's current setup your submit button needs the type of button, or it needs to be changed to return a true/false once the checks have been processed.

(JavaScript) Better Javascript Keyboard Navigation - FatFolderDesigner

Sun, 19 Dec 2010 10:12:22 UTC

This fixes the downside of the original javascript keyboard navigation snippet I posted here so that if you manually scroll past to a new chapter mark it will register that and keep track of your location better. The old code would ignore any scrolling you did, so if you read past a chapter and decided to skip one it would just take you to the top of the one you wanted to skip (I don't know if I'm explaining it behavior properly, theres a link in that post you can take to get to the example of the code set up and running on my site to see what I mean) and this one works properly As with the first JavaScript Navigation snippet you can see it in action on my site and enjoy reading a classic in the process (it's even a different book this time). As for implementation, the quick and dirty was in applying an onkeydown and an onload to the body tag, for the keycatch and init functions respectively. There are better ways but I was was more interested in testing the code rather than the implementation.

(JavaScript) Javascript Keyboard Navigation - FatFolderDesigner

Sat, 18 Dec 2010 14:53:04 UTC

Starting with GoogleTV in mind I made a script to help navigate a page key basic key inputs, in this case I'm using the left and right arrows to jump between the H1 tags on a page, although the modifications to make it do other things would be very simple. Theres a more working concept on the link so you can see it in action without any coding on your part (and participate in some proper reading). There is one downside to this method, if manually scrolling down past an H1 tag it does not realize it, but I'll work on that once I get a chance

(JavaScript) AJAX Form Autosubmit TinyMCE fix - FatFolderDesigner

Fri, 03 Dec 2010 18:25:37 UTC

Since tinyMCe doesn't transfer it's editor contents to the text area until you hit the submit button, and since the autosubmitter doesn't ever hit the submit button TinyMCE boxes never save. IT's a simple fix, just place the code on line 2, at the very top of the as function, and it will tell TinyMCE to save. This line should not be there if you don't have TinyMCE integrated in your site as it'll just cause javascript error. This fix is in reference to this Snipplr: http://snipplr.com/view/44799/ajax-form-autosubmit/

(JavaScript) AJAX form autosubmit - FatFolderDesigner

Wed, 24 Nov 2010 17:14:37 UTC

I was working on this for a new site ideal I have, though it might be useful for others. What this does it sent a AJAX POST request every time the as() function is called. Setting the form to run as() onkeyup will essentially make the form submit itself whenever updated. I play to use this as part of an auto submit save system. You could also eave the method and action of a form blank and have it run this with an onclick on the submit button, submitting the form only when they want to but keeping them on the page. UPDATE: demo of this working available at the URL.

(PHP) PHP absolutely relative root - FatFolderDesigner

Mon, 22 Nov 2010 10:09:07 UTC

After an attempt to more a live site to a personal server for further work I ran across the problem of a mix of absolut and relative links making the local copy not work. Not wanting to manually have to change every single absolute to a relative (because some files are called from multiple sources leading to time consuming complicated conditional relative link) I looked for ways to simple "convert" my original absolutes to relatives and come up with this. Basically, this adds the appropriate number of back links (../'s) so that it starts at your server root. This makes relative linking easier because they will always start from the same place no matter where you are or what file may be making the link. This is just a first run of it, I know of some improvements that could be made (primarily, making it a class instead of a definition because once this is set it's stuck, causing it to work incorrectly at times) but this version works for basic sites.