We Keep Coding

How to set width / max-width for an embedded tweet using Javascript factory function

I am trying to implement embed a tweet with Javascript programmatically.
Below is my code
'''
twttr.widgets
.createTweet(id, tweet, {
conversation: 'none', // or all
cards: 'visible', // or hidden
linkColor: '#cc0000', // default is blue
theme: 'light', // or dark
})
.then(function (el) {
el.querySelector('#twitter-widget-0').style.width = '100%';
});
'''
I have taken reference from below URL
https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-javascript-factory-function
As twitter has mentioned that width parameter should be between 250 and 550 pixels.
Is there any way to set width as 100% or Full-Width of web page.
I can't override CSS as all the css has been under iframe.
Any solution ?

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();
}
});

Hide scrollbar in SAPUI5 page

I have a problem.
I have a list of tweets to show in a page. For mobile devices I don't want to show the right vertical scrollbar.
I've build the page, with its slider and its tweets list. Then I put this page in a scroll container.
Then I return the scroll container.
The code is this:
sap.ui.jsview("ttest.initView", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf ttest.initView
*/
getControllerName : function() {
return "ttest.initView";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf ttest.initView
*/
createContent : function(oController) {
var oTweetList = new sap.m.List("items", {
threshold: 2,
inset : false,
showUnread : true,
scrollToLoad : true,
columns : [
new sap.m.Column({
styleClass : "data",
hAlign : "Left",
})
]
});
var oSlider = new sap.m.Slider({
id: "tweetSlider",
width: '100%',
min: 0,
change : function(oEvent){
//Update tweet list
var startIndex = 0;
var endIndex = this.getValue();
oController.updateTweetList("update", startIndex, endIndex);
}
});
var oPage = new sap.m.Page({
title: "Tweet list for #matteorenzi",
enableScrolling : false,
headerContent: [
new sap.m.Button({
icon: "sap-icon://refresh",
press : function(oEvent){
//Update tweet list with all tweets
oController.updateTweetList("first", "", "");
}
})
],
content: [
oSlider,
oTweetList
]
});
var oScroller = new sap.m.ScrollContainer({
vertical : true,
horizontal : false,
content : [
oPage
]
});
oEventBus.subscribe("it.besolution.PopulateList", "Go", function(chId, evId, data){
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new it.besolution.Tweet({
user : "{user/name}",
username : "{user/screen_name}",
tweet : "{text}",
press : function(oEvent){
var path = this.getBindingContext().getPath();
sap.ui.getCore().byId("iduserDetails").setModel(oGlobalModel).bindElement(path);
app.to("iduserDetails");
}
})
]
});
oSlider.setMax(oGlobalModel.getProperty("/size") - 1);
oTweetList.setModel(oGlobalModel);
oTweetList.bindAggregation("items", "/tweets/", template);
});
return oScroller;
}
});
The page didn't load. I don't know how to do. Why the list is invisible?
Obviously, if I remove the scroll container and I return the oPage element, the list is visible.
Why? How I have to write my code to show the list without the scrollbar?

If you don't want to show the right vertical scrollbar. There is a property called enableScrolling.And you really want to use ScrollContainer, put it as Page content, not the other way around.
enableScrolling default: true
Whether the Page takes special measures to make page content scrollable and keep headers fixed. If set to false, there will be no scrolling at all; for performance reasons this is highly recommended when scrolling is not needed. The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.

Fancybox - using to make a before/after gallery

Im trying to use Fancybox to build an before/after gallery. Thats how it works:
1) The page load with a lot of thumbnails
2) When the thumb is clicked, it loads the fancybox gallery
3) When the user hover the image, it changes to the "before" state
I already did the steps 1 and 2. How can I make the 3º?

Solved:
$(".fancybox").fancybox({
padding:0,
margin:60,
nextClick:true,
openEffect : 'none',
closeEffect : 'none',
nextEffect:'fade',
prevEffect:'fade',
nextSpeed :1,
prevSpeed:1,
afterShow : function() {
$('.fancybox-nav').hide();
$(".fancybox-image").hover(
function() {$('.fancybox-next span').click();},
function() {$('.fancybox-next span').click();}
);
}
})

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:);