It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I'm developing a web-application for mobile & iPod, so platform independent. For that I'm using html for the front end embedded in adv.java servlet.
However, I have a big problem with screen resolution. How can I set the screen resolution dynamically for any web-browser?
Ideally I don't want a horizontal scroll bar; so what approach might work here?
Alter your page design with css3 media queries:
http://www.webdesignerwall.com/tutorials/css3-media-queries/
For iPhone 4
The following stylesheet is
specifically for iPhone 4 (credits:
Thomas Maier).
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
For iPad
You can also use media query to detect
orientation (portrait or landscapse)
on the iPad (credits: Cloud Four).
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
You cannot really change the browser size on mobile phones with JavaScript.
What you need is to use different CSS rules based on the client. You can achieve this either by sniffing the User-Agent HTTP header and serving up a specific CSS file from the backend or by using CSS3 media queries.
You are going to have to do a bit of research, but below I've outlined some tricks you can do to acheive what you want (I think?)
As Ates mentioned you can use conditional CSS style sheets, for example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../style/ie.css" media="all" />
<![endif]-->
That style sheet will only be 'run' by Inernet explorer browsers, it's useful for fixes. However, again you may need to research the behaviour of these in different types of browsers, especially new ones on mobile platforms.
You can sometimes extend this further to specific versions as well, for example:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../style/ie7.css" media="all">
<![endif]-->
Or, also as Ates mentioned, your server can detect the User agent string (99.99% of the time this will be honest, some users do modify/clear these for reasons of security/paranoia/spoofing) so they are not gospel but as good as.
Here is how to request various variables with Java servlets:
String accept = request.getHeader("accept");
String user_agent = request.getHeader("user-agent");
String accept_charset = request.getHeader("accept-charset");
String accept_language = request.getHeader("accept-language");
String x_wap_profile = request.getHeader("x-wap-profile");
String profile = request.getHeader("profile");
The one you are after is probably user-agent this should contain browser information and version. Again, you are going to have to do tests to determine what sort of strings you need to process, as far as I know there isn't a standard comprehensive list of 'live' user agent strings.
Here are some examples of user agent strings:
Your User Agent is: Mozilla/5.0
(Windows; U; Windows NT 5.1; en-GB;
rv:1.9.2.12) Gecko/20101026
Firefox/3.6.12 ( .NET CLR 3.5.30729)
http://user-agents.my-addr.com/user_agent_request/user_agent_examples-and-user_agent_types.php
If you write code based on this as well, it's going to suffer from issues relating to new releases and becoming out of date probably very fast.
Another solution, would be to serve an iframe on your page, you can set properties/style it exactly as you wish, with or without horizontal/vertical scroll bars, you can set it's exact size, and lots of other things. Here are the properties for an iframe:
SRC=URI (URI of frame content)
NAME=CDATA (name of frame)
LONGDESC=URI (link to long description)
WIDTH=Length (frame width)
HEIGHT=Length (frame height)
ALIGN=[ top | middle | bottom | left | right ] (frame alignment)
FRAMEBORDER=[ 1 | 0 ] (frame border)
MARGINWIDTH=Pixels (margin width)
MARGINHEIGHT=Pixels (margin height)
SCROLLING=[ yes | no | auto ] (ability to scroll)
So combining the serving of specific style sheets to different platforms with your iframe might yield results you are after.
I also recommend you start reading and learning about CSS as it will help you greatly.
Also, in all your CSS, remember to use relative sizes. i.e %'s and em's instead of pixels and points.(for texts, margins, paddings wherever applicable)
Related
Not sure if this is a bug or if 2sxc is doing this on purpose, "for reasons."
First, here is the goal. I am in a 2sxc App, in a View using Razor/C#. I need to get the following JS module linked up in the <head> like this:
<script src="//unpkg.com/#dnncommunity/dnn-elements/dist/dnn/dnn.esm.js"
type="module" async="async" defer="defer" crossorigin="anonymous">
</script>
Obviously if I just put it in as-is, it gets on the page, but not in the <head>.
If I add the attribute, data-enableoptimizations="true" then its in the <head> but all 4 of my attributes get stripped:
<script src="https://unpkg.com/#dnncommunity/dnn-elements/dist/dnn/dnn.esm.js" type="text/javascript"></script>
Additionally, notice that the src had only the leading "//unpkg...", and for some reason, the optimizations have added back "https:" which I do not want.
And where did type="text/javascript" come from? That hasn't been required for years.
I can solve this in the theme/skin by using the DnnJsInclude control like this. It uses ClientResourceManagement and allows me to specify all the attributes in HtmlAttributesAsString like this:
<dnn:DnnJsInclude
FilePath="//unpkg.com/#dnncommunity/dnn-elements/dist/esm/dnn.js"
ForceProvider="DnnPageHeaderProvider"
HtmlAttributesAsString="type:module,async:async,defer:defer,crossorigin:anonymous"
Priority="1001"
runat="server"
/>
This gets me the correct result, but it means my standard content editors now need the ability to edit page settings to use my 2sxc App. Which I do not want (the permissions or the training complication).
I realize I can probably use that DnnJsInclude control from my Razor code, but it seems like this is a valid use case that data-enableoptimizations should handle. Yes? No? Maybe? Maybe it already does it but I don't know the right syntax?
Anyone know how to get 2sxc to do this? Or is this a bug worth reporting regarding data-enableoptimizations? I was especially surprised that it just stripped my valid attributes.
So for some background: once the attribute is set, it will be picked up and taken apart, because DNN will need the parts given one by one, not as a <script> tag.
I would assume that as of now, there is no mechanism which tries to preserve the remaining bits. We haven't looked at this in a long time, and maybe the DNN APIs are missing in v7.4.2 (our minimum compatibility).
But in general: this is currently by design, and could be improved. I suggest you open an issue on github and/or contribute a change ;)
Okay, so I worked it out in code using the DnnJsInclude control. Here is the solution in a nutshell:
#using DotNetNuke.Web.Client.ClientResourceManagement
#{
// Add a <script> tag in the head as a JS module
var include = new DnnJsInclude
{
FilePath = "https://unpkg.com/#dnncommunity/dnn-elements/dist/dnn/dnn.esm.js",
ForceProvider = "DnnPageHeaderProvider",
Priority = 1001, // stay out of the way?
HtmlAttributesAsString = "type:module,async:async,defer:defer,crossorigin:anonymous",
};
var loader = (Context.CurrentHandler as Page).FindControl("ClientResourceIncludes");
if (loader != null)
{
loader.Controls.Add(include);
}
}
Which gets the exact output needed thanks to the HtmlAttributesAsString parameter.
I even wrote it up as a blog post with a lot of details.
DNN Details 004: Using the New Dnn-Elements in a 2sxc View?
Since this is dependent on Dnn, it doesn't benefit the Oqtane/hybrid coders.
I am building an Angular test preparation app (with Laravel 5.1 API). One of the requirements is to allow the user to print a certificate of achievement.
The client wants the person's name and credentials interpolated into the document (e.g., highlighted below). Here is a snapshot of the PDF template they sent:
The way I'm handling PDF viewing is simply by storing the file on S3 and giving them a link to that file.
Interpolating information into a PDF doc doesn't seem trivial and I haven't found much information on programmatically allowing this, but there are tools like DocHub, that allow you do edit while viewing the PDF.
I'm interested in learning:
is doing this programmatically trivial?
are there 3rd party tools I'm unaware of?
would I even be able to send this information along to the S3 link to interpolate in the first place?
Using PDF as a format for editing is usually a bad choice. If you have a form with fixed fields, then it's easy. Create a PDF template with an interactive form. In this form, based on AcroForm technology, you'll define fields with fixed coordinates, and a fixed size. You can then add content to these fields.
One major disadvantage with this approach is the lack of flexibility. Did you notice that I used the word "fixed" three times in the previous paragraph? If text doesn't fit the predefined field, you're out of luck. If the field is overdimensioned, you'll end up with plenty of white space. This approach is great if you can predict what the data will be like. A typical use case is a ticket or a voucher. For instance: the empty form is a really nice page, with only a couple of fields where an automated system can put a name, a date, a time, and a seat number.
This isn't the best approach for the example you show in your screen shot. The position of every line of text, every word, every character is known in advance. If you want to replace a short word with a long word (or vice-versa), then all those positions (of each line, of the complete page, possibly of the complete document) need to be recalculated. That's madness. Only people with very poor design skills come up with such an idea.
A better idea, is to store the template as HTML. See for instance chapter 5 of iText's pdfHTML tutorial, where we have this snippet of HTML:
<html>
<head>
<title>Invitation to SXSW 2018</title>
</head>
<body>
<u><b>Re: Invitation</b></u>
<br>
<p>Dear <name>SXSW visitor</name>,
we hope you had a great SXSW film festival experience last year.
And we would like to invite you to the next edition of SXSW Film
that takes place from March 9 until March 17, 2018.</p>
<p>Sincerely,<br>
The SXSW crew<br>
<date>August 4, 2017</date></p>
</body>
</html>
Actually, it's not really HTML, because the <name> tag and the <date> tag don't exist in HTML. All HTML processors (browsers as well as pdfHTML) ignore those tags and treat their content as if the tag was a <span>:
It doesn't make much sense to have such tags in the context of pure HTML, but it does make a lot of sense in the case of pdfHTML. With pdfHTMLL, you can configure custom tags, and have a result that looks like the PDFs shown below:
Look at the document for "John Doe" and compare it with the document for "Bruno Lowagie". The name "John Doe" is much shorter than my name, hence more words fit on that first line. The text flows nicely (we could also have chosen to justify the text on both sides). This "flow" is impossible to achieve with your approach, because you will never get a PDF template to reflow nicely.
OK, I get it, you probably say, but what about the practical aspects? You talk about a Java / .Net library, but I am working with Laravel and Angular.js. First, let me tell you that I don't think you'll find any good PDF tools for Laravel or Angular.js, because of the nature of PDF and those development environments (in my opinion, those technologies don't play well together). Regardless of my opinion, this shouldn't be much of a problem for you because you work in an Amazon environment. AWS supports Java, and the Java code needed to get pdfHTML working is minimal. Most of the code samples I wrote for the pdfHTML tutorial are shorter than 15 lines. So why not try Java and pdfHTML?
If you're already using Amazon services, why not use an amazon lambda function, in combination with iText7 (java), to generate the pdf on demand?
That way, you are guaranteed that the pdf is correct, and has nice layout every time.
Generating the pdf can either be done by:
converting HTML,
programmatically creating your entire document,
filling and flattening an XFA form.
I think for your use-case, either option 1 or 2 are the most sustainable.
I am changing the HTML design of my website, converting all the pages into responsive ones. I am also planning the conversion of the AdSense units of the pages into responsive ones, and wondered if the transformation is as easy as the following.
This is the piece of code of one of the current AdSense units:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXXXX";
google_ad_slot = "YYYYYYY";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="">
</script>
Would it be as easy as adding the 'data-ad-format', removing the 'google_ad_width' and 'google_ad_height', and leaving the information of 'data-ad-client' and 'data-ad-slot'?
<script async src="//"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
data-ad-slot="YYYYYYY"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
I mean, I do not want to remove my current custom channels and create new ones, and wondered if they would work with a new responsive design.
Thank you very much.
Info about YYYYYYYunit (with google_ad_width = 300 and google_ad_height = 250) is stored on the AdSense side, on AdSense servers, as "size":"SIZE_300_250".
(In my understanding scenario is:
with google_ad_width = 300 and google_ad_height = 250, their
script show_ads.js (or adsbygoogle.js) can quickly reserve 300x250 space for ad unit
YYYYYYY
which will be returned by
http://googleads.g.doubleclick.net/pagead/ads as
"size":"SIZE_300_250".)
Responsive ad units must be created as "responsive". (And in that case they'll be "size":"RESPONSIVE".)
(The AdSense platform has been, and is being, continually updated and refined, and I think they are sanitizing some bad requests now. But, relying on that is potentially risky - even if you see that your ad code modification works, that doesn't mean that it is safe to use. Only a limited set of modifications is allowed in AdSense and what you described is not one of them.)
I mean, I do not want to remove my current custom channels and create
new ones, and wondered if they would work with a new responsive
design.
When you create new responsive units you'll add them to custom channels you already have. There is no need to remove existing custom channels.
(If you mean "I do not want to remove my current ad units and create new ones", then I'm afraid you don't have other choice: standard ad unit can't be "converted" to responsive.)
Disclaimer: I can't quote relevant source for what I said above about AdSense ad serving scenario. What I said is based on my ten years experience of being an AdSense publisher, and few years RS and TC on the AdSense Help Forum. On that forum you can see cases of disabled accounts and ad serving because of code modification.)
No, it's not possible. You have to create a new tag.
Hint: You can use vertical, horizontal and auto for the data-ad-format attribute (e.g. data-ad-format="auto").
I am currently trying to jazz up a SilverStripe site by making the content more engaging. The site is responsive, but all this means currently is that the navigation bar/header snaps to a more mobile friendly style when it hits the mobile break point.
The long and short of it is, my main page.ss is this:
<html>
<head>
<title>$Title</title>
</head>
<body>
$Header
$Layout
$Footer
</body>
</html>
With $Layout rendering a few variations of a basic page. We have a couple of layouts that aim to give our webmaster pages that are a bit more engaging - for example we have an accordion type page that has many accordion section DataObjects, that present the page as an accordion page with the open/shut javascript functionality.
But this is not enough. I want to give the webmaster more flexibility in the CMS to create interesting pages, without me having to create hundreds of different page types.
I'm thinking of creating a module that gets rid of the main $Content field for all pages, and instead inserts a sort of grid system management field. The webmaster can add rows (one DataObject) and then split those rows into sections (another DataObject). The sections will have a content field managed by TinyMCE, just like a page has. Then on the front end I will map these rows and sections to a responsive grid system.
For variations on the sections, I will add classes (a bit like having different page types) that render slightly differently. The sections will have .ss and .css (and possibly .js) to control their own look and feel.
My question is, how have other people approached this problem? Does my idea sound like overkill? Or does it sound like a good idea for a module?
-
For some examples of what I am trying to achieve, this page is a good example:
http://www.wingsforlife.com/en/research/
Content is split up into various sections, which allows for better control when the page is resized. Also throughout the site, content is varied, sometimes it will be in a single column, other times two, which snaps to one column when the window is smaller.
On the home page, if you scroll down, there are 4 links that are presented inside circles, that contain a number and some text: http://www.wingsforlife.com/en/
This is something I can't see being possible inside TinyMCE (which is fair enough as TinyMCE is just a basic content editor, not a web design tool).
Have a look at https://github.com/burnbright/silverstripe-widgetpages for an implementation of using Widgets to compose a webpage. Also https://github.com/g4b0/silverstripe-widget-pages-extension.
this can easily be achieved by replacing the HTMLEditorField that's linked to the Content field in the database by some GridField, managing DataObjects that make up what you might call 'ContentParts'. we've already used this approach in some projects to allow for more rendering flexibility of content elements.
simply tie some DataObjects to your Page class:
private static $has_many = array(
'ContentParts' => 'ContentPart'
);
then, use a GridField to manage them in your getCMSFields:
$gridFieldConfig = GridFieldConfig_RecordEditor::create();
$field_ContentParts = new GridField('ContentParts', 'Content Parts', $this->ContentParts(), $gridFieldConfig);
simplest way to render them in your template is as follows:
<% loop ContentParts %>
<section>...</section>
<% end_loop %>
of course you'll want to have different contentparts, so you might want to create subclasses of ContentPart with their custom fields and use the GridFieldAddNewMultiClass component to add them to your GridField (it's part of the GridFieldExtensions module, to be found here: https://github.com/ajshort/silverstripe-gridfieldextensions)
hth
So I am having consistency issues with a certain set of unicode characeters. The characters within the buttons under the reply section, and at various parts of the page show up as squares: http://bit.ly/zlhgEI
When I copy them into google i can navigate to a wikipedia page describing that character. So it seems like it is a rendering issue. Or perhaps that platform is just missing characters? I don't know.
Where it works: Firefox (I think on any platform), Chrome on windows7 and ubuntu maybe osX
Where it is broken: Chrome on XP, iphone4 and droid incredible
Does anyone know a way to ensure this character set will get added. I already tried adding to utf-8 meta tag, which seems to do nothing. What can I do?
Thanks!
This is primarily a font problem. The buttons contain Syriac letters, which are not present in most fonts. The CSS setting is font-family: Helvetica,Arial,sans-serif, but Helvetica and Arial do not contain Syriac letters, so browsers will first try the font to which they map the generic name sans-serif. It most probably does not contain Syriac letters either, so browsers will either give up and e.g. show a square or (more properly) scan through the fonts available on the system. So indirectly this is a browser issue too.
The odds are that the vast majority of users will not see the Syriac letters unless you use an embedded font for them. For suitable fonts, you could check
http://www.wazu.jp/gallery/Fonts_Syriac.html
where many download links don’t work, but try
http://www.bethmardutho.org/index.php/resources/fonts.html
You could also write a CSS rule with fonts that contain Syriac letters, e.g.
font-family: Estrangelo Edessa, TITUS Cyberbit Basic, Sun-ExtA, Code2000, unifont. But most people don’t have any of them in their computers, so consider adding the downloadable font of your choice into the list, once you’ve selected and installed one.
The character encoding is not a problem. The data is UTF-8 encoded and declared as UTF-8 in HTTP-headers, so meta tags don’t affect encoding issues (as long as the page is viewed online).
The buttons look really odd (each occupying the full width of the window) on IE 9, but this seems to be unrelated to the problem at hand, and it’s a Quirks Mode issue and can be fixed by adding <!doctype html> at the start.
This could be an example of mojibake. There's probably not a ton you can do about it -- I believe it depends on the fonts available and the range of encodings they support.