My Programming Tricks

Caveman Blogger

Anyone having this problem? I tried to install this latest phpBB free web forum into my Windows 7 IIS7 PC but I get this error page:

I then download the earlier version which is 3.0 by clicking on a small button on upper right corner:

After running 3.0 version in the localhost, it works fine:

Anyone having this problem on IIS7 machine before? Maybe switching back to older version is the only solution to this?

Caveman Blogger

This is a simple version that uses minimal amount of codes. However, this practice is not suitable for websites that require stringent security protection.

The PHP codes make use of the GD library to generate a PNG image file that will be read by the HTML code. The PHP will randomly generate two characters and two numbers with first digit as character followed by a number, then a character and a number. Of course, you can change it to something more complicated like making it a mathematical problem to be solved by the visitor. The PNG image will be accompanied by a browser cookie with the answer to the captcha. The cookie will then be compared with the input by the user to see if they match. You can also send the answer back to the server to be verified in order to make it more secure. However, it is not the scope of this example as I try to make it as simple as possible so that it is easy to understand.

Here are the PHP codes:

<?php

// I name this file captcha.php
error_reporting(0); // this is important to turn off all the warnings if any

session_start();

$angle = rand(-10,10);
$fontSize = 20;

$captchaText = chr(97 + rand(0, 25)).rand(0,9).chr(97 + rand(0, 25)).rand(0,9);

$img = imagecreatetruecolor(120, 50);
$bgColor = imagecolorallocate($img, rand(50,150), rand(50,150), rand(50,150)); //background color - random dark coolor
$fgColor = imagecolorallocate($img, rand(200,255), rand(200,255), rand(200,255)); //foreground color - random light color
imagefill($img, 0, 0, $bgColor);

imagettftext($img, $fontSize, $angle, 25, 35, $fgColor, "./LiberationSerif-Bold.ttf", $captchaText);

setcookie("randomCharacterCookieName", $captchaText, time()+3600, '/'); // will expire in one hour

header("Cache-Control: no-cache, must-revalidate");
header('Content-type: image/png');
imagepng($img);
imagedestroy($img);

?>

Make sure your PHP has the GD library support before you proceed.

The tricky part is the one highlighted in red. You need to upload a font to your home directory to make this PHP script to work. Why don't we use the server font? Most of the time, the shared server won't have any TrueType font in it or the GD doesn't have the authority to run it. It is still better to upload your own font and you have more choice for the font as well. I chose the Liberation font as it is royalty free. You can change to your own font if you prefer.

And now comes the Javascript and HTML:

<html>

<script>

function checkCaptcha() {
var ans = document.getElementById('answer').value;
var tmp = document.cookie;
var chunk = tmp.split('=');
if (chunk[chunk.length-1] == ans) {
alert("yes!");
// proceed with your post verification codes such submitting the form etc.
}
else {
alert("no!");
}
}

</script>

<body>
<img src="captcha.php">
 
Type what you see above here:
 
<input type="text" id=answer size=4 maxlength=4> <a href="javascript:checkCaptcha()">Check</a>

</body>

</html>

After running the HTML, I captured this response from Chrome after a right answer is entered:

I captured this response from Chrome after entering a wrong answer purposely:

There are still many things you can improve from these codes. For example, you can still include capital letter or even some special characters to the captcha. You can also scramble the answer in the cookie and descramble it during verification with the answer embedded in the cookie.

Well, here is the Captcha tutorial! Finally!

Caveman Blogger

Note: Please run these codes from a web host, either it is a "localhost" or remote host from a web hosting server.

This is an expansion of my earlier post with sending data from only one MySQL table. For multiple table data channeling to browser from MySQL, a query string is used to differentiate the AJAX requirement. You can also create another PHP script to access data from other tables but it seems quite unnecessary as it can be easily achieved by sending different query strings to the AJAX PHP script.

Here we go again:

USE `testDB`;
DROP TABLE IF EXISTS `test`;

