I wrote a code for a 5 image slideshow and the NEXT and PREVIOUS buttons are supposed to take you to the next and previous slide but nothing happens when i press them. Can anyone help me out? some more detail some more detail some more detail some more detail
var slideShow = [];
function newImage(source, caption) {
var pic = new Object();
pic.src = source;
pic.cap = caption;
return pic;
}
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
var i = 0;
function nextPic() {
i = (i + 1);
if (i == 5)
i = 0;
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' id="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
function prevPic() {
if (i == -1)
i = 4;
else
i = (i - 1);
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' id="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
#picture {
width: 200px;
margin-left: 50;
margin-right: auto;
}
div.buttons {
width: 200px;
margin-left: auto;
margin-right: auto;
}
div.info {
width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 3px solid purple;
}
button {
font-size: 12px;
}
button.left {
auto;
margin-right: 418px;
}
p {
text-align: center;
}
<h3>Project 2: Slide Show</h3>
<h4>I do not own any of the following pictures</h6>
<h4>All pictures acquired online, unknown owners</h4>
<br />
<div id="picture">
<img src="slideshow1.jpg" id="images" alt="my picture" height="200 px">
<p>The Happy Cat</p>
</div>
<div class="buttons">
<button class="left" onClick="prevPic()">PREVIOUS</button>
<button onClick="nextPic()">NEXT</button>
</div>
1) Typo in slideShow
2)Not related but you cannot have duplicate id instead use class
var slideshow = [];
function newImage(source, caption) {
var pic = new Object();
pic.src = source;
pic.cap = caption;
return pic;
}
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
var i = 0;
function nextPic() {
i = (i + 1);
if (i == 5)
i = 0;
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' class="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
function prevPic() {
if (i == -1)
i = 4;
else
i = (i - 1);
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' class="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
<h3> Project 2: Slide Show </h3>
<h4> I do not own any of the following pictures </h6>
<h4> All pictures acquired online, unknown owners </h4>
<br />
<div id="picture">
<img src="slideshow1.jpg" class="images" alt="my picture" height="200 px">
<p>The Happy Cat</p>
</div>
<div class="buttons">
<button class="left" onClick="prevPic()">PREVIOUS</button>
<button onClick="nextPic()">NEXT</button>
</div>
You declaring var slideShow = []; array, however later you are populating slideshow with the code:
slideshow[0] = newImage("slideshow1.jpg","The Happy Cat");
which throws ReferenceError because you can't set property of the undefined.
Use var slideshow = [] instead of var slideShow = []
Related
I added a save and load part to my little game, and now when I go to mine btc or dash, it goes to NAN.
var satoshi = 0;
var hash = 1;
var litoshi = 0;
var lhash = 1;
var updateTimer;
var minebtcTimer;
var dhash = 1;
var dash = 0;
var mineDashTimer;
var updatesTimer;
var hashPerSecond = document.getElementsByClassName("hashPerSecond");
hashPerSecond[0].innerHTML = hashPerSecond[0].innerHTML + " " + hash;
hashPerSecond[1].innerHTML = hashPerSecond[1].innerHTML + " " + dhash;
function save() {
dash = localStorage.getItem("dash");
dash = parseInt(dash);
satoshi = localStorage.getItem("satoshi");
satoshi = parseInt(satoshi);
dhash = localStorage.getItem("dhash");
dhash = parseInt(dhash);
hash = localStorage.getItem("hash");
hash = parseInt(hash);
}
function stops() {
clearTimeout(updatesTimer);
clearTimeout(mineDashTimer);
}
function minebtc() {
satoshi = satoshi + hash
update()
}
function updates() {
document.getElementById('hashers').innerHTML = "Dashosis: " + dash;
updatesTimer = setTimeout(updates, 10000000000)
mineDashTimer = setTimeout(minedash, 1000);
}
function update() {
document.getElementById('hashspersecond').innerHTML = "Satoshis: " + satoshi;
updateTimer = setTimeout(update, 1000000)
minebtcTimer = setTimeout(minebtc, 1000);
}
function minedash() {
dash = dash + dhash
updates()
}
function stop() {
clearTimeout(updateTimer);
clearTimeout(minebtcTimer);
}
function boop() {
localStorage.setItem("satoshi", satoshi);
localStorage.setItem("hash", hash);
localStorage.setItem("dhash", dhash);
localStorage.setItem("dash", dash);
}
.column {
padding: 15px;
float: left;
}
body {
background-image: url('https://i.ytimg.com/vi/h6IlzDxjmR0/maxresdefault.jpg');
background-size: cover;
}
div.div {
background-color: lightgrey;
width: 120px;
border: 12px solid yellow;
padding: 19.5px;
margin: 19.5px;
}
<body onload="save()" onunload="boop()">
<div class="div">
Crystals: 0
</div>
<div class="div">
<center>
<h4 class="hashPerSecond">
Hashs Per Second:
</h4>
</center>
<center>
<p id="hashspersecond">Satoshis: 0</p>
</center>
<button onclick="minebtc()"><img src="kop.png" height=28 width=32>Mine BTC</button>
<button onclick="stop()"><img src="kop.png" height=28 width=32>Stop Mining BTC</button>
</div>
<div class="div">
<center>
<h4 class="hashPerSecond">
Hashs Per Second:
</h4>
</center>
<center>
<p id="hashers">Dashosis: 0 </p>
<button onclick="minedash()"><img src="dashed.png" height=28 width=32>Mine DASH</button>
<button onclick="stops()"><img src="dashed.png" height=28 width=32>Stop Mining DASH</button>
</center>
</div>
</body>
If you help me it is greatly appreciated!
I modified your code and removed some bits an bobs from your code.
document.write() as stated on this Stackoverflow link notes that document.write() causes the DOM to be destroyed and in some browsers it causes some global variables to be deleted.
Here's the JSFiddle Link: https://jsfiddle.net/dLtg5pvh/2/
User Story: I can see the weather in my current location.
User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
User Story: I can push a button to toggle between Fahrenheit and Celsius.
These are the user stories for the website. I have managed to complete 1 and 2 but I am completely stuck on 3, I have a good idea of how I would manage to do this but I can't manage to make it work with various methods(not just the one in my code) but I think I may of coded this badly but it is the only way I know because I am new. Someone suggested to me to use an if but it doesn't work as it would only be able to change the text on document load and not continuously. This is the example. Any advice on a better way about this would be greatly appreciated and sorry for the long post.
Html:
<div class="main">
<div class="title">
<h1>Weather!</h1>
<hr />
</div>
<div class="search">
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default" id="searchBtn">Search</button>
</div>
<div class="col-xs-3 checkbox" id="degrees">
<label><input type="checkbox" value="" id="fCheck">View in °F</label>
</div>
</div>
<hr />
</div>
<div class="row">
<div class="col-xs-6 content" id="temp">
<h2></h2>
<h3></h3>
<h4></h4>
<p></p>
<img src="" alt="weather icon" />
</div>
<div class="col-xs-6 info">
<h2 id="humidity"></h2>
<h2 id="windspeed"></h2>
<br>
<h2 id="sunrise"></h2>
<h2 id="sunset"></h2>
</div>
</div>
</div>
Css:
html, body {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
background-color: #3f3f3f;
}
.main{
position: relative;
margin: 10% auto auto auto;
width: 75%;
text-align: center;
background-color: #8E9EBC;
padding: 10px;
border-width: 3px;
border-style: solid;
border-color: black;
border-radius: 5px;
}
.main h1 h2 h3 h4{
margin: 0;
}
.main img {
width: 100px;
}
.title hr {
border-width: 2px;
}
#degrees h4 {
text-align: left;
}
#searchBtn {
width: 100%;
}
Js:
$(document).ready(function() {
var api = "secretAPIKey";
$.getJSON("http://ip-api.com/json", function(json) {
var userCity;
userCity = JSON.stringify(json.city);
userCity = userCity.replace(/\"/g,"");
makeElementsFromCity(userCity);
});
var celsius;
var name;
var faren;
function makeElementsFromCity(userCity) {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + userCity + "&units=metric&appid=" + api, function(json) {
name = JSON.stringify(json.name + ", " + json.sys.country);
celsius = JSON.stringify(json.main.temp);
faren = celsius * 9 / 5 + 32;
var icon = JSON.stringify(json.weather[0].icon);
var type = JSON.stringify(json.weather[0].main);
var humidity = JSON.stringify(json.main.humidity)
var windS = JSON.stringify(json.wind.speed);
var sunR = JSON.stringify(json.sys.sunrise);
var sunS = JSON.stringify(json.sys.sunset);
icon = icon.replace(/\"/g,"");
type = type.replace(/\"/g,"");
celsius = Math.round(celsius);
faren = Math.round(faren);
//get sunset and sunrise unix into time
function formatSunR(date) {
var date = new Date(date*1000);
var hours = date.getHours();
var minutes = "0" + date.getMinutes();
var seconds = "0" + date.getSeconds();
var formattedTime = hours + ':' + minutes.substr(-2);
return formattedTime;
};
//update h2 with city, country and temperature and testing to see what weather.icon is but comes back as undefined
//updates h3 with the type of weather & city is placeholder for testing the city variable
$("#temp h3").text(type);
//display image of weather type from https://openweathermap.org/weather-conditions
$("#temp img").attr("src", "http://openweathermap.org/img/w/" + icon + ".png");
$(".info #humidity").text("Humidity: " + humidity + "%");
$(".info #windspeed").text("Wind Speed: " + windS + " MPH");
$(".info #sunrise").text("Sunrise: " + formatSunR(sunR));
$(".info #sunset").text("Sunset: " + formatSunR(sunS));
if($("#fCheck").is(":checked")) {
$("#temp h2").text("The temperature in " + name + " is " + faren + "°F");
} else {
$("#temp h2").text("The temperature in " + name + " is " + celsius + "°C");
console.log(faren);
}
});
};
});
You can try this HTML
temp
with this JS and adapt it to your situation.
var temp = 25;
var celsius = temp;
var fahr = (1.8 * temp + 32);
var switch_ = new Boolean(false);
$("#toggle").on("click", function() {
switch_ = !switch_;
var temp = switch_ == true ? celsius + " °C" : fahr + " °F";
$(this).text(temp);
});
I am trying to shift my pictures to the left using jQuery. I am using a while statement to change all pictures. Here is my code:
<script language="javascript">
$(function() {
$("#leftButton").click(function() {
var imglength = $("#content").children("img").length;
var iterations = imglength;
var lastimg = imglength-1;
var nextimg = lastimg-1;
var start = 1;
var text = "";
document.getElementById("Number").innerHTML="The number of pictures is " + imglength;
document.getElementById("Number1").innerHTML="The index of the last image is " + lastimg;
while (start < iterations)
{
var last = $("img:eq('lastimg')").attr("src");
var next = $("img:eq('nextimg')").attr("src");
text += "<br>Iteration: " + imgindex + " and nextimg is:" +nextimg;
$("img:eq('lastimg')").attr('src', next);
start++;
nextimg--;
}
document.getElementById("Number2").innerHTML = text;
})
})
</script>
HTML is here:
Imgae Shift
Left Shift
Pictures
<p id="Number">Number</p>
<p id="Number1">Number</p>
<p id="Number2">Number</p>
<div id="result"></div>
</section>
</section>
<footer>
© Matthew King: 2015, Birmingham, AL 35211
</footer>
</body>
</html>
It might be easier to simply append the first image back to its parent. This should remove it and add it back as the last child. In the demo, each image has a border so you can see what is happening. I am guessing this is what you are after, but if not let me know.
function slideKittens(){
var first = document.querySelector("#kittens > img");
first.parentNode.appendChild(first);
}
setInterval(slideKittens, 1 * 1000);
#kittens img {
border: solid 2px black;
margin: 2px;
padding: 0px;
display: inline-block;
float: left;
}
<div id="kittens" style="overflow: hidden; width:333px; height: 108px">
<img src="http://placekitten.com/100/100" style="border-color: black;" />
<img src="http://placekitten.com/100/100" style="border-color: red;" />
<img src="http://placekitten.com/100/100" style="border-color: green;" />
<img src="http://placekitten.com/100/100" style="border-color: blue;" />
</div>
The problem is that you do not use the variables correctly.
The lines
var last = $("img:eq('lastimg')").attr("src");
var next = $("img:eq('nextimg')").attr("src");
$("img:eq('lastimg')").attr('src', next);
should be
var last = $("img:eq('" + lastimg + "')").attr("src");
var next = $("img:eq('" + nextimg+ "')").attr("src");
$("img:eq('" + lastimg +"')").attr('src', next);
When I do a hover or click on the class = "img-1", I want to bring up the class = "block 1" and hide the class = "block-default". Also, I want to make the default block reappear when there is no action.
<style>
.bloc{
width: 300px;
height: 300px;
position: absolute;
}
.bloc:nth-child(1){
background-color: #003169;
}
.bloc:nth-child(2){
background-color: #00A8FF;
}
img{
float:right ;
}
</style>
<body>
<div class="Bloc">
<div class="bloc">Bloc-1</div>
<div class="bloc">Bloc-2</div>
<div class="bloc">Bloc-defaut</div>
</div>
<div class="img">
<img class="img-1" title="image-1" src="" />
<img class="img-2" title="image-2" src="" />
</div>
</body>
Try this:
var img1 = document.querySelectorAll("[title=image-1]");
img1.onclick = function() {
var currentClass = (' ' + img1.className + ' ').indexOf(' block-default ') > -1;
if (currentClass) {
img1.className =
img1.className.replace(/(?:^|\s)block-default(?!\S)/g, '');
img1.className += " block-1";
}
else {
img1.className =
img1.className.replace(/(?:^|\s)block-1(?!\S)/g, '');
img1.className += " block-default";
}
};
img1.onmouseover = function() {
var currentClass = (' ' + img1.className + ' ').indexOf(' block-default ') > -1;
if (currentClass) {
img1.className =
img1.className.replace(/(?:^|\s)block-default(?!\S)/g, '');
img1.className += " block-1";
}
};
img1.onmouseout = function() {
var currentClass = (' ' + img1.className + ' ').indexOf(' block-1 ') > -1;
if (currentClass) {
img1.className =
img1.className.replace(/(?:^|\s)block-1(?!\S)/g, '');
img1.className += " block-default";
}
};
Add you can add an additional class to your default or select it with nth-child(n)
jQuery:
$(document).ready(function(){
$('.img-1').on('mouseover mouseout click',function(){
$('.bloc-default').toggleClass('hide')
})
});
css:
.bloc{
width: 100px;
height: 100px;
position: absolute;
}
.hide{
display:none;
}
.bloc{
background-color: #CC2222;
}
.bloc:nth-child(1){
background-color: #003169;
}
.bloc:nth-child(2){
background-color: #00A8FF;
}
img{
float:right ;
}
HTML:
<div class="Bloc">
<div class="bloc">Bloc-1</div>
<div class="bloc">Bloc-2</div>
<div class="bloc bloc-default">Bloc-defaut</div>
</div>
<div class="img">
<img class="img-1" title="image-1" src="//lorempixel.com/100/111" />
<img class="img-2" title="image-2" src="//lorempixel.com/100/110" />
</div>
Demo
I have some old code that I am trying to convert to divs. It contains frames that have no target src, just JavaScript to generate a page.
Below is the code...
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
window.editbox.document.write(editboxHTML);
window.editbox.document.close();
window.editbox.document.f.ta.value = defaultStuff;
update();
}
function update() {
var textarea = window.editbox.document.f.ta;
var d = dynamicframe.document;
if (old != textarea.value) {
old = textarea.value;
d.open();
d.write(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, ''))
d.write(extraStuff);
d.close();
}
window.setTimeout(update, 150);
}
<frameset onload="init();" rows="50%,50%" resizable="no">
<frame name="editbox" src="javascript:'';">
<frame name="dynamicframe" src="javascript:'';">
</frameset>
This code has a user input box at the top to input HTML code into, and the bottom displays what that code would look like in a browser.
How would I manipulate this code to work with divs instead of frames, so I can include extra styling, and so that it is not fully depreciated in HTML5.
If your answer includes AJAX, please can you explain it as I am not familiar with that coding.
EDIT: If there is no div alternative, is there an iframe alternative?
Answer Updated
CSS Fixed
Error fixed
Jquery way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 50%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">qweqwe' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
$("#editbox").html(editboxHTML);
$("#editbox form[name='f'] [name='ta']").focus();
$("#editbox form[name='f'] [name='ta']").val(defaultStuff);
update();
}
function update() {
var textarea = $("#editbox form[name='f'] [name='ta']");
var d = $("#dynamicframe");
if (old != textarea.val()) {
old = textarea.val();
if (old != undefined){
d.html(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, '')){
d.append(extraStuff);
}
}
else{
d.html("old undefined");
}
}
setTimeout("update()", 150);
}
</script>
<button onclick="init()">EDIT</button>
<div id="editbox"></div>
<div id="dynamicframe"></div>
you can just create one div tag with id say <div id='editbox' /> and add one line code in your update function document.getElementById("editbox").innerHTML=editboxHTML;