Pop up image onclick covering whole site - javascript

I need to pop up a whole background on click.
It could be done something like an image on the center of page making a whole website less visible and changing after few secs to other image or covering whole web page with my image transforming after few second to next whole web page image. After click everything back to normal.
<div id="right_center"><img style="cursor: pointer;" onclick='knee_fun()' id="iImg" src="img/knee.png" ></div>
<script>
var time = 3000;
var picNo = 0;
var pics = new Array
(
'img/urazy_1.png',
'img/urazy_2.png',
'img/empty.png'
);
function knee_fun()
{
document.getElementById('iImg').src = pics[picNo++];
if (picNo >1 ) picNo =2;
setTimeout('knee_fun()', time);
clearTimeout('knee_fun()');
}
</script>
I made this= cycling 2 images but how to position it on the center of the page and not reorganizing whole page? I need also to make less visible all the page content during this images cycle. (it should end after click).
Other option is to make a images cycle which contains full page but it need to cover whole web page. and after click back to normal.
ow in addition how to add second function with parametr?
<div id="zoom" onClick="document.getElementById('song').play()">
<audio id="song" src="nanana.mp3"></audio>
</div>
when i add: onclick="doc~(); injuries_change();" id="iImg"> second isnt working

Related

Selenium: Scroll to the bottom of a dynamically loading div

I'm trying to use selenium to scrape a webpage, and one of my elements dynamically loads a finite amount of content (IE not like twitter where you can just keep scrolling) when I scroll to the bottom of it.
Now I could simply do something like
var scrollbar = document.getElementsByClassName("dataTables_scrollBody")[0]
var last = -1;
var curr = scrollbar.scrollHeight;
while (curr != last) {
last = curr;
scrollbar.scrollTop = curr;
curr = scrollbar.scrollHeight;
}
And in fact, that's what I'm doing. However, the actual load operation on the data table takes so long that this script exits by the time the load finishes, meaning I only ever get halfway down the scrollbar.
What's a good way to make sure that I've scrolled all the way to the bottom of the scroll bar?
This question is different from Scroll to bottom of div? because I don't have access to the raw HTML, and it's different from Scroll Automatically to the Bottom of the Page because my page is dynamically loading content.
Perhaps I could force an ajax load of all the content in the panel, but I don't know how to do that, and I don't want to wade through miles of minified code to figure out how the page owner does it.
Here's an ugly solution:
scroll_elem = document.getElementsByClassName("dataTables_scrollBody")[0];
table_elem = document.getElementsByClassName("dataTable")[0];
function scrollToBottom() {
scroll_elem.scrollTop = scroll_elem.scrollHeight;
};
new ResizeObserver(scrollToBottom).observe(table_elem)
Basically how this works is we have an object watching the element we want to scroll to the bottom of. If and when it resizes, it instantly scrolls to the bottom of the new window. This works well enough, then you could use the sleep function KunduK recommended in comments to wait for the process to complete

When a GIF is loaded to the page, all other Gifs with the SAME URL start playing from beginning

I'd like to make GIF's only starting to play once they are actually on the screen. I came up with a small JS Script that basically replaces a static image (the first frame of the gif) with the actual gif, as soon as the image is on the monitor.
I can't really change that much in the HTML section since i'm working in a CMS.
HTML:
<div class="lazy">
<img src="firstframe.png">
<img src="gif.gif">
</div>
JS:
var lazies = $('.lazy');
lazies.each(function(){
var src = $(this).find('img').eq(1).attr('src');
if($(this)[0].offsetTop <= window.innerHeight && !$(this).hasClass('lazyactive')){
$(this).find('img').eq(0).attr('src', src);
$(this).find('img').eq(1).hide();
$(this).addClass('lazyactive');
}
})
window.onscroll = function(){
lazies.each(function(i){
if(window.pageYOffset + window.innerHeight >= $(this)[0].offsetTop && !$(this).hasClass('lazyactive')){
var src = $(this).find('img').eq(1).attr('src')
$(this).addClass('lazyactive');
$(this).find('img').eq(0).attr('src', src);
$(this).find('img').eq(1).hide();
}
})
}
The code works fine as long as i have different GIF's on the page.
But as soon as i have the same GIF multiple times on the page, i have a problem. Every time one of the PNG get's replaced with the GIF (by scrolling down), every GIF starts to play from beginning.
I'm not sure if that's normal behaviour of the browsers or the error is in my script..

