JS: Resize div when an iframe was clicked? - javascript

I have an entire <iframe /> with a div as parent. That iframe came from different domain. How do you resize it bigger (add class in my case) the parent div when the iframe was click? and resize it back when a close button of the iframe is clicked?
I preferred if the button from iframe does the resize but apparently the div cannot be reached INSIDE the iframe, so I have to do it OUTSIDE the iframe.

I had the same problem and wrote a jquery plugin.
https://github.com/BergenSoft/iframeActivationListener
See example:
http://jsfiddle.net/56g7uLub/3/
How to use:
$(document).ready(function ()
{
$('iframe').iframeActivationListener();
$('iframe').on("activate", function(ev) {
$(ev.target).addClass("big");
});
});
This plugin don't use overlaying divs.
It checks if the mouse is on an inactive iframe and starts watching the activeElement of the document.
When it changes to another iframe, the custom event "activate" will be raised.
This is the best solution I found out.

You will have to create some kind of overlay to detect the initial focus event of the iframe. The close button can also be part of your website still if you show it based on class.
http://jsfiddle.net/cxtgn72g/4/
HTML
<div id="iframe">
<div id="overlay"></div>
<div id="close">X</div>
<iframe src="//www.youtube.com/embed/6PRq7CmiWhM?list=PLIOa6mDiSeismsV_7YFti-5XOGRzmofSZ"></iframe>
</div>
JS - Requires jQuery
$("#overlay").click(function() {
$("#iframe").addClass("big");
});
$("#close").click(function() {
$("#iframe").removeClass("big");
});
CSS
#iframe {
width : 500px;
height : 300px;
position : relative;
}
#iframe.big {
width : 600px;
height : 400px;
}
iframe {
width : 100%;
height : 100%;
border : none;
}
#overlay {
position : absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
}
#close {
display : none;
}
.big #close {
cursor : pointer;
display : block;
position : absolute;
right : 10px;
top : 10px;
content : "X";
background : red;
color : white;
border-radius : 25%;
padding : 8px;
}
.big #overlay {
display : none;
}

Try this:
document.getElementById("myIFrame").onclick = function(){
document.getElementById("myDiv").className = ""; //New Class Name
};
Good Luck!

Related

Disable scrolling when hover a container

So, I'm trying to disable scrolling event when a user hovers on a container, there are some solutions on SO but they use jQuery and none of them seem to work or they are not the solution I'm looking for. I don't want to disable the scrollbar as that would cause bad user experience (scrollbar causing widths of the containers to increase/decrease). Is there any js way of achieving this?
For example,
<body>
<div onScroll={()=> }>Container</div>
Content here
</body>
that ?
const scroll_stopper = document.querySelector('#StopSrollonHover')
scroll_stopper.onmouseover = () =>
{
document.body.classList.add('noScroll')
}
scroll_stopper.onmouseout = () =>
{
document.body.classList.remove('noScroll')
}
.noScroll {
overflow: hidden !important;
}
body {
height: 200vh;
}
#StopSrollonHover {
display : block;
margin-top : 25vh;
height : 100px;
background : yellow;
}
<div id="StopSrollonHover"> </div>

create a full animation in jquery for a menu

