Wednesday 23 March 2016

jQuery plugin which takes and receives form data

This jQuery plugin to take all form data, pass it to a named script and return a message to a named HTML element. Particularly good with Twitter Bootstrap.
See the code here.

Use jQuery to handle GET requests in a Twitter Bootstrap page

Today, I created a jQuery plugin. It takes GET requests via apage URL and passes the content to declared HTML elements.
See the code here.

HTML includes like PHP using jQuery

Here I have created a jQuery plugin to perform HTML includes (sub pages)  similar to method possible in PHP.
Find the code here.

Dynamically make items active in Twitter Bootstrap navigation using jQuery

Here, I have created a jQuery plugin. It takes as its parameter the elements containing navigation items from a Twitter Bootstrap page. The plugin then matches the page URL with a navigation item and makes it active.
Find the code here.

Tuesday 22 March 2016

Search multiple database tables using PDO

I have created a PHP class based on PDO. It searches multiple database tables. It handles boolean and normal string queries. Results are displayed as Twitter Bootstrap tables. Find it here.

Monday 21 March 2016

H1 shows window width

I'm often trying understand which media queries to add to my CSS in order to control changes in the display of content. For this I need to see the window width as it resizes. There are other ways, but I find it more convenient if the page title show the window width.
To enable this, I add the following jQuery code, which is also available as a public gist here.
$(window).resize(function()
{
  $('h1').text($(window).width());
});

Golden ratio

I've been reading this article recently on use of the golden ratio within web design.
As a result I've developed a jQuery plugin to help in its implementation within my pages. You can find it here on my github page. It also include an index.html and custom.css to help demonstrate its use.
There are 2 implementations:
  1. Creating a rectangle where the golden ratio width is derived from the height
  2. Creating 2 rectangles based on their container height
Hope they help.