pro/2025_WEBSITE_blochouse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

scroll bar customization

Browse Source
This commit is contained in:
hugo LAMY
2025-03-02 01:59:30 +01:00
parent 78d8a1bdff
commit a99f49693d
4 changed files with 63 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
www/actualisation/ateliers.html
View File

@@ -25,66 +25,6 @@
title="Design" title="Design"
/> />
<script type="text/javascript" src="javascript/jsScrollbar.js"></script>
<script type="text/javascript" src="javascript/jsScroller.js"></script>
<script type="text/javascript">
<!--
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("News"), 480, 530);
scrollbar = new jsScrollbar(
document.getElementById("Scrollbar-Container"),
scroller,
true,
scrollbarEvent
);
};
function scrollbarEvent(o, type) {
if (type == "mousedown") {
if (o.className == "Scrollbar-Track")
o.style.backgroundColor = "#E3E3E3";
else o.style.backgroundColor = "##CC3300";
} else {
if (o.className == "Scrollbar-Track")
o.style.backgroundColor = "#EEE";
else o.style.backgroundColor = "#CC3300";
}
}
function swapIt(o) {
o.blur();
if (o.className == "current") return false;
var list = document
.getElementById("Navigation")
.getElementsByTagName("a");
for (var i = 0; i < list.length; i++) {
if (list[i].className == "current") {
list[i].className = "";
document.getElementById(list[i].title).y = -scroller._y;
}
if (list[i].title == o.title) o.className = "current";
}
list = document.getElementById("Container").childNodes;
for (var i = 0; i < list.length; i++) {
if (list[i].tagName == "DIV") list[i].style.display = "none";
}
var top = document.getElementById(o.title);
top.style.display = "block";
scrollbar.swapContent(top);
if (top.y) scrollbar.scrollTo(0, top.y);
return false;
}
-->
</script>
<script type="text/javascript"> <script type="text/javascript">
<!-- <!--
function preload() { function preload() {
@@ -344,14 +284,6 @@
<!-- fin container --> <!-- fin container -->
</div> </div>
<div id="Scrollbar-Container">
<div class="Scrollbar-Up"></div>
<div class="Scrollbar-Down"></div>
<div class="Scrollbar-Track">
<div class="Scrollbar-Handle"></div>
</div>
</div>
<!-- fin ateliers --> <!-- fin ateliers -->
</div> </div>

67
www/actualisation/contact.html
View File

@@ -28,66 +28,6 @@
/> />
<script type="text/javascript" src="javascript/tools.js"></script> <script type="text/javascript" src="javascript/tools.js"></script>
<script type="text/javascript" src="javascript/jsScrollbar.js"></script>
<script type="text/javascript" src="javascript/jsScroller.js"></script>
<script type="text/javascript">
<!--
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("News"), 480, 530);
scrollbar = new jsScrollbar(
document.getElementById("Scrollbar-Container"),
scroller,
true,
scrollbarEvent
);
};
function scrollbarEvent(o, type) {
if (type == "mousedown") {
if (o.className == "Scrollbar-Track")
o.style.backgroundColor = "#E3E3E3";
else o.style.backgroundColor = "##CC3300";
} else {
if (o.className == "Scrollbar-Track")
o.style.backgroundColor = "#EEE";
else o.style.backgroundColor = "#CC3300";
}
}
function swapIt(o) {
o.blur();
if (o.className == "current") return false;
var list = document
.getElementById("Navigation")
.getElementsByTagName("a");
for (var i = 0; i < list.length; i++) {
if (list[i].className == "current") {
list[i].className = "";
document.getElementById(list[i].title).y = -scroller._y;
}
if (list[i].title == o.title) o.className = "current";
}
list = document.getElementById("Container").childNodes;
for (var i = 0; i < list.length; i++) {
if (list[i].tagName == "DIV") list[i].style.display = "none";
}
var top = document.getElementById(o.title);
top.style.display = "block";
scrollbar.swapContent(top);
if (top.y) scrollbar.scrollTo(0, top.y);
return false;
}
-->
</script>
<script type="text/javascript"> <script type="text/javascript">
<!-- <!--
function preload() { function preload() {
@@ -358,14 +298,7 @@
<!-- fin container --> <!-- fin container -->
</div> </div>
<div id="Scrollbar-Container">
<div class="Scrollbar-Up"></div>
<div class="Scrollbar-Down"></div>
<div class="Scrollbar-Track">
<div class="Scrollbar-Handle"></div>
</div>
</div>
<!-- fin ateliers --> <!-- fin ateliers -->
</div> </div>

99
www/actualisation/css/styles.css
View File

@@ -346,12 +346,15 @@ margin-left:262px;*/
width: 510px; width: 510px;
height: 530px; height: 530px;
background-color: #ffffff; background-color: #ffffff;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 20px;
} }
#News { #News {
position: absolute; position: absolute;
top: 0px; top: 0px;
overflow: hidden; /* overflow: hidden; */
width: 480px; width: 480px;
height: 530px; height: 530px;
display: none; display: none;
@@ -464,42 +467,6 @@ margin-left:262px;*/
border: 1px solid #cc3300; border: 1px solid #cc3300;
} }
.Scrollbar-Up {
position: absolute;
width: 10px;
height: 10px;
background-image: url(../images/up.png);
font-size: 0px;
}
.Scrollbar-Track {
width: 10px;
height: 530px;
position: absolute;
top: 20px;
background-color: #eee;
}
.Scrollbar-Handle {
position: absolute;
width: 10px;
height: 50px;
background-color: #cc3300;
left: -1px;
top: 17px;
}
.Scrollbar-Down {
position: absolute;
top: 560px;
width: 10px;
height: 10px;
font-size: 0px;
background-image: url(../images/down.png);
}
#Scrollbar-Container {
position: absolute;
top: -18px;
left: 520px;
}
#trait_vertical1 { #trait_vertical1 {
float: left; float: left;
height: 610px; height: 610px;
@@ -777,3 +744,61 @@ adresse1 td {
margin: 10px; margin: 10px;
visibility: hidden; visibility: hidden;
} }
/**
* SCROLL BAR
*/
/* Chrome, Safari, Edge Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #eee;
}
::-webkit-scrollbar-thumb {
background: #cc3300;
}
/* Firefox-specific Scrollbar */
@-moz-document url-prefix() {
* {
scrollbar-width: thin;
scrollbar-color: #cc3300 #eee;
scrollbar-gutter: stable;
}
}
/* Style scrollbar buttons (arrows) */
::-webkit-scrollbar-button {
background: #555;
height: 16px;
width: 16px;
}
/* Optional: Style the top (up) and bottom (down) buttons differently */
/* ::-webkit-scrollbar-button:vertical:start {
background: url("up-arrow.png") center no-repeat;
}
::-webkit-scrollbar-button:vertical:end {
background: url("down-arrow.png") center no-repeat;
}
::-webkit-scrollbar-button:horizontal:start {
background: url("left-arrow.png") center no-repeat;
}
::-webkit-scrollbar-button:horizontal:end {
background: url("right-arrow.png") center no-repeat;
} */
.Scrollbar-Up {
position: absolute;
width: 10px;
height: 10px;
background-image: url(../images/up.png);
font-size: 0px;
}
.Scrollbar-Down {
position: absolute;
top: 560px;
width: 10px;
height: 10px;
font-size: 0px;
background-image: url(../images/down.png);
}