CREATE TABLE `test` (
`a` tinyint(4) DEFAULT NULL,
`b` tinyint(4) DEFAULT NULL,
`c` tinyint(4) DEFAULT NULL,
`d` tinyint(4) DEFAULT NULL,
`e` tinyint(4) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

DROP TABLE IF EXISTS `test2`;

CREATE TABLE `test2` (
`f` tinyint(4) DEFAULT NULL,
`g` tinyint(4) DEFAULT NULL,
`h` tinyint(4) DEFAULT NULL,
`i` tinyint(4) DEFAULT NULL,
`j` tinyint(4) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into `test`(`a`,`b`,`c`,`d`,`e`) values (1,2,3,4,5),(6,7,8,9,10),(11,12,13,14,15),(16,17,18,19,20);
insert into `test2`(`f`,`g`,`h`,`i`,`j`) values (21,22,23,24,25),(26,27,28,29,30),(31,32,33,34,35),(36,37,38,39,40);

A new table 'test2' is added to the previous table setup (refer to my earlier post to check out the difference).

Here are the PHP codes for AJAX (or act as a JSON data generator):

<?php
//I name this file ajax.php
error_reporting(0);
$db_name = "testDB";
$db_server_name = "localhost";
$db_usr_name = "xxxx"; // Please replace xxxx with your MySQL username
$db_pw = "xxxxxxxx"; // Please replace xxxxxxxx with the password that came with it

$dblink = mysql_connect($db_server_name, $db_usr_name, $db_pw);

if (!$dblink) {
 array_push($error, "Failed to Connect to Database");
}
mysql_select_db($db_name);

if ($_GET['tbl'] == '1') {
 $query = mysql_query("SELECT * from test");
}
else if ($_GET['tbl'] == '2') {
 $query = mysql_query("SELECT * from test2");
}

$all = array();

$d = 0;
while ($query_result = mysql_fetch_assoc($query)) {
 if ($_GET['tbl'] == '1') {
 $all[$d] = array("a"=>$query_result['a'],"b"=>$query_result['b'],"c"=>$query_result['c'],"d"=>$query_result['d'],"e"=>$query_result['e']);
 }
 else if ($_GET['tbl'] == '2') {
 $all[$d] = array("f"=>$query_result['f'],"g"=>$query_result['g'],"h"=>$query_result['h'],"i"=>$query_result['i'],"j"=>$query_result['j']);
 }
 $d++;
}

$encoded = json_encode($all);
header('Content-type: application/json');
exit($encoded);

?>

Finally here are the Javascript codes:

<!DOCTYPE html>
<html>

<script>

var data;

function loadJSON(path) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
 if (xhr.status === 200) {
 try {
 data = JSON.parse(xhr.responseText);

 for (var k in data) {

 alert(data[k].a+" "+data[k].b+" "+data[k].c+" "+data[k].d+" "+data[k].e);

 }
 catch(e) {
 alert("Data Error. Please contact the administrator.");
 }
 }
 else {
 console.error(xhr);
 }
 }
};
xhr.open("GET", path, true);
xhr.send();
}

function loadJSON2(path) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
 if (xhr.status === 200) {
 try {
 data = JSON.parse(xhr.responseText);

 for (var k in data) {

 alert(data[k].f+" "+data[k].g+" "+data[k].h+" "+data[k].i+" "+data[k].j);

 }
 catch(e) {
 alert("Data Error. Please contact the administrator.");
 }
 }
 else {
 console.error(xhr);
 }
 }
};
xhr.open("GET", path, true);
xhr.send();
}

loadJSON('ajax.php?tbl=1'); // This result will be the same as in the earlier post
loadJSON2('ajax.php?tbl=2'); // tell ajax.php that $_GET['tbl'] = 2;

</script>

The data from MySQL will prompt out as alerts, row by row.

</html>

Please note that the DOCTYPE declaration is important for IE browsers as it puts it into standards mode for AJAX to work.

You can also combine loadJSON with loadJSON2 by adding one more parameter to the function. Anyway, to make explanation less confusing, I added another JSON loading function to it.

After running the codes, you may get four alerts with the first time being '1 2 3 4 5' followed by '6 7 8 9 10' and so forth as in the earlier post. Then you may get the new alerts from the second table. Here is a screen shot of the first prompt from the second table running in Chrome:

Caveat: The data from the second table may prompt up before the first table. If you really want to make sure the first table come first, you will need to use the timer to delay the loadJASON2 function a bit.

Thanks for viewing!

Caveman Blogger

With the popularity of tablets taking the center stage ever since the launch of the first iPad, web pages were being swayed towards simplicity and user-friendliness. The smartphone revolution then followed suit and mobile web browsing had then become a norm until today. As the screens of tablets and smartphones are a lot smaller than deskstops, web pages are being made simpler with the texts bigger to suit the smaller screens.

