Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
Recent Tutorials
Top posting users this month
Top Achievers
Who is online?
In total there are 5 users online :: 0 Registered, 0 Hidden and 5 Guests :: 1 Bot
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
Night Mode
Page 2 of 2 • Share
Page 2 of 2 • 1, 2
First topic message reminder :
What is "Night Mode" ? Night Mode is a plugin that allows you to reduce the brightness of the forum, making it appear easier on the eyes. It's perfect for night time browsing, people with light sensitivity, or vampires !

This plugin is optimized for use on all forum versions and expected to work on the following browsers.
Title : Night Mode
Placement : In all the pages
Paste the following code :
When you're finished, save the script and Night Mode will be installed ! To test it out, go to your forum and you'll be able to find the Night Mode controls at the footer. Just drag the slider to change the dimness of the forum and you'll be set !
If you have any questions, comments, or encounter a bug feel free to leave a reply below. Now say goodbye to those sunglasses, because you'll be able to dim the lights from now on !
What is "Night Mode" ? Night Mode is a plugin that allows you to reduce the brightness of the forum, making it appear easier on the eyes. It's perfect for night time browsing, people with light sensitivity, or vampires !

Click to view demo |
This plugin is optimized for use on all forum versions and expected to work on the following browsers.
Chrome | Firefox | Internet Explorer | Opera | Safari |
5.0+ | 23.0+ | 11+ | 15+ | 4+ |
Installation
To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.Title : Night Mode
Placement : In all the pages
Paste the following code :
- Code:
(function() {
if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
if (!window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
window.fa_night_mode = {
targets : ['page-footer', 'pun-foot', 'ipbwrapper'], // target node that the dimmer will be attached to
// executed when the dimmer is changed
dimLight : function() {
var val = +fa_night_mode.dimmer.value;
fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
my_setcookie('fa_night_level', val);
}
};
// startup variables
var dimmer = document.createElement('INPUT'),
container = document.createElement('DIV'),
counter = document.createElement('SPAN'),
cookie = my_getcookie('fa_night_level'); // cookies <3
// set the night shade and styles
document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style>');
fa_night_mode.shade = $('<div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>')[0];
fa_night_mode.interval = window.setInterval(function() {
if (document.body) {
document.body.appendChild(fa_night_mode.shade);
window.clearInterval(fa_night_mode.interval);
}
}, 1);
// dimmer attributes
dimmer.id = 'fa_night_dimmer';
dimmer.type = 'range';
dimmer.min = 0;
dimmer.max = 90;
dimmer.value = cookie || 0;
dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
// percentage counter
counter.id = 'fa_night_counter';
counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
// container contents
container.id = 'fa_night_container';
container.innerHTML = '<span>Night Mode :</span>';
$(container).append([dimmer, counter]);
// cache nodes to the global object
fa_night_mode.dimmer = dimmer;
fa_night_mode.counter = counter;
// stuff to do when the document is ready
$(function() {
// find one ( AND ONLY ONE ) of the targets to attach the dimmer
for (var i = 0, j = fa_night_mode.targets.length, footer; i < j; i++) {
footer = document.getElementById(fa_night_mode.targets[i]);
if (footer) {
footer.appendChild(container);
break;
}
}
if (!footer) {
document.body.appendChild(container); // fallback if footer cannot be found
}
});
}
}());
When you're finished, save the script and Night Mode will be installed ! To test it out, go to your forum and you'll be able to find the Night Mode controls at the footer. Just drag the slider to change the dimness of the forum and you'll be set !

If you have any questions, comments, or encounter a bug feel free to leave a reply below. Now say goodbye to those sunglasses, because you'll be able to dim the lights from now on !

Notice |
Tutorial written by Ange Tuteur. Special thanks to the Beta Testers for testing this plugin. Reproduction not permitted without consent from the author. |
Last edited by Ange Tuteur on Tue 19 Apr 2016, 18:00; edited 4 times in total
Greaaat, thanks !SLGray wrote:I have updated the tutorial on the support forum.

