Hide and show images (or other) by javascript

Using JavaScript with Hype
41

Thanks for those examples and suggestions - I think that I can use this to solve my problem. I will definitely be starting my reading about Javascript over the weekend!

42

Mark has a solution in another thread showing that you can toggle the ‘display’ function, I’ll borrow his expertise…

var square2 = hypeDocument.getElementById("square2")

square2.style.display = (square2.style.display != 'none' ? 'none' : 'block' );
43

Ive been experimenting with using Javascript for similar issues. My main concern was to show a hidden element on scroll, which other posts have hinted at being very complex
In fact there are simple ways with javascript. Main problem for me was hiding element on scene load initially. After trying this through CSS I found best way was simply to make element transparent (0 opacity) in Hype first then javascript (below) triggers showing element:

	function yScroll(){
	var box = document.getElementById ('box3');
    var ypos = window.pageYOffset;
 
   if(ypos > 200) {
   box3.style.opacity = "1";
   }
   else{
   box3.style.opacity = "0";
 }
	
}
	window.addEventListener("scroll", yScroll);
2 Likes