Develop Reference

how to stop backgound popup video

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!

Bxslider caption animation

I am working with bxslider and I'd like to have a different animation for the slide's text.
While the slide slides to the left, I'd like the text box to be fixed in the middle and the text to fade in/out.
Any ideas? I've been trying all day
Here is a pen: Codepen
HTML:
<div class="bxslider" id="banner">
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
</div>
JS:
$(document).ready(function(){
$('.bxslider').bxSlider();
});
CSS:
#banner .msl-title {
width: 80%;
max-width: 350px;
top: 50%;
background: white;
padding: 40px;
position: relative;
margin: auto;
overflow: auto;
display: table;
height: 160px;
text-align: center;
transform: translateY(-65%);
border: 5px solid #61beb1;}

in order to achieving this you need a different aproach, because the box its inside the slider, it is hard to make fixed, but if you put the textbox outside the slider wrapper you can simply control the behaviour with the custom bxslider
$(document).ready(function(){
$('.msl-title').find('a').text(
$('#banner').children().first('div').data('text') );
$('.bxslider').bxSlider({'onSlideBefore':function(el,oldIndex,newIndex){
$('.msl-title').fadeOut(200,function(){
$('.msl-title').find('a').text($(el).data('text'));
$(this).stop().fadeIn(200);
});
}});
});
And using data properties from jQuery you can set the Text for every slide in the div
<div data-text="Slide 1">
Working Demo
https://codepen.io/Teobis/pen/zLpWKM
Hope this helps

Managed to find the solution. Simply take the info from the slider title and print it in an external div
var slideActive = $('.msl-item.active-slide .msl-title.active-text a').attr( "title" );
$( ".slider-title-box h3" ).text( slideActive );
The first line is looking for the slide title and the second line is printing it in the new div.
I gave absolute position to .slider-title-box so it'd fit over the slider.
Hope this helps another trying to achieve this

Scroll Down div when click on element

I've seen some custom Scrollbard but don't work for what I need...
I have a div element with dynamic text, sometimes there is lots of text so scroll bars shows up, I wonder if is possible to overflow: hidden; and have an image (arrow pointing down) that when clicked, the div will scroll down normally like when using the browsers scrollbar.
I have seen lots of this: https://grsmto.github.io/simplebar, all have scroll bars on the side, none has what I want.

Here it is (only the basics):
function scrollDown() {
var cuttentOffsetTop = $('#inner').offset().top
$('#inner').offset({top: (cuttentOffsetTop - 10)})
}
#container {
width: 100%;
height: 300px;
background-color: gray;
overflow-y: hidden;
position: relative;
}
.item {
width: 100%;
height: 100px;
background-color: violet;
}
.item + .item {
margin-top: 10px;
}
#scroll-down {
background-color: forestgreen;
color: white;
margin-bottom: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll-down" onclick="scrollDown()">Click here to scroll down</div>
<div id="container">
<div id="inner">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
If you need an explanation - just ask.

Have you actually attempted to create this? Provide code that you have attempted so that we may edit that, as opposed to writing the whole thing for you. You didn't make it entirely clear if you wanted to jump down to a position, slowly scroll down while the button is held down, or what exactly so I'll provide a few different types.
window.scrollTo(0, 100);
If you know how far down you want to jump, you could use this. Alternately, using HTML you can do the following to jump to a specific part of a page.
Jump to element with id jumpLocation

You just have to google it better. Look at element.scrollTop method, more here. And a thread from stackoverflow..

I Can't Figure Out How To Link an iframe to a Button

I'd like to link an iframe to a button so I can open the below iframe (iframe/ model window) from clicking on the "keep me posted" button on my site: http://www.aphealthnetwork.com.
iframe code:
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
code for the button:
<div class="buttons">Keep Me Posted! or learn more</div>
I've been searching and searching and can't find the answer anywhere.

Not sure what the end goal is exactly, but if you want to show that iframe in a modal when you click on the button, you could put the iframe in an element for the modal, hide that by default, then show the modal when you click the button. I also added a link to close the model. You might want to adjust the height/width of the modal to fit your needs, too. Or let me know what the end goal is and I can help out with that.
$('.buttons a').on('click',function(e) {
if ($(window).width() > 820) {
e.preventDefault();
$('#modal').show();
}
});
$('.close').on('click',function(e) {
e.preventDefault();
$('#modal').hide();
})
#modal {
display: none;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
iframe {
position: absolute;
top: 1em; left: 50%;
transform: translate(-50%,0);
}
.close {
position: absolute;
top: 1em; right: 1em;
background: black;
color: white;
padding: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">Keep Me Posted! or learn more</div>
<div id="modal">
<a class="close" href="#">close</a>
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
</div>

Just use <input type='button' class='buttons' id='kmp' value='Keep Me Posted' /> or something similar instead... then you could make an output Element <iframe id='output'></iframe> and do this, using jQuery:
$(function(){
$('#kmp').click(function(){
$('#output').css('display', 'block').attr('src', 'https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2');
}
}
You also need to make sure that src is a full document as well. I see that it's not. I threw in that .css('display', 'block') in case you want to start your CSS with #output{display:none;}.

What do you exactly want?
For responsive modal look here
If you want to display the modal content a similar question is here
If you want to only display the iframe use jquery.
Or look at Display website in modal

Toggle display:none with div in front of another div?

I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.

Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}

When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.

I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});