Jquery preloader animation works but is it a gimmick or is it actually calculating site load?

I am using [this] pre-loader for my personal portfolio.
var h = window.innerHeight;
$('.page-overlay').css('height',h);
var al = 0;
function progressSim(){
document.querySelector('.page-overlay>.text>p').innerHTML =
al+'%';
if(al>=100){
clearTimeout(sim);
}
al++;
}
var sim = setInterval(progressSim,50);
$('.body, .navbar').hide();
setTimeout(function(){
$('.page-overlay').hide();
$('.body,.navbar').show();
},5500);
HTML is like this:
<body>
<div class="page-overlay">
<div class="text"><p></p></div>
<div class="paper-progress-bar"></div>
</div>
<! header, followed by container divs and loads of paragraphs>
</body>
Also, the script is before the closing tag of the body. The animation works fine, it goes from zero to hundred on the page overlay then it shows the body beneath it. But there are two problems here:
I am not sure if this script is actually waiting for the body to load. Note that I am right now coding on local and I don't know if there is any other way to test this. When the website goes live, will this script actually show the percentage of page load? or is it just a simulation or wait time?
I've added the ('.body, .navbar').hide(); but it doesn't work. To add to the gimmick I've set the page-overlay to fixed position with z-index set to high. But the scroll bar is active and the body behind also active while the page is loading. If I am setting the body class display to none it's hiding everything including the page-overlay.
Any help would be appreciated. Thanks in advance. This is my first question on stackoverflow and first time building a website so apologies for any mistakes in question.
p.p.s. I'm using this as preloader https://codepen.io/sanjay8bisht/pen/wKPqVd
I'll start from the second question. The body and navbar hide doesn't work, because you added a "." before the body string.
And the first question:
If we explore the script:
get the window's height.
var h = window.innerHeight;
set the overlay over the page with the height of the page height
$('.page-overlay').css('height',h);
create a variable for keeping the 0 to 100 counter:
var al = 0;
create a function which simulates the page load, later we'll use it
function progressSim(){
show the load counter in a paragraph element on the overlay
document.querySelector('.page-overlay>.text>p').innerHTML = al+'%';
if the value reaches 100 or overrides 100:
if(al>=100){
stop the loop function.
clearTimeout(sim);
}
increase the page load counter.
al++;
finish the function.
}
Now the real part:
repeat the above function with 50 milliseconds interval, so counting from 0 to 100 would take: 50 * 100 : 5000 milliseconds (5 seconds).
var sim = setInterval(progressSim,50);
at the same time, hide the body and the navbar:
$('.body, .navbar').hide();
then after 5500ms (5.5secs) elapses, hide the overlay, and show the body and navbar again.
setTimeout(function(){
$('.page-overlay').hide();
$('.body,.navbar').show();
},5500);
What do you think? It's just an animation. Not a real loader.
You may look at this one: http://github.hubspot.com/pace/docs/welcome/ for something more reliable.

Images not stacking correctly