The obvious change to the web page is the login page. The login input text and space are now bigger. Here is an example of the HTML and CSS codes I use to follow this trend:

<html>

<table height=100% width=100% align=center valign=middle><tr><td>
<table width=520 height=160 align=center valign=middle style="border: solid #cccccc 1px; background-color: #ddeeff">

<tr><td width=20> </td><td align=right>Login ID</td><td width=20> </td><td><input type=text name=lg style="height: 40px; padding: 10px 0px 10px 8px;font-size:16px" maxlength=40 size=40></td></tr>

<tr><td width=20> </td><td align=right>Password</td><td width=20> </td><td><input type=password name=pw style="height: 40px; padding: 10px 0px 10px 8px;font-size:16px" maxlength=40 size=40></td></tr>

<tr><td> </td><td> </td><td> </td><td><input type="submit" value="Log On Now!"></td></tr>

</table>
</td></tr>
</table>

</html>

The key to this effect is hightlighted in green. The style in CSS is important to make this work. The "height: 40px;" CSS is important to get this to work on IE browsers.

Here is the screenshot after running the HTML in Chrome:

Enjoy!

Caveman Blogger

This is done through AJAX. It should be well supported by most browsers including IE. Everything is quite straight forward. First you need to set up a dummy MySQL database to test out the following javascripts. Here is the SQL to set the database up:

USE `testDB`;
DROP TABLE IF EXISTS `test`;

CREATE TABLE `test` (
`a` tinyint(4) DEFAULT NULL,
`b` tinyint(4) DEFAULT NULL,
`c` tinyint(4) DEFAULT NULL,
`d` tinyint(4) DEFAULT NULL,
`e` tinyint(4) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into `test`(`a`,`b`,`c`,`d`,`e`) values (1,2,3,4,5),(6,7,8,9,10),(11,12,13,14,15),(16,17,18,19,20);

The above SQL uses a database called 'testDB' with a table named 'test'. The 'test' table came with 5 columns namely 'a', 'b', 'c', 'd' and 'e'. Four rows of data are inserted with number incremented by one starting from 1. The first row contains 1, 2, 3, 4 and 5. The second row starts from 6 until 10 and so forth.

Here are the PHP codes for AJAX (or act as a JSON data generator):

<?php
//I name this file ajax.php
error_reporting(0);
$db_name = "testDB";
$db_server_name = "localhost";
$db_usr_name = "xxxx"; // Please replace xxxx with your MySQL username
$db_pw = "xxxxxxxx"; // Please replace xxxxxxxx with the password that came with it

$dblink = mysql_connect($db_server_name, $db_usr_name, $db_pw);

if (!$dblink) {
 array_push($error, "Failed to Connect to Database");
}
mysql_select_db($db_name);

$query = mysql_query("SELECT * from test");

$all = array();

$d = 0;
while ($query_result = mysql_fetch_assoc($query)) {
 $all[$d] = array("a"=>$query_result['a'],"b"=>$query_result['b'],"c"=>$query_result['c'],"d"=>$query_result['d'],"e"=>$query_result['e']);
 $d++;
}

$encoded = json_encode($all);
header('Content-type: application/json');
exit($encoded);

?>

Finally here are the Javascript codes:

<!DOCTYPE html>
<html>

<script>

var data;
var saveArr1 = new Array();
var saveArr2 = new Array();

function loadJSON(path) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
 if (xhr.status === 200) {
 try {
 data = JSON.parse(xhr.responseText);

 for (var k in data) {

 alert(data[k].a+" "+data[k].b+" "+data[k].c+" "+data[k].d+" "+data[k].e);

 // saveArr1.push(k); // if you want to save the array key to an array called saveArr1
 // saveArr2.push(data[k].b); // if you want to save the array data column 'b' to an array called saveArr2

 }
 // alert(data.length); // if you want to check the total length

 }
 catch(e) {
 alert("Data Error. Please contact the administrator.");
 }
 }
 else {
 console.error(xhr);
 }
 }
};
xhr.open("GET", path, true);
xhr.send();
}

loadJSON('ajax.php?set=1'); // '?set=1' is optional and your PHP codes will receive this parameter as $_GET['set'] in PHP

</script>

