how to delete image on an iframe, play ? with JavaScript - javascript

I try to do this, put an image on an iframe, when I click on it, I see a gif image (upload) and at the end I show the iframe with JavaScript, I try to do it with this code but I can not get the image deleted, it just stays the gif image.
I would like to do something like this:
https://sv.danimados.com/gilberto.php?id=cHJsZ0MwWXFDb2h1eGJrcUI0WFlsWnYyN3puT1BzbWtqSDlrWlZ3R3BQNGI3V3RjOWNDZ3kwWStFVDVNQmx1Ng==&sv=UploadYour
<html>
<head>
<meta charset="UTF-8">
<meta name="googlebot" CONTENT="noindex" />
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.container {
height: 100%;
overflow: auto;
}
.section {
position: relative;
width: 100%;
}
.section p {
margin: 0;
}
/* sizes */
.fit {
height: 100%;
}
.wide {
height: auto;
padding-top: 56.25%;
/* 9 / 16 = 0.5625 */
}
.wide .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* centering */
.t {
display: table;
width: 100%;
height: 100%;
}
.tc {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.cargando {
color: #fff;
font-family: Arial;
position: relative;
font-size: 20px;
z-index: 1;
font-weight: bold;
top: 35%;
cursor: pointer;
}
.cargando img {
width: 150px;
height: 150px;
}
.theplayer {
z-index: 10000;
}
.play-background:hover {
transition: all .6s;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.play-background {
cursor: pointer;
}
iframe {
position:absolute;top:0;left:0;width:100%;height:100%;display: none; }
</style>
</head>
<body class="play-background">
<div class="container">
<div class="section fit">
<div class="t">
<div class="tc">
<div class="cargando">
<img class="load" style="display: none;" src="https://i.imgur.com/Be2Lu9R.gif"><img class="go-boton" src="https://sv.danimados.com/images/play_button.png"><div class="server">Servidor: <b>NeoPen-O-SV</b></div></div>
<iframe src="https://sendvid.com/embed/0bmbrf7a" width="100%" height="100%" z-index="1000" style="border: none"></iframe>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$( ".play-background" ).click(function() {
$(".go-boton").hide();
$(".load").show();
$(".theplayer").show();
$(this).removeClass("play-background");
});
</script>
</html>
As I would do when I clicked, I saw the gif image of loading, disappear and show me the iframe.

A loading gif should appear when the iframe is not entirely loaded. If you have slow loading iframes a loading gif is a good thing to have, but having an iframe load with minimal or no latency is better.
Does your page have multiple iframes?
If so, you should reassess your layout. Iframes are the slowest elements to load and rendering multiple iframes will compound loading times.
If not, you should reassess the content of the iframe itself. If the content is a video, try another service to upload and play the video like YouTube or your own site, etc.
Can you edit the page in the iframe?
If so, then establish communication between the parent page (ie the page you are presently located on) and the child page (ie the page within the iframe). Go to this page for details on how to detect when a child page within an iframe is loaded.
If not, you'll need to consider alternatives as described in this post.
Once you have determined that the iframe is loaded, remove the loader gif and reveal the play button image.
Delegate the click event to the play button image and have the callback function remove the play button image and reveal the iframe.
$(play-button-image).on('click', function(e) {
$('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
$(this).fadeOut().removeClass('active');
$('iframe, figcaption').fadeIn().addClass('active');
e.stopPropagation();
});
If a "double clicking" behavior occurs (ex user clicks the button once and callback function is called but quickly reacts to a second ghost click), add e.stopPropagation(); to the end of the callback function to prevent event bubbling from triggering any other event handlers registered on ancestor tags.
Add/remove a special class (ex .active) that represents the state of a tag (ex hide or show)
Apply a similar event handler that will remove the iframe and reveal the play button image. In the demo the user clicks the figcaption.caption (see the last code block in demo).
Note: In the demo a setTimeout() is called to simulate the iframe loading slowly. Also, due to SO sandbox rules certain features are blocked (figcaption.caption doesn't show, video isn't responsive, etc.). To run with full functionality copy and paste the source to a text file, save with the .html (alt .htm) extension to file name, and open in a browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.5);
}
main {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
margin: 5vh auto;
width: 100%;
height: 100%;
overflow: hidden;
}
.hframe {
margin: 0 auto;
padding-top: 56.25%;
width: 100%;
height: auto;
position: relative;
}
iframe {
min-width: 100%;
min-height: 100%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.hframe img {
width: 150px;
height: 150px;
position: absolute;
z-index: 0;
top: calc(50% - 75px);
left: calc(50% - 75px);
cursor: pointer;
}
.load:hover {
cursor: not-allowed;
}
.caption {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
overflow: hidden;
text-align: center;
font: 100 small-caps 1.2rem/1.2rem Verdana;
color: cyan;
background: rgba(0, 0, 0, 0.2);
}
.go:hover,
.caption:hover {
transition: all .6s;
transform: scale(1.1);
cursor: pointer;
}
.active {
display: block !important;
z-index: 1000;
}
</style>
</head>
<body>
<main>
<figure class="hframe">
<img class="load active" src="https://i.imgur.com/Be2Lu9R.gif">
<img class="go" src="https://sv.danimados.com/images/play_button.png" style="display: none;">
<iframe src="" frameborder="0" allowfullscreen style="display: none;"></iframe>
<figcaption class='caption' style="display: none;"><a>Server: <b>NeoPen-O-SV</b></a></figcaption>
</figure>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).on('load', loading);
function loading(e) {
setTimeout(function() {
$('.load').fadeOut().removeClass('active');
$('.go').fadeIn().addClass('active');
}, 2500);
}
$('.go').on('click', function(e) {
$('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
$(this).fadeOut().removeClass('active');
$('iframe, .caption').fadeIn().addClass('active');
e.stopPropagation();
});
$('.caption').on('click', function(e) {
$('iframe, .caption').fadeOut().removeClass('active');
$('.go').fadeIn().addClass('active');
$('iframe')[0].src = '';
e.stopPropagation();
});
</script>
</body>
</html>

If I understand correctly, you want the element in front of the iframe to disappear, and then remove class command is not working in the script. Perhaps you are referencing the wrong object to remove the class from?
Instead of
$(this).removeClass("play-background")
Try
$("body").removeClass("play-background")

Related

How would I create a smooth "slide" which moves items on and off screen?

CSS:
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#sidebar {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 20px 5px;
grid-template-areas: "1"
"box"
"3";
height: 100%;
width: 275px;
background: black;
}
#sidebar-box {
grid-area: box;
height: 20px;
width: auto;
margin: 0 12.5px 0 12.5px;
background-color: white;
}
#sidebar-open-button {
margin-top: 40%;
height: 50px;
width: 50px;
background-color: blue;
}
#sidebar-close-button {
height: 15px;
width: 15px;
background-color: red;
margin-left: 5px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="sidebar">
<div id="sidebar-box">
<button id="sidebar-close-button"></button>
</div>
</div>
</body>
</html>
What Im looking for is whenever you press the "sidebar-close-button" button the "sidebar" and its contents slowly (over 0.5s) move off screen to the left and while that is moving off screen the "sidebar-open-button" does the exact same thing but to the right (comes onto screen, sliding in from the left). Also when "sidebar-open-button" is sliding onto screen I want it to be on top of "sidebar" and its contents.
The end product of pressing "sidebar-close-button" should look like just having your html like this:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button id="sidebar-open-button"></button>
</body>
</html>
Any help is appreciated, even links to some documentation because I currently have no idea how to do this.
You can try this.
I wrapped everything into a div that includes your opener button and your visible sidebar with the closer button so everything about the sidebar are contained together.
Then I simply added click event listeners to your buttons to toggle the opened and closed classes on the sidebar-container.
Then I set the CSS so that when the .sidebar-container is .opened, it hides the #sidebar-open-button and shows the #sidebar-box, and when it is .closed, it shows the #sidebar-open-button and hides the #sidebar-box. The CSS transition provides the animation.
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
const container = document.getElementsByClassName('sidebar-container')[0];
container.querySelectorAll('#sidebar-open-button, #sidebar-close-button').forEach((elem) => {
elem.addEventListener('click', (event) => {
container.classList.toggle('opened');
container.classList.toggle('closed');
});
});
}
};
.sidebar-container {
height: 100vh;
width: 50vw;
position: relative;
}
#sidebar-open-button {
position: absolute;
top: 0;
left: 0;
transition: all 0.5s;
}
.opened #sidebar-open-button {
left: -100%
}
#sidebar {
background-color: cyan;
height: 100%;
transition: all 0.5s;
}
.closed #sidebar {
transform: translateX(-110%);
}
<div class="sidebar-container closed">
<button id="sidebar-open-button">Open</button>
<div id="sidebar">
<div id="sidebar-box">
<button id="sidebar-close-button">Close</button>
</div>
</div>
</div>
You may be looking for CSS animations.
As in this answer, you can add a class to an element apon a javascript event to trigger an animation.
This adapted code may help.
let sideBarRevealed = false;
button.on("click",function () {
if(!sidebarRevealed) {
//If not revealed then reveal
if(sideBar.hasClass("animateHide")){
sideBar.removeClass("animateHide")
}
sideBar.addClass("animateReveal");
sideBarRevealed = !sideBarRevealed;
}
else {
//If revealed then hide
sideBar.addEventListener('animationend', () => {
sideBar.removeClass("animateReveal");
});
sideBar.addClass("animateHide");
sideBarRevealed = !sideBarRevealed;
}
});
If you are planning to use this kind of components in your website, maybe using a frontend framework such as angular or react may be better suited since you won't have to design and script each component.

