How to add description underneath photo on mouse over? (photo gallery) - javascript

I am making a simple photo gallery and currently when the user hovers over a thumbnail, an enlarged photo is shown below it.
I would like also that when the user overs over a thumbnail, I would like some text to be displayed inside the white text box. Every thumbnail should have a different description. I would like a JavaScript code help as I am not familiar with j query.
Here is my code, Help appreciated!
<!DOCTYPE html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
margin-top: 100px;
}
input {
height: 40px;
word-wrap: break-word;
}
.thumbnails img {
height: 100px;
border: 4px solid #151515;
padding: 1px;
margin: 0 10px 10px 0;
margin-top: 40px;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #151515;
padding: 1px;
width: 800px;
}
a:hover + input {
display: block;
}
</style>
</head>
<body>
<body bgcolor="#CCCCCC">
<form name="bgcolorForm" >
<select onChange="if(this.selectedIndex!=0)
document.bgColor=this.options[this.selectedIndex].value">
<option value="choose">Set background color
<option value="c8e4f8">Blue
<option value="CCCCCC">Grey
<option value="FFFFFF">White
<option value="FBFBEF">Cream
</select>
</form>
<br>
<form id="font_form">
<select id ="font" onChange="setFont()">
<option value="choose">Set font style
<option style="font-family: 'Verdana'">Verdana</option>
<option style="font-family: Arial">Arial</option>
<option style="font-family: 'Times New Roman'">Times New Roman</option>
</select>
</form>
<div class="preview" align="center">
<img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>
</br>
</div>
<input style="width:800px" id="Text" type="text" float="right" value="Text"/>
<div class="gallery" align="center">
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg" alt="Image Not Loaded"/>
</div></br>
<script type="text/javascript">
var images = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
images[i].onmouseover = function () {
document.getElementById('preview').src = this.src;
}
}
function setFont()
{
var selectFont = document.getElementById("font");
if (selectFont) {
var selectFontValue = selectFont.options[selectFont.selectedIndex].value;
if (selectFontValue == "Verdana") {
document.getElementById("Text").style.font = "20px Verdana, sans-serif";
}
else if (selectFontValue == "Arial") {
document.getElementById("Text").style.font = "20px Arial,sans-serif";
}
else if (selectFontValue == "Times New Roman") {
document.getElementById("Text").style.font = "20px Times New Roman,serif";
}
else {
document.getElementById("Verdana").style.font = "20px Verdana, sans-serif";
}
}
}
</script>
</body>
</html>

You should use data attributes and basicly this is how it can work:
<img src="http://lorempixel.com/100/100/nature/6"
data-full="http://lorempixel.com/300/300/nature/6"
data-small="http://lorempixel.com/100/100/nature/6"
onmouseover="this.src=this.getAttribute('data-full');"
onmouseout="this.src=this.getAttribute('data-small')"
/>
http://codepen.io/anon/pen/nubmo/

Related

Adding an image inside the cube?

