I have a qx.Desktop application which is used on mobile devices. Some of the content in my application should be zoomable by pinching. So my question is: Is there a way to zoom a qooxdoo widget like for example a qx.ui.basic.Image bigger and smaller?
The page zooming is configured through the meta tags of your index.html .
If you want to "zoom" or "pinch" one single widget you can use
http://demo.qooxdoo.org/current/apiviewer/#qx.bom.element.Transform
and use the scale method.
You can access the DOM element through getContentElement().getDomElement()
Here is an easy example:
var div = yourLayoutElement.getContentElement().getDomElement();
if (div !== undefined && div !== null)
{
div.style.zoom = scale;
}
a scale of 1.0 is 100%
Related
I'm building a portfolio website with React with large full width vertically scrolling images. There is a single text box on the side of the webpage that I would like to display the title of each image as each image comes into view.
Any recommendations on how to change the text in a DIV when an image comes into view? I'm not even sure what to search to find an answer to this. Any help is much appreciated. Thanks!
You can attach an onscroll listener to detect when the user scrolls. Inside the listener, you need to do some math to calculate which element is currently viewed. The variables you can use for the calculation are scrollTop (on the container, used to determine the current scroll position) and the clientHeight of each element.
let nameDisplayDiv = document.getElementById('display')
let containerDiv = document.getElementById('container')
function refresh() {
let scrollTop = containerDiv.scrollTop + containerDiv.clientHeight / 2
let height = 0
for (let child of containerDiv.children) {
let top = height
let bottom = height += child.clientHeight
if (top < scrollTop && bottom > scrollTop) {
// Found the element that's currently viewed!
nameDisplayDiv.innerHTML = child.style.backgroundColor
break
}
}
}
containerDiv.onscroll = refresh
Here's a working fiddle:
https://jsfiddle.net/uxh91Leq/2/
I want to achieve something like the next image at the bottom. Three sections which I can change touching in each option (Descripción, Video and Afiche). I don't know which UI components should I use according to iOS patterns and components. My workaround to achieve it would be use three buttons and when the user touch any of them I should hide the current view and show other view. Should I do my workaround or do you have any other suggestion? I'm developing from iOS 7. Thanks.
My solution was to use a UISegmentedControl to switch between views. I'm using a WebView and when user change between options I just change the WebView's content.
Assign selector to the UISegmentedControl
[_segmentControl addTarget:self action:#selector(segmentedControlClicked:) forControlEvents:UIControlEventValueChanged];
Method to change between views
-(IBAction)segmentedControlClicked:(id)sender
{
if([sender selectedSegmentIndex]== 0 )
{
[_webViewContent loadHTMLString:desc baseURL:nil];
}
else if ([sender selectedSegmentIndex] == 1)
{
[_webViewContent loadHTMLString:html baseURL:nil];
}
else if([sender selectedSegmentIndex] == 2)
{
[_webViewContent loadHTMLString:desc baseURL:nil];
}
}
I'm wondering how to render responsive pages using PhantomJS in pdf format.
I have tried so many responsive pages and found that it is printing the pdf using the print css.
So, if the page includes the print css OR screen only css it will render the pdf same as we found via print command preview (Ctrl + p).
Is there any way OR script by which i can get the pdf as I'm seeing them on web browser?
Attaching the file when i tried to get the pdf from http://getbootstrap.com/examples/jumbotron/.
Also the main issue is not responsive designes, the issue is print css applied over them.
example pdf
jorupp came up with a javascript solution in this gist. It essentially let's you "lock" all the media queries in the document's stylesheets to whatever applies presently, before changing to print mode.
In case the link ever disappears, here's the code:
function process(rule) {
if(rule.cssRules) {
for(var i=rule.cssRules.length-1; i>=0; i--) {
process(rule.cssRules[i]);
}
}
if(rule.type == CSSRule.MEDIA_RULE) {
if(window.matchMedia(rule.media.mediaText).matches) {
rule.media.mediaText = "all";
} else {
rule.media.mediaText = "not all";
}
}
return rule;
}
for(var i=0; i<document.styleSheets.length; i++) {
process(document.styleSheets[i]);
}
This is quite tricky since there is no option to tell PhantomJS to use the screen when rendering as PDF.
You would need to
load all the linked stylesheets that contain a print block with __utils__.sendAJAX,
remove #media print block (this is quite hard with regex because you need to look out for balanced braces, but relatively easy with plain JS),
maybe you even need to rename #media screen to #media print,
remove the linked stylesheet from the document and
add a style element which has the manipulated stylesheet inside (preferable in the same place as the previous stylesheet) to the DOM.
Your page won't look good, because you usually have page breaks and the like with pdf. Also, page width and viewport width are quite hard to get right. Changing the page width doesn't change the viewport, so it won't be the proper responsive that would have with a pixel perfect png. But that is only a solution if you don't need selectable text.
I'm developing a website for a business. It's not a web application by any stretch of the imagination but I would like it to look ok on mobile devices rather than simply scale the desktop version. After lots of research into media queries and responsive/adaptive design approaches my requirements are that the mobile layout only kicks in when the user really is on a small screen and not just resizing their desktop window, the solution is simple and can be accomplished with media queries and minimal javascript.
The approach I've come up with is something like this:
<script type="text/javascript">
var isRetina = window.devicePixelRatio > 1 ? true : false;
var isMobile = (screen.width < 768) ? true : false;
if (isMobile && isRetina) {
SHOW MOBILE LAYOUT AND HI-RES IMAGES
} else if (isMobile && !isRetina) {
SHOW MOBILE LAYOUT AND LO-RES IMAGES
} else if (!isMobile && isRetina) {
<<SHOW HI_RES IMAGES>>
} else if (!isMobile && !isRetina) {
SHOW DESKTOP LAYOUT AND LO-RES IMAGES
}
</script>
Before I commit to this approach I figured I'd check in and see if there is a problem or a terrible gotcha awaiting me. Or if there's an even simpler/better way to achieve this goal. I've searched a bunch on SO an haven't seen any mention of using this exact same solution.
The reason javascript is not a preferred method when loading CSS layouts is because javascript is usually the last thing loaded when the browser renders your page. This means that for a flash second you'll see your initial layout on the screen, before it loads the correct CSS. The simplest and most ideal approach is to make use of CSS3 Media Queries (something like this simple tutorial could go a long way: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps).
The other option you have is to use Modernizr to load your stylesheets or other files that you may want to load based on viewport sizes. Look into the Modernizr Doc, you can basically "test" for the functionalities and features on the current browser that's being used to view your webpage - and load files accordingly. As a side note, Modernizr is a JS library so again use with caution when loading CSS files - it's known to load them without the splash screen of your initial layouts but I'd still say the best practices for loading layouts based on media queries is to use the CSS3 media queries themselves.
sorry to post to answer, couldn't add comment.
window.devicePixelRatio on firefox (and i believe Mac) will be bigger than 1 if you zoom in, which could result in a bug
navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)
this might help
I'm making a responsive site and need to include a Facebook Like-Box for the client's Facebook fanpage. The developer page for the like-box has a widget for customization, but it doesn't allow you to set a width in percentages.
I've searched around and the closest I've got was this page from 2010, which refers to a fb:fan widget that allows you to link custom CSS. I tried to get this tutorial to work but it fails with this error:
<fb:fan> requires one of the "id" or "name" attributes.
So, to recap, I need a Facebook Like Box that I can either set up to be fluid, or which allows me to pass custom CSS to the iFrame it generates. Anyone able to point me in the right direction?
I found this Gist today and it works perfectly: https://gist.github.com/2571173
/* Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ */
/* This element holds injected scripts inside iframes that in
some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
You thought it couldn't be done? AHA! Have at you, Facebook and your wicked fixed-width ways: I wrote a JQuery script to undo all your evil!
$(document).ready(function(){
var fbWidth;
function attachFluidLikeBox(){
// the FBML markup: WIDTH is a placeholder where we'll insert our calculated width
var fbml = '<fb:like-box href="http://www.facebook.com/YOURFANPAGEORWHATEVS" width="WIDTH" show_faces="false" stream="true"></fb:like-box>';//$('#likeBoxTemplate').text().toString();
// the containing element in which the Likebox resides
var container = $('#likebox');
// we should only redraw if the width of the container has changed
if(fbWidth != container.width()){
container.empty(); // we remove any previously generated markup
fbWidth = container.width(); // store the width for later comparison
fbml = fbml.split('WIDTH').join(fbWidth.toString()); // insert correct width in pixels
container.html(fbml); // insert the FBML inside the container
try{
FB.XFBML.parse(); // parses all FBML in the DOM.
}catch(err){
// should Facebook's API crap out - wouldn't be the first time
}
}
}
var resizeTimeout;
// Resize event handler
function onResize(){
if(resizeTimeout){
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(attachFluidLikeBox, 200); // performance: we don't want to redraw/recalculate as the user is dragging the window
}
// Resize listener
$(window).resize(onResize);
// first time we trigger the event manually
onResize();
});
What is does is it adds a listener to the window's resize event. When it resizes, we check the width of the Likebox' containing element, generates new XFBML code with the correct width, replaces the containing element's children with said XFBML and then trigger the Facebook API to parse the XFBML again. I added some timeouts and checks to make sure it doesn't do anything stupid and only runs when it needs to.
Much has changed since the OP.
By simply choosing iFrame and setting your width to 100%, your FB Like Box should be responsive.
Basically FB adds this to the iFrame:
style="border:none; overflow:hidden; width:100%; height:300px;".
Been struggling with the exact same problem. A quick & simple solution is to use the iframe based Facebook Like box.
<iframe class="fb-like-box" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&height=500&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
Note the assigned 'fb-like-box' class and all the removed inline styles. The class for the iframe could look something like this:
.fb-like-box {
width: 100% !important;
height:500px;
border:none;
overflow:hidden;
}
Looks like it doesn't matter what the height and width are that are defined in the iframe's src tag. Just place the iframe into some fluid element like a cell in a CSS grid layout.
(includes ideas from: http://updateox.com/web-design/make-facebook-comment-and-like-box-fluid-width/)
I used the HTML5 version of Facebook Like Box and here is what worked for me:
.fb-like-box,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
width:100% !important;
}
You cannot set the like-box to anything other than a pixel width. My suggestion is to place it in a DIV or SPAN that is fluid with overflow set to hidden. Sure, it's going to crop off part of the like-box, but by having the requirement of fluid, this is your best bet.
Here's a small work around that appends the HTML5 Facebook LikeBox Plugin into the DOM with a response height or width.
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var widget_height = parseInt((height)*0.9);
var widget_width = parseInt((height)*0.3);
var page_url = "http://www.facebook.com/Facebook";
$(".fb-plugin").append("<div class='fb-like-box'
data-href='"+page_url+"'
data-width='"+widget_width+"'
data-height='"+widget_height+"'
data-colorscheme='dark'
data-show-faces='true'
data-border-color='#222'
data-stream='true'
data-header='true'>
</div></div>");
});
The comment above from Ed and Matthias about using 100% for the iframe worked great for me. Here is my iframe code
ORIGINAL WITHOUT FIX:
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&
width&height=290&colorscheme=dark&
show_faces=true&header=true&stream=false&
show_border=true&appId=XXXXXXXXXX"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; height:290px;"
allowTransparency="true"></iframe>
UPDATED WITH 100% FIX:
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&
width&height=290&colorscheme=dark&
show_faces=true&header=true&stream=false&
show_border=true&appId=XXXXXXXXXX"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; height:290px;width:100%"
allowTransparency="true"></iframe>
The only change is adding "width:100%" to the style attribute of the iframe
note that the code above has "XXXXXXXXXX" in place of the unique references