I'm asking this because I have not been able to find the answer anywhere.
I am using Roundcube to build a web mail application. Roundcube has custom XHTML-tags that can be used to display things, together with normal HTML. These XHTML-tags can have an attribute "condition" which, if I understand correctly, will only display the element if the condition is fullfilled. Examples:
<roundcube:if condition="var < 0" />
<div> ... </div>
<roundcube:elseif condition="var > 0" />
<span> ... </span>
<roundcube:else />
<p> ... </p>
<roundcube:endif />
<roundcube:container name="container-desktop" id="container-desktop" condition="!myCondition" />
<roundcube:container name="container-mobile" id="container-mobile" condition="myCondition" />
My problem is that I would like to change the condition dewpending on the screen/viewport width. Basically depending on if the user is usnig mobile, tablet or desktop. What I want to do is show a div if the user is on mobile or tablet, but not on desktop, or the other way around.
I have not been able to find this in any way. Is there someone who knows hos this can be achieved?
I'm not a goto person for Roundcube, so maybe someone else can help you find a Roundcube #media conditional tag.
As an alternative though, have you considered solving this with off-the-shelf HTML and CSS?
HTML
<div class="container-desktop">
<!-- desktop content -->
</div>
<div class="container-mobile">
<!-- mobile content -->
</div>
CSS
<head>
<meta charset="utf-8">
<title>...</title>
<style type="text/css">
/* mobile first ==> by default show mobile view */
.container-desktop{display: none;}
/* show desktop view for viewports above 480px, adjust as required */
#media only screen and (min-width: 481px){
.container-desktop{display: block;}
.container-mobile{display: none;}
}
</style>
</head>
Hope this helps!
Related
UPDATE
I found a different solution- the page "responsiveness" wasn't working.
after adding:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
as #adabala-rama-krishna suggest in another question it's working as I want.
link
Anyhow- if someone have a solution for the syntax problem, I'll be happy to hear about it.
in my react app I'm trying to change the display for mobile or desktop and add column if needed:
{isTabletOrMobile
? <br />
: <></Col><Col></>
}
Full page code: link
(using react-bootstrap here..)
Because the closing tag is before the opening one, it's raising a syntax error.
Is there anyway around it?
A better way to do it maybe??
Thank you all!
If you want to render the column conditionally, then you have to do it this way.
<Row>
{isTabletOrMobile
? <Col>1</Col>
:<><Col>1 of 2</Col>
<Col>2 of 2</Col></>
}
</Row>
Also note that you have to close the last column like <Col></Col>
I have a phone number on a website. It looks good on a laptop, but on a mobile device half of the number jumps to the next line. It doesn't look good.
So how can I create a line break that will only work on a mobile device sized screen?
I am not very experienced in coding, so please be specific :) Thanks a lot for any help!
Why not just do a line break as a class in the tag?
<br class="mobile-break">
and in CSS
#media screen and (min-width: 600px) {
.mobile-break { display: none; }
}
If you use Bootstrap 4 just use the break like this:
<br class="d-md-none">
You could look into the CSS word-break property to prevent words/strings being cut in half. If it is specifically line breaks you want to use then appending a class to the element such as <br class="br-on-mobile"> and setting it to display: none in the CSS should prevent it from doing anything normally.
You can then use a media query to display the line break at specific mobile screen sizes, for example:
.br-on-mobile {
display: none;
}
#media screen and (<Your conditions here>) {
.br-on-mobile {
display: static;
}
}
EDIT: static is invalid value for display. Using inherit should fix the issue. See this Fiddle
EDIT: The header of your page must also have <meta name="viewport" content="width=device-width, initial-scale=1"> to allow for correct scaling/application of media queries.
You could also achieve this by wrapping the number in a span element and setting this to display: block when on mobile devices, although your issue with the media queries below will also apply to this.
If you're looking into this in the future for something that works in Tailwind CSS, I found this to mirror the Bootstrap and BULMA style implementations (choose your breakpoint between sm/md/etc):
<br class="md:hidden">
Instead of space between the number, add this is non-breaking space which will prevent a new line being added.
This should work on BULMA: <br class="is-hidden-desktop" />
I have a problem when using the web-browser control in my application (C#, framework 3.5), every now and then IE finds a html page that will cause it to hang, freezing my whole application.
Such as this little gem
<html><head>
<style type="text/css">
#a {
margin:0 10px 10px;
}
#b {
width:100%;
}
</style>
<title>IE Crasher</title>
</head>
<body>
<table><tr><td>
<div id="a">
<form id="b">
<input type="text" name="test"/>
</div>
</td><td width="1"></td></tr></table>
</body></html>
Given that I shall never be able to vouch for the stability of IE or any browser for that matter, is there a way to handle such a freeze, without it shivving my main app in the jugular.
I've tinkered with Gecko and XULRunner, looks nice, but swapping out browser controls does not really solve the problem, it is still possible Firefox could hang. Alternatively I tried AxBrowser to see if there was any difference, tried calling it from another thread but I knew that wouldnt do anything ..
No, what I'd like to be able to do is if IE-as-Browser-control decides its going to have a little sleep I'd really like to have the option of the user simply closing down the container its in.
Not sure where to start, protecting my app from rogue third-party controls.
Google Plus lists all your +1s with a small preview of the webpage that was +1ed. Techcrunch and Mashable's previews come up as the first sentence of the article, however for me it just takes the first HTML on the page (which in my case is navigation). How can I get it to target the article for this preview rather than the navigation?
I have looked through the API and couldnt find anything that would do what I'm talking about.
Well, you have three options to avoid G+ trying a best guess.
1) (prefered) Mark up your site with microdata. Please refer to http://schema.org and possibly the Google Webmaster Tools help section on microdata and the Opera Developer resources.
It will look something like:
<body itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Article Title</h1> <!-- snippet title -->
<img itemprop="image" src="image-url"></img> <!-- the snippet icon -->
<p itemprop="description">Snippet text.</p>
</body>
The idea is to mark up the parts that you already uses as base for your snippet. Yahoo, MS Bing, Google and a few other search engines will try to honour this for their search snippets as well, as well as future browser versions, e.g. for bookmarks.
2) Use the facebook Open Graph protocol (which is not valid html, but makes your snippets compatible with facebook "shares").
It will look like (put this in your section)
<meta property="og:title" content="Your snippet title"/>
<meta property="og:image" content="url://of-your-snippet-image.jpeg"/>
<meta property="og:description" content="Your snippet text goes here"/>
3) Set the title and description meta tags.
<meta name="title" content="Your snippet title" />
<meta name="description" content="Your snippet text goes here">
Google finally released how to do it. http://developers.google.com/+/plugins/+1button/#plus-snippet
You need to use itemprop tags to tell +1 what you want to use.
There's many ways to go about it:
You can add the following tags to your opening HTML declaration:
<html itemscope itemtype="http://schema.org/Article">
and then add the following meta descriptors:
<meta itemprop="name" content="Your article's title" />
<meta itemprop="description" content="Your article's description or excerpt" />
and finally add this to the image you want to use:
<img itemprop="image" src="image.jpg" />
I've been fiddling with a partial trust XBAP - how can I change the icon shown in the IE-tab and the title (aside from changing the assembly-name in the project properties)?
I would also like to change what is shown in the Internet header (right now it shows the address of the XBAP.
I had a similar issue where I could not change the title in IE 10 (this was the first stack overflow answer that comes up when you Google "xbap title"). I found the solution here:
In code, set Application.Current.MainWindow.Title to the title you want to show. This worked for me, hopefully this will be helpful for the next guy.
Load your XBAP from a HTML page using an IFRAME. In the HTML page add a title and icon.
Something like this:
<html>
<head>
<title>This is my title</title>
<link rel="shortcut icon" href="http://wherever.com/icon.ico">
</head>
<body>
<iframe location="something.xbap"
style="width:100%; height:100%; border:0; overflow:auto" scrolling="no"></iframe>
</body>
</html>
This is simplified from code that I actually use, except due to some other requirements I'm giving the iframe an id and setting its location using JavaScript in the body's onload event. I assume the above will work just as well.