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...
Monday, November 30, 2015
Pop a Message Box in the Center with Transparent Background Curtain using Fixed DIV and CSS
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:...
Fixing Several DIVs At The Same Time for All Browsers Using Only CSS
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;...
Monday, November 23, 2015
Fix a DIV on Top of Page Only After Certain Scroll via Javascript
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...
Friday, November 13, 2015
Fix the Position of a DIV at the Bottom of a Page for All Browsers
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...
Subscribe to:
Posts (Atom)