When running my web app on my local machine i can ref css/scripts/images using:
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
But when I deployed to my Development server, it wasn't able to find any of my content. After researching the issue everyone suggests using the below method:
<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />
<img src="<%=Url.Content("~/Content/3.png")%>" />
At least now all my content is loaded and works when I push to the development server. However now that I have the server script in there, the "Design" view in Visual Studio doesn't load any styling/etc. I'm wondering if there is an alternative or something I'm missing that perhaps would fix this? Or maybe I'm going about it all wrong? Any input is greatly appreciated.
The suggestion you found is a great way to reference content.
As far as Design View goes, don't sacrifice the elegance of your code just to get Design View. Learn to love Code View. Preview in a browser. In my experience, that workflow really has no major downsides (once you get used to it).
(As an aside, I think most of the developers who like ASP.NET MVC do not use "Design View" in Visual Studio. One of the reasons I love MVC is that it allows me to be picky about the markup. Any kind of designer lies outside that kind of thinking.)
You can always cheat the designer with an atrocity similar to this:
<% if (false) { %>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<% } %>
<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />
but hey, quite honestly hitting F5 in the browser will give you faster results than waiting for the designer to load (even if your application is hosted on the other end of the world).
Design view is broken? Thats not a bug in your code, thats just the way it is. This is true for ASP.NET MVC and regular ASP.NET
Related
I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
index.html
<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="Icon#2x.png" />
<link rel="apple-touch-startup-image" href="Default#2x.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>
demo.manifest
CACHE MANIFEST
index.html
Default#2x.png
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
EDIT #1: I have done some more research and came upon this answer:
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available.This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?
CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).
Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.
Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).
You can also try the async attribute on iOS5+, but I haven't tried it myself.
Hope this helps :)
Alright, seems like a basic and annoying problem. I think the best way to tackle this would be via AJAX (Asynchronous JavaScript and XML). I'm sure you probably already know what this is, but it's just a way to basically send a request from JavaScript for a file elsewhere and then load it into the page or parse it however you wish.
A little more advanced approach
For your example, I recommend you comment out the line of CSS that has the background-image like this:
.bg-container {
/* background-image: url(img/bg.png); /* commented out */
}
Note that the second comment just makes it easier to comment and uncomment the one line while debugging your code.
Now just add a simple img tag to your body, and make the src of it an ajax loader (you can find the spinning wheel generators anywhere). From here you can write some JavaScript to load the image, get rid of the spinner, and replace it.
Two simpler approaches
This solution doesn't appeal to me, I don't think most people would like it anyways. That's why I use 'Bootloader.js' which is a little AJAX loading tool I wrote a couple of months ago to help people with these sort of problems.
It's easy to use, aside from the script include, just add this meta tag:
<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">
The forms and anchors is optional, if you use it, it will make all your forms and links asynchronous (not for cross-domain use yet). The forms are not easy to setup, you can read the documentation on that if you would like.
Finally, set up your body like this:
<body>
<div id="body">
<!-- All the content should go here -->
</div>
<!-- This will disappear on first ajax load -->
</body>
And there you have it, this will handle everything for you.
Final suggestion
If you don't like any of these options, or want a limited yet customizable option, I recommend you use Image LazyLoader by Mika Tuupola (included with Bootloader.js) and also available at: http://www.appelsiini.net/projects/lazyload
Tell me how it goes, and what you use! XD
This problem occurs with even simple sites.
Take this for example: it shows a website with a background of #ccc with a splashscreen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a white flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the white flash. And if the splash screen is dark, it looks worse again.
How to get favicon website with Chromium Embedded Framework? I could look at the source code and get the url of the icon, but some sites, like Facebook, do not use a standard procedure to add a favicon, then, how do I get the favicon? Thanks.
The rules for the favicon are all explained on the Wikipedia page.
The standards use a link element with a rel attribute in the <head> section of the document to specify the file format, file name and a location can be specified for any Web site directory.
You need to look, inside the <head> element, for link elements of this form:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
or
<link rel="icon" type="image/vnd.microsoft.icon"
href="http://example.com/image.ico" />
If you don't find such links, then use the fall back of looking for favicon.ico at the root directory.
I'm not certain why you think that Facebook don't follow the standard. I just looked at an FB page which contained this:
<link rel="shortcut icon"
href="http://static.ak.fbcdn.net/rsrc.php/yP/r/Ivn-CVe5TGK.ico" />
It's not possible for websites to use some other mechanism to get favicons to browsers. The browsers follow the well-defined rules for getting favicons. If a website did something different, the browser would not find the favicon.
From this blog entry, the best practice for cross-browser supported favicons is to include
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico"> <!-- For good browsers. -->
<link rel="SHORTCUT ICON" href="http://www.example.com/image.ico"/> <!-- For Internet Explorer-->
The first link is for real browsers and the second is for ie rubbish. On some websites you will see type="image/x-icon" in the link tag. There was a time when this was the correct implementation, but image/x-icon has now been superceded by image/vnd.microsoft.icon which is now part of the IANA standard for MIME types.
By the way, older versions of ie just looked for a file name /favicon.ico which was hard-coded. If you wanted to be ultra safe, you should name your favicon as favicon.ico. Of course that does not help you if your domain hosts multiple web-sites for different purposes.
Note: If you don't need to support favicons for IE, then you are then free to use png, gif and jpg formats for your favicon, as indicated below...
<link rel="icon" type="image/png" href="http://www.example.com/image.png">
<link rel="icon" type="image/gif" href="http://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="http://www.example.com/image.jpg">
CEF1 has a callback named OnFaviconURLChange that's called whenever the favicon URL for a page changes. CEF3 doesn't support this callback yet, according to this bug in the CEF issue tracker.
You need to implement a client handler and at least CefDisplayHandler. This class have the OnFaviconURLChange (not sure in what version did appear, but for sure is present in branch 2357 and later).
C++ prototype is:
void OnFaviconURLChange(CefRefPtr<CefBrowser> browser,
const std::vector<CefString>& icon_urls);
icon_urls usually contains a single entry (if any), which is the URL of the favicon.
Consider also checking the favicon URL for its security, I passed the URL to a HTMLayout application only to discover that was on a self-signed https:// resource and all sorts of wininet security error (InternetErrorDlg for example) started throwing all the place.
I'm developing a new webapp based on the orbeon samples. I'm using orbeon 3.9 CE. I got VERY ERRATIC behavior when I use custom ressources. They are placed in following folders :
/orbeon/WEB-INF/resources/config/theme/*.css
/orbeon/WEB-INF/resources/config/theme/*.js
/orbeon/WEB-INF/resources/config/theme/images/*.jpg
In my custom theme file (/orbeon/WEB-INF/resources/config/theme-xnotes.xsl), they are linked like this (a few examples) :
<xhtml:link rel="stylesheet" href="/config/theme/bootstrap.css" type="text/css" media="all"/>
<xhtml:script src="/config/theme/bootstrap.js"/>
<xhtml:link rel="icon" href="/config/theme/images/icone_grue.png" type="image/png"/>
When I point my browser at the application (http://localhost:8080/orbeon), it SOMETIMES work, SOMETIMES doesn't (css are ignored, page transitions are wrong) and SOMETIMES it works partially (css are ok, js not, a few images are ok, others are not and so on)
When I look at the page source code, the links seems to be ok, to take the sames examples as above :
<link rel="stylesheet" href="/orbeon/config/theme/bootstrap.css" type="text/css" media="all">
<script src="/orbeon/config/theme/bootstrap.js">
<link rel="icon" href="/orbeon/config/theme/images/icone_grue.png" type="image/png">
But some links are not valid and point to the root of the application. The main problem is that I just can't make this behavior consistent to isolate the issue(s).
Help really appreciated ! It's driving me crazy...
I don't think there can be more than one GET or POST per request, but per open connection certainly.
However, this might be related to authentication since you mention j_security_check. Can you try to make sure that the CSS and other resources are not protected by form authentication?
I have a JQuery mobile app. I now want to deploy it natively to Android and iOS. To assist with this, I thought I would use PhoneGap. When I run my app, none of the styling information appears. There are no errors in the console window. I'm not sure what I'm doing wrong.
Are there any guides on going from JQuery mobile to phone gap? Everything I see starts with Phone Gap and builds from there. Am I doing this in reverse?
Thank you for any insistence. I really want to get this app onto Android and iOS. I feel like I'm so close. But I have no idea what I'm doing wrong.
Thank you,
This is just a guess, but you have something like this in your code?
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
If so that's wrong and you need to store your css locally in the assets folder if you want it to run locally within your WebView.
Otherwise, I'd suggest that you first run an 'hello world' on phone gap, and style just one element through an external local stylesheet (without worry about javascript for now). That's essentially the most difficult part, knowing where to put the file and how to reference it, so you do not want to confuse yourself with the extraneous code of your current project when you're learning that part.
Once you've figured that part out, it will be trivial for you to do the same with the jQuery Mobile library, both the css one and the js one.
Have you include properly?
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
put the .js file and .css file in the jquery.mobile folder.
But if you are using eclipse then you can create phonegap app directly.
I hope it would be helpful for you.
I have three solutions; all share one thing in common which is the stylesheets. I would like to have only one version of the stylesheets.
I thought to put this and maybe other things like common scripts in one project and then have all three solutions reference this same project.
But how can I link in the stylesheets to my layout pages. Currently I use:
<link href="#Url.Content("~/Content/Stylesheets/Package3.css")"
rel="stylesheet" type="text/css" />
Any advice would be appreciated.
You might be able to do this with your source control? But the better solution might ultimately be to make a 4th project of your static shared files (ex. css, javascript, images) and deploy them to a URL that you will only use to serve this content.
So you can reference in your project like:
<link href="http://mydomain.com/content/stylesheets/package3.css" rel=stylesheet" type="text/css" />
Where mydomain.com is actually your 4th project that only hosts the static content.
You can use the 'Add as link' option.