Perfect, thanks again for letting me know of this problem.Wilson wrote:Superb! Works solid now

- ShagoNew Member
- Gender :
Age : 46
Posts : 7
Points : 2729
Reputation : 3
Location : France
Language : French
Browser :Forum Version :
Bonjour
Votre code est excellent
J'aimerais le mettre en haut de mon forum (à gauche ou à droite), mais je n'y arrive pas...
Merci de votre aide et excusez-moi de ne pas parler votre langue
Merci pour votre aide.
Cordialement.
Shag
PS: Bravo pour vos travaux !

Votre code est excellent

J'aimerais le mettre en haut de mon forum (à gauche ou à droite), mais je n'y arrive pas...
Merci de votre aide et excusez-moi de ne pas parler votre langue

Merci pour votre aide.
Cordialement.
Shag
PS: Bravo pour vos travaux !
- ShagoNew Member
- Gender :
Age : 46
Posts : 7
Points : 2729
Reputation : 3
Location : France
Language : French
Browser :Forum Version :
Ange Tuteur wrote:Bonjour Shago,
Quelle est l'URL de votre forum ?
Merci !
Bonsoir,
Merci pour la réponse rapide

Voici le lien: http://www.fsx-france.com/
Merci

Re,
De rien.
Essayez le script suivant :
De rien.

- Code:
(function() {
'DEVELOPED BY ANGE TUTEUR';
'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
if (window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
window.fa_night_mode = {
targets : ['page-body'], // target node that the dimmer will be attached to
// executed when the dimmer is changed
dimLight : function() {
var val = +fa_night_mode.dimmer.value;
fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
my_setcookie('fa_night_level', val);
}
};
// startup variables
var dimmer = document.createElement('INPUT'),
container = document.createElement('DIV'),
counter = document.createElement('SPAN'),
cookie = my_getcookie('fa_night_level'); // cookies <3
// set the night shade and styles
document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; margin-top:-35px; float:right; }</style>');
fa_night_mode.shade = $('<div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>')[0];
fa_night_mode.interval = window.setInterval(function() {
if (document.body) {
document.body.appendChild(fa_night_mode.shade);
window.clearInterval(fa_night_mode.interval);
}
}, 1);
// dimmer attributes
dimmer.id = 'fa_night_dimmer';
dimmer.type = 'range';
dimmer.min = 0;
dimmer.max = 90;
dimmer.value = cookie || 0;
dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
// percentage counter
counter.id = 'fa_night_counter';
counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
// container contents
container.id = 'fa_night_container';
container.innerHTML = '<span>Mode Nuit :</span>';
$(container).append([dimmer, counter]);
// cache nodes to the global object
fa_night_mode.dimmer = dimmer;
fa_night_mode.counter = counter;
// stuff to do when the document is ready
$(function() {
// find one ( AND ONLY ONE ) of the targets to attach the dimmer
for (var i = 0, j = fa_night_mode.targets.length, footer; i < j; i++) {
footer = document.getElementById(fa_night_mode.targets[i]);
if (footer) {
footer.parentNode.insertBefore(container, footer);
break;
}
}
if (!footer) {
document.body.appendChild(container); // fallback if footer cannot be found
}
});
}
}());
- ShagoNew Member
- Gender :
Age : 46
Posts : 7
Points : 2729
Reputation : 3
Location : France
Language : French
Browser :Forum Version :
Re
J'ai mis le script java et rien ...
Merci de ton aide.

J'ai mis le script java et rien ...
Merci de ton aide.
Oups, j'ai fait une erreur !
Essayez maintenant :

