Thursday, June 24, 2010

Popups

In the picture in my last post there is one thing that may need extra explanation:
The texts "About the rank suggestion" and "About the book sizes" underneath the Data Sheet Tab.
They are links to pop-up windows, like this


















This is accomplished in a pretty crude way IMHO, in [themes folder]/css/global.css I added
/* pop up */
#layer1 {
position: relative;
visibility: hidden;
width: 250px;
height: 110px;
left: 0px;
top: 0px;
background-color: #fff;
border: 1px solid #000;
padding: 10px;
}
#layer2 {
position: relative;
visibility: hidden;
width: 250px;
height: 110px;
left: 0px;
top: 0px;
background-color: #fff;
border: 1px solid #000;
padding: 10px;
}
#close {
float: right;
}
/* /pop up */
then in [themes folder]/product.tpl beneath the code to display the features
<table border="0">
<tr>
<p>
<th style="text-align: left">
<a href="javascript:setVisible('layer1',true)">{l s='About the rank suggestion'}</a>
</th></p>
<th style="text-align: left">
<a href="javascript:setVisible('layer2',true)">{l s='About the book sizes'}</a>
</th>
</tr>
<tr>
<td>
<div id="layer1">
<span id="close"><a href="javascript:setVisible('layer1')" style="text-decoration: none"><strong>{l s='Hide'}</strong></a></span>
<p><br />{l s='Rank suggestions are taken from various websites and are sometimes also based on my personal ideas.'}<br />
{l s='If you have different opinions about what rank the reader should be when reading the book, please contact me!'}
<br /></p>
</div>
</td>
<td>
<div id="layer2">
<span id="close"><a href="javascript:setVisible('layer2')" style="text-decoration: none"><strong>{l s='Hide'}</strong></a></span>
<p><br />{l s='The book sizes are approximate.'}<br />
{l s='L = close to A4, about 26-28 cm high'}</br>
{l s='M = close to A5, about 19-22 cm high'}</br>
{l s='S = In-between A5 and A6, about 17-18 cm high'}</br>
{l s='XS = close to A6, about 14 cm high'}
<br /></p>
</div>
</td>
</tr>
</table>
and in [themes folder]/header.tpl
<script type="text/javascript" src="{$content_dir}/../../pop-up/popupDiv.js"></script>
And finaly in the folder directed to in header.tpl I created the file popupDic.js with the following content
/* -----------------------------------------------
Floating layer - v.1
(c) 2006 www.haan.net
contact: jeroen@haan.net
You may use this script but please leave the credits on top intact.
Please inform us of any improvements made.
When usefull we will add your credits.
------------------------------------------------ */
x = 20;
y = 70;
function setVisible(obj)
{
obj = document.getElementById(obj);
obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
function placeIt(obj)
{
obj = document.getElementById(obj);
if (document.documentElement)
{
theLeft = document.documentElement.scrollLeft;
theTop = document.documentElement.scrollTop;
}
else if (document.body)
{
theLeft = document.body.scrollLeft;
theTop = document.body.scrollTop;
}
theLeft += x;
theTop += y;
obj.style.left = theLeft + 'px' ;
obj.style.top = theTop + 'px' ;
setTimeout("placeIt('layer1')",500);
}
window.onscroll = setTimeout("placeIt('layer1')",500);

This solution was taken from http://javascript.internet.com/miscellaneous/popup-div.html

2 comments:

  1. The information written in the article is descriptive and well written.It is also simple to read and understand.Good Read.
    Prestashop Developer

    ReplyDelete
  2. Well thanks! Glad you liked it.
    I hope to become more active again, not soon but eventually, and perhaps write some things about more current versions...

    ReplyDelete