The data from MySQL will prompt out as alerts, row by row.

</html>

Please note that the DOCTYPE declaration is important for IE browsers as it puts it into standards mode for AJAX to work.

After running the codes, you will get four alerts with the first time being '1 2 3 4 5' followed by '6 7 8 9 10' and so forth. Here is a screen shot of the first prompt running in Chrome:

Please let me know if you encounter any problem with these codes. I will be happy to answer any questions that you may have. Enjoy!

Caveman Blogger

This is mainly for fun or educational purposes only. This is inspired by a carousel javascript plugin with reflection at the bottom of each image which looks like they are standing on a solid marble. Since it is an awesome idea, I tried to do some coding if it is able to be done by just pure Javascript. Yes, they are done and the codes are presented as follows:

<html>
<body>

<a href="javascript:renderReflection()">Render Reflection</a>
 

<script>

var height,width;
var tmpDiv,tmpDiv2,i,j,k,l,m,n;
var img = new Image();
var file = 'img/phone_icon2.png';
img.src = file;
img.onload = function() {
height = this.height;
width = this.width;
}

tmpDiv = document.createElement("span");
tmpDiv.innerHTML = '<img id=img0 src="'+file+'">';
tmpDiv.style.position = 'absolute';
tmpDiv.style.left = '300px';
tmpDiv.style.top = '150px';
tmpDiv.id = "imgSpan";
document.body.appendChild(tmpDiv);

function renderReflection() {

k=0, l=-0.25, m=50, n=1; // n=speed of fade, // m=percentage of fade, // l=reflection direction

for (i=1; i<=height; i++) {
tmpDiv = document.createElement("span");
tmpDiv.id = "line"+i;
tmpDiv.style.height = '1px';
tmpDiv.style.width = width+'px';
tmpDiv.style.position = 'absolute';
tmpDiv.style.overflow = 'hidden';

j = i*n+(height*((100-m)/100));
if (j>height) { j=height; }

tmpDiv.style.MozOpacity = ((height-j+1)/height*10)/10;
tmpDiv.style.opacity = ((height-j+1)/height*10)/10;

tmpDiv2 = document.createElement("span");
tmpDiv2.innerHTML = '<img id=img'+i+' src="'+file+'">';
tmpDiv2.style.position = 'absolute';
tmpDiv2.style.marginTop = -1*(height-i-1)+'px';
tmpDiv2.style.filter = 'alpha(opacity=' + Math.round((height-j+1)/height*100) + ')';

k+=l;

tmpDiv.style.left = document.getElementById('imgSpan').offsetLeft + k + 'px';
tmpDiv.style.top = height + document.getElementById('imgSpan').offsetTop + i + 'px';
tmpDiv.appendChild(tmpDiv2);
document.body.appendChild(tmpDiv);

}
}

</script>

</body>
</html>

You can adjust the style of the reflection by changing the value for l, m or n.

l is the control of the direction for the reflection. A negative value will move the reflection to the left and a postive value will move it to the right. A zero value will cast the reflection straight down.

m is the percentage of the reflection to be rendered. A value of 50 will only allow a maximum 50% of the reflection to be shown. The reflection image will look like being cut into half.

n is the fading speed of the reflection image. A value of 2 will double up the fading speed which result in only half of the reflection image being rendered. A value of 3 will triple up the fading speed which result in only a third of the reflection image being rendered.

The following is the screen capture of the trial runs.

The result of k=0, l=-0.25, m=50, n=1:

The result of k=0, l=0, m=100, n=1.25:

The result of k=0, l=1, m=85, n=2:

You can change the file name and path to something else by modifying var file = 'img/phone_icon2.png';! Enjoy!

P.S.: You need to click on the Render Reflection link to run the reflection rendering function in case you are not aware of.

Caveman Blogger

This is the continuation of the previous post with also the codes to freeze the mouse scroll and hide the scroll bar. This is crucial to lock on a page to avoid any scrolling events after a message box popped up to demand a better attention from the visitor. Basically the codes are just added with a the scroll-locking codes I posted earlier here. In addition to that, I included the scrollbar disabling javascript "document.body.style.overflowY = 'hidden';" code. Here are the long combined codes:

<!DOCTYPE HTML>
<html>

<style type="text/css">

#curtain {
left:0px;
top:0px;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
width: 100%;
height: 100%;

}

