I am looking to use the source code of an email which has the desired template that i need in the Microsoft Graph API.
The standard format for this looks like so:
"message": {
"subject": "Meet for lunch?",
"body": {
"contentType": "HTML",
"content": "The new cafeteria is open."
},
The sourcecodes template that i am looking to use already has contentType etc within the code.I have tried removing contentType and content and just having the source code within the body but this still does not work. Below is start of the source code that i am looking to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="http://www.opusenergy.com/wp-content/uploads/2016/03/Favicon-150x150.png" />
<title>Opus</title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
Any help will be greatly appreciated, Thank you.
The above payload is not what Graph API looks for. You need to specify the payload for the create message API call and the structure is given in the Graph API document. Still if you want to customize, you can do it, by making sure to modify/customize in-lines with Microsoft Graph API recommendation. Say i will put the HTML content inside the content of the Graph API call, specify the contenttype as HTML. This is the way i would start testing it make sure whether it's working or still i need to modify so that the message can show correctly in Outlook or not.
You tried the above recommendation and confirmed that it works.
If i want to send out email/template then i would first make sure it works in Word/Outlook; so that you can validate the HTML/CSS tags are working in, as i know that not all tags are not supported. Please keep this best practice and plan it accordingly. It will help you to build the template as you wish and you're guaranteed that the Outlook will show-up them as well.
This is my grid setup for media query. But, it shows its in 980px on my mobile.
#import "grid/grid";
$display_320: 'only screen and (max-width: 479px)'; $display_480:
'only screen and (min-width: 480px) and (max-width: 767px)';
$display_768: 'only screen and (min-width: 768px) and (max-width:
985px)'; $display_1024: 'only screen and (min-width: 986px)';
#media #{$display_320} { #import "grid/grid_320"; } #media
#{$display_480} { #import "grid/grid_480"; } #media #{$display_768} { #import "grid/grid_768"; } #media #{$display_1024} { #import
"grid/grid_1024"; }
My mobile phone is suppose to be 320px, but it says 980px. Do I have to do anything in my html?
Here is my code : http://jsfiddle.net/m38Gw/
> <meta content='width=device-width, initial-scale=1.0,
> maximum-scale=1.0, user-scalable=0' name='viewport' />
>
>
> <meta name="viewport" content="width=device-width" />
this solved my problem. Thanks
What's Going On
A lot of mobile browsers will provide fake information about their window width. This started with the iPhone because the pixel density was (is) so high compared to traditional computer monitors.
To give a more current example, the Galaxy S4 has a screen resolution of 1920x1080 pixels. That is the exact same as my 27" monitor. Media Queries, without resolution spoofing by mobile browsers, would be utterly useless here, because there is no difference in terms of real pixels.
To combat this, we have the viewport. This is the "fake" resolution of the mobile device, normally much smaller than the true resolution. Through the viewport we can retain use of media queries.
As tv4free stated, we have a tool to control the viewport, in the form of meta elements. One potential issue with his code though, is the maximum-scale. This will fix the viewport and not allow any scaling. Personally, I don't think that is an a problem is your media queries are properly designed. However, many people consider it to be a bad idea. If you leave out maximum-scale=1.0; user-scalable=0;, you will make the page load correctly each time, but allow the user to zoom in and out.
Code
Set the resolution, allow zoom:
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
Set the resolution, don't allow zoom:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
More information:
http://www.quirksmode.org/mobile/viewports.html
http://www.quirksmode.org/mobile/viewports2.html
I am using Handlebars in an Express Node.js app. My layout.html file includes a <head> section. How can I make the <head> section different for different pages? (So that I can, for example, reference a JavaScript file in only one page, and vary the <title> for each page.)
layout.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='/public/ajsfile.js'></script>
<link type='text/css' href="/public/style.css" rel="stylesheet">
</head>
<body>
{{{body}}}
</body>
</html>
(I am imagining varying the <head> content with something analogous to {{{body}}} in the above, but with {{{head}}}.)
This is a great question and, in my mind, a glaring weakness in Express's view model. Fortunately, there is a solution: use Handlebars block helpers. Here's the helper I use for this purpose:
helpers: {
section: function(name, options){
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
Then, in your layout, you can do the following:
<head>
{{{_sections.head}}}
</head>
<body>
{{{body}}}
</body>
And in your view:
{{#section 'head'}}
<!-- stuff that goes in head...example: -->
<meta name="robots" content="noindex">
{{/section}}
<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
You can make the follow:
layout.hbs
<head>
<title>{{title}}</title>
{{#each css}}
<link rel="stylesheet" href="/css/{{this}}" />
{{/each}}
</head>
app.js
router.get('/', function (req, res, next) {
res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});
Result:
<head>
<title>MyApp</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/custom.css" />
</head>
Maybe, you could use this implementation of the section helper: https://github.com/cyberxander90/express-handlebars-sections
You just need to install it and enable it:
yarn add express-handlebars-sections # or npm
const expressHandlebarsSections = require('express-handlebars-sections');
app.engine('handlebars', expressHandlebars({
section: expressHandlebarsSections()
}));
Hope it helps.
Younes
I know this is an older question but I wanted to point out a clear alternative solution to what you are asking (I'm not entirely sure why nobody else spoke about it over the years). You actually had the answer you were looking for when you bring up placing things in {{{head}}} like you do for {{{body}}}, but I guess you needed help understanding how to make it work.
It seems possible that most of the answers on this page are geared towards Node "Sections" because you speak about the different sections of HTML you've included in your layout file that you want to change. The "Sections" everyone is speaking about in this thread seems to be a technique, although I may be mistaken, originating from Microsoft's Razor Template Engine. More info: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm
Anyway Sections work for your question, and so could "Partials" theoretically (although it may not actually be the best option for this). More info on Partials:
https://www.npmjs.com/package/express-partial
However, you simply asked for a way to alter the HTML tag content of your template layout in Handlebars, and assuming we are talking about HTML head tags, all you need to do is replace the content you have in your template layout HTML head tags with one of these (I use 3 brackets because it seems HTML would be included and you don't want it escaped):
<head>
{{{headContent}}}
</head>
Then you just dynamically pass whatever data you want through the route you create in your app.js file to "get" the page like so (I am mostly taking the code #Fabricio already provided so I didn't have to rewrite this):
router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});
Now when you load your page, "I DID IT!" will be where you expect it to show up.
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
I have a very simple HTML page with this META tag for the iPhone:
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,user-scalable=no" />
Using the iPhone Safari, when the page loads in portrait mode it looks fine and the width fits the screen.
When I rotate the iPhone to landscape mode the web page is auto resized to fit the landscape width. Good, this is what I want.
But when I rotate back from landscape, the page is not resized back to fit the portrait width like it was before. It remains in the landscape width.
I want the iPhone to set it back to the right width automatically, just like it did for the landscape mode.
I don't think this should involve orientation listeners because it is all done automatically and I don't have any special styling for the different modes.
Why doesn't the iPhone resize the web page back in portrait mode?
How do I fix this?
UPDATE
I managed to get the iPhone to auto resize down but with a strange phenomenon of doing it only after an even number of rotations... Very very strange.
I use this META tag:
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Here's what I have to do to get it auto resized:
1. On load in portrait -> looks good.
2. Rotate to landscape -> resized to fit screen.
3. Rotate back to portrait -> no resize back.
4. Rotate to landscape -> still in size for landscape.
5. Rotate to portrait -> resized down to fit portrait screen.
Can someone explain this behavior??
I still want to know how to fix this and appreciate any assistance.
Thanks!
Tom.
This has to be a bug in iOS 4 Safari. Here's what my behavior was with the following meta tags (the second tag is to make it full screen):
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
Page would scale correctly when going from portrait to landscape until I used the pop up keyboard to enter a value in a field - then it would stop scaling. Which would mean if I used the keyboard in landscape it would be too large when I went to portrait, or vice versa.
Switching using the following meta tags fixed it... Thanks to the other answers on this page.
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
I had the same problem on my 3GS 3.1.3, even though I couldn't get it to ever become the right size again after landscape mode. But when I removed "height=device-height" the page scaled down correctly every time. So my meta looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I'd like to be able to use the height attribute to lock the height, but it seems like they don't mix too well.
You need to put one more thing minimum-scale=1.0 so it would like:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
I'm using ExtJs (sencha touch), it seems Good
Ext.setup({
tabletStartupScreen: 'images/tablet_startup_768x1004.png',
phoneStartupScreen: 'images/phone_startup_320x460.png',
tabletIcon: 'images/tablet_icon_72x72.png',
phoneIcon: 'images/phone_icon_72x72.png',
icon: 'images/icon_72x72.png',
statusBarStyle: 'black',
glossOnIcon: true,
fullscreen: true,
onReady: function() {
var viewport = null;
var metas = document.getElementsByTagName('meta');
for(var i = 0, length = metas.length; i < length; ++i){
var meta = metas[i];
// already Extjs addedMetaTags
if(meta.name == 'viewport'){
viewport = Ext.get(meta);
break;
}
}
if(null == viewport){
viewport = Ext.get(document.createElement('meta'));
}
if(window.navigator.standalone){
// IMPORTANT!!! not set to height=device-height when iphone standalone mode was ignored "scale" settings
viewport.set({
name: 'viewport',
content: 'width=device-width, initial-scale=0.1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
});
} else {
// IMPORTANT!!! set to height=device-height when !standalone mode; behav window.innerHeight = fullscreen size
viewport.set({
name: 'viewport',
content: 'height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
});
}
}
});
other devices compatible with ...
var watcher = {
handlers: [],
dimentions: {width:0, height: 0},
fullscreenize: false,
orientLandscape: function (){
return 90 === Math.abs(window.orientation);
},
orientPortrait: function (){
return !this.orientLandscape();
},
width: function (){
return this.dimentions.width;
},
height: function (){
return this.dimentions.height;
},
changeDimentions: function (evt){
var self = this;
(function (){
if(self.fullscreenize){
window.scrollTo(0, 1);
}
self.dimentions = Ext.Element.getViewSize();
self.fireOnchange();
}).defer(100);
},
init: function (){
if('onorientationchange' in window){
Event.observe(window, 'orientationchange', this.changeDimentions.bind(this));
} else {
Event.observe(window, 'resize', this.changeDimentions.bind(this));
}
Event.observe(window, 'load', this.changeDimentions.bind(this));
},
fullScreen: function (){
this.fullscreenize = true;
var self = this;
document.observe('dom:loaded', function (){
(function (){
window.scrollTo(0, 1);
self.changeDimentions();
}).defer(100);
});
},
fireOnchange: function(){
var self = this;
self.handlers.each(function (handler){
handler.apply(null, [self]);
});
},
onchange: function (handler){
this.handlers.push(handler);
}
};
watcher.init();
watcher.fullScreen();
aComponent = Ext.extend(Ext.Component, {
initComponent: function (){
watcher.onchange(this.fullscreen.bind(this));
},
fullscreen: function (){
var height = watcher.height();
var width = watcher.width();
this.menu.setHeight(40);
this.mainPanel.onResize(height - 40, width);
}
});
I also ran into the 'not scaling back when I went back to portrait' problem.
I got it working with
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.6, user-scalable=no" />
for basic scaling back and forth, on 3G with iOS 4, as I change orientation.
I originally used "minimum-scale=1.0", got it to work when I replaced it with "initial-scale=1.0", after I saw the suggestions here.
try this
<meta name="viewport" content="width=1024" />
Just set the viewport directive to...
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
...no need to use JavaScript and you can still allow the user to scale the page should they wish.
Are you using XHTML rather than HTML?
Try this, ensuring you close your first meta tag correctly.
<meta name="viewport" content ="user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
This is a bug in Safari on iOS 5 and lower (A.K.A. Safari Viewport Scaling Bug).
Try to avoid fix with meta viewport tags that disables the zoom gesture; instead, use this JavaScript fix:
https://gist.github.com/901295
More info about this bug: http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug
I had the same problem with my iPhone 5. The answer was incredibly simple.
<meta name="viewport" content="width=device-width" />
This properly displays the page in either view, all the time, and offers scalability.
We faced the same issue in JQuery Mobile 1.3.0 also, we used the below and it worked
in css
body { /* IOS page orientation change resize issue*/
-webkit-text-size-adjust: none ;
}
and if still the header/footer does not resizes correctly (optional)
$(window).resize(function() {
$("div[data-role=header]").width($(window).width());
$("div[data-role=footer]").width($(window).width());
});