I'm new to Javascript, but I've been teaching myself CSS and some php so I'm hoping to learn a bit. I've been looking all over the last couple days to figure out what I want, hopefully this isn't a dumb question.
I'm trying to build mini-image galleries for a page of porfolio projects of mine. I've got a page of about 8 large images - each one for a different project. I'm trying to get it where if you click on an image it will load the next image of that project (Mission accomplished! I've gotten that with a code I found online)
But I also want pagination dots (basically, images of circles), like I've seen on other websites, to represent the images in the set. So if there's three images of a project, you'll see three dots and clicking on the third dot takes you to the third image -- and that dot image replaces with the 'selected dot' image. Make sense?
I've been looking all day for scripts and examples of how to do this, and this is as far as my Javascript has gotten. This is the script for the first project. With the others I input the same script, but change the variables. img1 becomes img2 then img3 and so on. Can anyone tell what's wrong?
<div class="project" id="proj1">
<script type="text/javascript">
var img1 = [
"img/portf/tiger1.jpg",
"img/portf/tiger2.jpg",
"img/portf/tiger3.jpg"
];
img1.current = 0;
function showImage1(i) {
$('#imag1').fadeOut( function() {
this.src = img1[img1.current];
$(this).fadeIn();
});
}
function NextImage1() {
img1.current = (img1.current+1) % img1.length;
showImage1(img1.current);
}
function PreviousImage1() {
if (--img1.current < 0) { img1.current = img1.length - 1; }
showImage1(img1.current);
}
onload = function(){
showImage1(0);
};
</script>
<div class="projname">
<div class="ProjectTitle">
Tigercat Website
</div>
<div class="PaginationButtons">
<img src="img/active.gif" />
<img src="img/inactive.gif" />
<img src="img/inactive.gif" />
</div>
<div class="clear"></div>
</div>
<div class="projwindow">
<a href="javascript:NextImage1()">
<img src="img/portf/tiger1.jpg" name="Tigerc" width="800" height="600" id="imag1" />
</a>
</div>
</div>
You can see what I have so far here: http://www.gmisen.com
Thanks so much for the help!!
Might not be the greatest learning experience, but you can easily achieve this with the jQuery cycle plugin: http://jquery.malsup.com/cycle/int2.html (take a look at the pager example)
here's a demo: http://jsfiddle.net/69LNJ/
HTML
<div class="slideshow">
<img src="http://flickholdr.com/400/400/cat/bw">
<img src="http://flickholdr.com/400/400/cat/bw/1">
<img src="http://flickholdr.com/400/400/cat/bw/2">
</div>
JS
$(function() {
$('.slideshow').before('<div id="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
});
CSS
#nav{
position: absolute;
top: 20px;
left: 20px;
z-index: 1000;
}
#nav a{
background-color: cyan;
border-radius: 10px;
height: 20px;
width: 20px;
display: block;
text-indent: -1000px;
float: left;
margin-right: 10px;
}
#nav a.activeSlide{
background-color: blue;
}
Related
I have a game I am making, and I want to create a splash screen that shows up for 3 seconds before the game starts. However, I am unable to accomplish this because I don't know how to make the splash screen show up successfully, also WITHOUT the game starting to run in the background. (The parades start to move as soon as the game loads)
It's a Mardi Gras game, and there's a parade in the back. I want the splash screen to show up (just a white splash screen with the words "Mardi Gras Parade!" appearing) for 3 seconds, then disappear, and the game starts.
Here is the JSFiddle (which unfortunately does not show the parades moving because I can't attach files to the JSFiddle, sorry).
But here is my repo, if you want to clone it and open it up in your browser to see the full animations.
Basically, the Splash Screen should cover the entire left portion of the game (with the grey road) with a white background. It shouldn't cover the right yellow side that has the scoreboard information. I am trying to achieve this using Jquery, but I am unable to do this. I don't think my Jquery actually works, as there are no animations, and I can still see the game background. I got the very simple code from this StackOverflow post.
This is my Jquery code that controls the Splash Screen:
function splash(param) {
var time = param;
setTimeout(function() {
$('#splash').hide();
}, time);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="splash(3000)">
<div class='outer-container'>
<div class='game-window'>
<div id="splash">
<div id="splash-content">Mardi Gras Parade!!!!!!</div>
</div>
<div id="actualGame">
<div id='player' class='playerObject'>
<img class='player-avatar' src='img/person.png' height='50px' />
<!--person img: src='https://www.google.com/imgres?imgurl=http%3A%2F%2Fclipart-library.com%2Fnew_gallery%2F54-540691_others-clipart-helpful-person-generic-person.png&imgrefurl=http%3A%2F%2Fclipart-library.com%2Fclip-art%2F54-540691_others-clipart-helpful-person-generic-person.htm&tbnid=V19QgOYn0jYyzM&vet=12ahUKEwidx5GevcrnAhUJ0KwKHQynD9AQMygBegUIARCJAg..i&docid=hVn27RN51ga3yM&w=920&h=830&q=person&hl=en&ved=2ahUKEwidx5GevcrnAhUJ0KwKHQynD9AQMygBegUIARCJAg'-->
</div>
<div id="paradeRoute">
<div id="dottedLine"></div>
<div id="paradeFloats" class="bothFloats">
<div id="paradeFloat1" class='paradeFloat'>
<img src='img/parade_float_1.gif' height='80px' />
<!-- src: https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.clipart.email%2Fb0a85a880dc856c8129f51d506469510_mardi-gras-background-transparent-png-clipart-free-download-ywd_474-256.gif&imgrefurl=https%3A%2F%2Fwww.clipart.email%2Fclipart%2Ftransparent-background-mardi-gras-float-clipart-231098.html&tbnid=QDcU0K_06jcQJM&vet=12ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygEegUIARDsAQ..i&docid=7_c8q7QtWx89bM&w=474&h=256&q=mardi%20gras%20parade%20clip%20art&hl=en&client=firefox-b-1-e&ved=2ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygEegUIARDsAQ -->
</div>
<div id="paradeFloat2" class='paradeFloat'>
<img src='img/parade_float_2.png' height='80px' />
<!-- Adapted from src: https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.clipart.email%2F2075f16e1c812d5ba8ecece2b6924d75_mardi-gras-clipart-at-getdrawingscom-free-for-personal-use-_340-270.jpeg&imgrefurl=https%3A%2F%2Fwww.clipart.email%2Fclipart%2Fmardi-gras-float-clip-art-228088.html&tbnid=_LNqQJQgyaHKcM&vet=12ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygLegUIARD7AQ..i&docid=Fv4gfo44aw_StM&w=340&h=270&q=mardi%20gras%20parade%20clip%20art&hl=en&client=firefox-b-1-e&ved=2ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygLegUIARD7AQ -->
</div>
</div>
</div>
</div>
</div>
<!-- Scoreboard -->
<div class='status-window' style='text-align: center'>
<h3>Welcome!</h3>
<hr>
<br>
<p>Score:</p>
<h1 id='score-box'>0</h1>
<br/>
<div>
<b># of beads collected:</b>
<span id="beadsCounter">0</span>
</div>
<div>
<b># of candy pieces collected:</b>
<span id="candyCounter">0</span>
</div>
</div>
</div>
</body>
First remove onload="splash(3000)" from <body>
Create a separate js file and move javascript to end of </body>
...
<script async src="scripts/index.js"></script>
</body>
Script
scripts/index.js
function splash(time) {
return new Promise(resolve => {
setTimeout(() => {
$("#splash").hide();
resolve();
}, time);
});
}
function loop() {
$("#paradeFloats").css({ left: -300 });
$("#paradeFloats").animate(
{
left: "+=850"
},
10000,
"linear",
function() {
loop();
}
);
}
$(document).ready(function() {
// Wait for splash to resolve after 3 seconds, Then call loop()
splash(3000).then(() => {
loop();
});
});
Read more on Promises - Also check out the example section.
CSS
Make the following changes to your CSS, Modify if necessary.
#outer-container {
...
overflow: hidden; // Hide everything outside of #outer-container
}
#splash {
align-items: center;
background-color: #fff;
border: 3px solid #000;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
vertical-align: middle;
z-index: 9999;
}
#splash-content {
font-style: italic;
font-size: 30px;
}
Codesandbox Example
https://codesandbox.io/s/laughing-dream-8c4r9
I have VERY recently started coding and been asked to code our company website from scratch.
I have coded a team page on the website with a PNG of each member of the team. At the moment when the user hovers over any of the PNGs they turn into a little animated GIF of them waving/doing something.
This is the javascript:
$(document).ready(function()
{
$("#imgAnimateBeth").hover(
function(){
this.src = "images/Team/Videos/Beth.gif";
},
function(){
this.src = "images/Team/Static-shots/Beth.png";
}
);
});
The issue I am having is that I also want to introduce a click state that would bring up a popup with a video of that person and their job description but I can't get it to work.
I have tried creating a CSS overlay but it refuses to work alongside the hover effect (JavaScript) so my assumption is that they don't play well together (??).
Below is the HTML for the section above. Can anyone enlighten me as to how this could be done? Simple language please!
<div class="teamsection">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
<img src="images/Team/Static-shots/Kiemia.png" id="imgAnimateKiemia">
<img src="images/Team/Static-shots/Emma-B.png" id="imgAnimateEmmaB">
<img src="images/Team/Static-shots/Mathew.png" id="imgAnimateMathew">
<img src="images/Team/Static-shots/Sydney.png" id="imgAnimateSydney">
<img src="images/Team/Static-shots/Liz.png" id="imgAnimateLiz">
<img src="images/Team/Static-shots/Russ.png" id="imgAnimateRuss">
<img src="images/Team/Static-shots/Jill.png" id="imgAnimateJill">
<img src="images/Team/Static-shots/Merry.png" id="imgAnimateMerry">
<img src="images/Team/Static-shots/Caroline.png" id="imgAnimateCaroline">
<img src="images/Team/Static-shots/Charlotte.png" id="imgAnimateCharlotte">
<img src="images/Team/Static-shots/Lucien.png" id="imgAnimateLucien">
<img src="images/Team/Static-shots/Sarah.png" id="imgAnimateSarah">
<img src="images/Team/Static-shots/Emma-S.png" id="imgAnimateEmmaS">
<img src="images/Team/Static-shots/David.png" id="imgAnimateDavid">
<img src="images/Team/Static-shots/Kathryn.png" id="imgAnimateKathryn">
</div>
Also, if you need me to upload anything else, just shout.
The CSS overlay was like this:
The CSS code overlay was like this:
.popup {
display: none;
position: fixed;
padding: 30px 70px;
width: 700px;
height: 100%;
z-index: 20;
left: 50px;
top: 20px;
background: rgba(0, 0, 0, 0.9);
overflow: scroll;
}
With a little bit of Javascript:
$ = function(id) {
return document.getElementById(id);
}
var show = function(id) {
$(id).style.display ='block';
}
var hide = function(id) {
$(id).style.display ='none';
}
And I basically did this to the HTML:
<div>
<a href="javascript:void(0)" onclick="show('beth')">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
</a>
</div>
<div class="popup" id="beth">
<div class="close-button">
<i class="fa fa-times" aria-hidden="true"></i> Close
</div>
<h4>CONTENT HERE</h4>
</div>
Maybe this will give you some ideas:
var members = document.querySelectorAll('.team-member');
members.forEach(function(member) {
member.addEventListener('mouseenter', memberShowGIF);
member.addEventListener('mouseleave', memberShowPNG);
member.addEventListener('click', memberVideo);
});
function memberShowGIF(event) {
this.src = this.dataset.gif;
}
function memberShowPNG(event) {
this.src = this.dataset.png;
}
function memberVideo(event) {
console.log('The video thing for: ' + this.id);
}
<div class="teamsection">
<img id="Beth" class="team-member"
src="https://via.placeholder.com/200?text=Beth.png"
data-png="https://via.placeholder.com/200?text=Beth.png"
data-gif="https://via.placeholder.com/200?text=Beth.gif">
<img id="Kiemia" class="team-member"
src="https://via.placeholder.com/200?text=Kiemia.png"
data-png="https://via.placeholder.com/200?text=Kiemia.png"
data-gif="https://via.placeholder.com/200?text=Kiemia.gif">
</div>
The most important learnings here are:
querySelectorAll (as a vanilla alternative to jQuery for selecting nodes)
addEventListener
Data attributes
I made this image gallery a while ago and now had the idea, that it would be great if you could navigate in it with the arrow keys (left and right).
As I'm relatively new to programming, I cannot get it working with what I found in the forum.
I would be very happy if anyone could help :)
At the bottom there's a link to the gallery on jsfiddle.
And here is what the gallery looks like:
The javascript in the head of the document:
function reset()
{
var imgs = document.getElementsByTagName('img');
}
function init()
{document.getElementById('img1');}
window.onload = init;
the CSS:
#large {
width:820px;
height:619px;
background:url(image_I_820x619.jpg)
no-repeat center;}
.thumb66x50 {
width:66px;
height:50px;}
And the body of the image gallery:
<div id="large"></div>
<img id="img1" src="thumbnail_image_I.jpg" class='thumb66x50' alt="" onclick="reset();document.getElementById('large').style.backgroundImage='url(image_I_820x619.jpg)';">
<img id="img2" src="thumbnail_image_II.jpg" class='thumb66x50' alt="" onclick="reset();document.getElementById('large').style.backgroundImage='url(image_II_820x619.jpg)';">
Here's the the gallery on jsfiddle:
(Strangely, it only works there, if I put the javascript in the html panel...)
https://jsfiddle.net/cv6k9k0f/4/
An alternative to your solution is to keep the JS logic in one place. The following will work for any number of thumbnails.
(function () {
let lg = document.querySelector("#large"),
sm = document.querySelectorAll("[data-bg]"),
setBg = (el = sm[0]) => lg.style.backgroundImage = `url('${ el.dataset.bg }')`;
Array.from(sm).forEach((el) => el.addEventListener("click", setBg.bind(this, el)));
setBg();
}());
#large{
height: 130px;
background: #000 none 50% 50% / cover;
transition: 0.3s;
}
[data-bg] {
height: 50px;
cursor: pointer;
}
<div id="large" role="presentation"></div>
<img src="//placehold.it/60x50/bf0" data-bg="//placehold.it/800x600/bf0" alt="Green">
<img src="//placehold.it/60x50/0bf" data-bg="//placehold.it/800x600/0bf" alt="Azure">
<img src="//placehold.it/60x50/f0b" data-bg="//placehold.it/800x600/f0b" alt="Fuxxy">
I'm using the instructions given on a website to show charity adverts on sites where visitors have ad-blockers enabled.
Whilst the following code works brilliantly, I'm looking for a solution where I can combine multiple code snippets on the same page (to account for multiple adverts) without it breaking and without having to change it multiple times for inclusions on different websites.
The current code:
<div style="max-width: 300px; max-height: 250px; overflow: hidden;"><div class="adunit" id="ad-300x250">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" ></script>
<!-- Adblock4Charity - 300x250 -->
<ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-9259642480484018" data-ad-slot="2331359741"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div><div style="height: auto; width: auto;"><img src="http://www.adblock4charity.com/wp-content/uploads/2014/11/Save-the-Children.jpg" alt="Save the Children" width="298" height="248" />
<script>
window.onload = function() {
setTimeout(function() {
var ab4c = document.querySelector("div#ad-300x250 > ins.adsbygoogle");
if (ab4c && ab4c.innerHTML.replace(/s/g, "").length == 0) {
ab4c.style.cssText = 'display:block !important';
ab4c.innerHTML = '<img src="http://www.adblock4charity.com/wp-content/uploads/2014/11/Save-the-Children.jpg" width="298" height="248" />'; }; }, 1000);
};
</script>
I'm looking for a solution and perhaps a working piece of code to work from that would allow me to replicate it on multiple sites with ease. I'm thinking something on the lines of creating random variable names, adding it to an array and looping through the array. Perhaps this isn't the best solution but I'm lacking on javascript knowledge.
Demo on JSFiddle
You'd probably benefit from reading about querySelectorAll.
As you can see, a for loop is a good option here. In the example, I selected all red squares. Then the inner HTML can be replaced in the loop.
I expect that this is enough to help you solve your problem. :)
HTML
<div class="square" id="red">
<p>Red</p>
</div>
<div class="square" id="red">
<p>Red</p>
</div>
<div class="square" id="yellow">
<p>Yellow</p>
</div>
CSS
.square {
width: 100px;
height: 100px;
}
#red {
background: red;
}
#yellow {
background: yellow;
}
JS
var squares = document.querySelectorAll("div.square"),
redSquares = document.querySelectorAll("div.square#red"),
youLikeCharities = true;
if (youLikeCharities) {
for (var i = 0; i < redSquares.length; i++) {
redSquares[i].innerHTML = '<img src="http://www.adblock4charity.com/wp-content/uploads/2014/11/Save-the-Children.jpg" width="100" height="100" />';
}
};
I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image
Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});
To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)
You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>
With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...