Trying to serve responsive custom code through DFP - responsive-design

We're trying to serve simple markup - a thumbnail, image, and some text - through DFP. This markup needs to be fluid - it's one member of a responsive grid on our website.
Assuming we can't avoid the iframe, is there a way we can get the iframe to be set at 100% width? That would probably do it.
The issues we're having is that we're forced to define an ad unit size, and that seems to dictate the dimensions of the iframe.

You can't have the control over the iframe, the best solution would be to extract the content of the iframe and append it to the parent using javascript. This way you will be able to use your websites responsive grid and class.

Sorry Mathieu but you are wrong. DFP uses friendly iFrames and you can change the width or height if you use your own creative template. We have many custom templates defined in DFP for our masthead variations that can expand, collapse, destroy ad unit's iframe.

Related

Display HTML in Boxlayout

I want to display HTML in my forms. The problem is I have to use a Boxlayout to place my components. So when I put a WebBrowser I'll have some height and scroll issues. I get the HTML I want to display from a webservice. The length of the content is variable. I just want to display a part of this response. Here is what I already have:
The webBrowser is below the edit button and ends near the LBL_LIB_NOM label.
As you can see the webBrowser is way too high and I can't scroll the Form when I click over the WebBrowser. In this example I would like to reduce the size of the WebBrowser so we can only see the Title. I also would like if possible to scroll my form when I click on the WebBrowser since I don't want the WebBrowser to scroll.
I have tried a few things to solve my issue:
I tried to override the calcPreferredSize method.
I revalidate my form and my webbrowser.
I resized it's container using the deprecated setPreferedSize method.
In that case the container is well sized but the the WebBrowser displays
above the other components.
The usual answer I have seen in other posts is to put the WebBrowser in a BorderLayout but I can't do that.
So here is my question: Is there any other component I can use to display one HTML line ? Or is there a way to make a webBrowser work properly in a boxLayout ? Do I have to write my own HTML renderer ?
I'm guessing you want box layout so you can scroll... This is problematic.
Web views generally expect to scroll themselves and this is common in native widgets which handle their own events and thus scrolling. It's hard for our code to know when your swipe is intended for us or to the underlying native widget and it's harder still to do this in a consistently portable way.
There are 3 options:
Use only Codename One code
Use a border layout or similar layout
Use the web browser for the entire UI of this form
If you want to take the first option this article might be useful as a starting point.

Custom marker with Angular Google Maps

I am using the Angular Google maps directive to show maps on my webpage. Currently my markers are created using SVG but this is slow as I have to pass my information into a function that creates an SVG in memory to pass to the Google Icon. So I want to replace it with a custom HTML marker which will hopefully be less code and can leverage CSS classes for lots of the heavy lifting.
Unfortunately this isn't available as standard within the Angular Google Maps markers (unless I havent seen it?!)
I found a tutorial on how to do this with Overlays but I need clustering to work with my icons.
How can I do this? Without rewriting everything from scratch? Ideally I'd like to leverage as much of the existing angular-google-maps code as possible
The way I ended up doing this was to put in rich HTML into the labelContent property, setting a class on it via labelClass and then setting the icon to be transparent (https://maps.gstatic.com/mapfiles/transparent.png)
This way the actual icon is invisible but you can create rich HTML / CSS markers through the label. And this doesnt break functionality with the clusterer

Angular gridster add custom content

I have just started using angular-gridster library and I am wondering how I can embed an html page in a widget. I mean, how can I 'point' towards an html resource which loads its data separately etc. etc.
For example, I would like to embed a chart of some sort in a widget with the purpose of creating a dashboard.
Thanks!
You can put an iframe element inside of a Gridster widget. From experience, my recommendation is to detect when the user begins resizing a widget with an embedded iframe, and temporarily set display: none on the iframe during the resize, otherwise the browser will have big problems. Once the resize is done, reveal the iframe again.
I have actually solved it using this answer: Widgets with different dynamic content (angular-gridster)
Slightly more complicated than just using an iframe, yes, but then again you have a better modularity - each widget will have its own directive and all that. Thank you emackey!

Facebook Canvas App using Angular JS

I want to create an application on Facebook and I will host it on our server to be used from Facebook Canvas.
I was thinking of creating the web app with Angular.JS but one of my friends told me that my web app must be drawn inside a <canvas> html tag or I will not have the full functionality of Facebook integration.
So this is my question, do I have to draw my elements inside a <canvas>? or I can use other html tags with some basic animation?
No, you do NOT need to use HTML5 Canvas. There are "Canvas Apps", but there is no relation to HTML5 Canvas. Please check out the docs for more information: https://developers.facebook.com/docs
There are only a few things that are not possible without a Canvas App. For example, you can only use Notifications with a Canvas App, or you can only use invitable_friends in a gane with Canvas implementation. DonĀ“t worry about those before reading the docs.

Adding more than one viewport in Extjs Application

Is it possible to add more than one viewport in an application. Since we can add other containers more than one time and viewport is also a container.
I think of the Viewport as representing all of the possible viewing space of the web browser window. It is a special Container that re-sizes as the web browser re-sizes. In a full screen ExtJS application, all the other containers should all be nested under the single Viewport so that they can re-size themselves relative to the browser window as well. For this reason there is no concept of multiple ExtJS Viewports.
If, instead of a full screen ExtJS application, you wish to have multiple ExtJS widget applications embedded in div tags of some static html page then Viewport should probably not be used. Container or Panel objects can be the top level parent.

Resources