I've modified a template that had Fancybox already installed and functioning; I'm having problems with my gallery windows being too big on smaller screens. Currently I have a large image and then a decent block of text below. After modifying the code in the 'main.js' file, I can get the window to fit inside a browser window on a non-Retina Macbook Pro and larger screens, but on a Macbook Air 11" the window gets cut off on the bottom (I know it's about pixels and not screen size, I just don't have the numbers on hand). It's not an issue on a phone because I can scroll the window up with a finger.
One solution would be to enable scrolling inside the windows, but if that is possible then I haven't been able to make it work. Maybe they should be iframes and not gallery windows? If so I would need advice on how to implement that (the template did not come with any iframe examples beyond links to videos).
Here's the site: Weirdsmobile
Click on any of the tiles in the "Projects" section to see a Fancybox window.
Here is all the javascript code; I got advice to add the fitToView: false and maxWidth: "95%" because the window initially did not fit on a phone screen. I then added
maxHeight: "60%" to try and shrink it to fit, otherwise the full window is too large; but on smaller screens that % is still too high.
BRUSHED.fancyBox = function(){
if($('.fancybox').length > 0 || $('.fancybox-media').length > 0 || $('.fancybox-various').length > 0){
$(".fancybox").fancybox({
fitToView: false, // so we can get all the length of the title
maxWidth: "95%", // will make it responsive; adjust to your needs
maxHeight: "60%",
padding : 0,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h4>' + this.title + '</h4>' + '<p>' + $(this.element).parent().find('img').attr('alt') + '</p>';
},
helpers : {
title : { type: 'inside' },
}
});
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
}
}
Related
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 ?
i just started to make a new app by electron and find out after adding a new feature in my app, a very hard to notice white(or maybe transparent) gap added in very right side of the window.
More explanation: I made an application that fetch something from server and after some manipulation, will display them in main window. The application just has 1 window (its quite simple app) and this is configuration for window that i added into main js "Before" gap shows up:
mainWindow = new BrowserWindow({
show : false,
width : 820,
height : 520,
frame : false,
resizable : false,
title : "blah blah blah"
})
After that i decided to expand the app and cache last location of the window before user try to close window so in next time that user will open the app, the window will at the same prev place. So i added some extra function to catch window "x" and "y" and save them into a "json" file in "appData". I changed window config to this one:
mainWindow = new BrowserWindow({
show : false,
width : 820,
height : 520,
frame : false,
resizable : false,
title : "blah blah blah",
x : {get x from storage},//this is pseudo
y : {get y from storage}//this is pseudo
})
Now a small gap appears in right side as shown in pictures below. More explanation in pictures caption.
HTML:
<body>
<div class="hello-rob">
<div class="nav"></div>
</div>
</body>
CSS:
body,
html {
position: relative;
width: 820px;
font-weight: normal;
-webkit-font-smoothing: antialiased;
height: 100%;
overflow: hidden;
-webkit-user-select: none;
}
caption: Css width set to "820px" same as window "width" in main. js, as you can see there is almost "2-3px" white gap (i marked with a circle)
caption: If i comment the css width, then the window will expand to its real width that is "822.4px"
caption: When i comment "x" and "y" in main.js and css "width" presence, every thing seems fine.
P.S: i don't think this issue its just about "x" and "y" that set in main.js and regardless of that the main problem is:
Why and how the window is bigger than what we set for it in main.js and in css?
electron v1.7.11
Windows 10 64bit
Please note:
This is not a "permanent solution", this is just a temporary hotfix before electron team diagnose what is the main cause of this behavior by electron.js.
Thanks to #mplungjan and #Mike to reminding me to read documentation once again
I tried to watch/trace "window size" in every moment so that i can find out inside the electron core "window size" is inaccurate or no, something in renderer.js is involve?!
Based on this results (from main.js), its obvious changes happen in main.js part.
This is main.js console (when extra gap is evident):
[ 823, 522 ]// console.log(mainWindow.getSize());
[ 822, 521 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 101, width: 823, height: 522 }// console.log(mainWindow.getBounds());
From the results you can see electron uses setSize, getSize to demonstrate window size and obviously its not accurate because the window's size should be "820px" * "520px".
How to fix this: (please consider big part of codes below are not new, new tricky-lines has a comment)
function createWindow(){
mainWindow = new BrowserWindow({
show : false,
width : 820,
height : 520,
frame : false,
resizable : false,
title : "blah blah blah",
x : {get x from storage},//this is pseudo
y : {get y from storage}//this is pseudo
minWidth: 820,// new
maxWidth: 820,// new
minHeight: 520,// new
maxHeight: 520// new
})
// in this function i called console.log()
mainWindow.once('ready-to-show', () => {
mainWindow.show();
mainWindow.setSize(820,520);// new (i didn't checked but maybe before `mainWindow.show();` is better to place this line of code)
})
}
app.on('ready', () => {
createWindow()
})
Another test to check the effect of changes:
[ 820, 520 ]// console.log(mainWindow.getSize());
[ 820, 520 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 100, width: 820, height: 520 }// console.log(mainWindow.getBounds());
And the gap no longer exists.
P.S: personally i don't like this kind of solutions, so if any one else was able to represent a better solution i'll accept it as an answer.
I've been working on a multi platform mobile application. I almost finished it but I always tested on iOS (because of reasons). Now I am able to test on Android to find out that it fails in many ways.
The main problem here is that when I use:
alloy.createSomeElement({
//params
})
$.someView.add(someElemet);
the element is not added to the view. As I mentioned, this only happens on Android and works just fine on iOS.
Here I show you an example and it's result in both platforms.
e.json.forEach(function(address) {
var addressView = Ti.UI.createView({
height : Ti.UI.SIZE,
width : '90%',
layout : 'horizontal',
touchEnabled : true,
Address_id : address.id
});
var icoCont = Ti.UI.createView({
height : 20,
width : '10%'
});
var icon = Ti.UI.createImageView({
height : '20',
width : '20',
image : "/compartidos/persona3.png",
touchEnabled : false
});
var addressText = Ti.UI.createLabel({
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
left : 1,
text : address.street + " - " + address.ext_number,
font : {
fontSize : 12,
fontFamily : "Nunito-Bold",
},
touchEnabled : false,
color: "#000"
});
if (address.alias)
addressText.text = address.alias;
var separator = Ti.UI.createView({
height : 5,
width : '100%',
top : 5,
bottom : 5,
backgroundColor : '#8C000000',
touchEnabled : false
});
addressView.add(icoCont, addressText);
icoCont.add(icon);
$.container.add(addressView, separator);
});
Result on iOS: result on iOS
And this on Android: result on Android
I really hope you can help me with this.
note: Nueva dirección and Dirección actual are not generated this way, those exist in the xml file.
I solved my issue after a long cycle of try & error. I'm posting my solution only in case somebody faces the same problem.
Seems that in Android I can't add multiple elements in a single instruction like this
addressView.add(icoCont, addressText);
The only thing I had to do is separate it in 2 (One for each element) like so
addressView.add(icoCont);
addressView.add(addressText);
You can add many views in single add statement, but you need to pass them as array like : addressView.add( [icoCont, addressText] );
I am using a small script (full code at the bottom of the question) to create a BorderLayout - top, left, right and center. I fill those parts with sap.ui.commons.layout.BorderLayoutAreas (as shown in this examples.)
My main problem is that I want this Layout to fit the whole Browser screen, being resized if the broswer windows is resized. For that the BorderLayout has the properties width and height for which I set a size. But it doesn't work as expected. For example If I replace the width with 100% or auto the application width is always adjusted correctly and fills the browser (in width). For some reason this does not work for the height. As soon as I enter something different from a pixel value (e. g. 900px) all controles dissapear and the window is empty.
Am I using it wrong or is there another way to fith the whole application to the screen?
<!DOCTYPE html>
<html>
<meta http_equiv='X-UA-Compatible' content='IE=edge'/>
<title>OpenUI5 Demo</title>
<script id='sap-ui-bootstrap'
src='/js/openui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.ui.commons'></script>
<script>
var oBorderLayout1 = new sap.ui.commons.layout.BorderLayout("BorderLayout1", {
width : "100%",
height : "100%", // THE APPLICATION ONLY WORKS WHEN THIS LINE IS SET TO A PIXEL (e. g. "300px") VALUE
top : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Top Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
bottom : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Bottom Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
begin : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Begin Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
center : new sap.ui.commons.layout.BorderLayoutArea({
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Center Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
end : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'End Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
})
});
oBorderLayout1.placeAt("body");
</script>
<body>
<div id='body'></div>
</body>
</html>
this is a very basic CSS topic and not at all related to UI5:
In CSS percentage heights only work if the height of the parent element is defined. Either as an absolute value, or as a relative value, but the parent of it is absolute-height etc.
Elements with no height basically say "I am as tall as my content" and when the content then has 100% height, it says "I am as tall as my parent", so that's a shortcut/deadlock and the height collapses to zero.
Also note that the <html> and <body> root elements also have no fixed height by default, so they also behave the same way.
So the easy solution to make 100% height work is to set the height of the parent to a fixed value or to set ALL the parents up to the very root of the page to 100% height - in your example:
<style>
html, body, #body { height: 100%; }
<style>
See jsbin for a running version:
http://jsbin.com/bonacohefu/1/edit
It seems like this is a bug, if you look into the API it says that the default for width and height is 100% but it doesnt seem to work for the height property.
I added it to a test page, and it had the same behavior as your example.
I have an issue with the html5 video controls capturing any actions happening on top of them in iOS, which is interfering with a modal window I need to display on top of the video.
I'm trying to customise the modal itself, but can't seem to get it to work. Basically, when the modal opens, I need to do:
var video = document.getElementById("videocontainer");
video.removeAttribute("controls");
And when the modal closes, I need to add the controls back again:
var video = document.getElementById("videocontainer");
video.setAttribute("controls","controls");
But I can't seem to get it to work. Here's the code for the relevant part of the modal window:
//Entrance Animations
function openModal() {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure,
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
}
//Closing Animation
function closeModal() {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset,
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
}
The issue is that the placeholder for the VIDEO tag on a webpage viewed on an iPhone or iPod Touch greedily captures all events even from elements that are on a higher "layer". This doesn't happen on the iPad or in a desktop environment.
On the iPhone and iPod Touch the VIDEO tag is effectively just a link to open the device's native QuickTime app to play the video asset. There is no concept of "controls" within the browser on these devices so adding or removing them won't do anything.
I've had to deal with this very problem at my current company which specializes in online video. The "hacky" way we got around this in the HTML5 version of our player widget was to absolutely position the VIDEO tag with a left style of -2000px (you can choose any suitably large number of pixels that you know your VIDEO tag will never match in width) when the widget detects that the user is using an iPhone or iPod Touch.
Since the VIDEO tag itself has nothing to do with how the user will view the video asset and we use a "poster" image inline with where the VIDEO tag normally shows up the user is none the wiser about where the VIDEO tag actually is (and wouldn't really care, anyway).