I have found this script which does what I want, the only thing I want to do is insert an image inside the cube.
But I have no idea how to do it.
I haven't seen this format before:
<rect id="region1" x="50" y="0" width="100" height="100"/>
Not sure how to approach it by adding an <img src=""> inside it.
Need help.
EDIT: it's a script that I found. I don't really need the svg part. All I want is to have an image inside the <div></div> and when I click it will execute the CSS and jQuery script...
Here's the code I'm using:
$("rect").click(onRectClick);
$("#sel1").change(onSelectChange);
function onRectClick(evt)
{
// Get the id of the region we clicked on
var regionId = evt.target.id;
// Update the dropdown
$("#sel1").val(regionId);
// Highlight the relevant region
setRegion(regionId);
}
function onSelectChange()
{
// Get selected class from dropdown
var selectedRegion = $("#sel1").val();
// Highlight the relevant region
setRegion(selectedRegion);
}
function setRegion(regionId)
{
// Remove "selected" class from current region
$("rect.selected").removeClass("selected");
// Add "selected" class to new region
$('rect#'+regionId).addClass("selected");
// Note: for addClass() etc to work on SVGs, you need jQuery 3+
}
// Init map based on default select value
onSelectChange();
rect {
fill: #ccc;
stroke: #999;
stroke-width: 2;
cursor: pointer;
}
rect:hover {
fill: #888;
}
rect.selected {
fill: #ff7409;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<svg width="300" height="300">
<rect id="region1" x="50" y="0" width="100" height="100"/>
<rect id="region2" x="150" y="0" width="100" height="100"/>
<rect id="region3" x="0" y="100" width="100" height="100"/>
<rect id="region4" x="100" y="100" width="100" height="100"/>
<rect id="region5" x="200" y="100" width="100" height="100"/>
<rect id="region6" x="50" y="200" width="100" height="100"/>
<rect id="region7" x="150" y="200" width="100" height="100"/>
</svg>
<div>
<label for="sel1">Seleziona Area:</label>
<select class="form-control" id="sel1">
<option value="region1">1 - Udine Centro</option>
<option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option>
<option value="region3">3 - Laipacco / San Gottardo</option>
<option value="region4">4 - Udine sud</option>
<option value="region5">5 - Cussignacco</option>
<option value="region6">6 - S. Paolo / S. Osvaldo</option>
<option value="region7">7 - Chiavris / Paderno</option>
</select>
</div>
Try this,
const containers = $('.image-container')
const select = $('#sel1')
// Initialize at position 1
selectElement('region1')
containers.on('click', function() {
selectElement($(this).attr('id'))
select.val($(this).attr('id'))
})
select.change(function() {
selectElement($(this).val())
})
function selectElement(id) {
let others = containers.not($('#'+id))
$('#'+id).addClass("selected")
others.removeClass("selected")
}
#wrapper .image-container {
position: relative;
width: 100px;
height: 100px;
display: inline-block;
}
#wrapper img {
width: 100px;
height: 100px;
object-fit: cover;
}
.image-container.selected::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4)
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="wrapper">
<div id="region1" class="image-container">
<img src="https://cdn.mos.cms.futurecdn.net/DEpYy8jSdvD9dkvVDSPNoD.jpg" alt="">
</div>
<div id="region2" class="image-container">
<img src="https://www.starwarsnewsnet.com/wp-content/uploads/2014/05/star-20wars-20video-20games-20hoth-20atat-20empire-20at-20war-201680x1050-20wallpaper_wallpaperswa.com_551.jpg" alt="">
</div>
<div id="region3" class="image-container">
<img src="https://www.austinchronicle.com/binary/e3fd/AllisonLefcort_CaptainPhasma_Add.jpg" alt="">
</div>
<div id="region4" class="image-container">
<img src="https://cdn.mos.cms.futurecdn.net/ew7hxbJKwPewaRmjYW79bi.jpg" alt="">
</div>
<div id="region5" class="image-container">
<img src="https://www.starwarsnewsnet.com/wp-content/uploads/2021/01/Empire-at-War_wall.jpg" alt="">
</div>
</div>
<select class="form-control" id="sel1">
<option value="region1">1 - Udine Centro</option>
<option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option>
<option value="region3">3 - Laipacco / San Gottardo</option>
<option value="region4">4 - Udine sud</option>
<option value="region5">5 - Cussignacco</option>
</select>

Is there a cleaner and more repeatable way to code this onclick?

