Nol c'est fini...
Ajout d'un script javascript pour faire du scrollage asynchrone avec la barre de droite du wiki darcs-hash:20070106220113-f46e9-3ccd3a5298fe9741dc0b58f422f2e6d81a2baed7.gz
This commit is contained in:
gdetrez
parent
e638a678b3
commit
8daf0a25c7
3 changed files with 382 additions and 18 deletions
|
|
@ -67,9 +67,8 @@ div#titleBarre {
|
|||
height: 40px;
|
||||
width:100%;
|
||||
border-bottom: thin solid #f9821d;//orange;
|
||||
/* modif de noel */
|
||||
background: url("../img/BarreOrangeNeige.png") repeat-x;
|
||||
/*background: url("../img/BarreOrange.png") repeat-x;*/
|
||||
|
||||
background: url("../img/BarreOrange.png") repeat-x;
|
||||
text-align:left;
|
||||
|
||||
}
|
||||
|
|
@ -91,9 +90,7 @@ h1#title
|
|||
width:100%;
|
||||
height:25px;
|
||||
padding:5px 10px 10px 10px;
|
||||
/* # modif de noel */
|
||||
background: url("../img/BarreLogoNeige.png") no-repeat right top;
|
||||
/*background: url("../img/BarreLogo.png") no-repeat right top;*/
|
||||
background: url("../img/BarreLogo.png") no-repeat right top;
|
||||
}
|
||||
|
||||
h1#title a {
|
||||
|
|
@ -103,17 +100,6 @@ h1#title a {
|
|||
|
||||
}
|
||||
|
||||
/* MODIF DE NOEL */
|
||||
div#specialNoel {
|
||||
position:fixed;
|
||||
left:0;
|
||||
bottom:0;
|
||||
width:80px;
|
||||
height:80px;
|
||||
background:transparent url("/wiki/crans/img/noel.png") left bottom;
|
||||
}
|
||||
div#specialNoel:hover {width:258px;height:261px;}
|
||||
|
||||
|
||||
/*<!-- MENU DE DROITE -->*/
|
||||
|
||||
|
|
@ -132,7 +118,7 @@ div#column-one {
|
|||
/* dimensions */
|
||||
padding:5px 10px 10px 10px;
|
||||
width:150px;
|
||||
height:100%;
|
||||
//height:100%;
|
||||
overflow:hidden;
|
||||
margin:0px;
|
||||
/* texte */
|
||||
|
|
|
|||
309
wiki/static/crans/css/crans.noel.css
Normal file
309
wiki/static/crans/css/crans.noel.css
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
/*************************************************************
|
||||
..
|
||||
.... ............ ........
|
||||
. ....... . .... ..
|
||||
. ... .. .. .. .. ..... . ..
|
||||
.. .. ....@@@. .. . ........ .
|
||||
.. . .. ..@.@@..@@. .@@@@@@@ @@@@@@. ....
|
||||
.@@@@. .@@@@. .@@@@..@@.@@..@@@..@@@..@@@@.... ....
|
||||
@@@@... .@@@.. @@ @@ .@..@@..@@...@@@. .@@@@@. ..
|
||||
.@@@.. . @@@. @@.@@..@@.@@..@@@ @@ .@@@@@@.. .....
|
||||
...@@@.... @@@ .@@.......... ........ ..... ..
|
||||
. ..@@@@.. . .@@@@. .. ....... . .............
|
||||
. .. .... .. .. . ... ....
|
||||
. . .... ............. .. ...
|
||||
.. .. ... ........ ... ...
|
||||
................................
|
||||
|
||||
==============================================================
|
||||
crans.css - MoinMoin Style
|
||||
|
||||
Theme crans (screen)
|
||||
|
||||
|
||||
Copyright (c) 2006 by www.crans.org
|
||||
|
||||
**************************************************************/
|
||||
/* IMPORTS
|
||||
/!\ les imports doivent imperativement se faire avant
|
||||
toute autre regle css !!!
|
||||
*/
|
||||
/* imports déjà faits dans common.css
|
||||
/*@import url('/wiki/common/toc/toc.css');
|
||||
@import url('/wiki/common/boxes/boxes.css');
|
||||
@import url('/wiki/common/EventCalendar/EventCalendar.css');
|
||||
*/
|
||||
/*<!-- BODY -->*/
|
||||
body, html{
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
|
||||
div#content
|
||||
{
|
||||
background:white;
|
||||
position:relative;
|
||||
margin:40px 170px 0 0;
|
||||
padding:0 15px 0 4.5em;
|
||||
background-image: url("../img/fond.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-attachment: fixed;
|
||||
min-height:500px;
|
||||
overflow:auto;
|
||||
|
||||
}
|
||||
|
||||
/*<!-- TITRE -->*/
|
||||
div#titleBarre {
|
||||
float:right;
|
||||
z-index:5;
|
||||
position: fixed; /* positionnement */
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
height: 40px;
|
||||
width:100%;
|
||||
border-bottom: thin solid #f9821d;//orange;
|
||||
/* modif de noel */
|
||||
background: url("../img/BarreOrangeNeige.png") repeat-x;
|
||||
/*background: url("../img/BarreOrange.png") repeat-x;*/
|
||||
text-align:left;
|
||||
|
||||
}
|
||||
|
||||
div#titleBarre * {
|
||||
color:white;
|
||||
font: 25px "Trebuchet MS", helvetica, sans-serif ;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
h1#title
|
||||
{
|
||||
/* pour ie */
|
||||
position:absolute;
|
||||
top:0;
|
||||
/* fin pour ie */
|
||||
margin: 0;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:25px;
|
||||
padding:5px 10px 10px 10px;
|
||||
/* # modif de noel */
|
||||
background: url("../img/BarreLogoNeige.png") no-repeat right top;
|
||||
/*background: url("../img/BarreLogo.png") no-repeat right top;*/
|
||||
}
|
||||
|
||||
h1#title a {
|
||||
color:white;
|
||||
font: 25px "Trebuchet MS", helvetica, sans-serif ;
|
||||
text-decoration:none;
|
||||
|
||||
}
|
||||
|
||||
/* MODIF DE NOEL */
|
||||
div#specialNoel {
|
||||
position:fixed;
|
||||
left:0;
|
||||
bottom:0;
|
||||
width:80px;
|
||||
height:80px;
|
||||
background:transparent url("/wiki/crans/img/noel.png") left bottom;
|
||||
}
|
||||
div#specialNoel:hover {width:258px;height:261px;}
|
||||
|
||||
|
||||
/*<!-- MENU DE DROITE -->*/
|
||||
|
||||
div#column-one ul, div#column-one li { /* utilisation de liste pour le menu */
|
||||
list-style-type: none; /* suppression des puces de liste */
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
div#column-one {
|
||||
/* position */
|
||||
z-index:2;
|
||||
position: fixed;
|
||||
right:0;
|
||||
top:41px;
|
||||
/* dimensions */
|
||||
padding:5px 10px 10px 10px;
|
||||
width:150px;
|
||||
//height:100%;
|
||||
overflow:hidden;
|
||||
margin:0px;
|
||||
/* texte */
|
||||
font: 0.9em "Trebuchet MS", helvetica, sans-serif;
|
||||
text-align:left;
|
||||
/* couleurs */
|
||||
background:#eeeeee;
|
||||
border-left:thin solid #bbbbbb;
|
||||
border-bottom:thin solid #bbbbbb;
|
||||
border-top: thin solid #cccccc;//gris clair;
|
||||
}
|
||||
|
||||
div#column-one li a {
|
||||
margin:2px;
|
||||
text-decoration:none;
|
||||
color:#888888;
|
||||
}
|
||||
|
||||
div#column-one li a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
div#p-logo {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* titres */
|
||||
div#column-one h5 {
|
||||
margin:2px;
|
||||
text-decoration:none;
|
||||
font-size:1em;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
div.portlet:after {
|
||||
content:url(../img/Separator.png);
|
||||
}
|
||||
|
||||
/* champ de recherche */
|
||||
#searchInput {
|
||||
padding: 2px 2px 2px 18px;
|
||||
background: #fff url(../img/q.png) no-repeat 4px center;
|
||||
width:132px;
|
||||
font: 0.9em "Trebuchet MS", helvetica, sans-serif;
|
||||
border:thin gray solid;
|
||||
margin: 5px 0;
|
||||
|
||||
}
|
||||
|
||||
#timings
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#credits, #version, #timings{
|
||||
margin: 5px 10px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 0.88em;
|
||||
color: #6C7680;
|
||||
}
|
||||
|
||||
#credits li, #timings li {
|
||||
display: inline;
|
||||
padding: 0 2px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*<!-- EDITEUR DE TEXTE -->*/
|
||||
textarea {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.diff {
|
||||
width:99%;
|
||||
}
|
||||
|
||||
.diff-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.diff-title {
|
||||
background-color: #C0C0C0;
|
||||
}
|
||||
|
||||
.diff-added {
|
||||
background-color: #E0FFE0;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.diff-removed {
|
||||
background-color: #FFFFE0;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.diff-added span {
|
||||
background-color: #80FF80;
|
||||
}
|
||||
|
||||
.diff-removed span {
|
||||
background-color: #FFFF80;
|
||||
}
|
||||
|
||||
#message {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
margin: 40px 0 0 0;
|
||||
padding: 5px 0px;
|
||||
border-bottom: 1px solid #c9c9c9;
|
||||
background: #E6EAF0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#message p{
|
||||
margin: 0;
|
||||
padding: 0 10px 0 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#message div.buttons {
|
||||
font-weight: lighter;
|
||||
padding: 0 0 0 30px;
|
||||
}
|
||||
|
||||
#preview {
|
||||
border: 1px solid #6C7680;
|
||||
padding: 10px 30px 20px 4.5em;
|
||||
width:100%;
|
||||
margin:10px 0 10px -3.5em;
|
||||
background: url(../img/draft.png);
|
||||
}
|
||||
|
||||
/* Collection de hacks à la con pour IE */
|
||||
@media screen {
|
||||
/* * html {
|
||||
overflow: hidden;
|
||||
}
|
||||
/**/
|
||||
/* * html body {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
//padding: 44px 160px 0 1em;
|
||||
font-size: 100%;
|
||||
}
|
||||
/**/
|
||||
/* * html body {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
* html body #page {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/**/
|
||||
* html div#column-one {
|
||||
position: absolute;
|
||||
}
|
||||
/**/
|
||||
* html h1#title
|
||||
{
|
||||
position: absolute;
|
||||
width: expression(document.body.clientWidth);
|
||||
}
|
||||
|
||||
* html div.portlet
|
||||
{
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
|
||||
}
|
||||
/**/
|
||||
69
wiki/static/crans/js/scroller.js
Normal file
69
wiki/static/crans/js/scroller.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
scroller =
|
||||
{
|
||||
}
|
||||
;
|
||||
|
||||
scroller.element_id = "column-one";
|
||||
scroller.min_top = 41;
|
||||
|
||||
|
||||
|
||||
scroller.setMenuOffset = function()
|
||||
{
|
||||
|
||||
|
||||
var element = document.getElementById(scroller.element_id);
|
||||
if (!element) return;
|
||||
element.style.position = "fixed";
|
||||
var currentWindowHeight = document.documentElement.clientHeight;
|
||||
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // body for Safari
|
||||
var currentElementHeight = element.clientHeight;
|
||||
|
||||
var startPosition = scroller.min_top;
|
||||
|
||||
if (currentWindowHeight > currentElementHeight + startPosition)
|
||||
{
|
||||
|
||||
element.style.top = startPosition + 'px';
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
var desiredPosition = startPosition - currentScroll ;
|
||||
if (desiredPosition < currentWindowHeight - currentElementHeight)
|
||||
desiredPosition = currentWindowHeight - currentElementHeight;
|
||||
element.style.top = desiredPosition + 'px';
|
||||
|
||||
}
|
||||
|
||||
|
||||
scroller.init = function ()
|
||||
{
|
||||
|
||||
|
||||
/* See if browser supports advanced interface */
|
||||
|
||||
//var advancedJavaScriptSupport = document.createElement && document.getElementsByTagName && createXMLHTTPObject();
|
||||
//if (!advancedJavaScriptSupport) return;
|
||||
|
||||
/* Load advanced interface */
|
||||
window.onscroll = document.documentElement.onscroll = scroller.setMenuOffset;
|
||||
scroller.setMenuOffset();
|
||||
}
|
||||
|
||||
|
||||
// use this instead of assigning to window.onload directly:
|
||||
function addLoadEvent(func) {
|
||||
// alert("addLoadEvent " + func)
|
||||
var oldonload = window.onload;
|
||||
if (typeof window.onload != 'function') {
|
||||
window.onload = func;
|
||||
} else {
|
||||
window.onload = function() {
|
||||
oldonload();
|
||||
func();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addLoadEvent(scroller.init);
|
||||
Loading…
Add table
Add a link
Reference in a new issue