I am using SimplePie for Yahoo weather forecast. I am on a new Server and now the output looks like this:
set_feed_url($path . $code); $feed->set_item_class('SimplePie_Item_YWeather'); $feed->init(); function time2minuts($time) { $minuts = 0; $atime = explode(" ", $time); $ttime = explode(":", $atime[0]); if ($atime[1] == "pm") { if ((int)$ttime[0]!=12) $ttime[0] = $ttime[0] + 12; } $minuts = (int)$ttime[0] * 60 + (int)$ttime[1]; return $minuts; } $weather = $feed->get_item(0); $fore = $weather->get_forecasts(); $unit = $weather->get_units_temp(); $ampm = "n"; // indica noche $icon = $weather->get_condition_code(); // Calculamos la hora de Mallorca en minutos $curday = time2minuts(date("g:i a")); //echo $curday.'---'.date('h:m d.m.y').'---'.date("g:i a"); $iniday = time2minuts($weather->get_sunrise()); $endday = time2minuts($weather->get_sunset()); if ($curday > $iniday && $curday < $endday) { $ampm = "d"; // indica dia } $land = $weather->get_country(); if($land == 'Spain') { $land = 'Spanien'; } ?>
This is my php code. My PHP Version is 5.5.9-1ubuntu4.6 simplepie 1.3.1
Thank you for your help,
mallmis
thanks for your fast response.
My script is working ón the old server. But I will post:
<?
require("simplepie.inc");
require("simplepie_yahoo_weather.inc");
$code = "769293"; // Menorca 12517557
$path = "http://weather.yahooapis.com/forecastrss?u=c&w=";
$feed = new SimplePie();
$feed->set_feed_url($path . $code);
$feed->set_item_class('SimplePie_Item_YWeather');
$feed->init();
function time2minuts($time)
{
$minuts = 0;
$atime = explode(" ", $time);
$ttime = explode(":", $atime[0]);
if ($atime[1] == "pm") {
if ((int)$ttime[0]!=12) $ttime[0] = $ttime[0] + 12;
}
$minuts = (int)$ttime[0] * 60 + (int)$ttime[1];
return $minuts;
}
$weather = $feed->get_item(0);
$fore = $weather->get_forecasts();
$unit = $weather->get_units_temp();
$ampm = "n"; // indica noche
$icon = $weather->get_condition_code();
// Calculamos la hora de Mallorca en minutos
$curday = time2minuts(date("g:i a"));
//echo $curday.'---'.date('h:m d.m.y').'---'.date("g:i a");
$iniday = time2minuts($weather->get_sunrise());
$endday = time2minuts($weather->get_sunset());
if ($curday > $iniday && $curday < $endday) {
$ampm = "d"; // indica dia
}
$land = $weather->get_country();
if($land == 'Spain')
{
$land = 'Spanien';
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yahoo Weather</title>
<style type="text/css">
<!--
body {
font-family: "Trebuchet MS", Tahoma, Verdana;
font-size: 12px;
font-weight: normal;
color: #777777;
text-decoration: none;
background-color: #FFFFFF;
}
#weather {
width: 240px;
height: 120px;
margin-left: 10px;
}
#current {
width: 240px;
height: 120px;
text-align: right;
color: #FFFFFF;
font-weight: bold;
}
#current #temp {
font-size: 24px;
font-style: normal;
padding-top: 40px;
padding-right: 16px;
}
#current #fore {
padding-right: 16px;
font-size: 11px;
}
#current #city {
padding-right: 16px;
}
-->
</style>
</head>
<body>
<div id="weather" style="background:url('icon<?php echo $ampm; ?>.png') no-repeat 40px 40px;">
<div id="current" style="background:url('http://l.yimg.com/us.yimg.com/i/us/nws/weather/gr/<?php echo $icon . $ampm . ".png"; ?>') no-repeat 0px -10px;">
<div id="temp"><?php echo $weather->get_temperature(); ?>°<?php echo $unit; ?></div>
<div id="fore"><?php echo $fore[0]->get_low() . "°" . $unit; ?>
bis <?php echo $fore[0]->get_high() . "°" . $unit; ?></div>
<div id="city"><?php echo 'Mallorca' . ", " . $land; ?></div>
</div>
</div>
</body>
</html>
I think it has do do something with my new server.
Cheers,
mallmis
Related
So I have this code for a password generator with reCAPTCHA as a term of use.
this is the code:
<!DOCTYPE html>
<html>
<head>
<style>
#password-container {
width: 500px;
margin: 0 auto;
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 20px;
border: 2px solid black;
border-radius: 10px;
}
button {
margin-top: 20px;
padding: 10px 20px;
border-radius: 5px;
background-color: blue;
color: white;
cursor: pointer;
}
</style>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div id="password-container">
<div id="password">Press the button to generate new password</div>
<button id="generate-button">new password</button>
<button id="copy-button" style="display: none;">copy to clipboard</button>
<br><br>
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
</div>
<script>
function generatePassword() {
const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!##$%^&*()_+-=[]{};:'\"\\|,.<>/?`~";
const numbers = "0123456789";
const symbols = "!##$%^&*()_+-=[]{};:'\"\\|,.<>/?`~";
let password = "";
for (let i = 0; i < 8; i++) {
password += chars.charAt(Math.floor(Math.random() * chars.length));
}
for (let i = 0; i < 2; i++) {
password += numbers.charAt(Math.floor(Math.random() * numbers.length));
}
for (let i = 0; i < 2; i++) {
password += symbols.charAt(Math.floor(Math.random() * symbols.length));
}
return password;
}
document.querySelector("#generate-button").addEventListener("click", function() {
const password = generatePassword();
document.querySelector("#password").innerHTML = password;
document.querySelector("#copy-button").style.display = "inline-block";
});
document.querySelector("#copy-button").addEventListener("click", function() {
const password = document.querySelector("#password").innerHTML;
navigator.clipboard.writeText(password).then(function() {
alert("copied to clipboard");
});
});
</script>
</body>
</html>
When pressing on the "New password" button, the password is generated even when the reCAPTCHA isn't solved.
how can I make code follow the right order?
I think the code is pretty self explanatory.
After adding and entering a button, I implemented changing the table by pressing the button, but I want to change the column and row of the table immediately as soon as I enter the number. For example, if I enter 4, I want to have a 4X4 table. I don't know. Help me.
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
div { padding: 30px; margin: 30px auto; width: 600px;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
table { border-collapse: collapse; margin-top: 10px; }
td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
text-align: center; cursor: pointer; }
.yellow { background-color: yellow; }
</style>
</head>
<body>
<div id="app">
<input type="text" v-model.number="size" >
<button type="button" #click="change(size)">Change</button>
<table :style="{backgroundColor: color}">
<tr v-for="(row, index1) in matrix" v-bind:key="index1">
<td v-for="(value, index2) in row" v-bind:key="index2">
{{ value }}
</td>
</tr>
</table>
<h1>{{size}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
size: 3,
matrix: [],
clicked: [],
color: "",
},
created() {
for (let r = 0; r < this.size; ++r) {
this.matrix[r] = [];
for (let c = 0; c < this.size; ++c)
this.matrix[r][c] = r * this.size + c +1;
}
},
methods:{
change(s){
this.size=s
console.log(this.size)
let arr=[]
for (let r = 0; r < this.size; ++r) {
arr[r] = [];
for (let c = 0; c < this.size; ++c)
arr[r][c] = r * this.size + c +1;
}
this.matrix=arr
}
}
})
</script>
</body>
</html>
you can using a watcher on your size state
the watch statement should be like this:
watch: {
size(newVal){
this.change(newVal)
}
}
and you can see a working example in the below :)
var app = new Vue({
el: '#app',
data: {
size: 3,
matrix: [],
clicked: [],
color: "",
},
created() {
this.change(this.size)
},
methods:{
change(s){
console.log(this.size)
let arr=[]
for (let r = 0; r < this.size; ++r) {
arr[r] = [];
for (let c = 0; c < this.size; ++c)
arr[r][c] = r * this.size + c +1;
}
this.matrix=arr
}
},
watch: {
size(newVal){
this.change(newVal)
}
}
})
div { padding: 30px; margin: 30px auto; width: 600px;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
table { border-collapse: collapse; margin-top: 10px; }
td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
text-align: center; cursor: pointer; }
.yellow { background-color: yellow; }
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="size" >
<table :style="{backgroundColor: color}">
<tr v-for="(row, index1) in matrix" v-bind:key="index1">
<td v-for="(value, index2) in row" v-bind:key="index2">
{{ value }}
</td>
</tr>
</table>
<h1>{{size}}</h1>
</div>
</body>
</html>
I'm trying to make my digital clock change from AM to PM when it needs too. But it will only stay on AM even when it should be on PM. And it needs to be the same time as the time set on the computer. Care to help? Thanks guys, here's my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Current Time</title>
<style>
.mytime {font-size: 150px;
margin: 0 auto;
padding: 10px;
color: #ffffff;
font-weight: bold;
text-align: center;
}
.myTxt {font-size: 72px;
margin: 0 auto;
padding: 10px;
color: #ffffff;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body style="background-color: #000;">
<div ID="TimeBlock" class="mytime"></div>
<div ID="Content" class="myTxt"><small>Brought to you by</small> <br>Nate
<br /><br /><br />
A Simulated Workplace Environment
`enter code here`</div>
<script type="text/javascript" langauage="javascr
ipt">
function renderTime() {
var currentTime = new Date();
var diem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0) {
h = 12;
}
else if (h > 12) {
h = h - 12
diem = "PM";
}
if (h < 10) {
h = "0" + h
}
if (m < 10) {
m = "0" + m
}
if (s < 10) {
s = "0" + s
}
var myDisplayTime = document.getElementById("TimeBlock");
myDisplayTime.textContent = h + ":" + m + ":" + s + " " + diem;
myDisplayTime.innerText = h + ":" + m + ":" + s + " " + diem;
setTimeout('renderTime()', 1000);
}
renderTime();
</script>
<script>
alert("Open this?")
</script>
</body>
Firstly, I followed this to generate keys, certificates and CA certificates to directories which are client, server and testca. Then I verified, SSL works.
Then I followed this to configure RabbitMQ Web-Stomp Plugin, and my ssl_config is as following:
[
{rabbitmq_web_stomp,
[{ssl_config, [{port, 15671},
{backlog, 1024},
{certfile, "path/to/certs/client/cert.pem"},
{keyfile, "path/to/certs/client/key.pem"},
{cacertfile, "path/to/certs/testca/cacert.pem"},
{password, "changeme"}]}]}
].
However, when I tried to connect it via websockets by following code, which is copied from here, and I made some modifications.
<!DOCTYPE html>
<html><head>
<script src="jquery.min.js"></script>
<script src="stomp.js"></script>
<style>
.box {
width: 440px;
float: left;
margin: 0 20px 0 20px;
}
.box div, .box input {
border: 1px solid;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100%;
padding: 5px;
margin: 3px 0 10px 0;
}
.box div {
border-color: grey;
height: 300px;
overflow: auto;
}
div code {
display: block;
}
#first div code {
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #eee;
margin-bottom: 5px;
}
#second div {
font-size: 0.8em;
}
</style>
<title>RabbitMQ Web STOMP Examples : Echo Server</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head><body lang="en">
<h1>RabbitMQ Web STOMP Examples > Echo Server</h1>
<div id="first" class="box">
<h2>Received</h2>
<div></div>
<form><input autocomplete="off" value="Type here..."></input></form>
</div>
<div id="second" class="box">
<h2>Logs</h2>
<div></div>
</div>
<script>
var has_had_focus = false;
var pipe = function(el_name, send) {
var div = $(el_name + ' div');
var inp = $(el_name + ' input');
var form = $(el_name + ' form');
var print = function(m, p) {
p = (p === undefined) ? '' : JSON.stringify(p);
div.append($("<code>").text(m + ' ' + p));
div.scrollTop(div.scrollTop() + 10000);
};
if (send) {
form.submit(function() {
send(inp.val());
inp.val('');
return false;
});
}
return print;
};
// Stomp.js boilerplate
var client = Stomp.client('wss://192.168.111.131:15671/ws');
client.debug = pipe('#second');
var print_first = pipe('#first', function(data) {
client.send('/queue/webstomp', {"content-type":"text/plain"}, data);
});
var on_connect = function(x) {
id = client.subscribe("/queue/webstomp", function(d) {
print_first(d.body);
});
};
var on_error = function() {
console.log('error');
};
client.connect('test', 'test', on_connect, on_error, '/');
$('#first input').focus(function() {
if (!has_had_focus) {
has_had_focus = true;
$(this).val("");
}
});
</script>
</body></html>
it replied me that I lost connection as following screenshot.
I'd be really appreciate any helpful suggestion on this issue.
BTW: this code example works when I didn't use SSL.
Finally I figured this out by referring this post, so the key point is to explicitly authorized my certificate by visiting the address in https first, in my case is wss://192.168.111.131:15671/ws. So I need to visit https://192.168.111.131:15671/ws in browser and authorize the exception and then I can make my wss connection normally.
I'm trying to create a simple slider using divs and javascript. I set up a div with six images and an arrow that movies the containder holding the images 528px (the width of each image) every time it's clicked. When I reach the begining or end of the gallery, I want the respective arrow button to fade out so that the user won't keep pressing next/prev.
Any help is appreciated.
JAVASCRIPT
$("#btn-gallery-next").click(function(){
$("div#gallery li").not(this).removeClass('clicked');
$("div#gallery-slide").animate({left:"-=528px"});
if($("div#gallery-slide").position().left < -3168)
{
$("#btn-gallery-next").fadeOut();
}
else {
$("#btn-gallery-next").fadeIn();
}
});
$("#btn-gallery-prev").click(function(){
$("div#gallery li").not(this).removeClass('clicked');
$("div#gallery-slide").animate({left:"+=528px"});
if($("div#gallery-slide").position().left > 0)
{
$("#btn-gallery-prev").fadeOut();
}
else {
$("#btn-gallery-prev").fadeIn();
}
});
HTML
<div id="gallery-slide">
<img class="gallery-img" src="_/img/gallery/img1.jpg" alt="" />
<img class="gallery-img" src="_/img/gallery/img2.jpg" alt="" />
<img class="gallery-img" src="_/img/gallery/img3.jpg" alt="" />
<img class="gallery-img" src="_/img/gallery/img4.jpg" alt="" />
<img class="gallery-img" src="_/img/gallery/img5.jpg" alt="" />
<img class="gallery-img" src="_/img/gallery/img6.jpg" alt="" />
</div>
Try flex slider from woothemes, it have all ur needs.
Why not use a slider library like Owl Slider? It comes with lots of options and configurations. It is super simple to integrate into any project.
Example #1 www.midwestgathering.com/#galleries
Example #2 www.owlgraphic.com/owlcarousel/demos/images.html
Another option is jcarousel. The basic slider is shown with an example that makes the left next button inactive until the user slides to the right, then once the user gets to the end of the gallery the right next button becomes inactive:
JS
(function($) {
$(function() {
$('.jcarousel').jcarousel();
$('.jcarousel-control-prev')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.jcarousel-control-next')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.jcarouselPagination();
});
})(jQuery);
CSS
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 600px;
height: 400px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev,
.jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
You can find documentation for jcarousel at www.sorgalla.com/jcarousel/docs/.
see demo - http://codepen.io/vsync/pen/waKju?editors=011
javascript
/**
* Slider - loops over images
* SEP 2014
* By - Yair Even-Or
*/
var Slider = function(elm, prev, next){
var that = this;
this.locked = false;
this.slider = elm;
this.children = this.slider.children;
this.itemWidth = this.children[0].clientWidth;
this.preloadImages();
next && next.addEventListener('click', function(){ that.move('next') });
prev && prev.addEventListener('click', function(){ that.move('prev') });
}
Slider.prototype = {
move : function(dir){
var that = this,
itemToMove;
if( this.locked ){
this.locked.removeAttribute('style');
this.slider.appendChild(this.locked);
clearTimeout(this.timer);
moveToEnd();
}
// do nothing if there are no items
if( this.children.length < 2 )
return false;
itemToMove = this.children[0];
this.locked = itemToMove;
if( dir == 'next' )
itemToMove.style.marginLeft = -this.itemWidth + 'px';
else{
itemToMove = this.children[this.children.length-1];
itemToMove.style.marginLeft = -this.itemWidth + 'px';
this.slider.insertBefore(itemToMove, this.children[0]);
setTimeout(function(){
itemToMove.removeAttribute('style');
},50);
this.preloadImages();
this.locked = false;
}
// move the child to the end of the items' list
if( dir == 'next' )
this.timer = setTimeout(moveToEnd, 420);
function moveToEnd(el){
itemToMove = el || itemToMove;
if( !itemToMove ) return;
itemToMove.removeAttribute('style');
that.slider.appendChild(itemToMove);
that.locked = false;
that.preloadImages();
}
},
preloadImages : function(){
this.lazyload(this.children[1].getElementsByTagName('img')[0] );
this.lazyload(this.children[this.children.length-1].getElementsByTagName('img')[0] );
},
// lazy load image
lazyload : function(img){
var lazy = img.getAttribute('data-src');
if( lazy ){
img.src = lazy;
img.removeAttribute('data-src');
}
}
}
// HOW TO USE /////////////////
var sliderElm = document.querySelector('.content'),
next = document.querySelector('.next'),
prev = document.querySelector('.prev'),
slider = new Slider(sliderElm, prev, next);
HTML (JADE syntax)
.slider
a.arrow.next
a.arrow.prev
ul.content
li
img(src='image1.jpg')
li
img(src='image2.jpg')
li
img(src='image3.jpg')
li
img(src='image4.jpg')