I'm new with Jquery and I try to do something too difficult for me.
I try to create a menu with animated links : when you hover a link, a other one'll appear and hide the first link.
I try with a simple menu and 2 links : one with an id="link" and the other with id="hover".
When a mouse is on #link (the first link), the #hover (the second one) will appear, grow up and hide #link.
But, when I put the mouse on #link : nothing !!! I test to change CSS and I use Chrome for searching the matter without success.
$("document").ready(function() {
$("#link").hover(function () {
$(this).next("#hover").stop().animate({
display : block,
margin-top : -31px,
height : 30px
}, 500);
},function () {
$(this).next("#hover").stop().animate({
display : block,
margin-top : -31px,
height : 30px
}, 300);
});
});
#link {
display : block;
position : absolute;
border : 1px solid black;
height : 30px;
width : 100px;
}
#hover{
display : none;
position : absolute ;
background-color : orange;
color : blue;
height : 0px;
width : 100px;
}
nav{
position : relative;
height : 100px;
width :100px;
border : 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id="link">A</div>
<div id="hover">A</div>
</nav>
thanks for your help.

Pass click through to fixed element

I have a static element that is above a fixed element. When the upper static element is clicked, I want to pass this click through to the fixed element. How can I do this? Here is a working example (I wasn't able to get this to work in JSFiddle).
<body>
<div class="lower" onclick="lowerClick()"></div>
<div class="upper" onclick="upperClick()"></div>
</body>
<script>
function lowerClick() {
alert("LOWER CLICK");
};
function upperClick() {
alert("UPPER CLICK");
};
</script>
//CSS file
.lower {
height: 100px;
width: 100%;
z-index: -1;
position: fixed;
background-color:blue;
}
.upper {
height: 50px;
width: 100%;
z-index: 1;
position: static;
background-color:red;
pointer-events: none;
}
I thought that adding pointer-events:none to my upper element would make this work, but when I click the top element, nothing happens.
In fact pointer-events:none works expectedly. But what prevents you from clicking on the lower is the body element. Because of setting z-index:-1 on your lower, it will be sent to behind of its parent (which is the body). So you can set the z-index of the body to a more negative number, of course the postion should be some value other than static (default):
body {
z-index:-1000;
position:relative;
}
Demo
You can use the following css for the upper div
.upper {
pointer-events:none;
}
...also avoid negative z-index, and instead use 1 for lower and 2 for upper. Also why put static and not absolute element at the top?

Make div appear and change the whole html to be darker

I have a div and after I click a button, I would like the div to appear (which I can do), but I would like the whole background to become darker too (this is inline with overlays).
I've tried using opacity - I change the opacity of the whole html with jQuery, i.e. $('html').css('opacity','-0.5'); and change back the opacity of the div to normal, but for some reason, the opacity of the div stays the same (0.5).
I don't quite like the opacity since actually it doesn't make the background darker (rather lighter).
HTML--
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><span>YOUR HTML GOES HERE</span></div>
CSS--
html, body {
width : 100%;
height : 100%;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
JS--
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(500);
});
Then just add your youtube video embed code to the overlay div and style it appropriately to put it where you want on the page.
Here is a demo: http://jsfiddle.net/EtHbf/1/
This can be now done even easier than before. Just use absoluted box-shadow.
#yourDIV {
box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
}
First, for opacity, you don't set a negative number. $('html').css('opacity','1'); is solid and completely visible, and $('html').css('opacity','0'); is completely invisible. Anything in between (0.2, 0.5, 0.7) gets more visible the close it is to 1.
Second, to make the background darker you can do this:
Create a div that fills the screen
Set z-index on that div higher than all content
Set background to black and opacity to 0.5
Put youtube video in another div with a higher z-index than the div you just made with the black background
You'd want a 'modal' dialog. It's basically accomplished by using an underlying div and a background set.
jQuery UI supports it here: http://jqueryui.com/demos/dialog/#modal , but you can see how they do it by inspecting.
// video lightbox
$('.video_popup').height($(document).height());
// GET WINDOW SCROLLtop OFFSET
var winScrT;
$(window).scroll(function() {
winScrT = $(window).scrollTop();
});
$.getDocHeight = function() {
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
$('.play').click(function() {
$('.video_popup').height($.getDocHeight);
$('#popup').css({
top: (winScrT + 15) + 'px'
});
$('.video_popup').fadeTo(0, 0).css({
marginLeft: '0px'
}).fadeTo(600, 0.6);
});
$('.popup_close, .video_popup').click(function() {
$('.video_popup').fadeTo(600, 0, function() {
$('.video_popup').hide();
});
});
.video_popup {
position: absolute;
margin-left: -9000px;
top: 0px;
left: 0px;
background: #000;
width: 100%;
z-index: 300;
}
.popup_content {
position: relative;
margin: 50px auto;
width: 560px;
color: #fff;
}
.popup_close {
position: absolute;
right: -55px;
top: -25px;
z-index: 2000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="play" href="javascript:void(0);">PLAY</a></p>
<div class="video_popup">
<div class="popup_content">
<a class="popup_close" href="javascript:void(0);"><img src="_/images/close.png"></a>
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>
Here's another example of this behavior, in the demo: click the "watch video" link to fade in the video and screen dimmer divs (escape to fade out)
jsfiddle demo
CSS:
#screenDimmer,#video {display:none;position:absolute;}
#screenDimmer {top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;
/* ie opacity */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);}
#video {top:50%;left:50%;margin-left:-240px;margin-top:-193px;}
HTML:
<div id="screenDimmer"></div>
<div id="video"><!-- embedded video here --></div>
hi i changed the code of someone who posted here, even though this may be solved already here is the updated code of jasper
html:
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><iframe src="http://www.youtube.com/embed/08DjMT-qR9g" width="340"
height="250"></iframe><br><br><button id="close"><img
src="http://icongal.com/gallery/image/89825/remove_close_button_x_delete.png"
height="50"
width="50"></button></div>
css:
html, body {
width : 100%;
height : 100%;
}
#overlay button{
opacity:0.5;
}
#overlay button:hover{
opacity:1;
}
#overlay-back {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
background : #000;
opacity : 0.75;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
jquery:
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(1000);
});
$('#close').on('click',function(){
$('#overlay,#overlay-back').fadeOut(1000);
});
i hope this might still help you and that this edit may be usefull to some people
added by me (close button,changed very little part of the css and used a youtube vid instead of nothing)
The simplest thing I have seen to achieve it is this:
$("#overlay").css("-webkit-filter","blur(5px)");
$("#overlay").css("-moz-filter","blur(5px)");
$("#overlay").css("-o-filter","blur(5px)");
$("#overlay").css("-ms-filter","blur(5px)");
$("#overlay").css("filter","blur(5px)");
$("#overlay").css("pointer-events", "none");
On clicking a button we have to run above steps. "overlay" is the ID of div which we want to be blur. After successful execution of script, at the end we can do this to re-enable the div:
$("#overlay").removeAttr("style");

