I'm making a simple website using MVC-4 (my first). I would like to include a picture on the entire background of the home page. How do I do it? Where do I go? What's the code?
By adding following css code within the <head> </head> tag of Views\Shared_Layout.cshtml
<style>
body {
background-image: url('yourimage.gif');
}
</style>
Related
I have two Marko components that I'd like to include in other components whenever they render on an Express server: <main-header/> and <main-footer />.
components/main-header/index.marko is as follows:
<lasso-page />
<!DOCTYPE html>
<html>
<head>
<lasso-head />
</head>
<body>
<nav>...</nav>
And components/main-footer/index.marko is:
<footer>...</footer>
<lasso-body />
</body>
</html>
The page I want to render on a certain route would look like:
<main-header />
//component content
<main-footer />
However, I get an error of Missing ending "body" tag for main-header, so obviously this kind of EJS-partials like syntax isn't allowed. Is there a better way to do this without having a single index.marko file that is rendered in every route handler?
Here's the docs on using layouts:
https://markojs.com/docs/core-tags/#layouts-with-nested-attributes
The docs mention using #tags which allow passing named content chunks (if you wanted to put some stuff into <head> and other stuff into <body>), but if you only have a single content chunk to pass, you can use the default content.
You can create a layout that uses the <include> tag to render content passed to it:
<html>
<body>
<include(input.renderBody)/>
</body>
</html>
Then use the layout, passing body content:
<custom-layout>
Content goes here
</custom-layout>
I'm working on a site that uses media queries. I can see in my desktop browser that they are working correctly, but when I navigate to the site on my WP8 device, no CSS is loaded. I've created a very simple HTML page to replicate the problem and show what solution I tried, but couldn't get to work.
Here is the entire code:
<html>
<head>
<title>WP8 Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
#media screen and (min-width: 1024px) {
body {
background-color: red;
}
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
background-color: blue;
}
}
#media screen and (min-width: 480px) and (max-width: 768px) {
body {
background-color: green;
}
}
#media screen and (max-width: 480px) {
body {
background-color: yellow;
}
}
</style>
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/7\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
</script>
</head>
<body>
text
</body>
</html>
As you can see, it is very simple, there are 4 different "breakpoints" where the body's background color will change for different screen widths. After noticing how it doesn't work in IE on my WP8 device (a Lumia 822), I began googling the issue, and it seems to be a pretty well known issue. So the solution I found, and tried, came from here:
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
It seems pretty straightforward, in that I add the five lines to the top of my CSS:
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
And then add some JS to detect the IE Mobile browser from the UA. I have two issues with that:
First - When I alert my user agent string, I get the following from my WP8 device:
Mozilla/4.0 (compatible; MSIE 7.0;Windows Phone OS 7.0; Trident/3.1;IEMobile/7.0;NOKIA; Lumia 822
According to the article above, and this article, it should be IEMobile/10.0 instead. Any ideas on why mine is different? This appears to be the Windows Phone 7 user agent string. Why would my WP8 device show that?
Because of that difference, I had to change the JS to match 7.0 instead of 10, otherwise the if condition would never be met.
So, even still, with my code above, nothing happens, and my screen loads white on my WP8 device. Can anyone see what I'm doing wrong?
UPDATE:
It appears the JS was throwing an error:
Unexpected call to method or property access
So I found a solution for that, here:
if (navigator.userAgent.match(/IEMobile\/7\.0/)) {
var s = document.createElement("style");
s.setAttribute('type', 'text/css');
var cssText = "#-ms-viewport{width:auto!important}";
if(s.styleSheet) { // IE does it this way
s.styleSheet.cssText = cssText
} else { // everyone else does it this way
s.appendChild(document.createTextNode(cssText));
}
document.getElementsByTagName("head")[0].appendChild(s);
}
But, even now that the code executes successfully, my media queries are still ignored and I still see a white page load. Any ideas?
UPDATE 2:
I found another article, here (scroll to bottom), that says as of the GDR3 update (which I have, through the dev program):
Great news! Microsoft have fixed the viewport issue in WP8 Update 3
(GDR3).
Using device-width in a CSS #-ms-viewport rule now correctly renders
pages at the device-width, instead of the resolution width.
So, again I tried removing the Javascript, and adding only this to the top of my CSS:
#-ms-viewport{
width:device-width
}
But again, no CSS loads.
UPDATE 3:
It appears my User Agent may be correct. When I navigate to whatsmyuseragent.com on my WP8 device, it shows the correct UA. Maybe it has something to do with it being a local IIS 8.0 site when it reports the incorrect one? If that's the case am I not able to test my site locally from my Windows Phone? Has anyone ever done this?
It looks like you've sorted it now with bootstrap, but it's possible the site kicked in to EmulateIE7 (for compatibility) for some reason. It seems Lumia can also pick up on this for example if you have the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> tag and of course media queries are not supported on IE7.
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've got a iframe with pdf file:
<iframe src="pdf/sample.pdf"></iframe>
How to set that the iframe is the same height as the pdf file, without scrollbars?
If you want to display the PDF without scrollbars, you can do this by passing parameters in the URL. Adobe has documented this here:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
Try this:
<iframe src="pdf/sample.pdf#view=fit"></iframe>
You are not exactly setting the height of the iframe to fit the PDF, but it is probably the most robust solution since it is browser-independent and doesn't require JavaScript.
Here is an update after Daniel's comment.
I created a test HTML as follows:
<!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">
<head>
<title>Untitled Page</title>
</head>
<body>
<iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
width="300px" height="400px"></iframe>
</body>
</html>
This is how it looks in Chrome:
This is as expected.
Note that I also turned off the toolbar and the navpane so there is room for the page.
You can do it simply using the method I've explained on my facebook post https://www.facebook.com/antimatterstudios/posts/10151007211674364
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using
My solution
$(document).ready(function(){
var width = $(window).width();
var height = $(window).height();
$('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});
<object data="myFile.pdf" type="application/pdf" id="objFile"></object>
I configuring standart badge on https://developers.google.com/+/plugins/badge/config
For it Google+ rendering iframe content.
How i can change classes styles inside iframe?
At this time it seems there is currently no way to do it. I tried editing the CSS to get rid of the annoying border and white background:
.yeb {
background-color: none !important;
border: 0px solid gainsboro !important;
}
But since the CSS is in the Google server you can't override the iFrame. It is a current feature request in the Google forums.
You can do a little trick:
The HTML for the iframe:
<div id="social_gplus_circle">
<div id="social_gplus_circle_inner"><g:plus href="https://plus.google.com/105379671042990608528" size="smallbadge"></g:plus></div>
</div>
The CSS for the trick:
#social_gplus_circle{overflow: hidden;width: 105px;height: 45px;padding-top: 7px;}
#social_gplus_circle_inner{overflow: hidden;position: relative;top: -20px;left: -130px;height: 50px;width: 276px;}
iframe{display: block!important;}
I did not made this myself, I got it from a google forum.
You can't change it , because the google plus code is not on your server.
You can only modify the iframe CSS , if your page and the iframe code is on the same server.