Essayez maintenant :
- Code:
(function() {
'DEVELOPED BY ANGE TUTEUR';
'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
if (!window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
window.fa_night_mode = {
targets : ['page-body'], // target node that the dimmer will be attached to
// executed when the dimmer is changed
dimLight : function() {
var val = +fa_night_mode.dimmer.value;
fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
my_setcookie('fa_night_level', val);
}
};
// startup variables
var dimmer = document.createElement('INPUT'),
container = document.createElement('DIV'),
counter = document.createElement('SPAN'),
cookie = my_getcookie('fa_night_level'); // cookies <3
// set the night shade and styles
document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; margin-top:-35px; float:right; }</style>');
fa_night_mode.shade = $('<div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>')[0];
fa_night_mode.interval = window.setInterval(function() {
if (document.body) {
document.body.appendChild(fa_night_mode.shade);
window.clearInterval(fa_night_mode.interval);
}
}, 1);
// dimmer attributes
dimmer.id = 'fa_night_dimmer';
dimmer.type = 'range';
dimmer.min = 0;
dimmer.max = 90;
dimmer.value = cookie || 0;
dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
// percentage counter
counter.id = 'fa_night_counter';
counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
// container contents
container.id = 'fa_night_container';
container.innerHTML = '<span>Mode Nuit :</span>';
$(container).append([dimmer, counter]);
// cache nodes to the global object
fa_night_mode.dimmer = dimmer;
fa_night_mode.counter = counter;
// stuff to do when the document is ready
$(function() {
// find one ( AND ONLY ONE ) of the targets to attach the dimmer
for (var i = 0, j = fa_night_mode.targets.length, footer; i < j; i++) {
footer = document.getElementById(fa_night_mode.targets[i]);
if (footer) {
footer.parentNode.insertBefore(container, footer);
break;
}
}
if (!footer) {
document.body.appendChild(container); // fallback if footer cannot be found
}
});
}
}());
- ShagoNew Member
- Gender :
Age : 46
Posts : 7
Points : 2729
Reputation : 3
Location : France
Language : French
Browser :Forum Version :
Re,
Merci à toi !
Juste une chose, certains membres ont une configuration d'image différente...


Serait il possible de descendre le script d'un cran, juste au dessous de la barre du menu ?
Merci d'avance
Merci à toi !
Juste une chose, certains membres ont une configuration d'image différente...


Serait il possible de descendre le script d'un cran, juste au dessous de la barre du menu ?
Merci d'avance

Re,
Oui ! Ajoutez le code CSS suivant dans votre feuille de style.
Affichage > Couleurs > Feuille de style CSS
Oui ! Ajoutez le code CSS suivant dans votre feuille de style.
Affichage > Couleurs > Feuille de style CSS
- Code:
#fa_night_container {
margin-top:0 !important;
}
- ShagoNew Member
- Gender :
Age : 46
Posts : 7
Points : 2729
Reputation : 3
Location : France
Language : French
Browser :Forum Version :
C'est trop génial 
Je l'ai légèrement modifié pour l’aligner et c'est parfait
tu es génial 
A très bientôt pour te lire.
Cordialement.
Shago

Je l'ai légèrement modifié pour l’aligner et c'est parfait

- Code:
#fa_night_container {
margin-top:14 !important;