#message_box {
left:50%;
top:50%;
width: 200px;
height: 70px;
z-index: 1;
margin-top: -35px;
margin-left: -100px;
}

div > div#curtain { position: fixed; }
div > div#message_box { position: fixed; }

</style>

<script>

var ff = (navigator.userAgent.indexOf("Firefox") != -1);

if (ff) {
mousewheelevent = "DOMMouseScroll";
}
else {
mousewheelevent = "mousewheel";
}

function lockScroll() {
if (document.attachEvent) {
 document.attachEvent("on"+mousewheelevent, catchWheel);
}
else if (document.addEventListener) {
 document.addEventListener(mousewheelevent, catchWheel, false);
}

}

function unlockScroll() {
if (document.detachEvent) {
 document.detachEvent("on"+mousewheelevent, catchWheel);
}
else if (document.removeEventListener) {
 document.removeEventListener(mousewheelevent, catchWheel, false);
}

}

function catchWheel(e){

if (e.preventDefault) {
 e.preventDefault();
}
else {
 e.returnValue = false;
}
}

lockScroll(); // to lock scroll
unlockScroll(); // to unlock scroll

function close() {
document.body.style.overflowY = 'scroll';
document.getElementById('curtain').style.visibility = "hidden";
document.getElementById('message_box').style.visibility = "hidden";
unlockScroll();
}

function open() {
document.body.style.overflowY = 'hidden';
document.getElementById('curtain').style.visibility = "visible";
document.getElementById('message_box').style.visibility = "visible";
lockScroll();
}

lockScroll();

</script>

<body bgcolor="#aabbcc">

<div style="width:100%;height:100%;">

<div id="message_box" style="border:1px solid #333; background-color:#ddd; text-align:center; padding:10px; ">
Message Here <a href="javascript:close()">Close</a>
</div>

<div id="curtain" style="background-color:#ddd;"> </div>

</div>

<table width="95%" align=center><tr><td>
 <a href="javascript:open()">Show Message Box</a>
 line 1 line 2 line 3 line 4 line 5 line 6 line 7 line 8 line 9 line 10
 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
 line 21 line 22 line 23 line 24 line 25 line 26 line 27 line 28 line 29 line 30
 line 31 line 32 line 33 line 34 line 35 line 36 line 37 line 38 line 39 line 40
 line 41 line 42 line 43 line 44 line 45 line 46 line 47 line 48 line 49 line 50
 line 51 line 52 line 53 line 54 line 55 line 56 line 57 line 58 line 59 line 60
 line 61 line 62 line 63 line 64 line 65 line 66 line 67 line 68 line 69 line 70
</td></tr></table>

<script>document.body.style.overflowY = 'hidden';</script>
</body>

</html>

The scrollbar will reappear after the 'close' button is pressed.

Enjoy!

Caveman Blogger

This is a very popular method to pop up a small window at the center of a page to ask for user's registration or something that requires visitors' special attention. The following codes will not freeze the scroll bars or any movement on the page:

<!DOCTYPE HTML>
<html>

<style type="text/css">

#curtain {
left:0px;
top:0px;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
width: 100%;
height: 100%;

}

#message_box {
left:50%;
top:50%;
width: 200px;
height: 70px;
z-index: 1;
margin-top: -35px; /* 70/2 * -1 */
margin-left: -100px; /* 200/2 * -1 */
}

div > div#curtain { position: fixed; }
div > div#message_box { position: fixed; }

</style>

<script>

function close() {
document.getElementById('curtain').style.visibility = "hidden";
document.getElementById('message_box').style.visibility = "hidden";
}

</script>

<body bgcolor="#aabbcc">

<div style="width:100%;height:100%;">

<div id="message_box" style="border:1px solid #333; background-color:#ddd; text-align:center; padding:10px; ">
Message Here <a href="javascript:close()">Close</a>
</div>

<div id="curtain" style="background-color:#ddd;"> </div>

</div>

<table width="95%" align=center><tr><td>
 line 1 line 2 line 3 line 4 line 5 line 6 line 7 line 8 line 9 line 10
 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
 line 21 line 22 line 23 line 24 line 25 line 26 line 27 line 28 line 29 line 30
 line 31 line 32 line 33 line 34 line 35 line 36 line 37 line 38 line 39 line 40
 line 41 line 42 line 43 line 44 line 45 line 46 line 47 line 48 line 49 line 50
 line 51 line 52 line 53 line 54 line 55 line 56 line 57 line 58 line 59 line 60
 line 61 line 62 line 63 line 64 line 65 line 66 line 67 line 68 line 69 line 70
