Page 1 of 1
Phoca Bild and fixed phoca-header
Posted: 24 Jan 2012, 03:02
by saral
Hi to all
First of all sorry for my English...but i'm italian.
One question...
This is my site:
http://saral.altervista.org/
I've changed the "phoca-header" introducing a menĂ¹ (for the moment not yet working
).
I would like to make the "phoca-header" fixed, so that menĂ¹ was always visible ( and to the foreground) even though the article was too long.
I tried changing (in template.css) #phoca-header {position: fixed;) but don't work.
There's a way to make this?
Thanks you very much for your working guys!
Sorry for my English another time
Bye
Re: Phoca Bild and fixed phoca-header
Posted: 27 Jan 2012, 20:38
by Jan
Hi, for now I don't know exactly the CSS code which needs to be customized as didn't do such customization yet
Jan
Re: Phoca Bild and fixed phoca-header
Posted: 29 Jan 2012, 02:16
by saral
Hi,
thanks for the reply
I found the solution..if anyone was interested I will post this one.
Thanks another time..and congratulations for this nice template!
Re: Phoca Bild and fixed phoca-header
Posted: 29 Jan 2012, 08:36
by SonRiab
Posting the solution would be great!
Re: Phoca Bild and fixed phoca-header
Posted: 29 Jan 2012, 09:25
by saral
Hi to all,
here the code.
Under the
Code: Select all
<div id="fixeddiv" style="
border:1px solid #2266AA; /* it's not important */
position:absolute;
top: -1px; /* in internet explorer, with top: 0 px, there's a space */
width:your width; /* the phoca_header width */
height:your height; /* the phoca_header height */
background:#040F61; /* your color */
z-index:999"> /* this is important!!! Set the higher z-index of your page*/
Here some text you want display
</div>
<script type="text/javascript"><!--
/* Script by: www.jtricks.com
* Version: 20071127
* Latest version:
* www.jtricks.com/javascript/navigation/fixed_menu.html
*/
fixedMenuId = 'fixeddiv';
var fixedMenu =
{
hasInner: typeof(window.innerWidth) == 'number',
hasElement: document.documentElement != null
&& document.documentElement.clientWidth,
menu: document.getElementById
? document.getElementById(fixedMenuId)
: document.all
? document.all[fixedMenuId]
: document.layers[fixedMenuId]
};
fixedMenu.computeShifts = function()
{
fixedMenu.shiftX = fixedMenu.hasInner
? pageXOffset
: fixedMenu.hasElement
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (fixedMenu.targetLeft > 0)
fixedMenu.shiftX += fixedMenu.targetLeft;
else
{
fixedMenu.shiftX +=
(fixedMenu.hasElement
? document.documentElement.clientWidth
: fixedMenu.hasInner
? window.innerWidth - 20
: document.body.clientWidth)
- fixedMenu.targetRight
- fixedMenu.menu.offsetWidth;
}
fixedMenu.shiftY = fixedMenu.hasInner
? pageYOffset
: fixedMenu.hasElement
? document.documentElement.scrollTop
: document.body.scrollTop;
if (fixedMenu.targetTop > 0)
fixedMenu.shiftY += fixedMenu.targetTop;
else
{
fixedMenu.shiftY +=
(fixedMenu.hasElement
? document.documentElement.clientHeight
: fixedMenu.hasInner
? window.innerHeight - 20
: document.body.clientHeight)
- fixedMenu.targetBottom
- fixedMenu.menu.offsetHeight;
}
};
fixedMenu.moveMenu = function()
{
fixedMenu.computeShifts();
if (fixedMenu.currentX != fixedMenu.shiftX
|| fixedMenu.currentY != fixedMenu.shiftY)
{
fixedMenu.currentX = fixedMenu.shiftX;
fixedMenu.currentY = fixedMenu.shiftY;
if (document.layers)
{
fixedMenu.menu.left = fixedMenu.currentX;
fixedMenu.menu.top = fixedMenu.currentY;
}
else
{
fixedMenu.menu.style.left = fixedMenu.currentX + 'px';
fixedMenu.menu.style.top = fixedMenu.currentY + 'px';
}
}
fixedMenu.menu.style.right = '';
fixedMenu.menu.style.bottom = '';
};
fixedMenu.floatMenu = function()
{
fixedMenu.moveMenu();
setTimeout('fixedMenu.floatMenu()', 20);
};
// addEvent designed by Aaron Moore
fixedMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i](e) === false)
r = false;
return r;
}
}
//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
fixedMenu.supportsFixed = function()
{
var testDiv = document.createElement("div");
testDiv.id = "testingPositionFixed";
testDiv.style.position = "fixed";
testDiv.style.top = "0px";
testDiv.style.right = "0px";
document.body.appendChild(testDiv);
var offset = 1;
if (typeof testDiv.offsetTop == "number"
&& testDiv.offsetTop != null
&& testDiv.offsetTop != "undefined")
{
offset = parseInt(testDiv.offsetTop);
}
if (offset == 0)
{
return true;
}
return false;
};
fixedMenu.init = function()
{
if (fixedMenu.supportsFixed())
fixedMenu.menu.style.position = "fixed";
else
{
var ob =
document.layers
? fixedMenu.menu
: fixedMenu.menu.style;
fixedMenu.targetLeft = parseInt(ob.left);
fixedMenu.targetTop = parseInt(ob.top);
fixedMenu.targetRight = parseInt(ob.right);
fixedMenu.targetBottom = parseInt(ob.bottom);
if (document.layers)
{
menu.left = 0;
menu.top = 0;
}
fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);
fixedMenu.floatMenu();
}
};
fixedMenu.addEvent(window, 'onload', fixedMenu.init);
//--></script>
that's all
Re: Phoca Bild and fixed phoca-header
Posted: 29 Jan 2012, 11:07
by SonRiab
Thx for posting the solution!