My Programming Tricks

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

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