How to keep a div centered when resizing window?

I have a div tab on the right side of the screen in the middle and when I try to resize the window it moves the the bottom right of the screen. I would like to to stay in the middle regardless of screen size. How could I accomplish this with my current code? I've tried margin-left:auto and margin-right:auto but that didn't seem to work. I also can't necessarily change the position: because they need to those to make everything else work.
Any suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
font-family: 'Roboto Condensed', sans-serif;
}
#side-chat {
position: absolute;
right: 100%;
bottom:50%;
z-index:9999999999999 !important;
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
display:flex;
justify-content: center;
align-items: center;
color: #ffffff;
border-radius: 10px;
background: rgba(30, 175, 230, 0.5);
text-decoration: none;
padding: 15px;
font-size: 25px;
line-height: 20px;
text-align: center;
}
#olark-box-wrapper {
position: absolute;
z-index:99999999999999 !important;
top: 400px;
right: -300px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#olark-box-wrapper.chatbox-open {
right: 0
}
#olark-box-wrapper.chatbox-closed {
right: -300px;
}
#habla_window_div {
margin: 0 !important;
}
#side-chat img{
margin-right: 10px;
}
#side-chat:hover,
#side-chat:active {
background: #22a7e5;
}
</style>
</head>
<body>
<div id="olark-box-wrapper">
<!-- Olark chat tab -->
<a id="side-chat" href="javascript:void(0);" onclick="setTimeout(changeClass, 3);">
<img src="icon-chat.svg">
Chat
</a>
<!-- Empty Olark chat box container -->
<div id="olark-box-container"></div>
</div>
<!-- begin olark code -->
<script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js");
/* custom configuration goes here (www.olark.com/documentation) */
//olark.configure('system.hb_detached', true);
olark.configure('box.inline', true);
olark.identify('xxxx-xxx-xx-xxxx');</script>
<!-- end olark code -->
<script type='text/javascript'>
// Javacript function to toggle the class of the chat box wrapper
function changeClass()
{
// Get the HTML object containing the Olark chat box
var olark_wrapper = document.getElementById("olark-box-wrapper");
// If the chat box is already open, close id
if ( olark_wrapper.className.match(/(?:^|\s)chatbox-open(?!\S)/) ) {
olark_wrapper.className = "chatbox-closed";
document.querySelector('#side-chat img').src = "icon-chat.svg";
}
// Otherwise add open the Olark chat box
else {
olark_wrapper.className = "chatbox-open";
document.querySelector('#side-chat img').src = "icon-cancel.svg";
}
}
</script>
</body>
</html>
You are placing your div relatively to the parent using absolute absolute positioning.
If the size of your wrapper is important, you should wrap it on another div, make it have the entire height of the page, position it on the right using and use a flex display as suggested by #ali-abbasov in your comment.
#wrapper-of-olark-box-wrapper {
position: fixed; // so that it stays positioned as you want regardless of the parent
top:0;
right:0;
height: 100%; // you can try 100vh if this one does not work
display: flex; // the solution
justify-content: right;
align-items: center;
}

