Is there a way to toggle an inline application to full screen? I would like to use a standalone application, but to meet an agency requirement I need to initially start it in a container within the existing page.
You can try to stretch the isle your inline app in running in to full browser size via HTML / CSS. That should do the job, but you will still stick to the inline app approach which should not harm in any way.
Related
Developed a web application using MeteorJS and deployed it on the MeteorJS cloud. It works great when using a computer however, everything looks very big when attempting to access it through mobile devices.
I don't have much experience with making web applications compatible on mobile devices but I'm just a little lost on what exactly I will need to do. Please advise.
Git: https://github.com/jalapagos/SimpleCalorieCounter
After seeing your app live, it looks like you haven't used any Bootstrap classes for your layout and some of the page elements.
I recommend that you use the bootstrap grid system to make you app responsive. A very handy tool for checking how things look in different devices is the Google Chrome Dev tools device mode. Here is what your app looks like in an iPad Mini device emulator.
EDIT: Added step by step instructions to get started with bootstrap
Here is what you need to do:
Adapt the basic bootstrap template for you app. Be sure to include the three <meta> tags right after the opening of the <head> tag. See #jeremeyK's answer below.
Note: the inclusion of bootstrap relates CSS and JS files, or even your custom caloriecounter.css file in this main template is NOT necessary, since Meteor would do that for you. You have the package twbs:bootstrap which will include the bootstrap related files for you.
See how the bootstrap grid system works. Basically you might want to consider a simple layout like as follows:
The text in red are the bootstrap class that you need to add to get the layout. You can see that the top navigation bar has a class navbar, while the smaller section/sidebar has col-xs-12 and col-md-3 classes, and larger section has col-xs-12 and col-md-9 classes. The col-xs-* applies for very small screen devices while the col-md-* applies for medium screen sizes.
What these classes mean here is, for the small section if the screen is very small (xs) then the area should cover the entire width of the window. If the screen is medium sized, then let it just occupy 1/4th of the window to make some space for the table section.
Once you have your basic layout ready, go to each component of your app like the navbar, buttons, modal, etc. and fix the HTML markups as per the sample code given for each component.
You can do these things very easily, you only need to follow the guides in the documentation. Also read explanation by #adamwolf below.
Have you added a viewport meta tag?
<meta name="viewport" content="initial-scale=1">
Sorry, cant comment yet. To add to tsega. bootstrap is very easy, just add the class and bootstrap does it for you.
http://getbootstrap.com/css/#grid
The grid system is based on 12 columns, by adding the class, for each row you should have the column add up to 12. You can chain these together, for example class="col-xs-12 col-md-6 col-lg-3"
this is saying, on a small screen the element width should be 100%, on a medium screen the element should be 50% and on a large screen the element should be 25%.
Using Orchard 1.8.1 I have written a simple image gallery that displays thumbnails and a lightbox. It is just a template that is driven by an Orchard Projection, using a Shape Layout. Works just fine. However, for phone users there is no point displaying thumbnails and it's better to just display the lightbox (with touch support). So I have also implemented that in a separate template. But how can I get Orchard to switch templates depending on the UserAgent string?
I have tried implementing Theme switching (http://weblogs.asp.net/bleroy/dynamically-switching-the-theme-in-orchard), but it's a really ugly solution when I really want to just replace one view, and still enable implementers to switch themes. This is NOT an issue of styling; it's an issue of changing the content based on the device.
I tried implementing DisplayModeProvider as described here: http://www.campusmvp.net/blog/displaymodes-in-mvc-4. But although the filter was called, it had no effect on view names.
Are Projections problematic here because the shape name is set? Is there a better way to go about this?
Create an alternate when you see a mobile browser, preferably from a shape table provider.
I'd like to use the Notification API to create toast notifications for a Silverlight app designed to run both in and out of the browser, but the NotificationWindow class is only available OOB.
Does there exist anything that can replicate the behaviour inside the app? My idea is to have a container in the bottom right of the screen overlaying all other content. Then, create a wrapper which detects OOB-mode, passing params to the Notification API if possible, or populating and showing my own container if not. Is there anything that does this available?
It seems strange that MS chose not to implement something like this, as has been pointed out before.
Displaying a notification in browser is simple. You just need to use a popup and make it appear in the right place. See the following post as an example.
Now the difference with that approach is that the notification will show inside the browser. In OOB it shows outside the window and it's visible even if the windows is minimized. Due to security reasons it's not possible to directly do this.
Out of interest, Chrome Applications like Tweetdeck and Gmail, are able to display notifications outside of the browser. I think this might be a possiblity, but not exactly a Silverlight and cross browser solution.
I'm planning to use thw WebBrowser component to display html that is created on the fly. The perfect choice for this is NavigateToString or NavigateToStream methods. There's only one single problem - I need to load images / css styles / js files too. How do I accomplish this while using string/stream?
As an option I'm also considering writing/finding simple http server and running it on some port, but that's an additional work and requirements(open ports) so I'd like to avoid that if it's possible.
You can cast WebBrowser.Document to IPersistMoniker and load a moniker that implements GetDisplayName. Check http://csexwb2.googlecode.com/svn/trunk/cEXWB.cs for example code.
Faced with this same problem I created my own solution. You can see it here:
Reference an image imbedded in a WPF application from within an HTML file used as help content
I'm looking for something similar to the VB6 / .Net Winforms "Browser Control", that let's you show a browser inside your application.
I don't want to just render a page, I want it to be a fully-functional browser, in which people can click links, will run Javascript, etc.
In essence, what I want is an IFrame, only that it runs inside a Flash app, or a Silverlight app.
The ultimate reason for this is that I want to defeat IFrame busters. I'm making a web app that lets you see other sites inside of it, and I'm running into a bunch of sites that have this code:
var t=top.location,w=window.location;if(t!=w) t.replace(w);
(that's from eBay BTW)
which essentially pops the user out of my site and into theirs.
My hope is that by using a "browser control" of some sort, inside a plugin sandbox, "top", will be top for that browser control, and not for my site.
Of course, if you have any other ideas to achieve the same, they'll be more than welcome.
Edit: I've tried the Component One control suggested by Bill, but it didn't work for these purposes, because it's creating an IFrame outside of the SilverLight control, so it executes in the same context as the page hosting Silverlight, which is what I'm trying to avoid.
Northcode SWF Studio allows you to add browser window on the stage in Flash. I personally use SWF Studio as a third party SWF2EXE tool to extend the power of Flash projectors. It's quite stable and powerful. As far as browser control is concerned here is the example you can download and test if it serves your purpose. Check the Browser APT here.
We've not built a component to enable folks to do this but we're open to suggestions here. That being said, easiest solution is an iFrame, but word of caution in that when you overlay an iFrame over the the top of Silverlight we've seen customers experience perf issues as a result (mostly due to alpha transparency of the iframe etc).
This isn't isolated to Silverlight, Flash suffers the same issue as it has to do with browsers and rendering within the given operating system.
HTH.
Scott Barnes / Rich Platforms Product Manager / Microsoft.
I use the HTML control created by Component One. It has the limitation that the Silverlight object in the page should be set to windowless, but otherwise it works very well.
It's an old post but I'll add my tupence answer. I used the DivElements free control for Silverlight link text and it works quite nicely. It just positions the div accurately so that it looks like it's on top.
As for the other such controls, you've got to set the windowless property of the Silverlight container to true.
It works really well for me and I'm able to seemlessly have Google maps and the Acrobat plugin displayed side by side with my Silverlight application.
PS: because the component just adds a <div> to the page, you can't do stuff like having it load dynamically Javascript file like in the <header> tag.
PPS: when setting the HTML code "by hand", be sure to hook up on the DocumentReady or Loaded event before playing with the HTML DOM.
Hope that helps someone.