I'm trying to get a random generator of text and images which should be super simple but I cannot for the life of me figure out why it's not working out. Any help is greatly appreciated!
HTML
Scroll Demo #1
<body>
<div id="container">
<p>Where would you live and what would you drive?</p>
<p id="text"></p>
</div>
</body>
CSS
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
border: gray solid;
padding: auto;
background-image: url(../images/house.jpg) no-repeat;
}
#text {
font-size: 40px;
text-align: left;
}
p {
width: 100px;
color: black;
font-family: arial;
font-size: 18px;
text-align: left;
}
JQUERY
$(document).ready(function(){
var car = ["limo", "golf cart", "pig"];
var images = ["house.jpg", "dumpster.jpg", "mansion.jpg"];
var x = images[Math.Floor(Math.random() * images.length)];
document.getElementById("text").innerHTML=car[x];
$('html').css({'background-image':'url(images/' + images [x] + ')'});
});
Thanks in advance!
You appear to expect x to be a number, not an image:
var x = Math.floor(Math.random() * images.length); // not Floor
Related
my name is Daniel and i'm making a drinking game for school, I want to let a div to become visible when the bar is full (so you know when the bar is full and you win the game), but i have no idea how to do this...
Could you help me out?
HTML:
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
</div>
</div>
CCS:
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
JS:
var jumpsize = 2.77, // %
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
set(topcnt(bar.width()) + jumpsize);
});
set(0);
The reason its not working is because u forgot to put the if statement in the function u run on click. So the if statement only runs once. and on first load it will result in false. To fix your code move the if statement in your Body.onclick.
Next time it would be smart to include the full javascript that is relative to the function.
By looking at the online code i was able to find the issue.
Hope this resolves your issues.
~Yannick
When you hit your target you need to remove the CSS styling of Display = none.
W3 schools page here for some helpful info to help you learn some more.
https://www.w3schools.com/jsref/prop_style_display.asp
The line below inserted when you reach your goal to display should make the bar appear.
document.getElementById("hiddenText").style.display = "block";
I'm not sure you want this, but try this:
var jumpsize = 2.77, // %
width = 0,
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
if(pcnt >= 100) {$('#hiddenText').show();}
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
width += jumpsize;
set(topcnt(width));
});
set(0);
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button class="card1">click me</button>
You are using jQuery so quicker will be:
$('#hiddenText').show();
Edit:
sooo
if($('#bar').children('div').width() >= 334){
$('#hiddenText').show();
}
As You can see the div with progress bar can have max od 334 px. Check if it has it and if yes then show the text. Put this in that click event
Seems to me like you're overcomplicating things a little bit with the percentage calculations. I would just add a variable for the width of the bar that starts at 0 and increase this with the jumpsize on every click. Once this new variable goes over or equals 100 you show the hidden div.
HTML
<div class="col-xs-12" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button id="button">Click me</button>
<div id="showOnComplete">Show me when the bar is full!</div>
CSS
#bar {
width: 340px;
height: 24px;
padding: 4px 3px;
margin: 30px auto 0;
background-color: #f8f8f8;
}
#bar > div {
position: relative;
float: left;
height: 100%;
width: 0;
max-width: 100%;
background: #9d3349;
transition: width 500ms;
}
#button {
margin: 20px auto;
display: block;
}
#showOnComplete {
width: 400px;
padding: 20px;
margin: 20px auto;
background: blue;
color: #fff;
text-align: center;
display: none;
}
JS
(function($) {
var jumpSize = 20, //increased this for the fiddle, so we don't have to click as often
barWidth = 0,
$bar,
$showOnComplete;
$(function() {
$bar = $("#bar").children("div");
$showOnComplete = $("#showOnComplete");
$(document).on("click", "#button", function() {
barWidth += jumpSize;
$bar.width(barWidth + "%");
if (barWidth >= 100) $showOnComplete.show(); //optionally add a setTimeout of 500 here to account for the final transition of the bar
});
});
})(jQuery);
I've made a fiddle for it here.
I want an image to load randomly every time the page reloads. However the code to be used cannot just pick a photo out of a certain directory, but it needs to each time randomly choose one of the preset paths to a different photo in a different directories.
Preset path are these:
https://static.webshopapp.com/shops/054833/files/097622657/eddy-hilhorst-fotel-photography-courses-tours.jpg
https://static.webshopapp.com/shops/054833/files/097622663/hiromi-fujii-fotel-photography-courses-tours.jpg
https://static.webshopapp.com/shops/054833/files/097622666/jungsoon-suh-fotel-photography-courses-tours.jpg
Some code here below. The photo already visible in the code below should be taken out. Have it there so something is visible now.
#myContainer {
position: absolute;
height: 150px;
width: 150px;
background-color: #ffffff;
margin-top: 30px;
border-radius: 75px;
overflow: hidden;
border-style: solid;
border-width: 8px;
border-color: #ffffff;
padding: 8px;
}
#myPhoto {
width: 150px;
height: auto;
margin-top: -8px
}
<div id="myContainer">
<img id="myPhoto" src=" https://static.webshopapp.com/shops/054833/files/097160429/eddyhilhorst-fotelphotographycoursesandtours-no-lo.jpg" />
</div>
var images = [
'https://static.webshopapp.com/shops/054833/files/097622657/eddy-hilhorst-fotel-photography-courses-tours.jpg',
'https://static.webshopapp.com/shops/054833/files/097622663/hiromi-fujii-fotel-photography-courses-tours.jpg',
'https://static.webshopapp.com/shops/054833/files/097622666/jungsoon-suh-fotel-photography-courses-tours.jpg'
];
var rand = images[Math.floor(Math.random() * images.length)];
document.querySelector('#myPhoto').src = rand;
<div id="myContainer">
<img id="myPhoto" src=" https://static.webshopapp.com/shops/054833/files/097160429/eddyhilhorst-fotelphotographycoursesandtours-no-lo.jpg" />
</div>
Now it is possible that you get the same image shown a few times in a row as this is part of random. It is less a problem with lots more images though.
You could pick a random integer between 0 and the length of your pictures array in every load using Math.random() Then change the source src by the picked picture with random index generated:
var pictures_array = [];
var min=0;
var max=pictures_array.length;
var random = Math.floor(Math.random() * max) + min;
$('#myPhoto').attr('src', pictures_array[random]);
Hope this helps.
var pictures_array = [
'https://static.webshopapp.com/shops/054833/files/097622657/eddy-hilhorst-fotel-photography-courses-tours.jpg',
'https://static.webshopapp.com/shops/054833/files/097622663/hiromi-fujii-fotel-photography-courses-tours.jpg',
'https://static.webshopapp.com/shops/054833/files/097622666/jungsoon-suh-fotel-photography-courses-tours.jpg'
];
var min=0;
var max=pictures_array.length;
var random = Math.floor(Math.random() * max) + min;
$('#myPhoto').attr('src', pictures_array[random]);
#myContainer {
position: absolute;
height: 150px;
width: 150px;
background-color: #ffffff;
margin-top: 30px;
border-radius: 75px;
overflow: hidden;
border-style: solid;
border-width: 8px;
border-color: #ffffff;
padding: 8px;
}
#myPhoto {
width: 150px;
height: auto;
margin-top: -8px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myContainer">
<img id="myPhoto" src="" />
</div>
So my site basically shows the percent of strikes you have "thrown" (baseball).
I have set my JavaScript to display a gif if the percent is above 60.
However, the image seems to be ignoring the css I have set for the image. Any solutions?
Here is my HTML:
<!DOCTYPE html>
<title>Javascript Time</title>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testingJS.css">
<script src="testingJS.js" type="text/javascript"></script>
</head>
<body>
<h2>Javascript</h2>
<p id="change">Strike Percent Counter</p>
<p><input type="button" value="Ball" class="btn" onclick="throwBall()"></p>
<p><input type="button" value ="Strike" class="btn" onclick="throwStrike()"></p>
<p>Percent of Strikes:</p>
<strong><p id="percent"></p></strong>
<img id="winner" src="">
</body>
</html>
My CSS:
p, H2{
margin-bottom: -25px;
font-size: 35px;
color: white;
text-align: center;
}
#percent{
position: relative;
margin: 20px auto auto auto;
width: 25%;
font-size: 55px;
text-emphasis: 5px;
border: 7px solid gold;
}
.btn{
font-size: 29px;
float: center;
}
#winner{
margin: auto auto auto auto;
}
body{
background-image: url("http://static.zoonar.com/img/www_repository3/db/3a/39/10_4baf1185c09f28bcbe957e13a0c34fca.jpg");
}
And my JavaScript:
var ball = 0;
var strike = 0;
function throwBall(){
ball++;
var percent = strike / (ball + strike);
var round = percent.toFixed(2) * 100;
document.getElementById("percent").innerHTML = round + "%";
if (round <= 60){
document.getElementById("winner").src = "";
}
}
function throwStrike(){
strike++;
var percent = strike / (ball + strike);
var round = percent.toFixed(2) * 100;
document.getElementById("percent").innerHTML = round + "%";
if (round > 60){
document.getElementById("winner").src = "https://media.giphy.com/media/NxA9Wmq8ISblK/giphy.gif";
}
}
I'm doing this solely out of practicing my skills and have been stuck on this for sometime. Thanks in advance!
if you want to display element in the middle, set width property to fit width, display property to block and margin:0 auto;
fiddle : https://jsfiddle.net/7vuzwx8z/
I'm working on this problem: http://www.theodinproject.com/web-development-101/javascript-and-jquery?ref=lnav.
Basically, I need to create a game in which the user clicks a button, is asked how many squares they want in their grid, and the grid appears and they can draw on the grid by mousing over the squares which changes their color. So far, I figured out everything Except how to automatically resize the squares to take up the full space of the div container they are in (I restricted the shape of the 16x16 grid to a square by placing it in a div with the id container that had a set height and width).
I tried to play around with the css, changing the height and width to 100%. When I do that though, they just appear in a column and not a grid.
If you open this up in jsfiddle, and request a grid of 16 squares per side, you will see what I WANT to have happen. 16 squares per side is the max, and I would like any lower number of squares to fill up that space and stay in a square grid format, not form a column. Im unsure of whether the solution involves CSS or jQuery. Thank you for any help!
Here is the html:
<body>
<div id ="button">
<p>Play the game</p>
</div>
<div id ="container"></div>
</div>
</body>
Here is the CSS:
.squares {
background-color: #c266ff;
display: block;
height: 100%;
width: 100%;
display: inline-block;
margin-left: 3px;
}
#container {
height: 200px;
width: 470px;
margin: auto;
margin-top: 50px;
}
#button {
height: 50px;
width: 100px;
background-color: #ddcee6;
border: 2px solid #ddcee6;
border-radius: 10px;
text-align: center;
color: #19171a;
margin: auto;
margin-top: 50px;
}
Here is the jquery/javascript:
$(document).ready(function() {
$("#button").click(function() {
var x = prompt("How many squares do you want on each side of the grid? Pick between 1 and 16.");
for(var i = 0; i < (x*x); i++) {
$("<div class='squares'></div>").appendTo("#container");
}
$(".squares").one("mouseover", function() {
$(this).css("background-color","#6b00b3");
});
});
});
Here is a way that you can calculate the height and width, and apply it, using jQuery.
//Calculate squares height and width
var containerHeight = $('#container').innerHeight();
var containerWidth = $('#container').innerWidth();
var squareMargins = ($('.squares').outerWidth(true) - $('.squares').outerWidth()) * x; //Margin * x to take margin space into account, otherwise calculation will be off
var squareHeight = (containerHeight - squareMargins) / x;
var squareWidth = (containerWidth - squareMargins) / x;
$('.squares').height(squareHeight);
$('.squares').width(squareWidth);
Demo Here
Here is a start.
$(document).ready(function() {
$("#button").click(function() {
var x = prompt("How many squares do you want on each side of the grid? Pick between 1 and 16.");
var s = (100 / x);
for(var i = 0; i < (x*x); i++) {
$("<div class='squares' style='width:" + s + "%; height:" + s + "%'></div>").appendTo("#container");
}
$(".squares").one("mouseover", function() {
$(this).css("background-color","#6b00b3");
});
console.log(document.body.innerHTML);
});
});
.squares {
background-color: #c266ff;
float: left;
border: 1px solid black;
box-sizing: border-box;
}
#container {
height: 200px;
width: 470px;
margin: auto;
margin-top: 50px;
}
#button {
height: 50px;
width: 100px;
background-color: #ddcee6;
border: 2px solid #ddcee6;
border-radius: 10px;
text-align: center;
color: #19171a;
margin: auto;
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="button">
<p>Play the game</p>
</div>
<div id ="container">
</div>
I'm currently working on this small project that randomly displays a div (#box) of 100px width and height. I want this div to appear ONLY in another div (#boxBorder) so it appears to be limited to a specific area on the page.
Here is the content of my HTML:
<h1>Test your reactions!</h1>
<p id="directions">Click the shape as fast as you can!</p>
<p id="scoreC">Click score: <span id="cScore">0</span>s</p>
<p id="scoreT">Total score: <span id="tScore">0</span>s</p>
<div id="boxBorder"></div>
<div id="box"></div>
Here is the CSS:
#boxBorder {
height: 500px;
width: 500px;
margin: 20px auto;
left: 0;
right: 0;
background-color: white;
border: 1px black solid;
position: absolute;
z-index: 0;
}
#box {
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
display: none;
border-radius: 50px;
position: relative;
z-index: 1;
}
h1 {
margin: 15px 0 0 0;
}
#directions {
margin: 0;
padding: 5px;
font-size: 0.8em;
}
#scoreT, #scoreC {
font-weight: bold;
margin: 10px 50px 0 0;
}
#tScore, #cScore {
font-weight: normal;
}
h1, #directions, #scoreT, #scoreC {
width: 100%;
text-align: center;
}
And lastly, the javascript function for random position:
//Get random position
function getRandomPos() {
var pos = Math.floor((Math.random() * 500) + 1);
console.log("POS: " + pos + "px");
return pos + "px";
}
Which I call within a timeout method:
setTimeout(function() {
createdTime = Date.now();
console.log("make box: " + createdTime);
document.getElementById("box").style.top=getRandomPos();
document.getElementById("box").style.left=getRandomPos();
document.getElementById("box").style.backgroundColor=getRandomColor();
document.getElementById("box").style.borderRadius=getRandomShape();
document.getElementById("box").style.display="block";
}, rTime);
I'm not very skilled in positioning and I can't seem to get these two divs to align so that the #box div can recognize the size of the #boxBorder div and stay within those limits. Any help would be appreciated!
Couple things wrong here:
You need the box div nested inside the borderBox div if you want to use the relative positioning.
<div id="boxBorder">
<div id="box"></div>
</div>
The randomPos function needs to take into account the size of the box, so only multiply by 400 instead of 500.
function getRandomPos() {
var pos = Math.floor((Math.random() * 400));
return pos + "px";
}
Set the style to inline-block, not block for the box.
Use setInterval instead of setTimeout to have it repeat.
var rTime = 1000;
function getRandomPos() {
var pos = Math.floor((Math.random() * 400));
console.log("POS: " + pos + "px");
return pos + "px";
}
function getRandomColor() {
return ['#bf616a', '#d08770', '#ebcb8b', '#a3be8c', '#96b5b4', '#8fa1b3', '#b48ead'][(Math.floor(Math.random() * 7))];
}
function randomizeBox() {
createdTime = Date.now();
console.log("make box: " + createdTime);
document.getElementById("box").style.top = getRandomPos();
document.getElementById("box").style.left = getRandomPos();
document.getElementById("box").style.backgroundColor = getRandomColor();
}
setInterval(randomizeBox, rTime);
#boxBorder {
height: 500px;
width: 500px;
margin: 20px auto;
left: 0;
right: 0;
background-color: white;
border: 1px black solid;
position: absolute;
z-index: 0;
}
#box {
margin: 0 auto;
height: 100px;
width: 100px;
border-radius: 50px;
position: relative;
z-index: 1;
display: inline-block;
}
h1 {
margin: 15px 0 0 0;
}
#directions {
margin: 0;
padding: 5px;
font-size: 0.8em;
}
#scoreT,
#scoreC {
font-weight: bold;
margin: 10px 50px 0 0;
}
#tScore,
#cScore {
font-weight: normal;
}
h1,
#directions,
#scoreT,
#scoreC {
width: 100%;
text-align: center;
}
<h1>Test your reactions!</h1>
<p id="directions">Click the shape as fast as you can!</p>
<p id="scoreC">Click score: <span id="cScore">0</span>s</p>
<p id="scoreT">Total score: <span id="tScore">0</span>s</p>
<div id="boxBorder">
<div id="box"></div>
</div>