A très bientôt pour te lire.
Cordialement.
Shago
then what about
i was not online for like 8 month`s so i think i forget a litle of the coding skills
- Code:
.postbody:first
- Code:
page-footer
i was not online for like 8 month`s so i think i forget a litle of the coding skills
Try this out to see if it works :
I had to modify it, because the selection method was only for IDs.
- Code:
(function() {
'DEVELOPED BY ANGE TUTEUR';
'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
if (!window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
window.fa_night_mode = {
targets : '.postbody', // target node that the dimmer will be attached to
// executed when the dimmer is changed
dimLight : function() {
var val = +fa_night_mode.dimmer.value;
fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
my_setcookie('fa_night_level', val);
}
};
// startup variables
var dimmer = document.createElement('INPUT'),
container = document.createElement('DIV'),
counter = document.createElement('SPAN'),
cookie = my_getcookie('fa_night_level'); // cookies <3
// set the night shade and styles
document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style>');
fa_night_mode.shade = $('<div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>')[0];
fa_night_mode.interval = window.setInterval(function() {
if (document.body) {
document.body.appendChild(fa_night_mode.shade);
window.clearInterval(fa_night_mode.interval);
}
}, 1);
// dimmer attributes
dimmer.id = 'fa_night_dimmer';
dimmer.type = 'range';
dimmer.min = 0;
dimmer.max = 90;
dimmer.value = cookie || 0;
dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
// percentage counter
counter.id = 'fa_night_counter';
counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
// container contents
container.id = 'fa_night_container';
container.innerHTML = '<span>Night Mode :</span>';
$(container).append([dimmer, counter]);
// cache nodes to the global object
fa_night_mode.dimmer = dimmer;
fa_night_mode.counter = counter;
// stuff to do when the document is ready
$(function() {
footer = $(fa_night_mode.targets)[0];
if (footer) {
footer.appendChild(container);
} else {
document.body.appendChild(container); // fallback if footer cannot be found
}
});
}
}());
I had to modify it, because the selection method was only for IDs.
What an awesome gadget!
I tried to translate into Arabic and it worked! Not that only, it turned to right (we write from right to left).
Here's the code in Arabic
I tried to translate into Arabic and it worked! Not that only, it turned to right (we write from right to left).
Here's the code in Arabic
- Code:
(function() {
'DEVELOPED BY ANGE TUTEUR';
'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
if (!window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
window.fa_night_mode = {
targets : ['page-footer', 'pun-foot', 'ipbwrapper'], // target node that the dimmer will be attached to
// executed when the dimmer is changed
dimLight : function() {
var val = +fa_night_mode.dimmer.value;
fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
my_setcookie('fa_night_level', val);
}
};
// startup variables
var dimmer = document.createElement('INPUT'),
container = document.createElement('DIV'),
counter = document.createElement('SPAN'),
cookie = my_getcookie('fa_night_level'); // cookies <3
// set the night shade and styles
document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:5px; display:inline-block; padding:3px; margin:1px; }</style>');
fa_night_mode.shade = $('<div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>')[0];
fa_night_mode.interval = window.setInterval(function() {
if (document.body) {
document.body.appendChild(fa_night_mode.shade);
window.clearInterval(fa_night_mode.interval);
}
}, 1);
// dimmer attributes
dimmer.id = 'fa_night_dimmer';
dimmer.type = 'range';
dimmer.min = 0;
dimmer.max = 90;
dimmer.value = cookie || 0;
dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
// percentage counter
counter.id = 'fa_night_counter';
counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
// container contents
container.id = 'fa_night_container';
container.innerHTML = '<span>الوضع الليلي :</span>';
$(container).append([dimmer, counter]);
// cache nodes to the global object
fa_night_mode.dimmer = dimmer;
fa_night_mode.counter = counter;
// stuff to do when the document is ready
$(function() {
// find one ( AND ONLY ONE ) of the targets to attach the dimmer
for (var i = 0, j = fa_night_mode.targets.length, footer; i < j; i++) {
footer = document.getElementById(fa_night_mode.targets[i]);
if (footer) {
footer.appendChild(container);
break;
}
}
if (!footer) {
document.body.appendChild(container); // fallback if footer cannot be found
}
});
}
}());
- GuestGuest
Phewww... Finally got this one done in Edge.

JS:
CSS:

