I'm new to all JS and i use Popup Magnific, i did a pop-up video, the problem is that it keeps running in the background after closing, i tried to do something to make it stop, but I got into trouble with it and i don't understand how to fix it.
i would love if anyone could help.
Attaching my code:
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true,
mainClass: 'custom-popup-class'
});
$("#popup").on('hidden.bs.modal', function (e) {
$("#mpopup iframe").attr("video", $("#popup iframe").attr("video"));
$.close function();
});
.custom-popup-class .mfp-container {
padding-top: 40px;
padding-bottom: 40px;
}
.custom-popup-class .mfp-content {
width: 100%;
max-width: 750px;
}
#popup1 {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
#popup1 .mfp-close {
top: -47px;
color: #FFF;
text-align: right;
right: 1px;
font-size: 40px;
}
<div class="col-md-3">
<div class="video-wrapper">
<div class="play">
<a href="#popup1" class="open-popup-link"><img src="img/3D/thumbnails/thumb1.jpg" class="img-fluid">
<img src="img/play.png" class="play-btn"></a>
<div id="popup1" class="mfp-hide">
<div class="box-video">
<video source src="img/3D/videos/birthday1.mp4" type="video/mp4" width="100%" controls preload></video>
</div>
</div>
</div>
</div>
</div>
You could have it so that when you click the button to close the window it would pause the video by adding a .pause(); , it would mean that you would need to .play(); to a play button if you wanted it to be re-playable in the future. If you give the close button an ID as well as the video an ID it could work.
In vanilla JS rather than in jQuery you could use
document.getElementById("closeButtonID").addEventListener("click", function(event){
document.getElementById("videoID ").pause();
})
Then you would just need to add a similar 2 lines to to the above but instead add .play();
Hope this helps/works!
Related
I have just started coding and I have encountered a problem that seems very obvious to fix.
To animate my website, I decided to write a Javascript code using jQuery
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js.
The first part of the code work for me:
I click on "Hover Me" and the video pop-up.
All good.
Heres my code:
<meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
<div class="example-text">
I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, Want to try?
<!-- example-hoverVideo strip -->
<a class="hover-popup">Hover Me
<img class="camera-vector" src="https://www.matteogiordano.info/svg/video-camera-2.svg">
</a>
<section class="popup-container">
<div class="popup-box-2">
<div class="popup-box">
<video poster="https://intmagic-wordpress.s3.amazonaws.com/mamag/uploads/802500821_1280x720.jpg" playsinline="" autoplay="" muted="" loop="" >
<source src="https://player.vimeo.com/external/351032574.hd.mp4?s=b11ffe2804304867bd86bd956411f61ac45f1840&profile_id=174&oauth2_token_id=1204276317" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<!-- example-hoverVideo strip -->
<div class="example-text">I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen...</div>
</div>
<div class="example-text">
I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, Want to try?
<!-- example-hoverVideo strip -->
<a class="hover-popup">Hover Me
<img class="camera-vector" src="https://www.matteogiordano.info/svg/video-camera.svg">
</a>
<section class="popup-container">
<div class="popup-box">
<video poster="https://intmagic-wordpress.s3.amazonaws.com/mamag/uploads/802500821_1280x720.jpg" playsinline="" autoplay="" muted="" loop="" >
<source src="https://player.vimeo.com/external/351032574.hd.mp4?s=b11ffe2804304867bd86bd956411f61ac45f1840&profile_id=174&oauth2_token_id=1204276317" type="video/mp4">
</video>
</div>
</div>
</section>
<!-- example-hoverVideo strip -->
<div class="example-text">I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen...</div>
</div>
The CSS linked just fine
body {
padding: 0;
margin: 0;
width: 100%;
background-color: #ddd;
}
/*example-hoverVideo strip*/
.popup-container {
width: 100%;
height: 100%;
pointer-events: none;
}
.popup-box {
position: fixed;
width: 74%;
height: 100%;
border-radius: 14px;
background-color: red;
padding: 0px 0px;
z-index: 1000;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
.popup-box-2 {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 0px 0px;
z-index: 330;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
.hover-popup {
cursor: pointer;
font-size: 50px;
color: red;
font-family: helvetica;
width: 100%;
height: 100%;
}
video {
z-index: 1200;
margin: 0;
padding: 0;
box-sizing: border-box;
padding: 150px;
width: 100%;
height: 100%;
}
#media only screen and (max-width: 800px) {
video {
padding: 50px;
}
}
#media only screen and (max-width: 500px) {
video {
padding: 0px;
}
}
.example-text {
padding: 30px;
font-size: 50px;
}
.camera-vector {
pointer-events: none;
width: 35px;
margin: 5px;
}
/*example-hoverVideo strip*/
and here is what i wrote on main.js to see if it works :
$(function() {
var self = $('.hover-popup');
self.click(function () {
self.next().children('.popup-box').fadeIn(150);
});
});
So as you can see, what I'm trying to do now is to make the video fade-out when the mouse click again over it.
I kindly ask if somebody could teach me the event to make it work.
Thanks in advance
$('#logoimage').hide("fade",2000,function() {
$( "#logoimage" ).show( "fade",2000);
});
You can add a "show or visible" class to that element when it is clicked to show it and show it if it is clicked a second time to check if that element has "show or visible" this class if it should then Hide it!
example :
$(function() {
var self = $('.hover-popup');
self.click(function () {
var popUp = self.next().children('.popup-box');
if(popUp.hasClass( "visible" ))
{
popUp.fadeOut(150);
popUp.removeClass('visible');
}
else {
popUp.fadeOut(150);
popUp.addClass('visible');
}
});
});
If you just want to show/hide on click, then you can use
.fadeToggle()
https://api.jquery.com/fadetoggle/
$(function() {
var popup = $('.hover-popup');
popup.click(function() {
$(this).next().children('.popup-box').fadeToggle(150);
});
});
Edit:
To add a basic "click anywhere to close"
$(function() {
$(document).on("click", function() {
$(".popup-box:visible").fadeOut(150);
});
});
but this will only pickup clicks that haven't already been handled (eg clicking on the background, but not clicking on another button).
Ideally, you would also show a "modal background" which covers the whole page and clicking that would hide the popup-box. But that's a bit too broad for an SO question and you might be better off looking at a 3rd-party plugin (asking for one is also off-topic).
Thanks everybody..
..and thanks freedomn-m.
Fade Toggle work perfectly 👍
$(function() {
var self = $('.hover-popup');
self.click(function () {
self.next().children('.popup-box').fadeToggle(150);
});
});
Let me start to show my html
<div class="row" data-val="SOME_DATA" id="1" data-cur="MORE_DATA">
<div class="col-xs-6">
<div class="media">
<div class="media-left">
////more html
</div>
<div class="media-body">
////more html
</div>
<div class="media-right">
<iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
<canvas id="normalChartGraph" width="170" height="85" style="display: block; width: 170px; height: 85px;"></canvas>
</div>
<div class="fill-in-data">
////more html
</div>
</div>
</div>
My question is if someone pressed on that code. I need to pop-up a modal. That is no problem to that.
This is the JQuery code for it to start the function:
$('#show-your-porto-list .row').on('click', showOptions);
But my question is I want that an other modal pop-ups when I press on the .media-right like you see that is a graph. I want to create a bigger graph in the modal.
That is my jquery code for it to start the function:
$('.col-xs-6 .media-right').on('click',createBiggerChart);
But my problem is he also excuted the showOption() function because .media-right is the child of .row. Is there away to excluded .media-right from it.
I don't mean by doing something like this:
$('#show-your-porto-list .media-left, #show-your-porto-list .media-body, #show-your-porto-list .fill-in-data').on('click', showOptions);
I don't want to do that because at the .row I keep certain data that is important to create the modal. Is there a short way to do that without using the long selector line?
You're looking for this function $.stopPropagation().
Events such as the click event in jQuery traverse the entire XML tree as far as they can for hit elements. The searching can be stopped by calling the stopPropagation() function on the event argument that is generated.
Try this:
$('.col-xs-6 .media-right').on('click', function(event) {
event.stopPropagation();
createBiggerChart() }
);
Probably a simple solution. I would like to expand an embedded video underneath the "Watch the video" when it is clicked. Pretty straight forward, however I can't get this code to add the "expanded" class on click to the video__player div for the life of me. Any help here is greatly appreciated, thanks.
Code:
$(".video").click(function() {
$(".video__player").addClass("expanded");
});
.video__player {
display: none;
width: 80vw;
max-width: 560px;
max-height: 315px;
height: 0;
transition: 0.5s;
margin: auto;
}
iframe {
width: 100%;
height: 100%;
}
.expanded {
height: 45vw !important;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video__container animated fadeInDownShort slow">
<a class="h6 video clickable">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player">
<br><br>
<iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
</div>
One, as the comment says, you might not have wrapped it in a $(document).ready(function() {}); handler. Two, your allowFullScreen hasn't set a value. Unset, it's default is false. If you want to allow it fullscreen, set it to true.
Posting your full code through a JSFiddle or a repl.it would help as well, as it could be something else.
In the stackoverflow interpreter, your code seems to be working fine. Perhaps it's something with whatever interpreter you're using?
The following code works, but I have a problem since I want to have multiple portfolio objects like this one. If I use the current code it would raise all of the hidden divs (.slide) with text instead of one at a time based on hover. I can't use "this" since that would just make the picture animate upward. I could give everything ids and write a lot of JavaScript code that is repetitive, but I am almost positive that isn't the best way to do things.
Basically, How would you target a div with a hover effect that causes another div to do something and still be able to reuse the code?
The HTML for this section:
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
The CSS for this section:
.high {
height: 200px;
overflow: hidden;
}
.port {
width: 100%;
height: 200px;
}
.slide {
background-color: rgba(74, 170, 165, 0.7);
color: white;
position: relative;
top: -34px;
height: 200px;
width: 100%;
padding: 20px;
text-align: center;
}
The JavaScript for this section:
$(document).ready(function(){
var portfolio = {
// moves div with text over portfolio picture on hover
hoverPort: function() {
$(".port").hover(function() {
$(".slide").stop().animate({"top" : "-110px"});
}, function() {
$(".slide").stop().animate({"top" : "-34"});
});
}, // end of hoverPort function
} // end of portfolio object
portfolio.hoverPort();
}); // end of document.ready
Of course you can use this, not to animate the element itself but to refer another "closest" element based on that:
$(".port").hover(function() {
$(this).next('.slide').stop().animate({"top" : "-110px"});
}, function() {
$(this).next('.slide').stop().animate({"top" : "-34"});
});
Demo Snippet
$(".port").hover(function() {
$(this).next('.slide').stop().animate({
"top": "-110px"
});
}, function() {
$(this).next('.slide').stop().animate({
"top": "-34"
});
});
.col-md-6 {
float: left;
width: 50%;
padding:25px;
box-sizing:border-box;
}
.slide {
position: relative;
top: -60px;
color: white;
background: red;
font-size: 2em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
You can use jQuery "eq" selector.
$(".port").eq(0).hover(function() {
$(".slide").eq(0).stop().animate({"top" : "-110px"});
});
Hovering over the first "port" will animate the first "slide".
I am using a jQuery plugin called Slideshowify. Unfortunately, it doesn't come with many options or functions, so I have been forced to attempt to create my own pause and play with mouse enter/leave.
As seen below, I have managed to stop the animating simply using .stop() on mouseenter, but I have not yet managed to find a way to play the animation from its current state after mouseleave.
How can I achieve this?
HTML:
<div id="slideshow">
<img src="http://lorempixel.com/output/city-h-c-320-500-2.jpg" />
<img src="http://lorempixel.com/output/food-h-c-320-500-9.jpg" />
<img src="http://lorempixel.com/output/abstract-h-c-320-500-10.jpg" />
</div>
CSS:
#slideshow {
background-color: #ffffff;
position: relative;
width: 320px;
height: 320px;
border: 1px solid #ffffff;
z-index: 10;
}
JS:
$('#slideshow img').slideshowify({
parentEl: '#slideshow'
});
$("#slideshow").on('mouseenter', function () {
$(this).find('div > img').stop(true, false);
});
WORKING DEMO