We Keep Coding

My code doesn't work within a $(document).ready() function. Can anyone help me understand why?

I'm trying to learn how to create slideshows for a project at work. I'm using Jquery to store the active image in a variable and then using the next() method to append the active class to that image and remove the active class from the previous image.
Now that all works fine when I just have the function running on it's own. The moment I use a document.ready() function however, it doesn't work. I was able to log some messages to the console within it, but for some reason I couldn't run this function. Each time the console tells me that the slideSwitch function hasn't been defined.
Can anyone help me understand this?
Cheers.
$(document).ready(() => {
function slideSwitch() {
var $active = $('.active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
}
setInterval( "slideSwitch()", 5000 );
});
#slideshow {
position: relative;
height: 400px;
width: 600px;
margin: 15% auto;
}
.slide {
position: absolute;
top: 0;
left: 0;
z-index: 8;
height: 100%;
width: 100%;
}
.active {
z-index: 10;
}
.lastActive {
z-index: 9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
<img class="slide active" src="https://picsum.photos/200/300?image=0" alt="image of toscana, slideshow image 1" />
<img class="slide" src="https://picsum.photos/200/300?image=1" alt="image of toscana, slideshow image 1" />
<img class="slide" src="https://picsum.photos/200/300?image=2" alt="image of toscana, slideshow image 1" />
<img class="slide" src="https://picsum.photos/200/300?image=3" alt="image of toscana, slideshow image 1" />
</div>
When the slideshow works it basically just times out the images to create the impression of a slideshow, swapping the z-index values a bit like a deck of cards.

You are passing a string to setInterval, so it is evaluated in the global scope and your function is scoped to the anonymous function you pass to ready (so it isn't found).
Never pass a string to setInterval, always pass a function.
setInterval(slideSwitch, 5000 );

Hover(), mouseenter(), mouseover(), etc jumping back and forth

I am trying to make a situation when you hover over an image then it will hide an image and show another. and the other way around when you hover out.
I have tried using all the various hover effects that comes to mind like mouseenter, mouseover, hover, etc.
They all cause the same problem. If i very firmly and quickly drag my cursor into the field of action then it will give me the desired effect. however if i slowly drag my cursor into the field of action then it will jump between the images a couple of times before finally stopping at the correct image.
this looks very unprofessional and i want it to be much more consequent doing this action so that no matter if i do it slow or fast then it will only jump once.
this is my script:
$("#DenmarkMap").hide();
$("#InfoBadge1").hover(function(){
$("#InfoLogo").hide("puff");
$("#DenmarkMap").show("puff");
}, function(){
$("#DenmarkMap").hide("puff");
$("#InfoLogo").show("puff");
});
this is a non working fiddle
https://jsfiddle.net/ydeLvxx2/
hope you guys can help me figure this out.

Here is a pure Javascript solution (no jQuery needed)
https://jsfiddle.net/uL0hpxbu/
Update: version with CSS3 "puff" effect: https://jsfiddle.net/230ta4tk/2/
Here is how the main script looks like:
var InfoBadge1 = document.getElementById("InfoBadge1");
var InfoLogo = document.getElementById("InfoLogo");
var DenmarkMap = document.getElementById("DenmarkMap");
InfoBadge1.addEventListener("mouseover", function() {
InfoLogo.classList.toggle("puff");
DenmarkMap.classList.toggle("puff");
});
InfoBadge1.addEventListener("mouseout", function() {
InfoLogo.classList.toggle("puff");
DenmarkMap.classList.toggle("puff");
});
and CSS part (just an example, change it as you want)
#DenmarkMap {
position: absolute;
left: 0;
top: 0;
transition: .5s all;
}
#InfoLogo {
position: absolute;
left: 250px;
top: 120px;
transition: .5s all;
}
#InfoBadge1 {
position: absolute;
left: 0px;
top: 120px;
}
.puff {
transform: scale(1.2);
opacity: 0;
}
and HTML:
<img id="InfoBadge1" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoBadge1" alt="" />
<img id="InfoLogo" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoLogo" alt="" />
<img id="DenmarkMap" class="puff" src="http://dummyimage.com/200x100/3c8036/ffffff&text=DenmarkMap" alt="" />

You should not bind your hover's mouseleave/mouseout event to the same image, because you've just hidden it.
Instead, consider binding the hover functions to the parent DOM node (a DIV for example):
<div id="images">
<img id="InfoBadge1" src="./Photos/DenmarkInfoBadge.png">
<img id="InfoLogo" src="./Photos/InfoLogo.png">
<img id="DenmarkMap" src="./Photos/DenmarkMap.png">
</div>
Your javascript can then become:
$("#DenmarkMap").hide();
$("#images").hover(function(){
$("#InfoLogo").hide("puff");
$("#DenmarkMap").show("puff");
}, function(){
$("#DenmarkMap").hide("puff");
$("#InfoLogo").show("puff");
});

image preloading javascript

My goal is to have an image preload while it is loading the actualy image, but I can't quite figure it out. The whole goal for this is that I have a slideshow that displays an image, but sometimes it is slow to load.. lol. Here's my HTML:
<div id="slideshow">
<img src="../images/slideshow/spacer.gif" width="100" height="100" id="myPicture" alt="some image">
</div>
Here's my javascript I have already:
window.onload = choosePic;
function choosePic() {
var myPix = new Array("../images/slideshow/sempiternal.png", "../images/slideshow/cross.png", "../images/slideshow/pentagram.png");
var randomNum = Math.floor((Math.random() * myPix.length));
document.getElementById("myPicture").src = myPix[randomNum];
}
And the CSS:
#slideshow {
height: 100px;
width: 100px;
position: fixed;
bottom: 20px;
right: 20px;
}