JS:
- Code:
(function() {
'DEVELOPED BY ANGE TUTEUR';
'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
if (!window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
window.fa_night_mode = {
targets : ['page-footer', 'pun-foot', 'ipbwrapper'], // target node that the dimmer will be attached to
// executed when the dimmer is changed
dimLight : function() {
var val = +fa_night_mode.dimmer.value;
fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
my_setcookie('fa_night_level', val);
}
};
// startup variables
var dimmer = document.createElement('INPUT'),
container = document.createElement('DIV'),
counter = document.createElement('SPAN'),
cookie = my_getcookie('fa_night_level'); // cookies <3
// set the night shade and styles
document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { position:relative; z-index:999999999; font-size:11px; font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:bold; background:#EEE; border:0px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style><div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>');
fa_night_mode.shade = $('<div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>')[0];
fa_night_mode.interval = window.setInterval(function() {
if (document.body) {
document.body.appendChild(fa_night_mode.shade);
window.clearInterval(fa_night_mode.interval);
}
}, 1);
// dimmer attributes
dimmer.id = 'fa_night_dimmer';
dimmer.type = 'range';
dimmer.min = 0;
dimmer.max = 90;
dimmer.value = cookie || 0;
dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
// percentage counter
counter.id = 'fa_night_counter';
counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
// container contents
container.id = 'fa_night_container';
container.innerHTML = '<span>Dimmer :</span>';
$(container).append([dimmer, counter]);
// cache nodes to the global object
fa_night_mode.dimmer = dimmer;
fa_night_mode.counter = counter;
// stuff to do when the document is ready
$(function() {
// find one ( AND ONLY ONE ) of the targets to attach the dimmer
for (var i = 0, j = fa_night_mode.targets.length, footer; i < j; i++) {
footer = document.getElementById(fa_night_mode.targets[i]);
if (footer) {
$('.footer-links.right', footer).prepend(container);
break;
}
}
if (!footer) {
document.body.appendChild(container); // fallback if footer cannot be found
}
});
}
}());
CSS:
- Code:
/*POSITION_&_STYLE_NIGHT_MODE_CONTAINER*/#fa_night_container {z-index:1!important;background:none!important;border:0px!important;margin-top:-6px!important}
Ange Tuteur wrote:Try this out to see if it works :
- Code:
(function() {
'DEVELOPED BY ANGE TUTEUR';
'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
'ORIGIN : http://fmdesign.forumotion.com/t444-night-mode#3675';
if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
if (!window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
window.fa_night_mode = {
targets : '.postbody', // target node that the dimmer will be attached to
// executed when the dimmer is changed
dimLight : function() {
var val = +fa_night_mode.dimmer.value;
fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
my_setcookie('fa_night_level', val);
}
};
// startup variables
var dimmer = document.createElement('INPUT'),
container = document.createElement('DIV'),
counter = document.createElement('SPAN'),
cookie = my_getcookie('fa_night_level'); // cookies <3
// set the night shade and styles
document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style>');
fa_night_mode.shade = $('<div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>')[0];
fa_night_mode.interval = window.setInterval(function() {
if (document.body) {
document.body.appendChild(fa_night_mode.shade);
window.clearInterval(fa_night_mode.interval);
}
}, 1);
// dimmer attributes
dimmer.id = 'fa_night_dimmer';
dimmer.type = 'range';
dimmer.min = 0;
dimmer.max = 90;
dimmer.value = cookie || 0;
dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
// percentage counter
counter.id = 'fa_night_counter';
counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
// container contents
container.id = 'fa_night_container';
container.innerHTML = '<span>Night Mode :</span>';
$(container).append([dimmer, counter]);
// cache nodes to the global object
fa_night_mode.dimmer = dimmer;
fa_night_mode.counter = counter;
// stuff to do when the document is ready
$(function() {
footer = $(fa_night_mode.targets)[0];
if (footer) {
footer.appendChild(container);
} else {
document.body.appendChild(container); // fallback if footer cannot be found
}
});
}
}());
I had to modify it, because the selection method was only for IDs.
wow thats super nice
i like it this way a lot better
now its my turn to translate it into my language and host it as translated
thank you so much
me after seeing the Script working as i wish

- mariokNew Member
- Gender :
Posts : 2
Points : 2436
Reputation : 1
Language : francais
Browser :Forum Version :
Thanks it's install here
http://graphcode.forumactif.org/
http://graphcode.forumactif.org/
- Sponsored content
Page 2 of 2 • 1, 2
Similar topics
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 2 of 2
Permissions in this forum:
You cannot reply to topics in this forum
|
|