</td></tr></table>

</body>

</html>

Here is a screenshot of the HTML ran on a Google Chrome browser:

As for the scroll bars freezing or movement stalling versions, they will be presented in the coming posts. This post is all about the transparent engulfing DIV and the pop-up window at the center of it.

Please note that in order to fix the message box to the center of the page, the margin-top and margin-left CSS properties are used. If these margins are not implemented, the upper left corner of the message box will be at the center of the page. The margin is the negative value of the half of the height or width of the box.

Javascript is also used to hide the message box when the "close" link is clicked. At the same time, the curtain is also removed when the message box is hidden.

Caveman Blogger

This post, being similar to the previous ones especially this link, is about creating more than one fixed DIV as in previous examples. Basically more DIV IDs are needed to make this work.

Here are the codes:

<!DOCTYPE HTML>
<html>
<style type="text/css">

#fixbot {
bottom:0px;
}

#fixright {
right:0px;
}

#fixtop {
top:0px;
}

div > div#fixbot { position: fixed; }
div > div#fixright { position: fixed; }
div > div#fixtop { position: fixed; }

</style>

<body bgcolor="#aabbcc" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0>

<div>

<div id="fixbot" style="border:0px solid #333; width:100%; height:50px; background-color:#ddd; text-align:center; padding:0px; ">
Hello I am at the bottom!
</div>

<div id="fixright" style="border:0px; width:100px; height:200px; text-align:center; padding:0px; top: 30%;">
<table height=100% valign=middle><tr><td width=100 height=200 bgcolor=#ccddcc> Right!</td></tr></table>
</div>

<div id="fixtop" style="border:0px solid #333; width:100%; height:50px; background-color:#ddd; text-align:center; padding:0px; ">
Hello I am at the top!
</div>

</div>

<table width="95%" align=center><tr><td>
 line 1 line 2 line 3 line 4 line 5 line 6 line 7 line 8 line 9 line 10
 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
 line 21 line 22 line 23 line 24 line 25 line 26 line 27 line 28 line 29 line 30
 line 31 line 32 line 33 line 34 line 35 line 36 line 37 line 38 line 39 line 40
 line 41 line 42 line 43 line 44 line 45 line 46 line 47 line 48 line 49 line 50
 line 51 line 52 line 53 line 54 line 55 line 56 line 57 line 58 line 59 line 60
 line 61 line 62 line 63 line 64 line 65 line 66 line 67 line 68 line 69 line 70
</td></tr></table>

</body>
</html>

Here is a screenshot of the HTML ran on a Google Chrome browser:

By comparing this post with the previous post (link provided above), you can quickly see the technique to add more fixed DIVs to the page.

Fixing the DIV to the middle of the right side is a bit of a challenge though. I used the "top: 30%" CSS property to fix a 200-pixel high DIV to the right. If your DIV's height is more or less, you will need to adjust the "top" percentage a bit. For example, if the height of your DIV is less than 200 pixels, you may need something like a 40% or more.

If your DIV may somehow overlap each other at certain point, you can also add the 'z-index' property to the CSS to avoid having two DIVs combined like one. You may also adjust the trasparency of each DIV so that you can still see a vague content behind the fixed DIV.

Caveman Blogger

Such web page technique is very popular as of now. When a visitor of your web page scroll down to certain level, a new top panel bar will appear so as to make the page navigation more fluent. This could be inspired by the screen limitation of mobile phones and browsing web pages using a smartphone is a norm these days. Beside the benefit of smoother navigation, the logo of the page can appear more often to increase the logo exposure to the reader.

Here are the codes:

<!DOCTYPE HTML>
<html>
<style type="text/css">

#fixtop {
position: absolute;
top:0px;
}

div > div#fixtop { position: fixed; }
</style>

<script>

var offset;

function checkScrollOffset() {

if (typeof(window.pageYOffset) == 'number') {
 offset = window.pageYOffset;
}
else if (document.documentElement) {
 offset = document.documentElement.scrollTop;
}
else if (document.body) {
 offset = document.body.scrollTop;
}
if (offset > 0) { // you can choose other values for the trigger if you want the fixed div to appear after more scroll offset value
 document.getElementById('fixtop').style.display = 'block'; }
else { document.getElementById('fixtop').style.display = 'none'; }

}

