how to change background image according to weather. I used the code which someone mentioned in this site but it didn't worked please guide me. I did some changes but it didn't work please helppp. Here is my JavaScript code
function backgroundChange(weather) {
if (sky-cond == Rain) {
document.body.style.backgroundImage = "url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cac950bd-8f59-4376-8597-52366358d12e/d9wvf1t-b8eec3f5-b88b-4b1f-8aac-36bc21e06a92.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvY2FjOTUwYmQtOGY1OS00Mzc2LTg1OTctNTIzNjYzNThkMTJlXC9kOXd2ZjF0LWI4ZWVjM2Y1LWI4OGItNGIxZi04YWFjLTM2YmMyMWUwNmE5Mi5qcGcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.WYDWFRtXw1BslrbVksftWlGdI6xCc0wHMhKMMx-NEuM')";
} else if (weatherinfo == Clouds) {
document.body.style.backgroundImage = "url(cloud.gif)";
} else if (sky-cond == Clear) {
document.body.style.backgroundImage = "url('https://image.freepik.com/free-photo/panorama-sky-sunrise-sunset-beautiful-view-dark-blue-clouds-lit-by-bright-orange-yellow-sun-clear-sky-beauty-power-nature-meteorology-climate-changing-concept_127089-8097.jpg')";
}else if (sky-cond == Haze) {
document.body.style.backgroundImage = "url(https://www.pixelstalk.net/wp-content/uploads/2016/06/Dark-Woods-HD-Wallpaper.jpg)";
} else {
document.body.style.backgroundImage= "url(background.gif)";
}
}
something like that should work:
function backgroundChange(weather) {
if (weather === 'Rain') {
document.body.style.backgroundImage = "url('https://sukhbinder.files.wordpress.com/2012/10/wpid-rain.jpg')";
} else if (weather === 'Clouds') {
document.body.style.backgroundImage = "url(cloud.gif)";
} else if (weather === 'Clear') {
document.body.style.backgroundImage = "url('https://i...')";
}else if (weather === 'Haze') {
document.body.style.backgroundImage = "url('https://live.staticflickr.com/7192/6814624698_2a45c14996_n.jpg')";
} else {
document.body.style.backgroundImage= "url(background.gif)";
}
}
<button onclick="backgroundChange('Rain')">rain</button>
<button onclick="backgroundChange('Haze')">haze</button>
the paramter weather should contain your skyCond variable as a String. as #PizzaDownload said the dash in your name is invalid.
Be aware that with the strict comparison === the upper and lower case plays a role.
Try this,
backgroundChange("Clear"); // Can change the parameter to check different climates
public backgroundChange(weather) {
if (weather == "Rain") {
document.body.style.backgroundImage =
"url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cac950bd-8f59-4376-8597-52366358d12e/d9wvf1t-b8eec3f5-b88b-4b1f-8aac-36bc21e06a92.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvY2FjOTUwYmQtOGY1OS00Mzc2LTg1OTctNTIzNjYzNThkMTJlXC9kOXd2ZjF0LWI4ZWVjM2Y1LWI4OGItNGIxZi04YWFjLTM2YmMyMWUwNmE5Mi5qcGcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.WYDWFRtXw1BslrbVksftWlGdI6xCc0wHMhKMMx-NEuM')";
} else if (weather == "Clouds") {
document.body.style.backgroundImage = "url(cloud.gif)"; // give proper url for the image or gif here
} else if (weather == "Clear") {
document.body.style.backgroundImage =
"url('https://image.freepik.com/free-photo/panorama-sky-sunrise-sunset-beautiful-view-dark-blue-clouds-lit-by-bright-orange-yellow-sun-clear-sky-beauty-power-nature-meteorology-climate-changing-concept_127089-8097.jpg')";
} else if (weather == "Haze") {
document.body.style.backgroundImage =
"url(https://www.pixelstalk.net/wp-content/uploads/2016/06/Dark-Woods-HD-Wallpaper.jpg)";
} else {
document.body.style.backgroundImage = "url(background.gif)"; // give proper url for the image or gif here
}
}
Related
My knowledge is limited, so I'm just praying y'all will enlighten me who knows bare minimum of JS. I want to bypass a timer that makes it unable to go to the next page (I need 35s every single time and that's a lot considering some lessons have over 200 slides). How do I write a script for tampermonkey to make it show the link to the next page instantly?
// Obsługa przycisku Dalej
function goNext(vIsExam) {
// Przycisk nieaktywny - blokada przejścia
if (document.getElementById("pNext").rel != 'enabled') return false;
if (vIsExam==1) {
} else {
location.href='../sql/MemSql.php?pRun=MemCourseGoNext&pCourseResultId=262261&pCourseLessonId=227436';
}
} // function
// Aktywacja przycisku Dalej
function waitNextLesson(vTimeLeft, vTimer) {
setCookie('cLessonTime',vTimeLeft);
if (vTimeLeft > 0) {
document.getElementById('pNext').rel = 'disabled';
document.getElementById('pNextDiv').className = 'CourseInactive';
if (vTimer == 0) {
document.getElementById('pNextIcon').className = 'FontAwesome';
document.getElementById('pNextIcon').innerHTML = vTimeLeft;
} else {
document.getElementById('pNextIcon').className = 'FontAwesome';
document.getElementById('pNextIcon').className = 'FontAwesome FontAwesomeArrowRight';
}
document.getElementById('pNextName').innerHTML = 'CZEKAJ';
vTimeLeft = vTimeLeft - 1;
setTimeout("waitNextLesson("+vTimeLeft+","+vTimer+")",1000);
} else {
document.getElementById('pNext').rel = 'enabled';
document.getElementById('pNextDiv').className = '';
document.getElementById('pNextIcon').className = 'FontAwesome FontAwesomeArrowRight';
document.getElementById('pNextIcon').innerHTML = '';
document.getElementById('pNextName').innerHTML = 'NASTĘPNY SLAJD';
if (document.getElementById('iLessonAutoPlay').checked == true) document.getElementById('pNext').click();
}
} // function
// Obsługa LessonAutoPlay
function jLessonAutoPlay(e) {
setCookie('LessonAutoPlay', document.getElementById('iLessonAutoPlay').checked);
jStopPropagation(e);
} // function
//if (getCookie('LessonAutoPlay') == 'true') document.getElementById('iLessonAutoPlay').checked = true;
// Obsługa skrótów klawiaturowych (strzałka [<] i [>])
$("body").keyup(function(oEvent){
// Sprawdzenie czy można obsługiwać skróty
if (document.getElementById('DIALOG').style.display == 'none' && document.getElementById('LOADER').style.display == 'none') {
// Klawisz [<]
if (oEvent.keyCode == 37) {
document.getElementById("pPrev").click();
}
// Klawisz [>]
if (oEvent.keyCode == 39) {
if (document.getElementById("pNext").rel == 'enabled') {
document.getElementById("pNext").click();
}
}
}
});
In Adobe Animate HTML5 Canvas (Create.js/Easel.js), I am trying to set the state of a button, but not working with various code:
this.retinoscopeButton.addEventListener("click", retinoscope.bind(this));
/*function retinoscope(evt) {
var retinoscopeButtonState = evt.currentTarget.state = !evt.currentTarget.state;
if (retinoscopeButtonState) {
alert(retinoscopeButtonState);
this.retinoscopeButton.upState = this.retinoscopeButton.downState;
} else {
this.retinoscopeButton.downState = this.retinoscopeButton.upState;
}
}*/
var retinoscopeButtonState = 'up';
function retinoscope(evt){
if (retinoscopeButtonState == 'up'){
this.retinoscopeButton.upState = this.retinoscopeButton.downState;
retinoscopeButtonState = 'down';
} else if (retinoscopeButtonState == 'down'){
this.retinoscopeButton.downState = this.retinoscopeButton.upState;
retinoscopeButtonState = 'up';
}
}
This works for me...
Note that this is using a MovieClip with three keyframes for the different 'states' in the button MC retinoscopeButton
var toggle;
if (!root.retinoscopeButton.hasEventListener("click")) {
toggle = false;
root.retinoscopeButton.addEventListener("click", retinoscopeButtonClickHandler.bind(this));
}
root.retinoscopeButton.addEventListener("mouseover", retinoscopeButtonRollOverHandler.bind(this));
root.retinoscopeButton.addEventListener("mouseout", retinoscopeButtonRollOutHandler.bind(this));
function retinoscopeButtonClickHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(2);
toggle = true;
} else if (toggle == true) {
root.retinoscopeButton.gotoAndStop(0);
toggle = false
}
}
function retinoscopeButtonRollOverHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(1);
}
}
function retinoscopeButtonRollOutHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(0);
}
}
How would I determine if there's a draw? ( begginer coder problems)
I can identify who's the winner but can't seem to figure out how to implement the draw part! please help
heres my code not the prettiest, let me know how I can improve
var player = 1;
$('.box').on('click', function(event) {
alert('add symbol here');
var boxSelected = $(this);
$("#goAgain").click(function(event) {
location.reload();
});
if (boxSelected.hasClass('exes') || boxSelected.hasClass('ohs')) {
alert('Sorry, that has already been taken!');
} else {
if (player === 1) {
boxSelected.addClass('exes');
if (checkIfPlayerWon('exes')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 2;
}
} else {
boxSelected.addClass('ohs');
if (checkIfPlayerWon('ohs')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 1;
}
}
}
});
function checkIfPlayerWon(symbol) {
if ($('.sq1').hasClass(symbol) && $('.sq2').hasClass(symbol) && $('.sq3').hasClass(symbol)) {
return true;
} else if ($('.sq4').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq6').hasClass(symbol)) {
return true;
} else if ($('.sq7').hasClass(symbol) && $('.sq8').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq4').hasClass(symbol) && $('.sq7').hasClass(symbol)) {
return true;
} else if ($('.sq2').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq8').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq6').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else {
return false;
}
}
});
If you have a class .square which all the squares have, then you can run a forEach loop over that class like $(.square).forEach(function(){..., which checks if the square is empty. If none of the squares are empty then a boolean game_still_on would be false and from that, after your syncronous loop has completed you would initiate the draw-game routine.
I try to change the icon with select element. I have made it with 2 values, but now I need 3.
Any idea what is wrong with this code?
var icon = document.getElementById.("marker-icon");
if (type == 1) {
marker-icon.src = "images/icon1.png";
} else if (type == 2) {
marker-icon.src = "images/icon2.png";
} else if (type == 3) {
marker-icon.src = "images/icon3.png";
}
This code is for 2 values and it works fine.
var icon = (type == 1) ? "images/icon1.png" : "images/icon2.png";
Try this:
var icon = document.getElementById("marker-icon");
if (type == 1) {
icon.src = "images/icon1.png";
} else if (type == 2) {
icon.src = "images/icon2.png";
} else if (type == 3) {
icon.src = "images/icon3.png";
}
There was an extra . after the getElementById and you were using marker-icon instead of icon. (I am assuming that marker-icon is the id of an img tag.)
Try to use switch case syntax.
switch (type) {
case 1:
var icon = "images/icon1.png";
break;
case 2:
var icon = "images/icon2.png";
break;
case 3:
var icon = "images/icon3.png";
break;
default:
//default code block
break;
}
It works with that :
var icon = document.getElementById("icon");
if (type == 1) {
icon = "images/icon1.png";
} else if (type == 2) {
icon = "images/icon2.png";
} else if (type == 3) {
icon = "images/icon3.png";
}
Thanks for all! ^^
I have this jquery scripts. I want to use the return value from the function stockArt() into function prod_actname(). It seems i'm missing something or my implementation is wrong. How could i possibly do that?
Another scenario is when StockArt() value is changed the Activity Name must be updated also.
Say Stock Art Color is green. and the Activity Name color also be updated to color green, without selecting the color green from prod_actname() function. It will automatically be change as the StockArt color is also change. They must be in the same color.
jQuery( document ).ready(function($) {
$('#preview_design').css("background-color","black");
$('#stock_art').change(function() {
var retVal = stockArt();
$('#prod_actname').data("stockData", retVal);
});
$('#prod_actname').change(function() {
var stockData = $('#prod_actname').data("stockData");
prod_actname(stockData);
});
function stockArt()
{
var returnValue = null;
var selectStock_Art = $('#stock_art :selected').val();
if(selectStock_Art == '31145-RB-emb')
{ // green
$('#stockArt_img').removeClass().addClass('stock_art_grbg1');
}
else if(selectStock_Art == '33441-RB-emb1')
{ // yellow
$('#stockArt_img').removeClass().addClass('stock_art_yebg2');
}
else if(selectStock_Art == '33441-RB-emb2')
{ // gold
$('#stockArt_img').removeClass().addClass('stock_art_gobg3');
}
else {
$('#stockArt_img').removeClass();
}
returnValue = selectStock_Art;
return returnValue;
}
function prod_actname(stockData){
var StockArtResult = stockData;
//User stockData as needed
// assign the value to a variable, so you can test to see if it is working
var selectActivity_Name = $('#prod_actname :selected').val();
//alert(selectActivity_Name);
if(selectActivity_Name == 'Baseball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg1');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg1');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg1');
}
}
else if(selectActivity_Name == 'Basketball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg2');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg2');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg2');
}
}
else if(selectActivity_Name == 'Boys Basketball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg3');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg3');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg3');
}
}
else if(selectActivity_Name == 'Girls Basketball')
{
$('#activityName_img').removeClass();
if(selectStock_Art == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg4');
}
else if(selectStock_Art == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg4');
}else if(selectStock_Art == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg4');
}
}
}
});
Use data attributes to store data for '#prod_actname' and later access it.
You can leverage jQuery.data for this.
Try this
jQuery( document ).ready(function($) {
$('#preview_design').css("background-color","black");
$('#stock_art').change(function() {
var retVal = stockArt();
$('#prod_actname').data("stockData", retVal);
});
$('#prod_actname').change(function() {
var stockData = $('#prod_actname').data("stockData");
prod_actname(stockData);
});
function stockArt()
{
var returnValue = null;
var selectStock_Art = $('#stock_art :selected').val();
if(selectStock_Art == '31145-RB-emb')
{ // green
$('#stockArt_img').removeClass().addClass('stock_art_grbg1');
}
else if(selectStock_Art == '33441-RB-emb1')
{ // yellow
$('#stockArt_img').removeClass().addClass('stock_art_yebg2');
}
else if(selectStock_Art == '33441-RB-emb2')
{ // gold
$('#stockArt_img').removeClass().addClass('stock_art_gobg3');
}
else {
$('#stockArt_img').removeClass();
}
returnValue = selectStock_Art;
return returnValue;
}
var stockArtValue = stockArt();
function prod_actname(stockData){
//User stockData as needed
// assign the value to a variable, so you can test to see if it is working
var selectActivity_Name = $('#prod_actname :selected').val();
//alert(selectActivity_Name);
if(selectActivity_Name == 'Baseball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg1');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg1');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg1');
}
}
else if(selectActivity_Name == 'Basketball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg2');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg2');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg2');
}
}
else if(selectActivity_Name == 'Boys Basketball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg3');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg3');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg3');
}
}
else if(selectActivity_Name == 'Girls Basketball')
{
$('#activityName_img').removeClass();
if(selectStock_Art == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg4');
}
else if(selectStock_Art == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg4');
}else if(selectStock_Art == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg4');
}
}
}
});
One way is to store the output of the stockArt() in a variable and then pass that as an argument to the prod_actname(). For this, you would need to modify the function signature of the prod_actname() function to accept an argument. Something like this
var stockArtValue;
$('#stock_art').change(function() {
stockArtValue = stockArt();
});
$('#prod_actname').change(function() {
prod_actname(stockArtValue);
});
function prod_actname(val){
....
}
For some cases, it might be useful to consider that the stockArtValue variable has indeed been changed. You can typically use another state variable to indicate. Alternatively, if you know the set of likely input values, then you initialize it with a value outside of that input value set and check against it.
You could save its value in a property...
jQuery( document ).ready(function($) {
var StockArtResult = null;
$('#stock_art').change(function() {
StockArtResult = stockArt();
});
$('#prod_actname').change(function() {
if(StockArtResult != null)
{
prod_actname(StockArtResult);
}
});
});