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>
Related
I'm trying to change the css position from fixed to static and viceversa, based on pixel scrolled...
The script works fine as espected, but at the point to change css position, there is a sort of lag.
If i scroll slow till at the point of switch, from the console i see the position switch fast from fixed to static and from static to fixed.
Anyway, look in the snippet, scroll near the end, and see what happen... I'm not able to figure out the reason. Hope in your help! Thanks!
Open the snipped in fullscreen to see better!
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var add_px = $('body').height();
var px_scroll = scrolled + add_px;
var tot = $(document).height();
var ftr = $('#footer').css("margin-bottom");
ftr = ftr.replace('px','');
ftr = ftr.replace('-','');
var total = tot - ftr;
if ( px_scroll > total ) {
$('#act_btns').css({'position':'static'});
} else {
$('#act_btns').css({'position':'fixed'});
}
});
html, body { height: 100%; margin:0; padding: 0; }
#main_container {
position: relative;
width: 100%;
height: auto;
min-height: 100%;
text-align: center;
}
#act_btns {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 50px;
}
#act_btns input {
color: #fff;
border: 0px;
width: 100px;
height: 40px;
margin: 0 5px;
box-shadow: 0 0 5px 5px #000;
}
#footer {
position: absolute;
bottom: 0;
margin-bottom: -200px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 10px 7px 15px 7px;
box-sizing: border-box;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<div id="main_container">
<div style="position:relative;margin:0 auto 20px;width:80%;height:2500px;background:#ccc;"></div>
<div id="act_btns">
<input type="submit" name="save_list" id="save_btn" value="Salva">
<input type="submit" name="reset_list" id="rst_btn" value="Reset">
</div>
<div id="footer"><p id="copyright">Copyright © 2016 - 2021</p></div>
</div>
</body>
</html>
The problem you are facing is: You calculate the total value on every change of the scroll position. So when you scroll and change the position of the element from fixed to static you will add the height (60px) to total. (This is visible if you console.log(scrolled, total)). Because fixed position elements do not take up any space.
The most simple fix is to calculate the total when the page is loaded. And then, if it doesn't change you're good to go with that height forever. So the only change I did from your code is to move the calculation of total outside of the scroll function.
var tot = $(document).height();
var ftr = $('#footer').css("margin-bottom");
ftr = ftr.replace('px','');
ftr = ftr.replace('-','');
var total = tot - ftr;
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var add_px = $('body').height();
var px_scroll = scrolled + add_px;
if ( px_scroll > total ) {
$('#act_btns').css({'position':'static'});
} else {
$('#act_btns').css({'position':'fixed'});
}
});
html, body { height: 100%; margin:0; padding: 0; }
#main_container {
position: relative;
width: 100%;
height: auto;
min-height: 100%;
text-align: center;
}
#act_btns {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 50px;
}
#act_btns input {
color: #fff;
border: 0px;
width: 100px;
height: 40px;
margin: 0 5px;
box-shadow: 0 0 5px 5px #000;
}
#footer {
position: absolute;
bottom: 0;
margin-bottom: -200px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 10px 7px 15px 7px;
box-sizing: border-box;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<div id="main_container">
<div style="position:relative;margin:0 auto 20px;width:80%;height:2500px;background:#ccc;"></div>
<div id="act_btns">
<input type="submit" name="save_list" id="save_btn" value="Salva">
<input type="submit" name="reset_list" id="rst_btn" value="Reset">
</div>
<div id="footer"><p id="copyright">Copyright © 2016 - 2021 VirtualCode.Net</p></div>
</div>
</body>
</html>
This could lead to some problems if you are loading images and what not which may take up more space (height) when completely loaded and the calculation already happened. To never face that issue you can wrap the calculation inside
$(window).load(function(){
// add total calculation code here
});
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 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
UPDATE - Still unresolved, last updated 9 p.m.
Problem
a) How do I use .offset() to position these tooltips relatively close to their image (ie. If I click on the "Allum" headshot, their tooltip pops up above their image)
Where I'm at
I'm trying to use jQuery's .offset() so that when an image (.headshot in index.html) of a politician is clicked, the tooltip/popup, containing information about their age, party etc. is positioned pretty close to their image. Right now I have dynamic content being pulled into these tooltips, but it's always in the same spot.
scripts.js (Politician and Positioning snippet)
// Shows a popup with MLA information
$(".headshot").click(function(){
var idx = $(this).index();
$(".tooltip").fadeIn("slow");
$(".tooltipName").html(MLAs[idx].Name);
$(".tooltipParty").html(MLAs[idx].Party).prepend("<strong>Party: </strong>");
$(".tooltipConstuency").html(MLAs[idx].Constuency).prepend("<strong>Constuency: </strong>");
$(".tooltipEthnicity").html(MLAs[idx].Ethnicity).prepend("<strong>Ethnicity: </strong>");
$(".tooltipAge").html(MLAs[idx].Age).prepend("<strong>Age: </strong>").append(" years old");
});
// Positioning of the tooltips
$('img').each(function(){
var img = $(this);
img.click(function(){
$('.tooltip').show(100)
// .text(img.attr('alt'))
.offset({
top: img.offset().top + img.height(),
left: img.offset().left
});
});
});
index.html(Headshot snippet)
<div class="columns">
<img src="assets/img/headshots/allan.jpg" alt="" id="0" class="headshot NDP Female White">
<img src="assets/img/headshots/allum.jpg" alt="" id="1" class="headshot NDP Male White">
<img src="assets/img/headshots/altemeyer.jpg" alt="" id="2" class="headshot NDP Male White">
</div>
tooltip.scss
/*----------------------------------
TOOLTIP
----------------------------------*/
.tooltip {
display: none;
position: relative;
left: 45px;
top: -5px;
}
.info {
#include serifLight;
background: $yellow;
color: $black;
font-size: 1.4rem;
padding: 12px;
width: 15%;
// text-align: center;
p {
margin: 0px;
padding-top: 2%;
}
}
.tooltipName, {
font-family: 'Roboto Slab',serif;
font-weight: 700;
}
.label {
color: $b;
display: inline;
padding-top: 1.5%;
}
.tooltipEthnicity, .tooltipAge {
display: block;
}
.arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid $yellow;
position: relative;
left: 29px;
}
try this :
var position = $el.data('.elem'),
ImagePosition = $el.offset(),
ImageSize = {
'width': $el.outerWidth(),
'height': $el.outerHeight()
};
'top': ImagePosition.top - el.outerHeight()
'left': ImagePosition.left - (elelment.outerWidth()/2) + (elementSize.width/2)
I just implement a jquery code to let my picture in a div at vertical-middle location,the code is as follows.
function setImgMiddle(img) {
var $img = $(img),
$panel = $(img).parent();
var img_width = $img.width(),img_height = $img.height(),
panel_width = $panel.width(), panel_height = $panel.height();
if(panel_width/panel_height < img_width/img_height){
$img.width(panel_width);
$img.css('margin-top', (panel_height - $img.height()) * 0.5);
}
$img.fadeIn(100);
}
and I use folllowing code in my index.html.
<img id="pic_in" class="lazy" onload="setImgMiddle(this)" src="<?php echo catch_first_image() ?>" alt="<?php the_title(); ?>" width="200px" />
because I use this in wordpress, so it could explain src and alt thing
The problem is that I have two part of reference in the same page at different location ,however, the onload action is fired just once( the first one at the front), the second one do not work, I search the internet, they say I should new a Image() first, But I am a beginner, and feel a little confuse about their code, and don't understand it. So I need help thank you!
You could do this in CSS with no javascript needed:
HTML:
<div class="center_image_box ">
<div class="aligner">
<img src="image.png">
</div>
</div>
CSS:
.center_image_box {
display: inline-block;
height: 60px;
width: 60px;
vertical-align: middle;
position: relative;
border: 1px solid #dedede;
background: white;
box-shadow: 0px 1px 1px #ccc;
padding: 3px;
}
.aligner {
display: block;
font: 0pt/0 a;
height: 60px;
position: relative;
text-align: center;
vertical-align: middle;
width: 60px;
}
.aligner:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.aligner img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
display: inline-block;
}
As for your javascript, you need to preload both images:
<script>
function preloadImage(src, callback) {
var image = new Image();
image.src = "image.png";
image.onLoad = function() {
callback(image);
}
}
$(document).ready(function(){
var images = array();
images[] = 'image1.png';
images[] = 'image2.png';
for (var i=0; i<images.length;i++) {
preloadImage(images[i], setImgMiddle);
}
});
</script>