I am trying to promote an advertiser and when the user clicks on the advertiser link, it redirects 5-6 times through different links (for tracking purposes) before reaching the advertiser's website.
Is it possible to show some kind of loading icon on the page on which the user clicks on the link and then redirect the user to the advertiser's website when the link is completely loaded?
I searched and found this code, but I am not sure how to implement this in my case:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
//paste this code under the head tag or in a separate js file.
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
<div class="se-pre-con"></div>
Since it redirects to someone elses website, you cannot change the content of those websites to have a loading icon.
You could load it in an iframe and when the iframe has not changed its location in, say, 5 seconds, show the iframe as the whole page and hide the loading icon. You can also set the target to '_top' so it changes the url in the browser whenever you click on a link.
Click!
<iframe id="preload-frame" style="position: absolute; z-index: 9999; top: 0; left: 0; bottom: 0; right: 0;" hidden>
<script type="text/javascript">var iframe=false;</script>
</iframe>
<div class="se-pre-con" hidden></div>
var frame = document.getElementById('preload-frame');
onclickConstructor = function (href) {
return function() {
document.getElementsByClassName('se-pre-con')[0].removeAttribute('hidden');
var timer;
var cleanup = function() {
frame.removeAttribute('hidden');
frame.setAttribute('target', '_top');
document.getElementsByClassName('se-pre-con')[0].setAttribute('hidden', 'true');
}
frame.onload = function() { // Whenever the iframe (re)loads the whole page
if (timer) {
(clearTimeout || clearInterval)(timer);
}
timer = setTimeout(cleanup);
}
frame.src = href;
};
}
if (iframe !== false) {
var trackingLinks = document.getElementsByClassName('tracking'), function(el);
for (var i = 0; i < trackingLinks.length; i++) {
el.onclick = onclickConstructor(el.href);
el.href = 'javascript:void(0);';
};
}
Related
How can we move the iframe behind the div.
Here an sample below, I want to show "custom_title" div in front of the iframe.
It's initially showing but when we click the fullscreen, the "custom_title" div eventually gone.
Someone knows how to achieve this? I have here the codepen
Note: fullscreen icon does not display in the snippet, i don't know why. But you check out the codepen.
.title_container {
position: fixed;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
top: 10%;
background-color: white;
color: black;
}
<div>
<iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="true" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="0vid1.mp4" data-ready="true"></iframe>
<div class="title_container">Custom Title</div>
</div>
Fullscreen move pulls the video out of the document for the purposes of rendering. This leaves the text you positioned on top of it behind.
To achieve this you would need to make the div fullscreen and not the video (and then you'd need to format the video appropriately to get it to full the div).
I doubt you can override Vimeo's button to achieve that, so you'd need to add your own.
Full Screen option is disabled below so that Users use the button to make the iframe full screen.
To make the iframe full screen and show the div you can use:
Note: Try saving and running the code locally on your device as Stack Overflow's compiler is facing issues runnning it.
//https://jsfiddle.net/jlam55555/o5njka95/6/
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function makeFullScreen() {
document.getElementsByTagName("iframe")[0].className = "fullScreen";
var elem = document.body;
requestFullScreen(elem);
}
.title_container {
position: fixed;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
top: 10%;
background-color: white;
color: black;
}
button{
position: fixed;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
bottom: 20%;
}
iframe.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div>
<!-- Full Sceen option is disabled-->
<iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" disablefullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="0vid1.mp4" data-ready="true"></iframe>
<div class="title_container">Custom Title</div>
</div>
<button onclick="makeFullScreen()">Make Full Screen</button>
Or you can disable the controls and use the Vimeo Player.js to add more functionalities and I ,also, think that the problem can be solved without hiding the full-screen option and using the button to make the iframe full screen, by the Vimeo Player.js, but that was complicated, so, you can try, but I am not sure.
I'm afraid specifically in this case there is no way to achieve this, because of how fullscreen api is working. If you want some-element to display in fullscreen mode you need this some-element to be inside of DOM element which is displaying in fullscreen.
In your case you need .title_container to be inside vimeo player's element, but you could not put it inside iframe unless there is no specific api to do this.
Read more about fullscreen on MDN https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide
Simple example of how it can be done by adding custom fullscreen button.
Try to run on your local environment, fullscreen seems to be not working on stackoverflow:
let $btn = document.querySelector('#toggle'),
$iframe = document.querySelector('iframe'),
$video = document.querySelector('#video');
$btn.addEventListener('click', function() {
if (document.fullscreenElement) {
document.exitFullscreen();
return;
}
$video.requestFullscreen();
})
document.addEventListener('fullscreenchange', (event) => {
if (document.fullscreenElement) {
$btn.innerHTML = 'Exit fullscreen'
} else {
$btn.innerHTML = 'Fullscreen'
}
});
#video {
position: relative;
display: inline-flex;
}
#video:fullscreen iframe {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.title_container {
position: absolute;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
top: 10%;
background-color: white;
color: black;
}
#video:fullscreen button {
position: absolute;
}
button {
position: absolute;
bottom: 4px;
right: 24px;
}
<div id='video'>
<iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; picture-in-picture" title="0vid1.mp4" data-ready="true"></iframe>
<div class="title_container">Custom Title</div>
<button id='toggle'>Fullscreen</button>
</div>
I am using an iframe tag to play a 9:16 aspect ratio video from my google drive. The iframe is wrapped around a div and the div is styled so that there are no black bars. The video is maintaining its aspect ratio but the thumbnail is not. The thumbnail covers all the wrapper's height but not the width. I want the thumbnail to also maintain the aspect ratio of 9:16.
Also, I did not add a custom thumbnail.
.potrait_9by16
{
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 177.777%; /* 9:16 Aspect Ratio*/
}
.potrait_9by16 iframe
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
<div className="potrait_9by16">
<iframe
width="100%"
height="100%"
frameborder="0"
src={videoObject.src}
allow="fullscreen"
></iframe>
</div>
Here is an image of the wrapper
Try below at https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video:
<!DOCTYPE html>
<html>
<body>
<style>
div.outer { overflow: hidden }
div.outer > div.inner { position: relative; margin: 0 -109.7283%; padding: 88.8888888% 0; overflow: hidden }
div.outer > div.inner > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
</style>
<div class="outer">
<div class="inner">
<iframe width="100%" height="100%" src="https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview">
</iframe>
</div>
</div>
</body>
</html>
It may mess up the video playback, though. The video controls (progress-bar etc.) get cropped when playback starts.
Replace the code there with the one I have provided.
I just checked your code, and looks like what you need is:
.x { overflow: hidden }
.neg { position: relative; margin: 0 -109.7283; padding: 88.8888888% 0 }
.neg > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
and use only x class for outer div, only neg class for inner div. That should probably do it.
I thought about removing the negative margin on playback, and was experimenting with something along those lines, but didn't get around to completing it. It should work to some extent, but what I found was that the black bordered thumbnail may be displayed for a short time before the playback starts (at least the way I tried it). If that's Ok, you could try that method. What I thought of was to display an invisible div (transparent overlay) covering the iframe that can capture a click and switch the iframe src to autoplay=1 URL. See if you can get that to work. If I have some time, I may look further into that.
I was adding a div using JavaScript with the same style as the iframe, just after the iframe:
.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
If this div is added last, it will already be topmost. Otherwise, use z-index.
Then handle the 'click' event on the div.
The above div overlay technique has it's limitations. The below technique may be better:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Player</title>
<div id="player"></div>
body { background: #efe; padding: 2em; color: #575 }
h1:first-child { margin-top: 0 }
.player, #player { overflow: hidden }
.player > div, #player > div { position: relative; padding: 88.88888% 0; overflow: hidden }
.player video, .player iframe,
#player video, #player iframe
{ position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
.player:not(.playing) > div, #player:not(.playing) > div
{ margin: 0 -109.7283% }
((W, D) => {
let $ = a => document.getElementById(a)
class Player {}
Player.play = (id, url) => {
let p = $(id)
, f = D.createElement('iframe')
, d = D.createElement('div')
f.src = url
f.setAttribute('frameborder', 0)
f.height =
f.width = '100%'
f.addEventListener( 'mouseover', e => f.dataset.overMe = 1 )
f.addEventListener( 'mouseout', e => delete f.dataset.overMe )
W.addEventListener( 'blur', e => {
if (f.dataset.overMe === '1')
setTimeout(a => p.classList.add('playing'), 1000)
} )
p.innerHTML = ''
d.appendChild(f)
p.appendChild(d)
}
W.Player = Player
})(window, document);
Player.play('player', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
See if you can use this latest update with multiple iframes...
Your issue could be because you may be using an id (maybe the same id) with all player divs. When using multiple player divs, you need to use unique ids and use class="player" for the divs instead of id="player":
<div id="player-1" class="player"></div>
<div id="player-2" class="player"></div>
<div id="player-3" class="player"></div>
If it still doesn't work, show me a demo (on your site, maybe), and I'll take a look. Call the play method with the id like
Player.play('player-1', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
Player.play('player-2', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
I have an image gallery which has modals for each image.
The gallery and modals are created in javascript using template literals.
The modals pop ups are different html files imported using iframe.
For some reason the modals won't close when clicking outside.
I tried creating the iframes inside the html instead of using template literals and I had no problems in that case, just when using javascript for making them.
Here is an example of what is happening.
THIS GITHUB EXAMPLE
This is the modal function used in both cases:
function modalLinks(tempgal){
let btnId = "btn" + tempgal.imgn;
let modId = "id" + tempgal.imgn;
let getBtnId = document.getElementById(btnId);
let getModId = document.getElementById(modId);
getBtnId.onclick = function() {
console.log('click: btn: ' + this.id + ', modal: ' + getModId.id);
getModId.classList.toggle('show-popup');
}
/* to dispose the popup on click */
getModId.onclick = function() {
console.log(this.id +" it's OK");
this.classList.toggle('show-popup');
}
}
The moon and its modal are created inside of the HTML.
The other two images (sorry if they don't show properly) are created using template literals, and, as you can see (if you already saw the example), the moon modal works fine but the other two don't.
It'll be great if someone please tell me what is happening.
Thanks for advance.
Ok, I just experimented changing things and moving others and got the solution.
When making modals with external html's and importing them with iframe, putting the iframe within a div is the best choice.
The iframed modal shoul look like this
<div id="modalid" class="modal-window">
<iframe class="modal-wrap" src="thelink" frameborder="0"></iframe>
</div>
the css like this
.modal-window{
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
}
.modal-wrap{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 50%;
height: 50%;
}
and the html imported must have this class
.modalcontent{
position: absolute;
z-index: 3;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%
}
I'm calling images from a folder at random and putting them in HTML img tags using PHPs glob function.
I'm then using JS to read the URLs and flip the CSS background image of div#wrapper, 300ms for each image. The images should be preloaded as they have HTML img tags. They are being hidden from the user using the following CSS (which should not stop preloading as "display: none" does):
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Nonetheless I'm experiencing the images flashing inconsistently / at different rates. It seems that larger file size images cause this to happen, but the images should be preloaded so I'm not sure why this is occurring.
My JS looks like this:
var slides = [];
$('.slide').each(function(index){
slides.push($(this).attr('id'));
});
var slide = 0;
function changeImage(){
if (slide < 10){
var currentSlide = $("#" + slides[slide]);
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-image', 'url("' + currentSlide.attr('src') + '")');
slide++
} else {
$('#headline').removeClass('visuallyhidden');
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-color', '#ef3308');
}
}
setInterval(changeImage, 300);
The site is http://robertirish.com.
Is there a better way to do this / can anyone explain why it's happening?
I'm going to guess it's a loading issue: either that CSS is interfering with preload or else it's being treated differently because you're loading it into the background of another element rather than using the img that you preloaded. Instead, I would load all the images inside the div, absolute-positioned on top of each other, and then just remove them one by one:
CSS:
#wrapper{
position: relative;
}
#wrapper img{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
HTML:
<div id="wrapper">
<img src="image1.png">
<img src="image2.png">
<!--etc-->
</div>
JS:
$(document).on('ready', function(){
var images = [];
$("img", "#wrapper").each(function(){
images.push(this);
});
var timer = setInterval(function(){
if (images.length)
$(images.pop()).remove();
else
clearInterval(timer);
}, 300);
});
I have created a simple webpage with several images, but when a user visits it, the browser loads the images one at a time, instead of all at once.
I want instead to first show a "loading" gif in the center of the page and then, when all the images are downloaded, show the entire webpage to the user at once..
How can I do this?
You can show a loader image by putting it somewhere im <img> tag and use below js code to hide it later on when all images are shown:
window.onload = function(){
var el = document.getElementById('elementID');
el.style.display = 'none';
};
Where elementID is supposed to be the id of loader element/tag.
The load event fires when all images/frames/external resources are loaded, so by the time that event fires, all images are loaded and we therefore hide the loading message/image here.
Edit: I defer to Keltex's answer. It's a much better solution. I'll leave mine here for posterity (unless I should delete the content and my answer entirely? I'm new here).
Another solution, which was used fairly frequently in the past, is to create a landing page that preloads all of your images. When the preloading is done, it redirects to the actual site. In order for this to work, you'd need to get the URLs to all of the images you want to load, and then do something like this:
# on index.html, our preloader
<script type='text/javascript'>
// add all of your image paths to this array
var images = [
'/images/image1.png',
'/images/image2.png',
'/images/image3.png'
];
for(var i in images) {
var img = images[i];
var e = document.createElement('img');
// this will trigger your browser loading the image (and caching it)
e.src = img;
}
// once we get here, we are pretty much done, so redirect to the actual page
window.location = '/home.html';
</script>
<body>
<h1>Loading....</h1>
<img src="loading.gif"/>
</body>
You can do this with JQuery. Say your page looks like this:
<body>
<div id='loader'>Loader graphic here</div>
<div id='pagecontent' style='display:none'>Rest of page content here</div>
</body>
You can have a JQuery function to show pagecontent when the entire page is loaded:
$(document).ready(function() {
$(window).load(function() {
$('#loader').hide();
$('#pagecontent').show();
});
});
HTML
<div id="preloader">
<div id="loading-animation"> </div>
</div>
JAVASCRIPT
<script type="text/javascript">
/* ======== Preloader ======== */
$(window).load(function() {
var preloaderDelay = 350,
preloaderFadeOutTime = 800;
function hidePreloader() {
var loadingAnimation = $('#loading-animation'),
preloader = $('#preloader');
loadingAnimation.fadeOut();
preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>
CSS
#preloader {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
position: fixed;
background-color: #fff;
}
#loading-animation {
top: 50%;
left: 50%;
width: 200px;
height: 200px;
position: absolute;
margin: -100px 0 0 -100px;
background: url('loading-animation.gif') center center no-repeat;
}
Create a div with class name preloader and put a loader inside that div.
style the class preloader just like below
.preloader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: white;
/* background-color is would hide the data before loading
text-align: center;
}
Html
<div class="preloader">
Any loader image
</div>
Jquery
$(window).load(function(){
$('.preloader').fadeOut(); // set duration in brackets
});
A simple page loader is ready....