</script>

<body bgcolor="#aabbcc" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 onscroll="checkScrollOffset()">

<div>

<div id="fixtop" style="border:0px solid #333; width:100%; height:50px; background-color:#ddd; text-align:center; padding:0px; display: none;">
Hello I am here!
</div>

</div>

<table width="95%" align=center><tr><td>
 line 1 line 2 line 3 line 4 line 5 line 6 line 7 line 8 line 9 line 10
 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
 line 21 line 22 line 23 line 24 line 25 line 26 line 27 line 28 line 29 line 30
 line 31 line 32 line 33 line 34 line 35 line 36 line 37 line 38 line 39 line 40
 line 41 line 42 line 43 line 44 line 45 line 46 line 47 line 48 line 49 line 50
 line 51 line 52 line 53 line 54 line 55 line 56 line 57 line 58 line 59 line 60
 line 61 line 62 line 63 line 64 line 65 line 66 line 67 line 68 line 69 line 70
</td></tr></table>

</body>
</html>

If you are not sure how to fix a DIV using pure CSS, visit my earlier post here or here as it is the basis of this web trick.

You can also make the fixed DIV semi-transparent by applying the opacity filter in the CSS if you wish.

Note: Try to avoid changing the visibility style in CSS to turn on or off the DIV. Use 'display: none' and 'display: block' instead as the visibility property may cause the fixed DIV to flicker while scrolling in Chrome. The reason for the flicker is unknown.

Caveman Blogger

This is a pure CSS solution. I have tested the following codes using Chrome, IE7 and an Android internet browser. I believe it should work well on all popular browsers.

Here are the codes:

<!DOCTYPE HTML>
<html>
<style type="text/css">

#fixbot {
position: absolute;
bottom:0px;
}

div > div#fixbot { position: fixed; }
</style>

<body bgcolor="#aabbcc" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0>

<div>
<div id="fixbot" style="border:0px; width:100%; height:50px; background-color:#ddd; text-align:center; padding:0px; ">
Hello I am here!
</div>
</div>

<table width="95%" align=center><tr><td>
 line 1 line 2 line 3 line 4 line 5 line 6 line 7 line 8 line 9 line 10
 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
 line 21 line 22 line 23 line 24 line 25 line 26 line 27 line 28 line 29 line 30
 line 31 line 32 line 33 line 34 line 35 line 36 line 37 line 38 line 39 line 40
 line 41 line 42 line 43 line 44 line 45 line 46 line 47 line 48 line 49 line 50
 line 51 line 52 line 53 line 54 line 55 line 56 line 57 line 58 line 59 line 60
 line 61 line 62 line 63 line 64 line 65 line 66 line 67 line 68 line 69 line 70
</td></tr></table>

</body>
</html>

The following is a screen capture of the codes running on Chrome:

The good thing about this pure CSS solution is that you don't need to use Javascript to detect the change in the page resize or page height to fix the DIV at the bottom of the page.

The most important part of the code is "div > div#fixbot { position: fixed; }". For it to work on IEs, you'll need to include the DOCTYPE. Enjoy!

My Programming Tricks

Labels

Thursday, December 31, 2015

Problem Installing phpBB 3.1 Forum on IIS7 Machine

Simple Captcha Verification Using Javascript and PHP with GD Lib

Tuesday, December 29, 2015

Sending Multiple MySQL Table Data from PHP to Javascript via AJAX

Large HTML Input Text and Space Suitable for Mobile Device Web Browsing

Friday, December 25, 2015

Sending MySQL Data from PHP to Javascript via AJAX

Monday, December 21, 2015

Casting a Reflection Image Using Pure Javascript

Monday, November 30, 2015

Pop a Message Box in the Center with Freezing and Hiding the Scrollbar

Pop a Message Box in the Center with Transparent Background Curtain using Fixed DIV and CSS

Fixing Several DIVs At The Same Time for All Browsers Using Only CSS

Monday, November 23, 2015

Fix a DIV on Top of Page Only After Certain Scroll via Javascript

Friday, November 13, 2015

Fix the Position of a DIV at the Bottom of a Page for All Browsers