74
www/actualisation/manifestations.html
View File

@@ -42,66 +42,6 @@
></script> ></script>
<script type="text/javascript" src="javascript/lightbox.js"></script> <script type="text/javascript" src="javascript/lightbox.js"></script>
<script type="text/javascript" src="javascript/jsScrollbar.js"></script>
<script type="text/javascript" src="javascript/jsScroller.js"></script>
<script type="text/javascript">
<!--
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("News"), 480, 530);
scrollbar = new jsScrollbar(
document.getElementById("Scrollbar-Container"),
scroller,
true,
scrollbarEvent
);
};
function scrollbarEvent(o, type) {
if (type == "mousedown") {
if (o.className == "Scrollbar-Track")
o.style.backgroundColor = "#E3E3E3";
else o.style.backgroundColor = "##CC3300";
} else {
if (o.className == "Scrollbar-Track")
o.style.backgroundColor = "#EEE";
else o.style.backgroundColor = "#CC3300";
}
}
function swapIt(o) {
o.blur();
if (o.className == "current") return false;
var list = document
.getElementById("Navigation")
.getElementsByTagName("a");
for (var i = 0; i < list.length; i++) {
if (list[i].className == "current") {
list[i].className = "";
document.getElementById(list[i].title).y = -scroller._y;
}
if (list[i].title == o.title) o.className = "current";
}
list = document.getElementById("Container").childNodes;
for (var i = 0; i < list.length; i++) {
if (list[i].tagName == "DIV") list[i].style.display = "none";
}
var top = document.getElementById(o.title);
top.style.display = "block";
scrollbar.swapContent(top);
if (top.y) scrollbar.scrollTo(0, top.y);
return false;
}
-->
</script>
<script type="text/javascript"> <script type="text/javascript">
<!-- <!--
function preload() { function preload() {
@@ -224,9 +164,8 @@
</a> </a>
</div> </div>
</div> </div>
<!-- fin left -->
</div> </div>
<!-- fin left -->
<div id="right"> <div id="right">
<div id="middle"> <div id="middle">
@@ -2020,17 +1959,6 @@ fin du paragraphe nouvelle manifestation, à insérer à l'endroit souhaité ent
<!-- fin container --> <!-- fin container -->
</div> </div>
<div id="Scrollbar-Container">
<div class="Scrollbar-Up"></div>
<div class="Scrollbar-Down"></div>
<div
class="Scrollbar-Track"
title="faire glisser le curseur pour faire défiler les manifestations"
>
<div class="Scrollbar-Handle"></div>
</div>
</div>
<!-- fin manifestations --> <!-- fin manifestations -->
</div> </div>
<!-- fin middle --> <!-- fin middle -->