Making div fade in and out when scrolling

I have a div that is set to:
{
height: 100vh;
width: 100%;
background-color: black;
opacity: 0;
position: absolute;
z-index: 2;
}
This div is also at the top of the page.
I want to make it so that as I scroll down (and away from the div), it slowly fades in, and when I scroll back up it fades out.
How would I do this?
You may refer following code snippet. The point I am trying to make is in the script tag at the bottom just added the window scroll function which sets the opacity to your entire window of desired height in your css class ".top". So when you try to scroll in and out it will dynamically add an animation effect to your window.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
</style>
</head>
<body>
<div class="top">
<div class="title">Fade Away</div>
</div>
</body>
</html>
<script>
$(window).scroll(function() {
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
</script>
document.body.addEventListener('wheel', (e) => {
let faceLayer = document.getElementById('your_id');
faceLayer.style.opacity = Math.abs(faceLayer.getBoundingClientRect().top / faceLayer.clientHeight).
})

Body Background Image Clickable

I searched for hours trying to find a solution for creating a body background image clickable.
I managed to find some similar questions/answers here on stackoverflow but I don't know how to apply them.
So far I think that the code below might help but I cannot seem to understand how to use it on my website.
$('body').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
Can someone please explain how can I have this working on 007soccerpicks.com? I need the body background image clickable except for the <div id="container"> which is the content area of the website.
Thank you very much!
The script you have setup will click the entire document if wrapped inside the body element. One way to get around this is to use a fixed element in the background with the body logic in another wrapper.
<body>
<div class="body-clickable"></div>
<div class="main-content">
</div>
</body>
<style>
.body-clickable
{
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: url('image.png');
}
.main-content {
margin: 0 auto;
width: 1000px;
top: 0;
left: 0;
position: relative;
z-index: 2;
}
</style>
<script>
$('.body-clickable').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
</script>
You could also avoid using a script and actually just make the 'body-clickable' a link.
#box-link {
position: absolute;
top: 8px;
left: 20px;
width: 83px;
height: 83px;
background-color: transparent;
border: 1px solid yellow; }
.box1 {
position: relative;
margin: 20px 0 20px 40px;
padding: 5px 0; width: 300px;
height: 300px;
background-image: url('https://lh3.googleusercontent.com/-Y8Qx-xfqufE/VOIccUtbhpI/AAAAAAAABDI/x5lTXX_Zlrs/s2048/cool-and-stylish-girls-wallpapers-for-fb-cool-and-stylish-girls-with-guitar-6413-sadredheartlovequotesforfacebooktimelinecoverx.jpg');
background-repeat: no-repeat;
}
<body>
<div class="box1">
<a id="box-link" href="https://www.facebook.com/"></a>
<p>The background of this box is an image.</p>
</div>
</body>

IE requires double click with custom button

I have a script that is dived as:
HTML:
<div id="wrapper">
<div id="container">
<div id="button">Click me!</div>
<form>
<input type="file" />
</form>
</div>
<div id="notice">File is uploaded!</div>
</div>
JavaScript(JQuery 2):
$(document).ready(function () {
$("input").on("change", function () {
$("div#notice").fadeIn();
//$("form").submit(); //If you want it to submit on your site uncomment this
});
});
CSS:
div#wrapper {
background-color: #ccc;
position: absolute;
width: 300px;
height: 200px;
}
div#wrapper > form > input {
color: rgba(0, 0, 0, 0);
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
color: rgba(0, 0, 0, 0);
}
div#container {
width: 200px;
height: 20px;
overflow: hidden;
}
div#button, input {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
div#button {
z-index: 1;
background-color: #AAA;
}
input {
z-index: 2;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
alpha: filter(opacity=0);
font-size: 25px;
color: rgba(0,0,0,0);
filter: alpha(opacity=0);
zoom: 1;
}
div#notice
{
background-color: green;
display: none;
position: absolute;
bottom: 0px;
left: 0px;
}
Note: This issue was there before blur was put to hide the flashing icon in IE.
In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.
The only thing I've tried so far is to .render("click") on the input, but that didn't work.
JSFiddle: http://jsfiddle.net/plowdawg/mk77W/
I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.
<div class="divFileUpload">
<input class="fileUpload" type="file" />
</div>
and css:
.divFileUpload {
background-color: #F60;
border-radius: 5px;
height: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
width: 50%
}
.fileUpload {
cursor: pointer;
font-size: 10000px; /* This is the main part. */
height: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
To follow up on what SDLion said....
This might be what you see
But really on top of that there is a file upload control that has been made transparent.
Clicking on the browse button brings up the file upload dialog with one click.
In IE You have to double click the text box to the left of it if you want to see the file upload dialog.
Increase the font size of the file input to fill the button image
While #bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.
You will need:
A wrapper div tag
An inner dev tag
Some sort of form input
JQuery (tested on 2.1)
Steps:
Create the "wrapper" div
Create an inner "button " div
Place the form element underneath the inner "button" div
Set the "wrapper" and "inner" divs to the same size
Set overflow:hidden on the wrapper
Create a JQuery script for the "inner" div setting the on click function
In the "inner" function click function call .click() on the input
Seems to work for me in IE 10.
$(document).ready(
function()
{
$("#open_dialog").on("click",function()
{
$("input").click();
});
$("input").on("change",function()
{
alert($("input"));
$("#notice").html("uploading");
});
});
#open_dialog
{
position: relative;
width: 200px;
height: 50px;
color: white;
font-family: "Arial";
font-size: 14pt;
text-align: center;
top: 25px;
margin-top: -.5em;
z-index: 1;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
background: green;
z-index: 0;
}
input
{
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="open_dialog">Click Me</div>
<input type="file" />
</div>
<div id="notice">Nothing to upload</div>
The double click is happening on the text portion of the file upload, like #TravisPessetto stated.
Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.
See here for more details.
I found another more simple solution, just trigger the event "click" on mousedown for this element only:
$("input").mousedown(function() {
$(this).trigger('click');
})
in order to avoid problems on other browsers, apply this solution to IE only:
if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
$("#your_file_input").mousedown(function(event) {
if (event.which == 1) {
$(this).trigger('click');
}
})
}
here's your jfiddle modified, check it on IE 9-10:
http://jsfiddle.net/7Lq3k/
Edit: example modified in order to limit the event handling for left click only
(see: How to distinguish between left and right mouse click with jQuery for details)
I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.
HTML
<!--/* Upload input */-->
<div class="input-file">
Select image
<input type="file" />
</div>
LESS CSS
/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
position: relative;
overflow: hidden;
margin: 10px;
input[type="file"] {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%;
height: 100%;
font-size: 10000px;
}
// For Chrome
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
}

Categories