301 redirect HTTPS to HTTP on Apache server

Redirecting https to http site-wide using the .htaccess file would be done through:

Options +FollowSymlinks
RewriteEngine on
RewriteBase /

RewriteCond %{SERVER_PORT} ^443$ [OR]

RewriteCond %{HTTPS} =on
RewriteRule ^(.*)$ http://yousitename.com/$1 [R=301,L]

One way is as in this example:

RewriteEngine on

#this page has to be on https
RewriteCond %{SERVER_PORT} !^443$
RewriteCond %{HTTPS} !on
RewriteCond %{REQUEST_URI} ^/secure-page1.php$ [NC]
RewriteRule ^(.*)$ https://yousitename.com/$1 [L,R=301]

#this page has to be on https
RewriteCond %{SERVER_PORT} !^443$
RewriteCond %{HTTPS} !on
RewriteCond %{REQUEST_URI} ^/secure-page2.php$ [NC]
RewriteRule ^(.*)$ https://example.com/$1 [L,R=301]

#all other pages have to be on http
RewriteCond %{SERVER_PORT} ^443$  [OR]
RewriteCond %{HTTPS} on
RewriteCond %{REQUEST_URI} !^/secure-page1.php$ [NC]
RewriteCond %{REQUEST_URI} !^/secure-page2.php$ [NC]
RewriteRule ^(.*)$ http://yousitename.com/$1 [L,R=301]

So assuming you have a good reason to want some urls as https AND have them indexed, then you can add php scripting to each page and determine whether it has to be http or https.

To permit the use of php on pages suffixed as .html you need to add an Apache handler in the .htaccess file:

# parsing html as php
AddHandler application/x-httpd-php .html 
NB: The above directiove can vary greatly depending on the rexact server configuration. It can be any of the below directives (or none for that matter):
Addhandler application/x+https-php5 .html

or

AddType application/x-httpd-php5 .html

or another combination like that.  It's bewildering how many different Apache server configuraiotns the can be and how much basic directievs can differ. The trouble is if yuo use the wrong one, you get a 500 error. So it ends up being trial and error all the way.

 php script to be added at the top of every page where you need to 301 redirect from https to http, before any other line of source code would be: 

<?php
if  ( $_SERVER['HTTPS'] )
        {
                $host = $_SERVER['HTTP_HOST'];
                $request_uri = $_SERVER['REQUEST_URI'];
                $good_url = "http://" . $host . $request_uri; 
                header( "HTTP/1.1 301 Moved Permanently" );
                header( "Location: $good_url" );
                exit;
        }
?> 

Facebook-style tooltip plugin for jQuery

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

Examples & Usage
Basic
By default, tooltips will appear centred underneath their anchor:

Hover over me

Basic example:
$('#example-1').tipsy();
Gravities
Using the gravity parameter, it's possible to control the positioning of the tooltip relative to the pointee:

Northwest North Northeast
West East
Southwest South Southeast
Gravity example:
$('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se
As of version 0.1.3, it's possible to use a callback function to set the gravity dynamically at hover-time. Within the callback, this refers to the active element, and the function should return the calculated gravity as a string. Two demo callbacks are supplied - $.fn.tipsy.autoNS and $.fn.tipsy.autoWE - which select north/south and west/east gravity, respectively, based on the element's location in the viewport.

Here's an example (scroll the page to see the effect):

Dynamic Gravity
Dynamic gravity example:
$('#foo').tipsy({gravity: $.fn.tipsy.autoNS});
Fading
For full Wob2.0 compliance, you must fade these badboys in:

Hover over me

Fade example:
$('#example-fade').tipsy({fade: true});
Bonus Feature
You can EVEN COMBINE FADE AND GRAVITY! (exercise for reader)

Slightly Advanced Usage
Tooltip text can be set based on any attribute, not just title:

Hover over me

Custom attribute example:
$('#example-custom-attribute').tipsy({title: 'id'});
If any attribute isn't good enough, you may pass a callback function instead. It should return the tooltip text for this element:

Hover over me

Callback example:
$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });
Finally, it is possible to specify a fallback tooltip for any element which does not have any tooltip text:

Hover over me

Fallback example:
$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });
If your tooltip content contains HTML, set the html option to true (relies on invalid HTML, sorry):

Hover over me

HTML example:
$('#example-html').tipsy({html: true });
Show/Hide Delay
Delay example:
$('#example-delay').tipsy({delayIn: 500, delayOut: 1000});
Hover and wait

Dynamically Updating Text
Tipsy tooltips are 'live' - if the source attribute's value changes, the tooltip text will be updated the next time the tooltip is shown. There's one caveat - if you wish to remove the tooltip by setting the title attribute to an empty string, set the original-title attribute instead (this only applies if you're using the title attribute).

Form input tooltips code:
<script type='text/javascript'>
  $(function() {
    $('#focus-example [title]').tipsy({trigger: 'focus', gravity: 'w'});
  });
</script>
Manually Triggering a Tooltip
It's possible to disable hover events and instead trigger tooltips manually:

Manual triggering example:
My tooltip is manually triggered | Show it | Hide it
Code for manual triggering:
<p id='manual-example'>
  <a rel='tipsy' title='Well hello there'>My tooltip is manually triggered</a>
  <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("show"); return false;'>Show</a>
  <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("hide"); return false;'>Hide</a>
</p>

<script type='text/javascript'>
  $('#manual-example a[rel=tipsy]').tipsy({trigger: 'manual'});
</script>