On iOS devices background images appear blurry. If someone can point out what I need to do that would be great. I'm also pretty new to this so please explain.
#home-cover {
height: 100%;
background-image: url("../img/bg-home.jpg");
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- required meta tags -->
<meta charset="utf-8">
<meta name="description" content="Building modern responsive website with html5, css3, jQuery & bootstrap framework">
<meta name="keywords" content="HTML5, CSS3, jQuery, Bootstrap, Web Design, Web Development, Responsive website, Modern website">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- title -->
<title>Genesis Utility</title>
<!-- Home -->
<section id="home">
<div id="home-cover" class="bg-parallax animated fadeIn">
<div id="home-content-box">
<div id="home-content-box-inner" class="text-center">
<div id="home-heading" class="animated zoomIn">
<h3>Genesis Utility <br> Communication Inc.</h3>
</div>
<div id="home-btn" class="animated zoomIn">
<a class="btn btn-lg btn-general btn-white smooth-scroll" href="#about" role="button" title="View Our Work">Learn About Us</a>
</div>
</div>
</div>
</div>
</section>
You haven't set a background size property. Assuming based on your design, you want cover
#home-cover {
height: 100%;
background-image: url("../img/bg-home.jpg");
background-size: cover;
}
Related
I created a code for collapse it is expanded on large and mobile screen How do i collapse it on mobile screen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container py-5">
<div class="py-5">
<a href="#" data-bs-target="#mycollapse" data-bs-toggle="collapse"
class="btn btn-primary">collapse button</a>
</div>
<div id="mycollapse" class="collapse collapse-horizontal show hide-sm border rounded p-5 bg-light">
<span>here is content of collapse</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Guide me please show collapse and hide-sm screen
I want to know how to show and hide collapse on large screen and mobile screen.
I am facing a pretty strange problem .I have compiled the cordova app and it runs on android smoothly now on mac when i try to compile the app for the iOS it don't show me the component of onsenui and page comes without button ,toolbars etc . I tried to open it on web browser and it gives me same result .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css"/>
<!--parse code only
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<!-- parse code only -->
<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- Enable all requests, inline styles, and eval() -->
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Toolbars</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em">
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Toolbar Variations</ons-list-header>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
HTML Content
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page4.html', { animation : 'slide' } )">
Search Box
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page5.html', { animation : 'slide' } )">
Images
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Title</div>
<div class="right" style="line-height: 44px">
Right
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page4.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Search</div>
<div class="right" style="padding-right: 6px">
<input type="search" class="search-input" placeholder="Search" style="margin-top: 6px;">
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page5.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="right">
<ons-search-input></ons-search-input>
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>
</body>
</html>
The code overall looks ok.
The only thing missing is ons.bootstrap(). I'm guessing you accidentally removed it at some point. Add that and you should be ready to go.
Here's a working demo of your code with ons.bootstrap() added.
On a sidenote - since you don't seem to be using angular right now you might be interested in checking out Onsen 2. It has both an angular and a pure js version.
Im having a lot of trouble with the scroll of a my pages that i previous loaded into the dom, and after that,i transition to them, but when i do that my content div has for example 1500 px, but my page has only 547,a min-heigth=547 appears to, and i cant scroll my page.
this is my code:
loading:
$.mobile.pageContainer.pagecontainer("load",
"./pages/scoringCliente/selectScoringApps.html", {})
transition:
$.mobile.pageContainer.pagecontainer("change", "#selectScoringApps", {
transition : "pop",
});
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../jqueryMobile/jquery.mobile-1.4.5.js"></script>
<link href="../../native/assets/www/default/css/jqueryMobileXXXXXXcss"
rel="stylesheet">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div data-role="page" id="selectScoringApps_page" data-dom-cache="true">
<div data-role="header" data-tap-toggle="false">
<div style="margin-left: auto; margin-right: auto;">
<img border="0" src="../../images/logo_header.png"
alt="Logo, Facebook" class="header_img headerDual_img" height="35" />
</div>
<h1 class="h1_header">
Mobile<br>Scoring
</h1>
</div>
<div data-role="content">
asdad <br> <br> <br> <br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>asd
</div>
</div>
</body>
</html>
I want to create a very simple layout with buttons on bottom of screen and some centered content.
How may I achieve this with Intel app Framework UI.
I need to support all screen sizes of course.
Here is example in Intel App Framework: http://jsbin.com/valuc/1/edit
<!DOCTYPE html>
<html>
<head>
<title>App Framework</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"></script>
<style>
#page1 {text-align: center}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<div class="panel" title="Welcome" id="page1" selected="true">
<p>This is come content</p>
<p>This text is centered in the panel</p>
</div>
</div>
<div id="navbar">
<a class="icon home" href="#button1">Button 1</a>
<a class="icon settings" href="#button2">Button 2</a>
</div>
</div>
</body>
</html>
You also refer to some basic templates created using Intel App Framework to get started: https://github.com/krisrak/appframework-templates
I want the navbars to appear in a single line. I coded as it was explained in jQuery mobile website. However the 2 <li> are appearing in two lines.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="language" content="en" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<body>
<ul data-role="navbar" data-inset="true" data-filter="true" role="navigation" class="ui-navbar ui-mini">
<li>Holiday List</li>
<li>Closed Locations</li>
</ul>
</body>
Seems that you missing the main div above nav bar.
As you can see here in demo. Your code should be as like below.
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div><!-- /navbar -->