Kompx.com or Compmiscellanea.com

HTTPS to HTTP redirect for a single page

Web servers : Apache + nginx

Redirecting a single page with HTTPS to the page with HTTP. Server configuration: Apache + nginx. SSL is enabled for the whole web site, so all pages are served with HTTPS. But there is a need to make just one single page to be with HTTP. Directives for .htaccess file:

RewriteEngine On

RewriteCond %{HTTP:HTTPS} on [NV]

RewriteRule ^(page\.html)$ http://%{HTTP_HOST}/$1 [R=301,L,QSA]

HTTPS to HTTP redirect for a single page in detail

-- Enable runtime rewriting engine

RewriteEngine On

-- If HTTPS is present

RewriteCond %{HTTP:HTTPS} on [NV]

-- Then, when a page name and extension correspond to the search group in parentheses, form for it a URI with HTTP

RewriteRule ^(page\.html)$ http://%{HTTP_HOST}/$1 [R=301,L,QSA]

Notes

  • RewriteCond %{HTTP:HTTPS} on [NV] is not the only way to detect if HTTPS is present. Moreover, for some server configurations other directives may be more suitable, like RewriteCond %{SERVER_PORT} 443 for example. The point is to find out somehow if HTTPS is on. So it should probably be checked by practice what is going to work in a particular case.
  • QSA is used to keep the existing query string, if there is any, when the replacement URI also contains a query string. So that in the end both query strings are to be combined. More on the subject: http://httpd.apache.org/docs/2.2/rewrite/flags.html#flag_qsa

Aliosque subditos et thema

 

CSS centering

 

1 ) CSS horizontal and vertical centering - 1 Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More for modern web browsers : [ More ] : [ Open demo page ] 2 ) CSS horizontal and vertical centering - 2 Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More conservative, than the previous method. Suitable not only for modern web browsers, but for older ones as well - like Internet Explorer 6 or earlier Maxthon. A shortcoming - it takes more efforts to maintain the CSS code compared to [ CSS horizontal and vertical centering - 1 ] method : [ More ] : [ Open demo page ] 3 ) CSS centering floated elements Floated elements of unknown width are CSS centered horizontally : [ More ] : [ Open demo page ] 4 ) CSS centering absolutely positioned elements CSS horizontal centering of an absolutely positioned element : [ More ] 5 ) CSS centering image CSS horizontal centering of an image : [ More ] 6 ) CSS vertical alignment CSS vertical alignment of a block element containing text and images. The method works for various combinations of inline and block elements : [ More ] 7 ) JavaScript + CSS centering Centering content of a web page by means of JavaScript and CSS. A block containing the content of a page is JavaScript + CSS centered horizontally and vertically : [ More ] : Two cases : 1. A block is centered, if screen resolution is equal to or greater than 1024x768 : [ Open demo page ] 2. A block is centered, if screen resolution is equal to or greater than 1024x768 + mouse cursor is moved over a link in an element of the page content : [ Open demo page ]

JavaScript rollover. Image swap

 

Example n.1 ( For modern web browsers: Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, [ 3 ] ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" width="728" height="67" alt="JavaScript rollover. Image swap" /></a> CSS. Code: .image {border: 0px;} JavaScript. Code: imageout=new Image(); imageout.src="out.gif"; imageover=new Image(); imageover.src="over.gif"; function image_out(){ document.images['imageout'].src='out.gif'; }; function image_over(){ document.images['imageout'].src='over.gif'; }; Swap image 1 ( out.gif ): Swap image 2 ( over.gif ): Example n.2 ( For older web browsers: Internet Explorer 4.0+, Netscape 3.04+, Opera 3.21+ ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" name="imageout" width="728" height="67" border="0" alt="JavaScript rollover. Image swap"></a> JavaScript.