I've been making a simply jellyfish game on a website where you must prevent jellyfish from reaching the top by clicking on them and I've run into a problem I cant figure out. You are able to spawn jellyfish in the game (for now) and they will randomly position themselves across a playing field and they should stack on top of each other as each one has a seperate z-index. They are randomized by randomizing their left margins (This works fine). However, when I click on a jellyfish to delete it, all the other images jump to the left, as if one part of the jellyfish wasn't allowed to stack at all. Here is the current js method that controls the spawning of a jellyfish. Thank you guys in advance :)
var spawnJelly = function(jellyType) {
//57 is the width of the jellyfish picture.
var jelliesSpawnPosition = Math.random()*1000 - 57;
jelliesSpawned++
var newJelly = document.createElement("img");
newJelly.setAttribute('src', "https://www.googledrive.com/host/0B-IaOP2CvHbffk56ZWFrUExfX1ZVNWZ0RmRmYU0tMHVoUHVDZzJ1NzhRV2l0c01kSENnNWc/jelly"+jellyType+".png");
document.getElementById("playingField").appendChild(newJelly);
newJelly.addEventListener("click", deleteJelly);
// jelliesSpawned is a global variable
newJelly.setAttribute('style', 'left: '+jelliesSpawnPosition+'px; z-index: '+jelliesSpawned);
console.log("jellyfish created!");
};
Here is the method for deleteJelly:
function deleteJelly() {
this.parentNode.removeChild(this);
console.log("Jellyfish removed!")
}
Here is the link to the current website I am making this jellyfish game on.
http://atestingsite.x10host.com/cgi-bin/jellyfishGameC.html
You are using position relative, and that means the images take the physical space and will cause page reflow when you remove them. You should change your positioning to absolute (and set the jelly fish container to position relative per Jan).

Large images prevent div from fading in

I've got this setup:
<div id="container1">
<!-- content from one section -->
</div>
<div id="container2" style="display:none;">
<div id="sub-container">
<img src="image1.png" />
<img src="image2.png" />
<!-- 20 or so images sit here -->
</div>
</div>
container1 is initially displayed. On document.ready, all but the first four images are hidden away in order to build a carousel of sorts.
The user clicks a button, container1 fades out and container2 fades in.
The first time the user clicks the button, container2 doesn't fade in, instead it jumps straight to visible. The second time, fade in works as normal.
The images involved are pretty substantial (~10MB total size) but that hasn't been an issue so far as the page is meant to be viewed locally. The fact that the issue doesn't appear if I've got one or two images tells me the browser is struggling to both load the images and fade in at the same time. The second time it loads, the images have been cached and fade in as normal.
I tried a form of preloading like so:
/* take the div outside the viewport but still render it */
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
var cacheContainer = "<div class='hide'></div>",
$images = $("#sub-container img");
// move the images to the container
$(cacheContainer).appendTo("body").append($images);
// hopefully 500ms would be enough for the images to render?
setTimeout(function () {
images.appendTo("#sub-container");
doGallery(); // build carousel
},500);
... this however leads to the same issue - container2 pops in instead of fading the first time round, and works perfectly fine afterwards.
Any ideas?
As requested, here's what I use to hide/show the containers:
$(document).ready(function() {
var $currentTab = $("#container1"),
$newTab,
newTabName;
// a couple of more unrelated setting up functions go here
doImageCaching(); // the function I've got above
$("#container2").hide();
$("#tab-links>a").click(function(e) {
e.preventDefault();
// probably a bit cheeky doing it this way but oh well
newTabName = $(this).attr("id").replace("-btn", "");
if($currentTab.attr("id") === newTabName) {
return;
}
$newTab = $("#" + newTabName);
$newTab.stop(true, true).fadeToggle(200);
$currentTab.stop(true, true).delay(100).fadeToggle(200);
$currentTab = $newTab;
$newTab = null;
});
});
Here's #tab-links for reference:
<div id="tab-links">
<a id="container1-btn" href="#">show container 1</a>
<a id="container2-btn" href="#">show container 2</a>
</div>
Edit 2 So I just noticed something new: so the second time I switch to container2 it fades in as normal. If I wait 10 seconds or so, and then try and switch to container2 again, the problem reappears.
So it seems to me loading the DOM has nothing to do with this, and I'm dealing with Chrome's internal memory. So it loads the images, and then "forgets" about them when they hide again. Yikes.
Does anyone have any ideas as to how to keep the browser from "forgetting" the images, or is that a direction I shouldn't really take?
So I ended up converting my ultra-high quality PNGs to ultra-high quality JPGs - this led to an approximately 20-30% reduction in file size with barely any reduction in apparent quality. My problem disappeared, too.
The moral of the story is: even if you're developing a page that isn't going online, you still need to optimize your images.
Thank you all for your help.

Categories