We Keep Coding

YUI library to get contents of a website in a popup modal

Library : http://yuilibrary.com/
YUI().use('panel', function (Y) {
var dialog = new Y.Panel({
contentBox : //Need to get content from external website,
bodyContent: '',
width : 410,
height : 500,
zIndex : 10,
centered : true,
modal : false,
render : '.example',
visible : true,
});
});
In the content box, iframe do work, but is there any other way to render the website in a popup modal other than using iframe using YUI?

JS image resize compatible with fullPage.js

I am trying to integrate this code : http://codepen.io/babybackart/pen/GZPjJd on a section of a website using fullpage.js.
This code is based on a previous question brilliantly answered by #Seika85 : Make a .div act like an image.
The aim was to "contain" and resize the image on its container ".plancheBox" without cuting it.
In this example, the cat picture's dimensions are driven by the container using this first javascript code:
var calculateImageDimension = function() {
$('.plancheBox img').each(function() {
var $img = $(this),
$plancheBox = $img.closest('.plancheBox');
$img.css({
'max-height': $plancheBox.height() + 2,
/* (+2px) prevent thin margins due to rendering */
'max-width': $plancheBox.width()
});
$img.closest('.container').css({
'position': 'relative'
});
});
}
calculateImageDimension();
In order to set these dimensions instantaneously (without a page refresh), I am using this second javascript code:
var resizeEnd;
$(window).on('resize', function() {
clearTimeout(resizeEnd);
resizeEnd = setTimeout(function() {
$(window).trigger('resize-end');
}, 200);
});
$(window).on('resize-end', function() {
$('.plancheBox img').css({
'max-height': 'none',
'max-width': 'none'
})
$('.plancheBox .container').css({
'position': ''
});
calculateImageDimension();
});
As you can see in the first example, it works without fullpage.js.
I managed to insert the first JS code in a fullpage.js website : http://codepen.io/babybackart/pen/ONrbEN but I don't really manage to insert the second one.
I'm not actually a JS coder so I wanted to know what I needed to do to insert this code, if it was possible to do this with fullpage.js and if there were any conflict between both codes.
Thank you for your answer !

The second JS code must be inserted in a fullPage event like this:
$(document).ready(function() {
$('#fullpage').fullpage({
//events
afterResize: function(){
$('.plancheBox img').css({
'max-height' : 'none',
'max-width' : 'none'
})
$('.plancheBox .conteneur').css({'position' : ''});
calculateImageDimension();
}
});
});

Not able to scroll the image inside fancybox after Initializing Elevate Zoom

I have a dynamic fancy-box image gallery with Elevate Zoom Implemented in it, When the user clicks on from the fancy-box image the Elevate Zoom plugin is initialized and can see the magnified image in the fancy-box.
After disabling the Elevate Zoom plugin I'm not able to scroll the image from the fancy-box.
Is there any way to bind the scroll feature back to the fancy-box div after disabling the Elevated Zoom ?
I'm using Fancy-box 2.15v and Elevate Zoom 3.0.8v
$(".fancybox-thumb").attr("rel","gallery").fancybox({
scrolling: 'no',
prevEffect : 'none',
nextEffect : 'none',
type :'image',
maxHeight : '150%',
maxWidth : '90%',
fitToView : true,
arrows : true,
mouseWheel : false,
afterShow : function(){
$('.fancybox-image').click(function() {
$('.fancybox-image').elevateZoom({
zoomType : "lens",
scrollZoom : true,
lensSize : 900,
});
$('#fancybox-buttons').hover(function() {
$('.zoomContainer').remove();
$('.zoomWindowContainer').remove();
$(".zoomLens").remove();
});
});
},
beforeClose: function(){
$(".zoomContainer").remove();
$('.zoomWindowContainer').remove();
$(".zoomLens").remove();
}
});

Applying style for YouTube Popup Player's popup Window

I had used Youtube Popup player for video player in my webapplication, iam trying to change the styles of popup window..but iam not able to do it..i had found cssClass property for applying styles.. here is the link for youtube popup player..http://lab.abhinayrathore.com/jquery_youtube/
How can i resolve it..

You can follow Arunkumar answer if you want to change the defaults of the plugin, so that you don't have to set the options everytime you want to initialize the plugin.
Or, you can set specific properties to each element with the plugin assigned, like this:
$(function () {
var options = {
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};
$("a.youtube").YouTubePopup(options);
});
DEMO
Or, instead of creating a variable options, you could just do something like this:
$(function () {
$("a.youtube").YouTubePopup({
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};);
});
Hope I could make it more understandable to you!

customize Popup using script
like
$(function () {
$.fn.YouTubePopup.defaults.fullscreen = 0;
$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
$.fn.YouTubePopup.defaults.width='500';
$.fn.YouTubePopup.defaults.height='300';
$.fn.YouTubePopup.defaults.overlayOpacity='0.5';
});
You can able to change popup defaults above way.
Hope it helps:);

Loading a Twitter Tweet button dialog in Fancybox

I'm trying to open up a sexy fancybox dialog with the Twitter tweet button stuff iframe style.
(function () {
// Fancybox Options for IFrame
var fancybox_params = {
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'width': 680,
'height': 400,
'type': 'iframe'
};
// Twitter
var twitter_params = fancybox_params;
twitter_params.title = 'Twitter';
twitter_params.href = 'twitter.com/share?' +
'url=https%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button';
$('#social_twitter').fancybox(twitter_params);
});
And then a little...
<a id="social_twitter" href="javascript:void(0)">Twa-twa-twa-tweet me homes</a>
I just get a loading animation. Working with fancybox 2.0.6.

You should put "http://" at the start of external URL.
But the actual problem is I think,
"twitter doesn't allow itself to be embedded via iframe."
from #andrew_ohlmann answer
So that means you are not able to do it.