I'm developing a smartphone app in HTML5, CSS3 & Javascript. I'm using phoneGap and PhoneGap Build to create native code. The problem is that the pages look good until the user needs to enter text. The keyboard opens and pushes the footer up above the keyboard into the text box covering the input button(s) below the text box.
<footer>
<ul class="flink">
<li><img src="images/link1.png"/><span class="ftext">Link 1</span></li>
<li><img src="images/link2.png"/><span class="ftext">Link 2</span></li>
<li><img src="images/link3.png"/><span class="ftext">Link 3</span></li>
<li><img src="images/link4.png"/><span class="ftext">Link 4</span></li>
<li><img src="images/link5.png"/><span class="ftext">Link 5</span></li>
</footer>
CSS:
footer { position:fixed; bottom:0; width:100%; display:inline-block;background:#000; }
footer ul { margin:0px; width:100%; float:left;}
footer ul li { margin:0px; width:20%; .width:auto;display:inline; float:left; text-align:center; height:auto;}
footer ul li a { margin:0px; width:100%; float:left; height:auto; font:normal 11px Verdana, Geneva, sans-serif; padding:10px 1px; background:#000; color:#fff; text-decoration:none;}
footer ul li a.first { margin-right:1%; width:99%;}
footer ul li a img { width:30px; height:30px;}
footer ul li a .ftext { display:block; margin-top:1px;}
footer ul li a:hover {background: rgb(75,75,75);
Why don't you just have the footer at the end of the page instead of sticking it to the bottom of the device?
Related
In the example
http://jsfiddle.net/yotam/n2mfy3hg/
there is a table with an anchor alert-button inside a table-cell.
<span>
<a id="aimg" href="#" data-inline="true"
class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext"></a>
</span>
How can one have this 'alert' icon simply inserted in a table-cell,
without neither an anchor nor a button, thus
avoiding the unnecessary <a>-markup and undesired hover effect?
You can use a simple span with a couple of CSS rules to position it correctly for a jQM icon
<span class="ui-icon-alert ui-btn-icon-notext inlineIcon"></span>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
If you prefer the icon to be dark without the gray circle behind it:
<span class="ui-alt-icon ui-icon-alert ui-btn-icon-notext inlineIconNoDisk"></span>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent !important;
}
Here is your updated FIDDLE (both options are shown)
When I click on my links, they do not go anywhere; I clicked on "about Us" , nothing. I looked at Lucas Green's answer to anc1revv, but I'm still drawing a blank. I appreciate any ideas. Also the links do not turn yellow when I hover. I know it's something minor.
Sorry, I meant turn orange when I hover.
Thank you
<body>
<div id="container">
<div id="header">
<img class="logo" src="images/green-light.jpg" alt="Green Light Data Technologies" />
<img class="header-star-left" src="images/arrow2.jpg" alt="All Systems Go" />
<img class="header-star-rt" src="images/arrow2.jpg" alt="All Systems Go" />
<h1>Green Light Data Technologies</h1>
<h2>Keeping All Systems GO!</h2>
</div><!--/#header-->
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div><!--/#nav-->
<div id="content-home">
<h1>Welcome to Green Light Data Technologies!</h1>
<p>Thank you for visiting our site. Here you will find the latest cabling products, accessories and expert advise on their use. Our employees are well trained, product knowledgeable and are pleased to assist you.
Our website is designed to be easy to navigate and easy to learn more about Green Light product lines that may be of interest to you.
We are committed to supplying excellent electronic components that will meet your needs and to the development of unique future electronic components that will open new vistas in electronics. We actively pursue the improvement of existing products, the strengthening of newly developed products.</p>
</div><!--/#content-->
</div><!--/#container-->
</body>
</html>
/* MAIN NAVIGATION
----------------------------------- */
#nav {
float: left;
width: 900px;
height: 53px;
padding: 0;
margin: 0;
}
#nav ul {
list-style: none;
padding: 0;
margin: 205px;
margin-left: 1em;
}
#nav ul li {
float: left;
line-height: 53px;
padding: 0;
margin: 0 50px 0 0;
}
#nav ul li a {
font-family: arial, helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
/*color: #fff;*/
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
position: relative;
bottom: -5px;
background-color: orange;
border-bottom: 2px dotted #fff;
}
Its probably your browser's popup blocker preventing the _blank link opening a new popup. look at the top (for firefox and chrome) or bottom (for IE) for notifications to allow popup.
orange hover links are working as expected.
check this JSFiddle I added this:
body {
background-color: #999999;
}
so your menu is visible.
I'm having trouble changing the background on a list view in jqm... I can't change it to tranparent. What is the jqm class inheritance structure for this?
I had a lot of problems with this. There are some high level class inheritances to overcome and they are not easily found. Here is an example with jquery mobile 1.40. This is a sample allowing you to create a fully custom listview.
The trickiest ones are the ones that deal with the first-child and the button li.ui-first-child a.ui-btn - it took me a few hours to track this done. Hopefully this helps others as 1.40 is now final.
The following example is a very common necessity creating a custom menu on an overlay panel.
<ul data-role="listview" class="primary-menu">
<li data-icon="false">
<a href="#product" class="ui-btn ui-nodisc-icon ui-btn-icon-left ui-icon-myicon" >
View Products </a>
</li>
</ul>
/* Menu Classes */
.ui-btn-close-panel {
background-color:#b4316c !important;
}
ul.primary-menu {
margin-top:10px;
border-top:none;
}
ul.primary-menu li a{
font-size: 1em;
line-height: 1.3;
color:#ffffff !important;
font-family: 'ramblabold', Arial, sans-serif;
background-color:transparent !important;
border-bottom:1px solid #f2e3ea !important;
background-image:none !important
}
ul.primary-menu.ui-listview li.ui-first-child a.ui-btn {
color:#ffffff !important;
background-color:transparent !important;
border-bottom:1px solid #f2e3ea !important;
background-image:none !important
}
ul.primary-menu.ui-listview li a.ui-btn {
color:#ffffff !important;
background-color:transparent !important;
border-bottom:1px solid #f2e3ea !important;
background-image:none !important
}
<span> is only aligning horizontally but not vertically inside <div>
CSS:
.upload-cont{
cursor:pointer;
margin-left:130px;
display:inline-block;
border:2px dashed #a8a8a8;
max-width:220px;
max-height:180px;
min-width:220px;
min-height:180px;
}
.add-text{
display:block;
font-size:10px;
font-weight:bold;
color:#999;
word-wrap:break-word;
text-align:center;
width:100px;
margin:auto;
vertical-align:middle;
}
HTML:
<div class="upload-cont">
<span class="add-text">Something</span>
</div>
What should i do to align the <span> vertically that is at the middle of <div>?
Check this jsfiddle: http://jsfiddle.net/xdYUs/1/
Try this: http://jsfiddle.net/xdYUs/2/
Use position:relative; to the container and position:absolute; to the span element. As I've seen, your container has fixed width and height. You can use that by setting the top and left properties of the span element
Try this...
.add-text{
display:block;
font-size:10px;
font-weight:bold;
color:#999;
text-align:center;
width:100px;
margin: 40% auto;
}
jsFiddle Example
Greetings...
.add-text
{
display:block;
font-size:10px;
font-weight:bold;
color:#999;
word-wrap:break-word;
text-align:center;
width:100px;
margin:auto;
vertical-align:middle;
line-height:170px;
}
line-height => 180px (container) - 10px (font size) = 170px
I'm a bit of a JQuery Mobile Noob and I've been trying to search for an answer to this, but to no avail. I've created a ui-navbar with five custom data icons. Problem is when I select one of the five links, the buttons to the left of the selected link take on the selected icon. Also, what should be the right arrow on the ul-listview element, also takes on the selected icon albeit it's hard to see. Had to use Firebug to expand that in order to see if's the selected data-icon.
Here's the code I'm using for the navbar in my footer:
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
And some of the CSS:
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(images/nav.png);
background-position: 0 0;
background-repeat: no-repeat;
}
Any idea why this might be happening? It has to be something with my styles I would think.
don't use the name ui-icon only, instead use ui-icon-something, see also the docu about custom icons
Custom Icons
To use custom icons, specify a data-icon value that has a unique name
like myapp-email and the button plugin will generate a class by
prefixing ui-icon- to the data-icon value and apply it to the button:
ui-icon-myapp-email.
You can then write a CSS rule in your stylesheet that targets the
ui-icon-myapp-email class to specify the icon background source. To
maintain visual consistency with the rest of the icons, create a white
icon 18x18 pixels saved as a PNG-8 with alpha transparency.
In this example, we're just pointing to a standalone icon image, but
you could just as easily use an icon sprite and specify the
positioning instead, just like the icon sprite we use in the
framework.
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon-taifun {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
screenshot