rendered paste body<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>jQuery Events</title>
<!-- <link href="http://forum.bettercraft.net/public/style_css/css_27/day.css" type="text/css" rel="stylesheet"> -->
<!-- <link id="daynightsty" href="http://forum.bettercraft.net/public/style_css/css_27/day.css" type="text/css" rel="stylesheet"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// $(document).ready(function() {
//Define the variables to be used
var csspre, csssuff, csslink, currstyle, d, rise_start, rise_end, et_start, set_end, time;
//Define the link to CSS file (This will become depricated when moved to IPB [Utilising {$this->settings["css_base_url"]}style_css/{$this->registry->output->skin["_csscacheid"]}])
csspre = 'http://forum.bettercraft.net/public/style_css/css_27/';
csssuff = '.css';
csslink = $('#daynightsty');
// Define some time values
d = new Date();
rise_start = 6;
rise_end = 9;
set_start = 18;
set_end = 20;
time = d.getHours();
//Work out what time of day it is
if (time >= rise_start && time < rise_end) {
currstyle = 'sunrise';
current = 'Good morning Bettercrafter! ';
} else if (time >= rise_end && time < set_start) {
currstyle = 'day';
current = 'What a lovely day it is! ';
} else if (time >= set_start && time < set_end) {
currstyle = 'sunset';
current = 'Good evening! ';
} else {
currstyle = 'night';
current = 'Get some sleep! ';
}
// $("link#daynightsty").attr({
// href: csspre + "sunrise" + csssuff
// ≈≈
//Append a stylesheet..
var stylefull = csspre + currstyle +csssuff, userstatus;
$(document.createElement('link')).attr({
rel: 'stylesheet',
id: 'daynightsty',
type: 'text/css',
href: stylefull,
}).appendTo('head');
// $('#userstatus').text(userstatus)
// })
$(function() {
// $('#target').click(function() {
// alert('Handler for .click() called.');
// });
$('#morningclick').click(function() {
// console.log('Morning Button was clicked');
$('#morningclick').text('Morning has been toggled');
$("link#daynightsty").attr({
href: csspre + 'sunrise' + csssuff
});
});
$('#dayclick').click(function() {
console.log('Day Button was clicked');
$('#dayclick').text('Day has been toggled');
$("link#daynightsty").attr({
href: csspre + 'day' + csssuff
});
});
$('#eveningclick').click(function() {
console.log('Evening Button was clicked');
$('#eveningclick').text('Evening has been toggled');
$("link#daynightsty").attr({
href: csspre + 'sunrise' + csssuff
});
});
$('#nightclick').click(function() {
console.log('Night Button was clicked');
$('#nightclick').text('Night has been toggled');
$("link#daynightsty").attr({
href: csspre + 'night' + csssuff
});
});
})();
</script>
<script>
function toggle(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'none') {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height = blanket_height / 2 - 150; //150 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width = window_width / 2 - 150; //150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
// Date and time stylesheet rotator - by Scott Alexander
// Single stylesheet to be used for both sunset and sunrise - may change... hm
//href="{$this->settings["css_base_url"]}style_css/{$this->registry->output->skin["_csscacheid"]}/
//.css" type="text/css">
// var csspre, csssuff, d, rise_start, rise_end, set_start, set_end, current, time;
// csspre = '<link id="daynightsty" rel="stylesheet" href="http://forum.bettercraft.net/public/style_css/css_27/';
// csssuff = '.css" type="text/css">'
// function daycycle() {
// d = new Date();
// rise_start = 6;
// rise_end = 9;
// set_start = 18;
// set_end = 20;
// time = d.getHours();
// if (time >= rise_start && time < rise_end){
// currstyle = 'sunrise';
// current = 'Good morning Bettercrafter! ';
// }
// else if (time >= rise_end && time < set_start){
// currstyle = 'day';
// current = 'What a lovely day it is! ';
// }
// else if (time >= set_start && time < set_end){
// currstyle = 'sunset';
// current = 'Good evening! ';
// }
// else {
// currstyle = 'night';
// current = 'Get some sleep! ';
// }
// currstyle = csspre + currstyle + csssuff;
// document.write(currstyle);
// debug = function (log_txt) {
// if (window.console != undefined) {
// console.log(log_txt);
// }
// }
// debug(currstyle);
// }
// daycycle();
</script>
<style type="text/css">
#blanket {
width:100%;
height:100%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
background:#000;
position:absolute;
top:0;
left:0;
z-index:3000;
display:none;
}
#popUpDiv {
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:rgba(255,255,255,0.8);;
width:328px;
position:absolute;
z-index:5000;
display:none;
}
#popUpDiv .dialog-content {
text-align:left;
color:#666;
font-family:arial;
font-size:11px;
margin:13px;
padding:10px;
}
a.morning, a.day, a.evening, a.night {
width:250px !important;
cursor:pointer;
}
a.simul {
width:250px !important;
padding: 10px 10px 11px !important;
cursor:pointer;
}
a.morning, a.evening {
background-color:#d76c1c !important;
cursor:pointer;
}
a.morning:hover, a.evening:hover {
background-color:#f59e2d !important;
cursor:pointer;
}
a.night {
background-color:#2a2448 !important;
cursor:pointer;
}
a.night:hover {
background-color:#3e375f !important;
cursor:pointer;
}
a.day {
background-color:#70b43c !important;
cursor:pointer;
}
a.day:hover {
background-color:#8bc95b !important;
cursor:pointer;
}
a.simul {
background-color:#b43c3c !important;
cursor:pointer;
}
a.simul:hover {
background-color:#ce5a5a !important;
cursor:pointer;
}
#dialog-message a.button {
text-align:center;
background-color:#333333;
display:block;
width:50px;
color:#fff;
text-decoration:none;
font-weight:700;
line-height:1;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
border-bottom:1px solid rgba(0,0,0,0.25);
position:relative;
cursor:pointer;
margin:10px auto 0;
padding:5px 10px 6px;
}
#dialog-message a.button:hover {
background-color:#555555;
}
#popUpDiv .dialog-content p {
font-weight:700;
font-size:14px;
width:100%;
text-align:center;
margin:0;
}
#popUpDiv .dialog-content h1 {
font-size:14px;
font-weight:700;
}
#popUpDiv .dialog-content ul {
height:50px;
margin:10px 0 10px 20px;
padding:0;
}
</style>
</head>
<body>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<div class="dialog-content">
<div id="dialog-message">
<p>Bettercraft Theme Options</p><br />
Use the red button below to turn off the weather simulation. <br />
<br />
<a href="#" class="button simul">TURN OFF WEATHER SIMULATION</a>
<a href="#" class="button simul" style="display:none;">TURN ON WEATHER SIMULATION</a><br/><br/>
You can also preview our skin at different times of the day if you don't want to wait!<br />
<br />
<a href="#" id="morningclick" class="button morning">Preview our website in the morning</a>
<a href="#" id="dayclick" class="button day">Preview our website in the day</a>
<a href="#" id="eveningclick" class="button evening">Preview our website in the evening</a>
<a href="#" id="nightclick" class="button night">Preview our website at night</a>
<small id="userstatus"></small>
<a href="#" onclick="popup('popUpDiv')" class="button">Click Me To Close</a>
</div>
</div>
</div>
<h1><a href="#" class="ltoggle" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a></h1>
</body>
</html>