I'm trying to make a way for my website to not allow the landscape mode in smart phone devices because my application is absolutely not designed for the "landscape" mode. How can I do that ?
any suggestions ? thanks
You have no control over the user moving the orientation however you can at least message them. This example will hide the wrapper if in portrait mode and show the warning message and then hide the warning message in landscape mode and show the portrait.
<style type="text/css">
#warning-message { display: none; }
#media only screen and (orientation:portrait){
#wrapper { display:none; }
#warning-message { display:block; }
}
#media only screen and (orientation:landscape){
#warning-message { display:none; }
}
</style>
....
<div id="wrapper">
<!-- your html for your website -->
</div>
<div id="warning-message">
this website is only viewable in landscape mode
</div>
Related
I'm building a Rails app with Bootstrap 4. I have a number of large tables to display and since the app users are not very tech-savvy I would like to display a hint when a full table doesn't fit their screen and becomes scrollable. Any tips on how to achieve this?
You can add a alert with class="something".
<div class="alert alert-primary something" role="alert">
The table is scrollable!!!
</div>
Then, In the CSS file you can do:
.something{
display: none;
}
Then also write a media query to update the something class to display block.
#media (min-width: 576px) {
.something{
display: block;
}
}
Result: It'll not display the alert until the window size reduced to 576px.
I´m trying to do the following on a website. I guess it´s quite simple for thoose who have programmed alot but for me it´s new. Can someone show me how to code this? Thanks!
Layout on computer screen and mobile screen
You need to use media queries to make your HTML and CSS code produce different results in user's browser on different devices.
Media queries usually based on max-width of the browser viewport.
So, if browser viewport will be less than 800px wide, additional styles will be applied.
.box
{
display: inline-block;
margin: 0 10px;
width: 180px;
height: 180px;
border: 1px solid #CCC;
background: #DDD;
}
#media screen and (max-width: 800px)
{
display: block;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
For iPads & iPhones
If you need to have different layouts on iPads and iPhones, you need to take proper media queries from this article: http://stephen.io/mediaqueries/.
You have to write specific CSS rules for each device you'd like to support in particular.
Layout examples:
Desktop layout
Tablet layout
Phone layout
(Pictures are from w3schools.com)
About media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Is there some way to provide different image sizes for the carousel for different screen sizes ? I understand the CSS media query can get this information to provide different CSS settings for different devices/screens, but I don't see anyway to pass this information into the carousel. For a full-screen carousel this seems to mean it only works properly on devices matching the image size.
You could make the images take up a certain percentage of the screen by scaling them.
ons-carousel-item {
text-align: center;
}
ons-carousel-item img {
width: 95%;
}
And the carousel:
<ons-carousel overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item>
<img src="http://placehold.it/350x150">
</ons-carousel-item>
<ons-carousel-item>
<img src="http://placehold.it/700x100">
</ons-carousel-item>
</ons-carousel>
I'm using Ionic Framework to develop a mobile application for Android.
My issue is that I need to have a list of containers at random positions and are able to be clicked.
The list of containers are displayed correctly at the random positions but the click areas only work when i click at the top of the view, not at the position itself.
The clicking works fine in the mobile browsers at the correct position but when I run the app as a native application in Android, the clicks messed up.
It seems like clicking areas are lined up at the top of the view, does anyone know what is causing this?
The codes are here:
HTML file
<div class="col" ng-model="qtablelayout">
<div qtable ng-model='qtable' ng-repeat='qtable in qtablelayout.qtables' class="tablediv" ng-class="qtable.tstatus" ng-style="{'left': {{qtable.x}}+'px', 'top':{{qtable.y}}+'px'}" ng-click="tblActions(qtable)">
<h2>{{qtable.tableNo}}</h2>
<ul>
<li class="tablesize">{{qtable.currentHP.qsize}}/{{qtable.maxSize}}</li>
<li class="tabletime">{{qtable.tabletime.hours}}h {{qtable.tabletime.mins}}m {{qtable.tabletime.secs}}s</li>
</ul>
</div>
</div>
CSS file
div.tablediv
{
position: absolute;
background: url("../img/table/tablestatus.png") no-repeat;
color: #fff !important;
width: 178px;
height: 178px;
padding: 0;
margin: 0;
text-align: center;
display: block;
overflow: hidden;
}
The Controller side
$scope.tblActions = function(m)
{
alert("x:" + m.x + ",y:" + m.y);
}
I found out the cause of the problem is that I had an Ion-Refresher before the list of containers and it seemed to have shifted up the clicking areas together with the space for the Ion-Refresher.
It worked when I put the Ion-Refresher at the bottom of the HTML.
When running our Silverlight 3 application out-of-browser, startup takes a little time, but it's long enough to be noticeable. During this startup, the background of the window hosting the application displays an ugly white background color. When running in-browser, we have a splash screen, but that's loaded via JavaScript of course. How can I get a splash screen working for an out-of-browser Silverlight 3? Or if that's not possible, is there a way I can at least change the background color of the window?
I actually found a way to do this. Hooray! Much credit goes to the document found at this page. Note that we're distributing our application on disk; these instructions won't work for a Silverlight application installed by a user from the web.
It turns out that the Silverlight launcher loads an HTML page at the start. Where the application gets installed, there's an index.html file. The page contains an <object> tag similar to the one used to host Silverlight on the Web.
Unfortunately, this <object> does not support the Silverlight splash screen XAML or progress indicator, which I guess is to be expected since the XAP isn't being downloaded. Also, setting the background color of the page or of the <object> also doesn't seem to take effect. However, it turns out that it's just that Windows immediately starts drawing the plugin, so the default window color is shown while doing so.
To work around this, I set the visibility of the <div> that hosts the Silverlight to hidden. Then, at the bottom of the HTML, I added a <script> that sets a timer. When the timer fires, the visibility of the <div> is changed to visible, and the Silverlight object is given focus. Even if the timer is set to 1 millisecond, that allows the HTML's host a chance to do the initial drawing of the web page. That allows any content underneath the Silverlight to show up.
Here's my entire HTML page:
<!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>
<style type="text/css">
html, body { height: 100%; overflow: hidden; background-color: black; }
body { padding: 0; margin: 0; }
#silverlightControlHost
{
height: 100%; visibility: hidden; position: absolute;
}
#splashScreen
{
background-image: url('blah.png');
background-repeat: no-repeat;
width: 575px;
height: 330px;
top: 185px;
left: 212px;
color: white;
position: absolute;
font-family: Arial, Sans-Serif;
}
#loadingText
{
position: relative;
top: 165px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body scroll="no">
<div id="silverlightControlHost">
<object id='_sl' data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
<param name="source" value="offline://1931574666.localhost"/>
<param name="background" value="Black"/>
<param name="enableGPUAcceleration" value="True"/>
<a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
<div id="splashScreen">
<div id="loadingText">Loading. Please wait...</div>
</div>
<script>
setTimeout(
function() {
var ctrl = document.getElementById("silverlightControlHost");
ctrl.style.visibility = "visible";
document.getElementById('_sl').focus();
},
3000
);
</script>
</body>
</html>
Unfortunately, Silerlight 3 does not provide a way to customize this.