I'm coding many, many lines of these circles that are fillable based on a click function. Imagine a form where you can fill a certain number of these to denote levels of an attribute (these are for and RPG character sheet). So there are hundreds of lines of these between all the attributes and characters. Edit: The client has given me two images to use for this, an empty circle and a filled circle.
Here's how I've coded two lines of circles:
<div style="position:absolute;left:130.47px;top:155.30px" class="cls_005"><span class="cls_005">Intelligence</span></div>
<div style="position:absolute;left:213.52px;top:144.41px" class="cls_006"><span class="cls_006"><p>
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange" onclick="changeImage()" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange2" onclick="changeImageTwo()" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange3" onclick="changeImageThree()" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange4" onclick="changeImageFour()" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange5" onclick="changeImageFive()" />
</p>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageTwo() {
if (document.getElementById("imgClickAndChange2").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange2").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange2").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageThree() {
if (document.getElementById("imgClickAndChange3").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange3").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange3").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageFour() {
if (document.getElementById("imgClickAndChange4").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange4").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange4").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageFive() {
if (document.getElementById("imgClickAndChange5").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange5").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange5").src = "https://i.imgur.com/QJVkq9A.png";
}
}
</script></span></div>
<div style="position:absolute;left:600.48px;top:155.30px" class="cls_005"><span class="cls_005">Strength</span></div>
<div style="position:absolute;left:650.53px;top:157.41px" class="cls_006"><span class="cls_006"><p>
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange6" onclick="changeImageSix()" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange7" onclick="changeImageSeven()" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange8" onclick="changeImageEight()" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange9" onclick="changeImageNine()" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" id="imgClickAndChange10" onclick="changeImageTen()" />
</p>
<script language="javascript">
function changeImageSix() {
if (document.getElementById("imgClickAndChange6").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange6").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange6").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageSeven() {
if (document.getElementById("imgClickAndChange7").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange7").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange7").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageEight() {
if (document.getElementById("imgClickAndChange8").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange8").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange8").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageNine() {
if (document.getElementById("imgClickAndChange9").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange9").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange9").src = "https://i.imgur.com/QJVkq9A.png";
}
}
function changeImageTen() {
if (document.getElementById("imgClickAndChange10").src == "https://i.imgur.com/QJVkq9A.png")
{
document.getElementById("imgClickAndChange10").src = "https://i.imgur.com/8apyMiH.png";
}
else
{
document.getElementById("imgClickAndChange10").src = "https://i.imgur.com/QJVkq9A.png";
}
}
</script></span></div>
So, as you can see, lots of lines of code. Would love a way to simplify this. Thank your for any thoughts.
It's generally not a good idea to use inline event handlers. You can use one handler for the document and use a generic handler (event delegation). In this case something like the given snippet. In the snippet a data-attribute is used to recognize an image
document.addEventListener("click", changeImage);
function changeImage(evt) {
const origin = evt.target;
if (origin.dataset.togglesrc) {
const swap = {"8apyMiH.png": "QJVkq9A.png", "QJVkq9A.png": "8apyMiH.png"};
const imgRoot = origin.src.substr(0, origin.src.lastIndexOf("/"));
const currentImg = origin.src.split("/").slice(-1);
origin.src = `${imgRoot}/${swap[currentImg]}`;
}
}
body {margin: 2rem;}
<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange6" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange7" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange8" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange9" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png" data-togglesrc="1"
style="height: 20px; width: 20px" id="imgClickAndChange10" />
Alternatively you can create a more generic factory function that returns a handler and receives the image file names as parameter:
document.addEventListener("click", swapper("JouzaLc.png", "rgqRxiB.png"));
function swapper(...images) {
const swap = {
[images[0]]: images[1],
[images[1]]: images[0],
};
// return a listener function
// the function uses the 'closed over' [swap] variable
return evt => {
const origin = evt.target;
if (origin.dataset.imageId) {
const imgRoot = origin.src.substr(0, origin.src.lastIndexOf("/"));
const currentImg = origin.src.split("/").slice(-1).pop();
origin.src = `${imgRoot}/${swap[currentImg]}`;
console.clear();
console.log(`You clicked image ${origin.dataset.imageId}, its src is now ${
swap[currentImg]}`);
}
}
}
body {
margin: 2rem;
}
img {
width: 50px;
height: auto;
}
<p>
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="11" />
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="2" />
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="23" />
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="46" />
<img src="https://i.imgur.com/JouzaLc.png" data-image-id="15" />
</p>
Yet another idea may be to also use data-attibutes for the images to swap. That one can be found in a JsBin
Sounds like you need to look into using function parameters better.
All your functions are doing the same thing, with different parameters - in your case, the parameters are an element's ID and two image URLs.
The point of a function is not just to encapsulate some code (i.e., separate a chunk of code into a block, as you're doing) - but to take some input (parameters), manipulate it, and return some output.
In your case, you might consider a function that looks like this:
const changeImageSrc = function(imageID, oldURL, newURL){
const image = document.getElementById(imageID)
if(image.src === oldURL){
image.src = newURL
}
}
Now you can call this function as many times as you like, each time passing it the relevant parameters:
changeImageSrc("imgClickAndChange10", "https://i.imgur.com/QJVkq9A.png", "https://i.imgur.com/8apyMiH.png")
changeImageSrc("imgClickAndChange9", ...)
There's other changes you can make too, like storing all your URLs/IDs in an array, or even getting them from the got go using document.getElementsByClassName if you're setting your HTML up a certain way, then looping to make your life easier - but that's a whole other story.
If you are using the same functionality for all the images, you only need one function, you can pass as parameter the DOM HTML element with this, something like:
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
And your adapted function will look something like this:
function changeImage(element) {
const src = element.src
src == "https://i.imgur.com/QJVkq9A.png" ? element.src = "https://i.imgur.com/8apyMiH.png" : element.src = "https://i.imgur.com/QJVkq9A.png";
}
Your code will look something like:
<script language="javascript">
function changeImage(element) {
const src = element.src
src == "https://i.imgur.com/QJVkq9A.png" ? element.src = "https://i.imgur.com/8apyMiH.png" : element.src = "https://i.imgur.com/QJVkq9A.png";
}
</script>
<div style="position:absolute;left:130.47px;top:155.30px" class="cls_005"><span class="cls_005">Intelligence</span></div>
<div style="position:absolute;left:213.52px;top:144.41px" class="cls_006"><span class="cls_006"><p>
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
</p>
</span></div>
<div style="position:absolute;left:600.48px;top:155.30px" class="cls_005"><span class="cls_005">Strength</span></div>
<div style="position:absolute;left:650.53px;top:157.41px" class="cls_006"><span class="cls_006"><p>
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
<img alt="" src="https://i.imgur.com/QJVkq9A.png"
style="height: 10px; width: 10px" onclick="changeImage(this)" />
</p>
</span></div>

Hi, I'm trying to replicate an event listener with different elements on my page, pairing different elements with different keys

const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
}
}
body {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:#333 url(https://images.unsplash.com/photo-1475862013929-0af29a1197f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) fixed 50% 50%/ cover; }
.holo {margin:0 10px 20px 10px; xwidth:300px; xheight:200px; border:5px solid rgba(0,100,200,0.5); border-radius:20px; text-align:center; color:rgba(0,100,200,0.9); background:rgba(0,0,0,0.7); transform:scale(1.0);}
.holo:hover, .holo.active {background:rgba(30,30,30,0.8); transition-duration:0.5s; transform:scale(1.1);}
.holo h1 {font:bold 30px Arial; text-transform:uppercase;}
.holo img {width:100%; width:300px; margin:10px; border-radius:20px;}
<div class="holo batman active">
<h1>Batman</h1>
<img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Spiderman</h1>
<img src="https://images.unsplash.com/photo-1521714161819-15534968fc5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Iron Man</h1>
<img src="https://images.unsplash.com/photo-1509817445409-e2057fd6feac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Thor</h1>
<img src="https://images.unsplash.com/photo-1495044245703-b07f266e47b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Spiderman 2</h1>
<img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80">
</div>
<div class="holo">
<h1>The Dark Knight</h1>
<img src="https://images.unsplash.com/photo-1519740296995-10d3d8267019?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Avengers</h1>
<img src="https://images.unsplash.com/photo-1471877325906-aee7c2240b5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>WonderWoman</h1>
<img src="https://images.unsplash.com/photo-1517242296655-0a451dd85b30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Spiderman 3</h1>
<img src="https://images.unsplash.com/photo-1534375971785-5c1826f739d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
I want to use an event listener to get every element on the page to respond to a keypush - however, I'm having problems replicating the Javascript code for each element, it just won't work.
const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
}
}
I want to use a different key - say 'KeyA' for a different element - say '.spiderman'. I've tried replicating the code above with these replacements, but this hasn't worked.
What's the best way to achieve this?
Your forgot to assign each separate div a classname. I added the names for all of them, but only tied in batman and spiderman (b and s keys). Try it out, and you can easily add the rest of them.
const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
console.log('B clicked')
}
if (e.code == 'KeyS') {
var tag = document.querySelector('.spiderman');
tag.classList.toggle('active');
console.log('S clicked')
}
}
body {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:#333 url(https://images.unsplash.com/photo-1475862013929-0af29a1197f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) fixed 50% 50%/ cover; }
.holo {margin:0 10px 20px 10px; xwidth:300px; xheight:200px; border:5px solid rgba(0,100,200,0.5); border-radius:20px; text-align:center; color:rgba(0,100,200,0.9); background:rgba(0,0,0,0.7); transform:scale(1.0);}
.holo:hover, .holo.active {background:rgba(30,30,30,0.8); transition-duration:0.5s; transform:scale(1.1);}
.holo h1 {font:bold 30px Arial; text-transform:uppercase;}
.holo img {width:100%; width:300px; margin:10px; border-radius:20px;}
<div class="holo batman">
<h1>Batman</h1>
<img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman">
<h1>Spiderman</h1>
<img src="https://images.unsplash.com/photo-1521714161819-15534968fc5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo ironman">
<h1>Iron Man</h1>
<img src="https://images.unsplash.com/photo-1509817445409-e2057fd6feac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo thor">
<h1>Thor</h1>
<img src="https://images.unsplash.com/photo-1495044245703-b07f266e47b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman2">
<h1>Spiderman 2</h1>
<img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80">
</div>
<div class="holo darkknight">
<h1>The Dark Knight</h1>
<img src="https://images.unsplash.com/photo-1519740296995-10d3d8267019?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo avengers">
<h1>Avengers</h1>
<img src="https://images.unsplash.com/photo-1471877325906-aee7c2240b5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo wonderwoman">
<h1>WonderWoman</h1>
<img src="https://images.unsplash.com/photo-1517242296655-0a451dd85b30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman3">
<h1>Spiderman 3</h1>
<img src="https://images.unsplash.com/photo-1534375971785-5c1826f739d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>

$(.class).eq().append appends to wrong class after working twice

I'm making an App that reads a log file, generates cards images from it and then stores the card name into an tag onto divs. I have an if sentence where after 12 picks, the card names are appended onto the next div with the same class. It used to work fine, but now I have the divs .display set to none at start and later set it to inline-block manualy, and now it will only append my onto the first two divs instead of all four the second div just overflows until I run out of cards.
Here's LOG FILE that the app opens (you need to download it manualy and then click browse in the fiddle to run it)
Here's a fiddle of the whole thing, hope it's not too confusing
var prelink = "http://mtgimage.com/card/";
var postlink = ".jpg";
var booster = 1;
var pick = 0;
var currentCards = 15;
var sortingCardsInt = 0;
var cards = [];
for(t=0;t<45;t++) {
cards.push([]);
}
var picks = [];
$("#draftlog").change(function() {
//hides start message, tip jar
$('.startMessage').css('display', 'none');
$('.tipJar').css('display','none');
//shows picks list
$('.picks').eq(0).css('display', 'inline-block');
$('.picks').eq(1).css('display', 'inline-block');
$('.picks').eq(2).css('display', 'inline-block');
$('.picks').eq(3).css('display', 'inline-block');
//removes card container background
$('.cardcontainer').css('background-image','none');
//gets first file from draftlog
var logFile = $('#draftlog').get(0).files[0];
//reads first file from draftlog as text
var reader = new FileReader;
reader.readAsText(logFile);
reader.onload = function(e) {
var rawLog = reader.result;
//splits the text into an array of strings for every new line
var re=/\r\n|\n\r|\n|\r/g;
arrayOfLines = rawLog.replace(re,"\n").split("\n");
//removes " "
for(x=0;x<arrayOfLines.length;x++) {
arrayOfLines[x] = arrayOfLines[x].replace(/ /g,'');
}
//sorts cards into pick arrays
sortCards(15);
sortCards(167);
sortCards(319);
//tags picked card
for(y=0;y<cards.length;y++) {
for(x=0;x<cards[y].length;x++) {
var start = cards[y][x].substring(0,4);
if(start === "--> ") {
picks.push(x);
cards[y][x] = cards[y][x].replace(/--> /g,'');
}
}
}
//turns picks into links
for(y=0;y<cards.length;y++) {
for(x=0;x<cards[y].length;x++) {
cards[y][x] = prelink.concat(cards[y][x]);
cards[y][x] = cards[y][x].concat(postlink);
cards[y][x] = cards[y][x].replace(/ /g,'_');
}
}
loadCards();
};
});
$(".card").hover(
function() {
},
function() {
});
$(".card").click(function () {
if ($(this).hasClass('selected')) {
//formats and appends cardname onto related div
var cardname = $(this).attr('src');
cardname = cardname.replace("http://mtgimage.com/card/",'');
cardname = cardname.replace(".jpg",'');
cardname = cardname.replace(/_/g,' ');
if(pick < 12){
$(".picks").eq(0).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 12 && pick < 24){
$(".picks").eq(1).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 24 && pick < 36){
$(".picks").eq(2).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 36){
$(".picks").eq(3).append('<a class="picksave">'+cardname+'</a>');
}
//counts pick, changes currentCards number
if (currentCards > 1) {
pick++;
currentCards--;
//opens next booster
} else {
pick++;
booster++;
currentCards = 15;
}
clearCards();
loadCards();
} else {
//clears all card borders to white
for(x=0;x<15;x++) {
$('.card').eq(x).removeClass('selected');
$('.card').eq(x).css('border','4px solid white');
$('.historyPick').css('border', '4px solid lime');
}
//selects card, makes border gray
$(this).addClass('selected');
$(this).css('border', '4px solid gray');
}
});
function loadCards() {
//writes pick onto cards, makes them visible
for(x=0;x<currentCards;x++) {
$(".card").eq(x).attr('src', cards[pick][x]);
$(".card").eq(x).css('display', 'inline');
$(".card").eq(picks[pick]).addClass('historyPick');
$('.card').eq(picks[pick]).css('border', '4px solid lime');
}
};
function clearCards() {
//hides all cards
for(x=0;x<15;x++) {
$('.card').eq(x).css('display', 'none');
$('.card').eq(x).attr('src', 'http://mtgimage.com/card/cardback.jpg');
$('.card').eq(x).removeClass('historyPick selected');
$('.card').eq(x).css('border', '4px solid white');
}
}
function sortCards(num) {
var currentLine = num;
var numCards = 15;
var pickNumber = 0;
for(y=0;pickNumber<15;y++) {
for(x=0;x<numCards;x++) {
cards[sortingCardsInt].push(arrayOfLines[currentLine]);
currentLine++;
}
pickNumber++;
sortingCardsInt++;
numCards--;
currentLine +=2;
}
}
body {
background-color:#0066ff;
}
.cardcontainer {
margin:auto;
width:1260px;
height:650px;
border-radius: 3px;
overflow:auto;
background-color:white;
background-image: url("images/program/cardbox.jpg");
background-repeat:no-repeat;
background-size:100%;
}
.startMessage {
font-family:verdana;
font-size:20px;
font-weight:bold;
text-align: center;
width: 420px;
height:325px;
margin-top:162px;
margin-right:auto;
margin-left:10%;
background-color:white;
border-radius:10px;
padding:10px;
opacity:0.8;
}
.cardbox {
border-radius: 5px;
width:auto;
display:inline-block;
}
.card {
border: 4px solid white;
width:192px;
height:272px;
border-radius: 3px;
display:none;
}
.picksbox {
width:1260px;
height:285px;
margin:auto;
background-color:white;
background-image:url("images/program/picksbox.jpg");
border-radius:3px;
}
.tipJar {
width:146px;
height:250px;
background-image:url("images/program/TipJar.jpg");
background-size:100%;
border-radius:10px;
margin:auto;
opacity:0.7;
position:relative;
top:17px;
}
.picks {
display:none;
width:315px;
height:285px;
margin:auto;
overflow:auto;
font-family:verdana;
font-weight:bold;
}
.picksave {
font-family:verdana;
margin:5px;
display:block;
font-size:14px;
}
.options {
margin-top:5px;
margin-bottom:5px;
margin-right:auto;
margin-left:auto;
width:1260px;
background-color:white;
border-radius:3px;
}
<html>
<head>
<title>MTGO draft replayer 0.1.3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="cardcontainer">
<div class ="startMessage">
<br/>
Welcome to the TopdeckAndWreck.com MTGO Draft Replayer!<br/>
<br/>
In case you're not sure where and how to start check out our tutorial or FAQ pages.<br/>
<br/>
Thanks for visiting and have fun!
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div>
</div>
<div class="options">
<input type="file" name="draftlog" id="draftlog">
</div>
<div class="picksbox">
<div class='tipJar'></div>
<div class="picks"></div
><div class="picks"></div
><div class="picks"></div
><div class="picks"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</body>
</html>
Have tested your logical operators, especially the greater than equal operators in the following part of the code:
else if(pick => 12 && pick < 24){
$(".picks").eq(1).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 24 && pick < 36){
$(".picks").eq(2).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 36){
$(".picks").eq(3).append('<a class="picksave">'+cardname+'</a>');
}
When I tested => operator, I got the following error: Uncaught SyntaxError: Unexpected token => . Maybe >= should be used instead. I hope this helps :-)
console.log( 3 >= 2); //true
console.log( 3 <= 2); //false
//console.log( 3 => 2); //Uncaught SyntaxError: Unexpected token =>