Doesn't seem like your function will preload anything. Apart from the random image selected which loads normally, the other images in the array will not be called at all.
You might want to check out JavaScript Preloading Images and Function to preload images? instead.

JIT Spacetree Save Labels as Image

I am using the JavaScript InfoVis Toolkit (http://thejit.org/) and am trying to print my expanded space-tree visualization using canvas.toDataURL("image/png"). While this works for my ForceDirected graph -- in the SpaceTree we have our labels in a separate DIV so when I print the image I get a blank graph.
Does anyone know how to print the labels? Any help would be greatly appreciated. I have attached a manual screenshot of the graph and the image we get when printing.
Yes - I did see the question here -- but it doesnt answer my question as we cannot use "Native" labels because we do some on the fly styling.
HTML Code:
<div id="infovis" style="height: 412px;">
<div id="infovis-canviswidget" style="position: relative; width: 800px; height: 412px;">
<canvas id="infovis-canvas" width=800" height="412" style="position: absolute; top: 0px; left: 0px; width: 800px; height: 412px;"></canvas>
<div id="infovis-label" style="overflow: visible; position: absolute; top: 0px; left: 0px; width: 800px; height: 0px;">
-- Labels are in here --
</div>
</div>
</div>
Manual Screenshot
Blank Printed Image

I sort of solved this issue by using html2canvas plugin. Basically, html2canvas will create a new canvas of a div element (with its children) which then you convert to a png image file with myCanvas.toDataURL("image/png"). This image will include your HTML labels. (Beware that html2canvas may not handle properly the labels' CSS properties.)
html2canvas(document.getElementById("diagram-container"), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
document.write('<img src="'+img+'"/>');
}
});

I should have posted this back in October when I found it -- but it slipped my mind. I was able to find an answer to my own question.
First check out the post here HTML 5 Canvas Save Image
Here is how I implemented the solution (get CanvasSaver function code from link above):
function SaveCanvas(canvasName) {
var canvas = document.getElementById(canvasName);
var imgUrl = null;
if (canvas.getContext) {
//Get alternative image URL for spacetree only
if (canvasName.indexOf("tag") == -1) {
imgUrl = $jit.ST.prototype.print.call();
}
var cs = new CanvasSaver('http://joeltrost.com/php/functions/saveme.php');
//cs.saveJPEG(canvas, 'image');
cs.savePNG(canvas, 'image', imgUrl);
}
}
Finally -- code your ASP button to call the SaveCanvas function:
<asp:ImageButton ID="ImageButton1" ImageUrl="Images/save_icon.png" ToolTip="Save Visualization" AlternateText="Save Visualization" OnClientClick="SaveCanvas('tagCloudVis-canvas');return false;" Style="left: 2px; top:3px; position:relative;" runat=server />

I know this thread is old. But, in case anyone is looking for this and do not want to use html2canvas. here is a solution for you guys.
Label: {
type: 'Native'
},
Add the above in your javascript code var st = new $jit.ST({ <here> })
To save it as a image, add the following code.
HTML:
<a onclick="getImage(this, 'filename.png', 'tree-id')">download tree</a>
JS:
function getImage(a, filename, id){
a.link = document.getElementById(id).toDataURL();
a.download = filename;
}
Happy Coding :)

identifying when items are in view and out of view on website

I am building some code to try and have something happen when an image is within view, then reset the counter when the image isnt in view and have that same thing happen again if the image returns to view.
I have the code working to recognize when the image comes into view and do something, but then when I add the code to reset the counter when the image is out of view the whole thing stops working.
html:
<div style="height: 2000px">
<img height="320px" width= "240px" id="pbr" src="http://i47.tinypic.com/33bztj8.jpg" alt="image 1">
<img height="320px" width= "240px" id="pbrglow" src="http://i48.tinypic.com/2ykduvl.jpg" alt="image 2">
<button id="button">click to reset</button>
</div>
css:
#pbr {
position: absolute;
top: 500px;
z-index: 0;
}
#pbrglow {
position: absolute;
display: none;
top: 500px;
z-index: 1;
}
#button {
position: absolute;
top: 850px;
z-index: 3;
}
javascript:
var y = $("#pbr").offset().top;
var eventsFired = 0;
$(window).scroll(function() {
var y = $("#pbr").offset().top;
var scrollY = $(window).scrollTop();
if (scrollY + 100 > y && eventsFired == 0) {
eventsFired++;
alert(eventsFired);
}
});
$("#button").on("click", function() {
var scrollYY = $(window).offsetTop();
if (eventsFired == 1) {
alert("happened");
eventsFired = 0;
}
}
Here is the jsfiddle with the code
Once I remove the code starting in $("#button")... the code works, but with this in the code doesnt.
P.S. this is a website I need to work on iOS.

That's because your #button click handler is throwing an error:
Uncaught TypeError: Object [object Object] has no method 'offsetTop'
You can see it on the jsFiddle page if you have a console open (you can enable the console for mobile Safari via Settings->Safari->Developer).
That problem is that $(window) doesn't have an offsetTop() method. If you get rid of that line (and you don't need it anyway, since you're never using scrollYY), everything works.