Dynamic Links and jQuery Lightbox issue : Loading image in lightbox...completely stumped!

I have a function that dynamically creates links for a photo gallery. The function also produces a larger image as a background image of a div when and thumbnail is clicked on. What I want to do is have a third event, where if the user clicks the enlarged image in the div, the jQuery Fancybox loads an even bigger version of the image being displayed in the div. The problem is that the link for the anchor tag I'm using is created dynamically, and I know that Fancybox parses the HTML when the DOM is ready...unfortunately my function changes the DOM by appending the anchor tag for the full sized image. The help I need is using the Fancybox's options to specify the href attribute for the plugin. I'm sorry that was so long-winded...here's the code.
jQuery:
function gallery(picid, picnum){
var ext = 'jpg';
var fullSize = 'imgs/'+picid+'_full.'+ext;
$('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat');
$('#photolarge a').attr(
{ href: fullSize
//rel: 'lightbox',
}
);
$("#lightboxlink").click(function(){
$('#lightboxlink').fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : fullSize
});
});
return false;
}
HTML Snippet
<div id="photolarge">
<a id="lightboxlink" href="#"></a>
</div>
<div id="phototable">
<ul id="photorow1">
<li><a onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li>
</ul>
</div>
Subsequent CSS:
#photolarge {
width: 590px;
height: 400px;
margin-left: 7px;
border: 2px solid;
background: none;}
#phototable {
width: 590px;
height: 300px;
border: 2px solid;
margin: 10px 0 0 7px;}
#phototable img {
cursor: pointer;}
#phototable ul {
list-style: none;
display: inline;}
#phototable li {
padding-left: 10px;}
#lightboxlink {
display: block;
height: 100%;
width: 100%;}
Any help would be greatly appreciated!!!
You can use .live() for the event handler, and .triggerHandler() to immediately open the lightbox, like this:
$("#lightboxlink").live('click', function(e){
$(this).filter(':not(.fb)').fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : fullSize
}).addClass('fb');
$(this).triggerHandler('click');
e.preventDefault(); //prevent opening in new window
});
This runs .fancybox() on the link, but only if we haven't already run it, which we're tracking with a .fb class addition. Whether it's a new or fresh bind, we need to trigger the click handler, which is what fancybox listens to in order to open.

Categories

Resources