Jquery Custom image gallery

I wrote a little complex code (Coz i am not an expert) to mage a gallery.. But i want to do it more simple.. Bellow is my code:
This is the buttons:
<div class="pic1">Image1</div>
<div class="pic2">Image2</div>
<div class="pic3">Image3</div>
This is the each image:
<div class="PicsHolder">
<div id="pic1" style="padding: 2px; margin: auto;">
<img src="image_gallery/1.jpg" alt="" width="100%" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here!!!
<div style="clear:both;"></div>
</div>
</div>
<div id="pic2" style="padding: 2px; margin: auto; display: none;">
<img style="margin: 0 auto;" src="image_gallery/2.jpg" alt="" width="100%" border="0" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here Image 2!!!
<div style="clear:both;"></div>
</div>
</div>
<div id="pic3" style="padding: 2px; margin: auto; display: none;">
<img style="margin: 0 auto;" src="image_gallery/3.jpg" alt="" width="100%" border="0" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here Image 3!!!
<div style="clear:both;"></div>
</div>
</div>
</div>
And my JAvascript (and the complicated part)
<script type="text/javascript">
$(document).ready(function() {
var myString = window.location.href;
var finals = myString[myString.length - 1];
if (finals == "") {
$("#pic2").hide();
$("#pic3").hide();
$("#pic1").fadeIn("fast");
}
if (finals == "1") {
$("#pic2").hide();
$("#pic3").hide();
$("#pic1").fadeIn("fast");
}
if (finals == "2") {
$("#pic1").hide();
$("#pic3").hide();
$("#pic2").fadeIn("fast");
}
if (finals == "3") {
$("#pic1").hide();
$("#pic2").hide();
$("#pic3").fadeIn("fast");
}
});
</script)
<script type="text/javascript">
$(document).ready(function() {
var currentURL = window.location.href;
var p1 = "?id=1";
var p2 = "?id=2";
var p3 = "?id=3";
var p1url = window.location.href + p1;
var p2url = window.location.href + p2;
var p3url = window.location.href + p3;
$(".pic1").click(function() {
$("#pic2").hide();
$("#pic3").hide();
$("#pic4").hide();
window.location.href = p1url;
$("#pic1").fadeIn("fast");
});
$(".pic2").click(function() {
$("#pic1").hide();
$("#pic3").hide();
window.location.href = p2url;
$("#pic2").fadeIn("fast");
});
$(".pic3").click(function() {
$("#pic1").hide();
$("#pic2").hide();
window.location.href = p3url;
$("#pic3").fadeIn("fast");
});
});
</script>
Is there any possibility to do all this jquery code more simple?
is there any possibility to make it more dynamic? I mean if i want to add more images
like this way:
Some text in Here Image 2!!!
The jquery code that i am using to calculate the images and generate the rest code?
Regards!

Categories

Resources