Develop Reference

Print the disappeared hovered numbers in the order that the user mouseover them using Java Script

I made this webpage, where random numbers appear from 1 to 9 in square divs.
What I need is:
When the user mouseover any number, the number will disappear, finally when the user finishes hovering all of the numbers, an alert should appear displaying all the numbers in the order that the user hovered.
Here is my attempt:
I could only make the numbers disappeared, but how can I print them in an alert in the same order that the user hovered:
document.getElementById("s1").addEventListener("mouseover", function(){
document.getElementById("s1").style.visibility = "hidden";})
document.getElementById("s2").addEventListener("mouseover", function(){
document.getElementById("s2").style.visibility = "hidden"; })
document.getElementById("s2").addEventListener("mouseover", function(){
document.getElementById("s2").style.visibility = "hidden"; })
document.getElementById("s3").addEventListener("mouseover", function(){
document.getElementById("s3").style.visibility = "hidden";})
document.getElementById("s4").addEventListener("mouseover", function(){
document.getElementById("s4").style.visibility = "hidden";})
document.getElementById("s5").addEventListener("mouseover", function(){
document.getElementById("s5").style.visibility = "hidden";})
document.getElementById("s6").addEventListener("mouseover", function(){
document.getElementById("s6").style.visibility = "hidden";})
document.getElementById("s7").addEventListener("mouseover", function(){
document.getElementById("s7").style.visibility = "hidden";})
document.getElementById("s8").addEventListener("mouseover", function(){
document.getElementById("s8").style.visibility = "hidden";})
document.getElementById("s9").addEventListener("mouseover", function(){
document.getElementById("s9").style.visibility = "hidden";})
function alertAfterHovering() {
alert(document.getElementById("s1").innerHTML+" "+document.getElementById("s2").innerHTML+"
"+document.getElementById("s3").innerHTML+" "+document.getElementById("s4").innerHTML+"
"+document.getElementById("s5").innerHTML+" "+document.getElementById("s6").innerHTML+"
"+document.getElementById("s7").innerHTML+" "+document.getElementById("s8").innerHTML+"
"+document.getElementById("s9").innerHTML)
}

You can do it using eventListener and using some dynamic code:
var squares = document.getElementsByClassName("square");
for (square of squares) {
square.addEventListener("mouseenter", addNumber);
}
var total = [];
function addNumber(e) {
if(e.target.textContent) {
total.push(e.target.textContent);
e.target.textContent = "";
if(total.length === squares.length) {
alert(total);
}
}
}
.square {
width: 29%;
height: 50px;
background: #00ffff;
margin: 2%;
display: flex;
align-items: center;
justify-content: center;
}
.box {
display: flex;
flex: 0 1 33%;
flex-wrap: wrap;
}
<div class="box">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
<div class="square">7</div>
<div class="square">8</div>
<div class="square">9</div>
</div>

Create an array to capture the numbers as the user hovers. Then use that array to display the alert.
var numbers = [];
// repeat this for each element Or find a better way of targeting the elements so you don't have to hard code for each one
document.getElementById("s1").addEventListener("mouseover", function(){
var thisNumber = document.getElementById("s1").innerHTML;
// you need some way of making sure hovering over an invisible element does not add a duplicate to the array
if (!numbers.includes(thisNumber) {
numbers.push(thisNumber);
}
document.getElementById("s1").style.visibility = "hidden";
});
function alertAfterHovering() {
alert(numbers);
}

Perform function first and then gather index of array onclick in Javascript

I am trying to create a slideshow where the current photo is listed below in a circle and the circle changes color based on the current photo shown. The user should then be able to click on on each "bubble" and go to the appropriate photo while the show continues from that point.
The problem I am having is that I cannot remove the class, and then gather the index of the bubble. I cannot figure out how to use two separate loops with $bubbles.onclick. I tried with alerts for testing and it only displayed the second alert.
On a separate note, I also cannot get the the last bubble to remove class. The clipIndex skips the last value of the array and resets without displaying an alert and the last bubble stays pink.
Any suggestions? Sorry if the post isn't clear or the code doesn't read well, this is my first post.
<div id="slideShow">
<img class="clip currentClip" src="img/index01.jpg">
<img class="clip" src="img/index02.jpg">
<img class="clip" src="img/index03.jpg">
<img class="clip" src="img/index04.jpg">
<div id="sliderBubble">
<img class = "bubbles currentBubble" src="img/sBubblePink.png">
<img class = "bubbles" src="img/sBubble.png">
<img class = "bubbles" src="img/sBubble.png">
<img class = "bubbles" src="img/sBubble.png">
</div>
</div>
.clip {
max-height: 100%;
max-width: 100%;
position: absolute;
display: none;
margin-left: 50px;
border-radius: 10px;
}
.currentClip {
display: block;
}
#sliderBubble {
display: block;
height: 10px;
margin-top: 580px;
text-align:center;
}
var $clips = $(".clip"),
clipIndex = 0,
numClips = $clips.length,
sliderSpeed = 4000,
sliderEffect = 1000,
$bubbles = $(".bubbles");
fadeOutCurrent = function() {
$($clips[clipIndex++ % numClips]).fadeOut(sliderEffect, function() {
$(this).removeClass("currentClip");
});
},
fadeInNext = function () {
$($clips[clipIndex % numClips]).fadeIn(sliderEffect, function () {
$(this).addClass("currentClip");
});
},
setBubble = function() {
$bubbles[clipIndex % numClips].src = "img/sBubblePink.png";
$bubbles[(clipIndex % numClips) -1].src = "img/sBubble.png";
},
initSlider = function () {
setInterval(function() {
fadeOutCurrent();
fadeInNext();
setBubble();
}, sliderSpeed);
};
newClipIndex = function () {
for (var i = 0; i < numClips; i++) {
// Insert Function here for removeclass current bubble onclick
(function(clipIndex) {
$bubbles[i].onclick = function() {
alert(clipIndex);
$($clips[clipIndex]).addClass("currentClip");
}
})(i);
}
};

Jquery Simple ScreenSaver

Hello guys reading this article i create simple screensaver, but i got one problem, when i let my mouse stop i need to hide one div and show other, but when div shows animation stop, what is my problem, my code
var mousetimeout;
var screensaver_active = false;
var idletime = 5;
var screenSaver = $("#screenSaverForm");
var formDiv = $("#bodyForm");
function show_screensaver() {
formDiv.fadeOut(100);
screenSaver.fadeIn(900);
screensaver_active = true;
}
function stop_screensaver() {
screenSaver.fadeOut(100);
formDiv.fadeIn(900);
screensaver_active = false;
}
$(document).mousemove(function () {
clearTimeout(mousetimeout);
if (screensaver_active) {
stop_screensaver();
}
mousetimeout = setTimeout(function () {
show_screensaver();
}, 1000 * idletime); // 5 secs
});
and divs:
<div id="screenSaverForm" style="background-image: url(../../Content/img/screensavers.jpg); position: absolute; width: 100%; height:100%; left:0px; top: 0px; display: none; z-index:9999; display: none;">Example of a DIV element with a background image:</div>
Other div is simple, and if any can help, before show animation i need to reload page, any knows how to do this?

You could try adding this line in before stop_screensaver();
.
...
if (screensaver_active) {
location.reload(); //Refreshes the page
stop_screensaver();
}
...
.
Or, if you just want to scroll to the top of the page:
.
...
if (screensaver_active) {
$(window).scrollTop(0); //Scroll to top of page
stop_screensaver();
}
...
.

How to load an initial set of images, then animate between them randomly without jQuery

On my page I have a gallery (just a div) with several images on it. I want to show the first 9 images immediately, then load more images and use CSS transitions to animate between the existing images.
Loading the initial images is easy but I do not know the best way to load the next set of images and then start animating (using the CSS Transform property). So far this is what I have:
HTML (abbreviated):
<div id="mainContainer">
<div class="imageHolder"><img class="homeImages" src="test.png"></div>
<div class="imageHolder"><img class="homeImages" src="test1.png"></div>
<div class="imageHolder"><img class="homeImages" src="test3.png"></div>
</div>
CSS (abbreviated):
img {
display: inline;
position: relative;
margin: 0;
padding: 0;
width: 30%;
}
.changed.opaque {
opacity: 0;
border: 2px solid red;
}
I am looking to do a variety of effects, the most simple one would be to change the opacity and fade one image over the other. To load the next set of images I have this:
Javascript:
var imageArray = [
'test2.png',
'test3.png',
'test4.png',
'test5.png',
'test6.png',
];
var imageNodeArray = [];
for(var i = imageArray.length - 1; i >= 0; i -= 1) {
var img = new Image();
img.onload = function() {
imageNodeArray.push(this);
};
img.src = imageArray[i];
}
document.onclick = function() {
imageNodeArray[0].setAttribute('class', 'changed.opaque');
divs[0].appendChild(imageNodeArray[0])
}
This does add an image to my mainContainer however, even though I can tell from devTools that it has the changed.opaque class applied to it, no opacity is shown on the added image.
I am curious about this. I would also like to know the best way to "stack" images to have a bunch to animate through. I am not sure that appending child is right.... Thank you

function animate() {
var index = Math.floor((Math.random() * document.querySelectorAll('#mainContainer > .imageHolder').length + 1));
var current = document.querySelector('.top');
var next = document.querySelector('.imageHolder:nth-of-type(' + index + ')');
current.className = "imageHolder";
next.className += "top";
}
Should be able to handle and switch between any dynamically inserted images.
Currently using:
.imageHolder {
display: none;
}
.top {
display: inherit;
}
to switch the image is just a simple implementation.
Here's the working fiddle: http://jsfiddle.net/e9dxN/1/
Alternative implementation: http://jsfiddle.net/e9dxN/6/

how to zoom an object on clicking on it. and zoom-inwhen esc key is pressed or close button is pressed

how to zoom an object on clicking on it . Clicking an image will zoom out the clicked image to its target-image. Click anywhere on the image or the close-button or press esc key to zoom the image back in.
It should look similar to this http://andreaslagerkvist.com/jquery/image-zoom/#jquery-plugin-example
I've updated the code in http://jsfiddle.net/ErTqL/3/
Also as per the plug-in, if i remove the css, the images appear, and also zooming happens. but, the close button does not appear, & the esc key or clicking on the image does not close the Zoomed image.
I need an output similar to the plug-in. Also the zoomed image should occupy only 3/4th of the page as in the plug in, instead in my example, its extending to the entire page as if its the next page. Also refer this http://jsfiddle.net/ErTqL/4/ after removing the CSS of the plug-in. Kindly help as i'm a newbie for Jquery.
my code is as follows
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="script/JQuery-1.10.1.min.js"></script>
<script type="text/javascript">
jQuery.fn.imageZoom = function (conf) {
// Some config. If you set dontFadeIn: 0 and hideClicked: 0 imgzoom will act exactly like fancyzoom
var config = jQuery.extend({
speed: 200, // Animation-speed of zoom
dontFadeIn: 1, // 1 = Do not fade in, 0 = Do fade in
hideClicked: 1, // Whether to hide the image that was clicked to bring up the imgzoom
imageMargin: 30, // Margin from image-edge to window-edge if image is larger than screen
className: 'jquery-image-zoom',
loading: 'Loading...'
}, conf);
config.doubleSpeed = config.speed / 4; // Used for fading in the close-button
return this.click(function(e) {
// Make sure the target-element is a link (or an element inside a link)
var clickedElement = jQuery(e.target); // The element that was actually clicked
var clickedLink = clickedElement.is('a') ? clickedElement : clickedElement.parents('a'); // If it's not an a, check if any of its parents is
clickedLink = (clickedLink && clickedLink.is('a') && clickedLink.attr('href').search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)$/gi) != -1) ? clickedLink : false; // If it was an a or child of an a, make sure it points to an image
var clickedImg = (clickedLink && clickedLink.find('img').length) ? clickedLink.find('img') : false; // See if the clicked link contains and image
// Only continue if a link pointing to an image was clicked
if (clickedLink) {
// These functions are used when the imaeg starts and stops loading (displays either 'loading..' or fades out the clicked img slightly)
clickedLink.oldText = clickedLink.text();
clickedLink.setLoadingImg = function () {
if (clickedImg) {
clickedImg.css({opacity: '0.5'});
}
else {
clickedLink.text(config.loading);
}
};
clickedLink.setNotLoadingImg = function () {
if (clickedImg) {
clickedImg.css({opacity: '1'});
}
else {
clickedLink.text(clickedLink.oldText);
}
};
// The URI to the image we are going to display
var displayImgSrc = clickedLink.attr('href');
// If an imgzoom wiv this image is already open dont do nathin
if (jQuery('div.' + config.className + ' img[src="' + displayImgSrc + '"]').length) {
return false;
}
// This function is run once the displayImgSrc-img has loaded (below)
var preloadOnload = function (pload) {
// The clicked-link is faded out during loading, fade it back in
clickedLink.setNotLoadingImg();
// Now set some vars we need
var dimElement = clickedImg ? clickedImg : clickedLink; // The element used to retrieve dimensions of imgzoom before zoom (either clicked link or img inside)
var hideClicked = clickedImg ? config.hideClicked : 0; // Whether to hide clicked link (set in config but always true for non-image-links)
var offset = dimElement.offset(); // Offset of clicked link (or image inside)
var imgzoomBefore = { // The dimensions of the imgzoom _before_ it is zoomed out
width: dimElement.outerWidth(),
height: dimElement.outerHeight(),
left: offset.left,
top: offset.top/*,
opacity: config.dontFadeIn*/
};
var imgzoom = jQuery('<div><img src="' + displayImgSrc + '" alt=""/></div>').css('position', 'absolute').appendTo(document.body); // We don't want any class-name or any other contents part from the image when we calculate the new dimensions of the imgzoom
var imgzoomAfter = { // The dimensions of the imgzoom _after_ it is zoomed out
width: pload.width,
height: pload.height/*,
opacity: 1*/
};
var windowDim = {
width: jQuery(window).width(),
height: jQuery(window).height()
};
// Make sure imgzoom isn't wider than screen
if (imgzoomAfter.width > (windowDim.width - config.imageMargin * 2)) {
var nWidth = windowDim.width - config.imageMargin * 2;
imgzoomAfter.height = (nWidth / imgzoomAfter.width) * imgzoomAfter.height;
imgzoomAfter.width = nWidth;
}
// Now make sure it isn't taller
if (imgzoomAfter.height > (windowDim.height - config.imageMargin * 2)) {
var nHeight = windowDim.height - config.imageMargin * 2;
imgzoomAfter.width = (nHeight / imgzoomAfter.height) * imgzoomAfter.width;
imgzoomAfter.height = nHeight;
}
// Center imgzoom
imgzoomAfter.left = (windowDim.width - imgzoomAfter.width) / 2 + jQuery(window).scrollLeft();
imgzoomAfter.top = (windowDim.height - imgzoomAfter.height) / 2 + jQuery(window).scrollTop();
var closeButton = jQuery('Close').appendTo(imgzoom).hide(); // The button that closes the imgzoom (we're adding this after the calculation of the dimensions)
// Hide the clicked link if set so in config
if (hideClicked) {
clickedLink.css('visibility', 'hidden');
}
// Now animate the imgzoom from its small size to its large size, and then fade in the close-button
imgzoom.addClass(config.className).css(imgzoomBefore).animate(imgzoomAfter, config.speed, function () {
closeButton.fadeIn(config.doubleSpeed);
});
// This function closes the imgzoom
var hideImgzoom = function () {
closeButton.fadeOut(config.doubleSpeed, function () {
imgzoom.animate(imgzoomBefore, config.speed, function () {
clickedLink.css('visibility', 'visible');
imgzoom.remove();
});
});
return false;
};
// Close imgzoom when you click the closeButton or the imgzoom
imgzoom.click(hideImgzoom);
closeButton.click(hideImgzoom);
};
// Preload image
var preload = new Image();
preload.src = displayImgSrc;
if (preload.complete) {
preloadOnload(preload);
}
else {
clickedLink.setLoadingImg();
preload.onload = function () {
preloadOnload(preload);
};
}
// Finally return false from the click so the browser doesn't actually follow the link...
return false;
}
});
};
// Close image zooms when user hits esc
$(document).keydown(function (e) {
if (e.keyCode == 27) {
$('div.jquery-image-zoom a').click();
}
});
</script>
<style type="text/css">
.total
{
border:1px solid black;
width:100%;
height:900px;
margin-right:auto;
margin-left:auto;
}
.jquery-image-zoom
{
border:1px solid black;
width:98%;
height:100%;
margin-right:auto;
margin-left:auto;
}
.image_gallery
{
border:1px solid red;
width:100%;
height:27%;
}
.image_box
{
//border:1px solid blue;
width:33.1%;
height:100%;
float:left;
}
</style>
</head>
<body>
<div class="total">
<div id="jquery-image-zoom" class="jquery-image-zoom">
<ul>
<li>Bloodcells</li>
<li>X-Wing</li>
<li>We've moved</li>
</ul>
<div class="image_gallery">
<div class="image_box"> <img src="http://exscale.se/__files/3d/lamp-and-mates/lamp-and-mates-01_small.jpg" alt="Lamp and Mates" /> </div>
<div class="image_box"> <img src="http://exscale.se/__files/3d/stugan-winter_small.jpg" alt="The Cottage - Winter time" alt="Lamp and Mates" /> </div>
<div class="image_box"> <img src="http://exscale.se/__files/3d/ps2_small.jpg" alt="Lamp and Mates" /> </div>
</div>
<!--
<ul>
<li><img src="http://exscale.se/__files/3d/lamp-and-mates/lamp-and-mates-01_small.jpg" alt="Lamp and Mates" /></li>
<li><img src="http://exscale.se/__files/3d/stugan-winter_small.jpg" alt="The Cottage - Winter time" /></li>
<li><img src="http://exscale.se/__files/3d/ps2_small.jpg" alt="PS2" /></li>
</ul>
-->
</div>
</div>
</body>
</html>