Found a really good code from jsfiddle, http://jsfiddle.net/ivangrs/zf80q3nh/ for my project posted here on stackoverflow, but I'm unable to see anything appear upon implementing the code after grabbing it from the site! Help please?
Here's the code I copied
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>
<script src="js/javascript.js"></script>
</head>
<body>
<div class='time-frame'>
<div id='time-part'></div>
<div id='date-part'></div>
</div>
<br>
</body>
</html>
javascript.js:
$(document).ready(function() {
var interval = setInterval(function() {
var momentNow = moment();
$('#time-part').html(momentNow.format(' hh:mm:ss a'))
$('#date-part').html(momentNow.format('dddd').substring(0, 8) + ' ' + momentNow.format('DD MMMM YYYY'));
});
$('#stop-interval').on('click', function() {
clearInterval(interval);
});
});
style.css CSS:
.time-frame {
color: #000;
width: 500px;
font-family: Arial;
}
.time-frame > div {
width: 100%;
text-align: center;
background-color: red;
}
#date-part {
font-size: 1.2em;
}
#time-part {
font-size: 2em;
}
#demo {
background-color: red;
font-family: Arial;
}
#demonew {
background-color: green;
font-family: Arial;
}
UPDATE: Ive implemented the changes as suggested by #below the radar but the time does not appear, only the stop time button does.
you forgot a duration for the setInterval function in your javascript.js
$(document).ready(function() {
var interval = setInterval(function() {
var momentNow = moment(); $('#time-part').html(momentNow.format(' hh:mm:ss a'))
$('#date-part').html(momentNow.format('dddd').substring(0,8) + ' '+ momentNow.format('DD MMMM YYYY'));
}, 100);
$('#stop-interval').on('click', function() {
clearInterval(interval);
});
});
you forgot the input for the stop button in your body:
<div class='time-frame'>
<div id='date-part'></div>
<div id='time-part'></div>
</div>
<br>
<input type='button' id='stop-interval' value='Stop time' />
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery/jquery.js"></script>
<style type="text/css" rel="stylesheet">
#btn {
background: green;
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<script>
$(() => {
$("#btn").click(() => {
if ($("#btn").hasClass("green")) {
$("#btn").css("backgroundColor", "red");
}
else if ($("#btn").hasClass("red")) {
$("#btn").css("backgroundColor", "green");
}
});
});
</script>
<button id="btn">Button</button>
</body>
</html>
I want the button to change its color either to red if it's green or to green if it's red. So I use toggleClass() to implement that.
Question: why doesn't it work?
It is almost certainly working but there are no CSS rules for the class "background" in the code you posted. The function is for adding/removing an entry from the class list of an element, not for directly manipulating style object properties.
If you do switch from .toggleClass() to .css(), you'll find that switching a property from one value to another immediately will have no visible effect. The browser will effectively ignore the first update.
Your are change class name using toggle not the rule within the class. But you can iverride it by adding inline style, like:
$("#btn").css("background", "red");
$(() => {
$("#btn").click(function () {
const bgColor = this.style.backgroundColor;
$(this).css("backgroundColor", bgColor === 'green' ? "red" : "green");
});
});
#btn {
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" style="background-color:green;">Button</button>
It is perfectly correct to use the .toggleClass() method...
But the argument is a string of space separated classnames.
And, of course, you have to define those class rules in your style sheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--script src="../jquery/jquery.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css" rel="stylesheet">
#btn {
/*background: green;*/
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<script>
$(() => {
$("#btn").click(() => {
$("#btn").toggleClass("red green");
});
});
</script>
<button id="btn" class="green">Button</button>
</body>
</html>
I am trying to have multiple scripts run in my html sheet, and it seems to not be working. All the other scripts work except for the script for the blinking function. I don't see what the problem is. Can you find the issue with my code? Thanks in advance!
Here is my code below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
});
</script>
<script>
//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
</div>
<div class="text2">
-- : --
</div>
<button class="btn1">online</button>
</body>
</html>
The second script must be inside a JQuery function.
$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
});
The second script's contents should be in the document ready handler otherwise the code attempts to locate and work with the .text2 element before that element has been parsed into memory.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
} else {
element.show();
}
shown = !shown;
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<div class="text2">-- : --</div>
<button class="btn1">online</button>
</body>
</html>
/*jshint strict:false */
document.getElementById("btn_1").addEventListener("click", function() {
test(this);
});
document.getElementById("btn_2").addEventListener("click", function() {
test(this);
});
document.getElementById("btn_3").addEventListener("click", function() {
test(this);
});
function test(id) {
var e = document.getElementById(id);
var d = document.createElement('p');
d.innerHTML = e.innerHTML;
e.parentNode.insertBefore(d, e);
e.parentNode.removeChild(e);
}
/* CSS Document */
body {
background-color: #484848;
}
p {
margin: 2em 2em;
color: aliceblue;
}
button {
margin: 1em 2em;
color: ghostwhite;
background: #677762;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Line Game</title>
</head>
<p>Als die ersten Menschen auftauchten lehrten wir sie:</p>
<button id="btn_1">Jagen</button>
<button id="btn_2">Fischen</button>
<button id="btn_3">Landwirtschaft</button>
<!--Javascript Time-->
<script src="Javascript.js"></script>
<body>
</body>
</html>
So here is all my code. And i want to replace the Buttons to Paragraph after someone clicked them. The old Text from the Buttons should still be there.
Yea sorry for the Dump Question, tried a few hours and get a little tired of trial and error.
Change test(this); to test(this.id);
/*jshint strict:false */
document.getElementById("btn_1").addEventListener("click", function() {
test(this.id);
});
document.getElementById("btn_2").addEventListener("click", function() {
test(this.id);
});
document.getElementById("btn_3").addEventListener("click", function() {
test(this.id);
});
function test(id) {
var e = document.getElementById(id);
var d = document.createElement('p');
d.innerHTML = e.innerHTML;
e.parentNode.insertBefore(d, e);
e.parentNode.removeChild(e);
}
/* CSS Document */
body {
background-color: #484848;
}
p {
margin: 2em 2em;
color: aliceblue;
}
button {
margin: 1em 2em;
color: ghostwhite;
background: #677762;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Line Game</title>
</head>
<p>Als die ersten Menschen auftauchten lehrten wir sie:</p>
<button id="btn_1">Jagen</button>
<button id="btn_2">Fischen</button>
<button id="btn_3">Landwirtschaft</button>
<!--Javascript Time-->
<script src="Javascript.js"></script>
<body>
</body>
</html>
In this code you throw link to element
test(this);
but you need to throw attribute id
test(this.id);
Making a widget to broadcast the local weather.
Need to make a custom div button that changes the background of the whole html as an onClick function, and the other big thing I want to do is use a for loop to display 7 days, the week's, weather.
index.html code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<section>
<h1 id="header">~Wonderful Weather Widget~</h1>
<div id="days">
<div id="content">
<div id="place"></div>
<div id="day"></div>
<div id="conditions"></div>
<div id="conditionsDesc"></div>
<div id="currentTemp"></div>
</div>
</div>
<script src="script.js"></script>
</section>
<article>
<div id='openweathermap-widget'></div>
<script type='text/javascript'>
window.myWidgetParam = {
id: 15,
cityid: 5780993,
appid: 'bb80d6b0bf0dbcf02f65eff720397c3b',
containerid: 'openweathermap-widget',
};
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'http://openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
})();
</script>
<div id="clouds" class="box">Cloudy</div>
</article>
</body>
</html>
main.css code:
html{
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/56/73/6e/56736e99269e9e1fe8eed4b8b911644e.gif);
background-size: cover;
}
#openweathermap-widget{
padding: 25px;
}
#header{
background: #000;
color: #bef;
text-align: right;
font-size: 55px;
font-family: cursive;
padding: 10px;
border-radius: 20px;
opacity: .7;
}
#days{
background: #fff;
color: #000;
border-radius: 20px;
border: 0px;
padding: 10px;
}
JavaScript code:
var weatherData;
var request = new XMLHttpRequest();
var date = new Date();
loadData();
function loadData() {
request.open('GET', 'http://api.openweathermap.org/data/2.5/forecast/daily?q=Salt+Lake+City,us&units=imperial&cnt=5&appid=bb80d6b0bf0dbcf02f65eff720397c3b');
request.onload = loadComplete;
request.send();
}
function loadComplete(evt) {
weatherData = JSON.parse(request.responseText);
console.log(weatherData);
document.getElementById("place").innerHTML = weatherData.city.name;
document.getElementById("day").innerHTML = (date.getMonth()+1) + "/" + date.getDate();
document.getElementById("currentTemp").innerHTML = weatherData.list[0].temp.day;
document.getElementById("conditions").innerHTML = weatherData.list[0].weather[0].main;
document.getElementById("conditionsDesc").innerHTML = weatherData.list[0].weather[0].description;
}
JQuery Code:
$(document).ready(function(){
$('#clouds').on("click", function(){
$('html').css('background-image', 'url(http://i236.photobucket.com/albums/ff234/snookies56/NATURE/29707055_IMG_3485sani.gif)');
});
}
All help welcome, and thank you guys for the assistance. :)
I have a lot of code that I made so far but I can't get the load() function to work:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Page resizer -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Date -->
<script>
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("date").innerHTML = days[d.getDay()];
</script>
<!-- Gif changer -->
<script>
function changegif() {
var gif;
if (days = Sunday) {
gif = "/img/sunday.gif";
} else if (days = Monday) {
gif = "/img/monday.gif";
} else if (days = Tuesday) {
gif = "/img/tuesday.gif";
} else if (days = Wednesday) {
gif = "/img/wednesday.gif";
} else if (days = Thursday) {
gif = "/img/thursday.gif";
} else if (days = Friday) {
gif = "/img/friday.gif";
} else if (days = Saturday) {
gif = "/img/saturday.gif";
}
}
function load() {
document.getElementById('gif').src = changegif();
}
</script>
</head>
<body onload="load()">
<!-- More date stuff -->
<style>
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 150px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h1 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h1 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
</style>
<div class="image">
<img src="#" id="gif">
<h2><span>Enjoy Your</span></h2>
<br>
<h1 id="date"><span></span></h1>
</div>
</body>
</html>
If anybody knows what I'm doing wrong please tell me. I have tried integrating the functions into a button but it still didn't work.
Remove all your own <script>s, then use this:
function load() {
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][new Date().getDay()];
document.getElementById("date").innerHTML = day;
document.getElementById('gif').src = "/img/" + day.toLowerCase() + ".gif";
}
To explain all the mistakes:
= assigns; it does not compare.
changegif doesn’t return anything, so document.getElementById('gif').src = changegif(); will always set it to undefined (assuming no other errors).
Sunday and others are undeclared variable names; they only work as strings: "Sunday".
days is not a single day, it’s the whole array, so comparing it to a single day won’t work.
changegif can be simplified to:
function changegif(){
return "/img/"
+ days[d.getDay()].toLowerCase()
+ ".gif";
}
Or use the answer by Chris G.