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);
Related
I need to dynamically change the css padding. So every tenth number, I want to increase the padding. Here is my code
var padding = 200
Object.keys(MassAddressDict).forEach(function(key) {
console.log(key + " " + MassAddressDict[key]);
var recieverData = MassAddressDict[key]
var senderInfo = combineSenderInfo();
var receiverInfo = combineReceiverInfo(recieverData);
var index = Object.keys(MassAddressDict).indexOf(key);
if (index % 10 === 0){
padding = padding + 20
console.log("Padding increased to ", padding)
}
printWindow.document.write('<div style="display:flex;justify-content:space-between">');
printWindow.document.write(senderInfo);
printWindow.document.write('</div>');
printWindow.document.write(receiverInfo);
printWindow.document.write("<p style='padding-bottom: 200px'></p>")
});
what I want to do is at every tenth item in the dictionary, increase the padding by say 20px. How can I implement this?
Try this, I think this will solve your problem
var padding = 200;
Object.keys(MassAddressDict).forEach(function(key) {
console.log(key + " " + MassAddressDict[key]);
var recieverData = MassAddressDict[key]
var senderInfo = combineSenderInfo();
var receiverInfo = combineReceiverInfo(recieverData);
var index = Object.keys(MassAddressDict).indexOf(key);
if (index % 10 === 0){
padding = padding + 20
console.log("Padding increased to ", padding)
}
printWindow.document.write('<div style="display:flex;justify-content:space-between">');
printWindow.document.write(senderInfo);
printWindow.document.write('</div>');
printWindow.document.write(receiverInfo);
printWindow.document.write(`<p style='padding-bottom: ${padding}px'></p>`)
});
here is some way of the dynamic CSS style
1 var div = document.getElementById('div1');
// Clear Value
div.setAttribute('style','');
// OR
div.removeAttribute('style');
// Set Style / Append Style
2 div.style.backgroundColor = '#ff0000';
3 document.getElementById('#div1').style += "padding-top:40px";
4 $("#div1").css("property",'value');
5 Var Value=25;
<div id='div1' style='padding: ${Value}px'></div>
you should read this for complete reference
https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript
The easiest way is to use CSS and not JS. In this case, you need to use :nth-child();
Inside of nth-child you put the formula you want, in order to select the elements you want. In this case I use 3n+1. So the elements that are selected are:
3x0+1 = 1;
3x1+1 = 4;
3x2+1 = 7;
3x3+1 = 10;
html,
body {
height: 100%;
width: 100%;
}
#container {
width: 50%;
display: flex;
flex-direction: column;
}
.item {
background-color: red;
border: 1px solid black;
padding: 0 10px
}
.item:nth-child(3n+1) {
background-color: orange;
padding: 0 20px
}
<div id="container">
<div class="item"> item1 </div>
<div class="item"> item2 </div>
<div class="item"> item3 </div>
<div class="item"> item4 </div>
<div class="item"> item5 </div>
<div class="item"> item6 </div>
<div class="item"> item7 </div>
<div class="item"> item8 </div>
<div class="item"> item9 </div>
<div class="item"> item10 </div>
</div>
First you'll need to get your padding out of your forEach, now it's resetting to 200 for each new object.
Then simply add your padding in your style (you can easily add a variable in a string in javascript using backticks and putting your var inside ${} `This is your var => ${myVar}`).
Your code should look like that :
var padding = 200
Object.keys(MassAddressDict).forEach(function(key, index) {
console.log(key + " " + MassAddressDict[key]);
var recieverData = MassAddressDict[key]
var senderInfo = combineSenderInfo();
var receiverInfo = combineReceiverInfo(recieverData);
if (index % 10 === 0){
padding = padding + 20
console.log("Padding increased to ", padding)
}
printWindow.document.write('<div style="display:flex;justify-content:space-between">');
printWindow.document.write(senderInfo);
printWindow.document.write('</div>');
printWindow.document.write(receiverInfo);
printWindow.document.write(`<p style='padding-bottom: ${padding}px'></p>`)
});
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/
I´m trying to print two pictures 24 times in a christmas calendar. The pictures I´m trying to print are innhold.gif and luke.jpg. When you click on luke.gif it´s supposed to change to innhold.gif. This is gonna happen in sirkel-div. But it´s only white. I can´t find out whats wrong either by myself or by inspect in Google chrome.
My question is, how can I change this code so when people click on luke.jpg it changes to innhold.gif?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Westerdals julekalender 2017 - Din julekalender</title>
</head>
<body>
<!--Header-->
<header>
<h1>Westerdals julekalender 2017</h1>
</header>
<!--Meny-->
<nav>
<ul>
<li>Forsiden</li>
<li>Din julekalender</li>
</ul>
</nav>
<!--Content from cookie-->
<section>
<p id="cookie-innhold">Her kommer cookie-innhold</p>
</section>
<!--Kalenderen-->
<div id="kalender-div">
<p id="peker-info"></p>
</div>
<div id="luke-div"></div>
<script>
(function(){
//Array
let tekstArray = document.cookie.split("=");
let tekst = tekstArray[1];
let SirkelDiv = document.getElementById("sirkel-div");
let body = document.getElementsByTagName("body")[0];
let html = document.documentElement;
document.getElementById("cookie-innhold").innerHTML = " " + tekst;
//Style av kalender
for(let i = 0; i < 24; i++){
let nySirkel = document.createElement("div");
nySirkel.style.cssText = "width: 300px; height: 300px; backround-image: url('images/innhold.gif');";
nySirkel.style.cssText += "border: 2px solid black; opacity: 0.7;";
nySirkel.style.cssText += "border-radius: 50%; float: left; margin: 5px;";
nySirkel.innerHTML = (i + 1);
nySirkel.onclick = openLuke;
body.appendChild(nySirkel);
}
function openLuke(){
this.style.backgroundImage = "url('images/luke.jpg');";
}
}());//End function
</script>
</body>
</html>
Besides the typo you have in the cssText assignment, you are trying to set an invalid css property value
"url('images/luke.jpg');"
; is not valid as part of the backgroundImage property remove it. The browser is not assigning the value since it is invalid.
(function() {
let body = document.body;
//Style av kalender
for (let i = 0; i < 24; i++) {
let nySirkel = document.createElement("div");
nySirkel.style.cssText = "width: 300px; height: 300px; background-image: url('http://lorempixel.com/output/technics-q-c-640-480-1.jpg');";
nySirkel.style.cssText += "border: 2px solid black; opacity: 0.7;";
nySirkel.style.cssText += "border-radius: 50%; float: left; margin: 5px;";
nySirkel.innerHTML = (i + 1);
nySirkel.onclick = openLuke;
body.appendChild(nySirkel);
}
function openLuke() {
this.style.backgroundImage = "url('http://lorempixel.com/output/people-q-c-640-480-1.jpg')";
}
}()); //End function
<header>
<h1>Westerdals julekalender 2017</h1>
</header>
<!--Meny-->
<nav>
<ul>
<li>Forsiden</li>
<li>Din julekalender</li>
</ul>
</nav>
<!--Content from cookie-->
<section>
<p id="cookie-innhold">Her kommer cookie-innhold</p>
</section>
<!--Kalenderen-->
<div id="kalender-div">
<p id="peker-info"></p>
</div>
<div id="luke-div"></div>
I am trying to race two cars when a button is pushed. I want them to move at different speeds.
I am using startRaceButton.onClick to run my two start race functions which set intervals for my images to move. I also have it set to clear the interval after it reaches the finish line.
The problem I am having is, when the button is clicked nothing happens.
<script type="text/javascript">
window.onload = function() {
var redSpeed = 1*(Math.floor((Math.random() * 10) + 1));
var blueSpeed = 1*(Math.floor((Math.random() * 10) + 1));
var blueLeft = 81;
var redLeft = 81;
var redInterval = 10;
var blueInterval = 10;
var redTimer;
var blueTimer;
var startRaceButton = document.getElementById("imgStartButton");
var redCar = document.getElementById("imgRedCar");
var blueCar = document.getElementById("imgBlueCar");
var goRed = function() {
redCar.style.left = redLeft + "px";
redLeft += redSpeed;
if (redLeft > 899) {
clearInterval(redTimer);
}
}
var goBlue = function() {
blueCar.style.left = blueLeft + "px";
blueLeft += blueSpeed;
if (blueLeft > 899) {
clearInterval(blueTimer);
}
}
var startRed = function() {
redTimer = setInterval(goRed, redInterval);
}
var startBlue = function() {
blueTimer = setInterval(goBlue, blueInterval);
}
startRaceButton.onclick = function() {
startRed();
startBlue();
}
</script>
</head>
<body>
<div style= "display:block; margin:0; padding:0; width:1005px; height:400px;" id="container">
<div id="left" style= "float:left; display:block; margin:0; padding:0; width:80px; height:400px">
<img id="imgStartButton" src="http://ondemandweb.pbworld.net/pbucontent/images/GOButton.jpg" width="60" height="60" >
</div>
<div id="box" style="float:left; display:block; margin:0; padding:0; width:920px; height:400px;">
<img id="imgBlueCar" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTxJr8SKga0S-nM4JgzlIXk6XrmgN8fwdDbvA6tKGWV65fmeaYWDA" style="position:absolute; left:81px; top:100px" width="100" height="60" alt="blue">
<img id="imgRedCar" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8nsZ52wkuxrlT3aiqFicu_YYOVJ1hSKCI2-0MY6G4QKSGHIj4tw" style="position:absolute; left:81px; top:250px" width="100" height="60" alt="red">
</div>
<div id="right" style="float:left; display:block; margin:0; padding:0; width:5px; height:400px; background-color:black; ">
</div>
</div>
</body>
your script is running before your DOM loads. Therefore your bindings don't have meaning.
try including the script after the body of your html.
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 = []