There is a page on my site with two sets of tabs, each tab's link is ajax-driven but has a proper href in case javascript is not enabled. I'm about to implement an ajax 'back-button' solution using a plugin such as jQuery Address.
My problem/confusion with this solution is that a page's default content is still loaded before the javascript has a chance to parse the hash and load the correct content. If I initially hide the content, non-javascript users will never see anything. If I don't initially hide the content, the user will see the wrong page for a moment before it gets updated (besides the extra overhead of first loading the wrong tab and then the correct tab).
What are the best / most common approaches to dealing with this?
Thanks, Brian
If you use hashes, you will always have the wrong content first. You need to use a server-side solution with the HTML5 History API to avoid this. Read more
You can use:
https://github.com/browserstate/ajaxify
And have the tabs render on the server side with something like if ( $_GET['tab'] === '2' ) // render 2
I think this is a good question. Have you tried using the <noscript> tag to include css that shows the content that's hidden initially for JS users. Something like this:
<style type="text/css">
#area-1, #area-2 { display: none; }
</style>
<noscript>
<style type="text/css">
#area-1, #area-2 { display: block; }
</style>
</noscript>
Hope this helps!
Related
I have a custom Chromecast receiver app with the most basic code:
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
cast.framework.CastReceiverContext.getInstance().start();
</script>
</body>
</html>
It works but it's very ugly. When you hit cast the app brings up "MyCustomReceiver" (the name of my receiver) while it loads. I'd prefer to have a splash screen or a thumbnail for the content being loaded. Or heck even just delete the gross "MyCustomReceiver" text.
I looked at the Customize UI docs
It says you can hook into keywords like --playback-logo-image to customize the UI.
I try this:
body {
--playback-logo-image: url('https://i.imgur.com/kV5GW0A.jpg');
}
Nothing happens. I expected it to show up as the logo as shown further down in the page.
I try setting it for --buffering-image. Also no luck.
body {
--buffering-image: url('https://i.imgur.com/kV5GW0A.jpg');
}
How am I supposed to customize this?
Basic customization can be done with CSS itself. The SDK (V3) has its own CSS variables for this.
<style>
body {
--watermark-size: 120px;
--watermark-image: url("your-img-location/url");
--splash-image:url("your-img-location/url");
--logo-image:url("your-img-location/url");
--progress-color: #ffd200;
}
</style>
Add this tag on receiver HTML File
I've had similar difficulties figuring out what each styling keyword does, you may want to reference the styled media receiver docs.
I think --logo-image will replace the default receiver text.
I'm struggling with a Phonegap-Android application. I'm using jQuery Mobile 1.3.1 and jQuery 1.9.1, with Phonegap 2.9.0. I've got some data-role pages in my index.html and I'm generating some other dynamically with an ajax function. The problem is that always, after showing a dynamically generated page the screen goes all white. This never happens if I navigate between pages statically created in the index.html.
Any suggestions? I've tried with:
< meta name="viewport" content="width=device-width, user-scalable=no" />
CSS: .ui-page {
-webkit-transform: translateZ(0);
-webkit-perspective:1000;
-webkit-backface-visibility: hidden;
-msie-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
defaultPageTransition = "none"
The new pages are created using Mustache.js.
Something to quickly try would be to globally enable DOM caching in jQuery Mobile:
$.mobile.page.prototype.options.domCache = true;
or
pageContainerElement.page({ domCache: true });
I would say it stems from a given page not containing the dynamically generated markup, which you need in order to utilize jQM's ajax navigation... which uses it's own internal history tracking object to fuel the hashchange and/or popstate event.
Beyond that, I would step through how the dynamic pages are actually being added to the DOM. You should be able to keep using Mustache's template plugin, but you'll have to make sure to use the jQM to add the markup to the DOM. (Or go through a potentially long process of creating overrides... which I think you should avoid if possible.)
When you use jQM to update the DOM, it ensures the correct events fire and in the correct order, thus keeping the app data/state up-to-date.
I'm sure you're using the documentation, but I would give this another look. Might give you a better idea on what Mustache method you need to stop using, or extend/override.
Hope this helps.
jQM References
DOM Caching: http://view.jquerymobile.com/1.3.1/dist/demos/#nav-cache
Navigation Event: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/navigation/#nav-event-example
Dynamic Page Loading: http://jquerymobile.com/demos/1.3.1/docs/pages/page-dynamic.html
I'm using pd4ml to render a URL produced by the Orbeon XForms engine and convert it to PDF.
pd4ml.render( urlstring, fileOutputStram);
The HTML produced by Orbeon from my XForms shows OK in the browser.
But when trying to render the XForms with pd4ml, the PDF show a warning message at the top of the page saying Your browser does not appear to support JavaScript. You may want to try one of the following… because PD4ML not support javascript.
Is there a way to disable the warning message?
If you're creating your form with Form Builder, then Form Runner will be able to generate a PDF automatically for you. For this, Form Runner uses Flying Saucer for this, which looks similar to pd4ml.
If you're authoring XForms "by hand", and want to use pd4ml, then you need to do some post-processing of the HTML before you feed it to pd4ml. You can see what Form Runner does in print-pdf-notemplate.xpl; in particular, look for the XSLT stylesheet embedded in that pipeline, and you'll most likely want to do something similar for pd4ml.
Well I figured it out that the pageflow.xml of all my forms makes reference to the property epilogue url="oxf:/config/epilogue.xpl
Then I enter to the config/property.xml and see that it was linked to /config/theme-plain.xsl
And I add a stylesheet there on theme-plain.xsl
(see the theme-examples.xsl to get an idea on how to)
xhtml:link rel="stylesheet" href="/mystyle.css" type="text/css" media="all"/>
where my style contains this:
.xforms-noscript-panel {
border: 4px solid #FF6600;
margin: 1em;
padding: 0.5em;
width: auto;
display: none !important;
}
Then pd4ml will print the html with the warning message hide.
I have a strange result happening when loading a Partial View using jQuery Ajax into the DOM, but only when viewing the result using IE8.
The Partial View in question (for example purposes only) looks like this;
<aside>Example test</aside>
When the result comes back from the Ajax call it appears to look exactly as above. However when viewing the DOM using the developer tools in IE8 the result looks like this;
<aisde/>
Example test
</aside/>
As a result the element is not recognised and the text does not sit within it. Also the style sheet class for 'aside' is not being applied. This only happens in IE8 as far as I can see.
Any one got any suggestions, other than do not use custom tags?
Thanks in advance
You need to make sure the DOM recognizes HTML5 elements. Essentially you will have to do:
document.createElement('aisde');
Have a look at this link. Without creating the element older IE browsers will not see or style the elements.
The common practice around these issues is to load a html5 fix javascript file within a conditional comment block. The script does a createElement on all new html5 node types.
<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->
For example,
Text Here
will print out as...
Text Here(../somepage/page.aspx?qs=asdf)
In IE, it looks normal (doesn't print the url). Any ideas why this is acting in this fashion?
Extrapolating from Brett's answer, on Firefox 25, this CSS style removes the offending href:
#media print {
a:link:after,
a:visited:after {
content: "" !important;
}
}
Also, if you're using Twitter Bootstrap as a framework, this:
a[href]:after{
content:"";
}
... will do the trick! (at least in bootstrap 3)
The answer was in the css framework we are using (Blueprint). There was the below line in the style file:
a:link:after,a:visited:after{content:"(" attr(href) ")";font-size:90%}
Guess this might help others who use Blueprint.
If you want to to be more specific - say remove links within a table, then you could do the following with jQuery.
$(".tableclass tr td a").removeAttr("href");
Just add this in your layout page (Master Page)
a[href]:after {
content: none !important;
}
There is also the semantic reason to print the url next to the link.
Imagine you print the document without the url. You cannot be sure to completely understand the text as it is meant by the author.
It can be necessary for a quote to print the source as well. That is important i.e. for academic texts.
Indeed Bretts answer is correct.
You can avoid this problem altogether on the screen by including the media attribute on the print style link as follows
<link href="../../Content/blueprint/print.css" rel="stylesheet" media="print" type="text/css" />