How can I display both left, right data-icons for a button in jquerymobile.
Thanks in advance.
Thanks,
nehatha
In jQuerymobile documentation, you can fix icon position to one area. If you want to display both (left and right), customized CSS and JS are needed.
data-iconpos="left"
data-iconpos="right"
data-iconpos="top"
data-iconpos="bottom"
Try this in your header part:
<div data-role="header">
Home
<h1>Add Contacts</h1>
Search
</div>
Create a grid inside your button, then add an image in the left column then css style it to look the same
<a data-role="button" data-transition="slide" data-theme="b" href="#"
data-icon="arrow-r" data-iconpos="right">
<div class="ui-grid-b">
<div class="ui-block-a">
<img src="image.png" class="iconleft"/>
</div>
<div class="ui-block-b">
Button
</div>
<div class="ui-block-c">
</div>
</div>
</a>
CSS:
.iconleft {
position: absolute;
top: 50%;
margin-top: -9px;
left: -5px;
width: 18px;
height: 18px;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4);
box-shadow: 0 1px 0 rgba(255,255,255,.4);
background-color: #666;
background-color: rgba(0,0,0,.4);
background-image: url(images/icons-18-white.png);
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
You can always do it the other way around, with the left being the dataicon and right being image but it doesn't really matter.
See my working example here or this fiddle
Related
The z-index for my #navContainer works fine on desktop, but not on iPad, any solutions?
Here's a link to my project http://www.lunacarpentry.com/peachietouch/index.html
Below is the code for my #navContainer
width: 27%;
position: absolute;
z-index: 10;
top: 4.5em;
left: 36.55%;
padding-bottom: 14em;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
It might be the way the iPad's Safari is processing z-index. To explain it simply, z-index doesn't work as simply as most web developers would assume it does.
Most web devs never do read into the documentation of z-index because it's a strait forward concept and because of this they eventually find themselves in this position. You'll be able to read more about that here
As far as a solution to wanting strait forward stacking of elements, if you're willing to use it then I'd suggest you keep the stacking order to the transforms. You'll be able to do that for the iPad specifically with this:
-webkit-transform:translateZ(10px);
I found the solution, I added a negative z-index value to the element that was overlapping my #navContainer
HTML
<div id='navContainer'>
<img id='logo' src='img/peachie-touch-logo-min.png' alt='peachie touch logo'/>
<ul>
<li id='home-button' value='home'><a href='#home'>Home</a></li>
<li id='about-button' value='about'><a href='#about'>About Us</a></li>
<li id='services-button' value='services'><a href='#services'>Services</a></li>
<li id='contact-button' value='contact'><a href='#contact'>Contact</a></li>
</ul>
<div id='navFooter'>
<p class='tradeMark'>Peachie Touch ©</p>
<ul>
<li><a href='#'>
<div id='facebookIcon'></div>
</a>
</li>
<li><a href='#'>
<div id='instagramIcon'></div>
</a>
</li>
<li><a href='#'>
<div id='pininterestIcon'></div>
</a>
</li>
</ul>
</div>
</div>
<div id='wrapper'>
<div id='about' class='content'></div>
<div id='services' class='content'></div>
<div id='contact' class='content'></div>
<div id='home' class='content'></div>
<div id='currentPageContent' class='contentFromCurrentPage'></div>
</div>
CSS
#navContainer {
width: 27%;
position: absolute;
z-index: 10;
top: 4.5em;
left: 36.55%;
padding-bottom: 14em;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
#wrapper {
width:100%;
height: 0;
overflow-x: hidden;
z-index: -10;
position: absolute;
margin: 7em 0 0;
background-color: #fff;
transition: all 0.5s ease-in-out;
opacity: .9;
-webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.12);
box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.12);
}
So, let me tell my problem directly to the point. I'm developing a website right now. And so I try to visit this website I'm developing on with my iphone. The problem is, I got some different output when I visit that site with my PC and when I visit it with my iphone. This image is when I visit it with my PC's Chrome and the output is just the same with all other browser in my PC while this is when I visit it with my iphone's Safari and so the output is same too when I visit it with my iphone's Chrome . See the difference betwwem visit from iphone and from PC? Yep. I got that "space" above my navigation bar while visiting it with my iphone. So can anybody help me solve this problem? Thanks a lot in advance.
Btw this is my CSS and HTML
body {
background: rgb(25, 181, 254);
margin: 0px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#header {
width: 100%;
min-width: 1050px;
height: 150px;
margin-bottom: 20px;
text-align: center;
}
#logoBox {
display: inline-block;
width: 300px;
height: 150px;
overflow: hidden;
}
#logoBox:active {
height: 140px;
margin: 5px auto;
}
.logo {
background: url('img/icon/logo.png') no-repeat;
width: 300px;
height: 100%;
}
#navBox {
width: 150px;
height: 150px;
overflow: hidden;
display: inline-block;
}
.transition {
transition: height 0.15s, margin 0.15s, background 0.7s;
-webkit-transition: height 0.15s, margin 0.15s, background 0.7s;
-o-transition: height 0.15s, margin 0.15s, background 0.7s;
-ms-transition: height 0.15s, margin 0.15s, background 0.7s;
-moz-transition: height 0.15s, margin 0.15s, background 0.7s;
}
#navBox:active {
height: 140px;
margin-bottom: 5px;
}
#navBox.green {
background: rgb(80, 190, 106);
}
#navBox.orange {
background: rgb(250, 170, 30);
}
#navBox.green:hover {
background: rgb(4, 160, 114);
}
#navBox.orange:hover {
background: rgb(240, 130, 20);
}
#iconBox {
height: 53.4%;
width: 100%;
margin-top: 13.4%;
text-align: center;
}
#iconBorder {
width: 70px;
height: 70px;
border-radius: 40px;
border: 5px solid rgb(255, 255, 255);
}
img.icon {
width: 50px;
height: 50px;
margin-top: 10px;
}
a.nav {
display: inline-block;
text-decoration: none;
}
#navProp {
width: 100%;
height: 33.3%;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
font-size: 25px;
margin-top: 6.7%;
}
.center{
margin-left:auto;
margin-right:auto;
}
<html>
<head>
<title>Welcome to SIRIUS</title>
<?php require_once "theme.php"; ?>
</head>
<body>
<div id="header">
<a href="index.php" class="nav">
<div id="logoBox" class="transition">
<img src="img/icon/logo.png" class="logo">
</div>
</a>
<!--
-->
<a href="index.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon home">
</div>
</div>
<div id="navProp">Home</div>
</div>
</a>
<!--
-->
<a href="aboutUs.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon aboutUs">
</div>
</div>
<div id="navProp">About Us</div>
</div>
</a>
<!--
-->
<a href="register.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon register">
</div>
</div>
<div id="navProp">Register</div>
</div>
</a>
<!--
-->
<a href="login.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon login">
</div>
</div>
<div id="navProp">Login</div>
</div>
</a>
<!--
-->
<a href="admin.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon admin">
</div>
</div>
<div id="navProp">Admin</div>
</div>
</a>
</div>
</body>
</html>
Apologies I cant see your images as work are blocking content :P
Im guessing here but most likely it would be something that is being specified by the browser, that you have not margins etc. Try using a reset.css file or maybe using debugging (F12) on a desktop and pretend to be a phone to debug. (I'm pretty sure in chrome you can specify a phone browser type to be, im assuming all modern browsers have emulation for mobile)
Or it could be min-width: 1050px;
If you are designing this for responsive design you might want to make some #media queries.
[edit] I also notice you have nothing specifying html. Perhaps the browser is adding some css against the html tag? html {margin:0; padding:0;}
I have a problem with draggable feature in Internet Explorer.
I have 2 columns, each of them contains a list of cards. I want to drag a card from one column to another.
Problem is when I start dragging, cards from other column are moved as well. This happens only in IE.
HTML:
<div class="card-container">
<div class="card-row">
<div column_id="1" class="card-column drag" style="width: 133px;">
<ul style="height:100%; width:100%" >
<li story_id="2" class="card" style="position: relative;">
<div>Card1</div>
</li>
</ul>
</div>
<div column_id="2" class="card-column drag" style="width: 133px;">
<ul style="height:100%; width:100%" class="snap">
<li story_id="1" class="card" style="position: relative;">
<div>Card2</div>
</li>
</ul>
</div>
</div>
</div>
JS:
$(".drag").find(".card").draggable({
revert: "invalid"
});
$(".card-column").droppable({
accept: ".card",
drop: function( event, ui ) {
$(this).find("ul").append("<li class=\'card ui-draggable\' story_id=\'" + ui.draggable.attr("story_id") + "\' style=\'position: relative;\'>" + $(ui.draggable).html() + "</li>");
ui.draggable.remove();
$(".drag").find(".card").draggable({
revert: "invalid"
});
}
});
CSS:
.card-container{
display: table;
}
.card-column{
display: table-cell;
min-height: 200px;
border: 1px solid #B6B6B6;
}
.card-row{
min-height: 200px;
display: table-row;
}
.card-column ul {
list-style: none outside none;
margin: 0 0px;
padding: 0px 0 0;
position: relative;
}
.card-column ul li{
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #D0D0D0;
border-radius: 3px;
margin: 5px;
}
JSFiddle
Im using jQuery UI 1.8.6
How can I prevent other cards to move?
Cheers
In CSS add float:left to .card-column class
.card-column{
display: table-cell;
float:left;/*ADD THIS*/
min-height: 200px;
border: 1px solid #B6B6B6;
}
I have a page with two lists on it. When I test on my iPhone 5, underneath the lists there is a load of extra blank space and a random blank line. (See image below)
I am not using the footer data-role="footer". Just data-role="content" and data-role="page". I have tried using the footer but it makes no difference.
When I test on a web browser all appears fine, so I cannot use the element inspector to find out whats wrong.
Would anyone know how to get rid of this? (ps I am running this on Cordova if that matters)
My HTML is:
<div data-role="page" data-title="Conversation">
<div data-role="header">
Back
<h1>Conversation</h1>
</div><!--HEADER-->
<div data-role="content">
<ul data-role="listview">
<li><a id="facebook" href="#"><img class="ui-li-icon" src="img/facebook.png"/>Facebook</a></li>
<li><a id="twitter" href="#"><img class="ui-li-icon" src="img/twitter.png"/>Twitter</a></li>
<li><a id="youtube" href="#"><img class="ui-li-icon" src="img/youtube.png"/>YouTube</a></li>
<li><a id="instagram" href="#"><img class="ui-li-icon" src="img/instagram.png"/>Instagram</a></li>
</ul>
<div class="yeldivider"></div>
<ul data-role="listview">
<li><a id="tickets" href="#"><img class="ui-li-icon" src="img/ticketsicon.png"/>Tickets</a></li>
</ul>
</div><!--CONTENT-->
</div><!--PAGE-->
There is no custom CSS other then the .yeldivider which appears between to two lists.
.yeldivider {
background-color:#ffeb00;
height: 40px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: -40px;
}
This is a wild guess but sometimes content DIV has a problem with vertical stretching.
Worst case scenario, give it some id or class, like this:
<div data-role="content" class="cover-screen">
//Content goes here
</div>
And use this CSS if you don't have a footer:
.cover-screen {
position: absolute;
top: 43px !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
or this CSS if you have a footer:
.cover-screen {
position: absolute;
top: 43px !important;
bottom: 43px !important;
left: 0 !important;
right: 0 !important;
}
And like I told you this is just a wild guess.
Working fine here DEMO http://jsfiddle.net/yeyene/SjbMd/ and already tested on iPhone.
I use these...
jquery.mobile-1.3.1.min.css
jquery-1.9.1.min.js Remove
jquery.mobile-1.3.1.min.js
what about yours?
CSS
.yeldivider {
background-color:#ffeb00;
height: 40px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: -40px;
}
How to create three "like" image buttons in one row ( one aside another) in jquery mobile ?
I have tried like this
<body>
<a class="ui-icon-google" href="#" data-role="ui-li-aside" data-icon="google" data-theme="a"/>
<a class="ui-icon-facebook" href="#" data-role="ui-li-aside" data-icon="facebook" data-theme="a"/a>
<a class="ui-icon-twitter" href="#" data-role="ui-li-aside" data-icon="twitte" data-theme="a"/a>
</body>
with css like
.ui-icon-google{
background-image: url("google.png") !important;
background-position: 4px 50%;
background-size: 60px 60px;
margin-top: -12px !important;
width: 192px;
height: 192px;
}
.ui-icon-facebook{
background-image: url("facebook.png") !important;
background-position: 4px 50%;
background-size: 60px 60px;
margin-top: -12px !important;
width: 192px;
height: 192px;
}
.ui-icon-twitter{
background-image: url("twitter.png") !important;
background-position: 4px 50%;
background-size: 60px 60px;
margin-top: -12px !important;
width: 192px;
height: 192px;
}
but it one above another ( what is wrong, I am trying to put icons for openid like on stackoverflow )
You need images first then you can link the images to your location.
make it a grid :
<div class="ui-grid-b">
<a class="ui-block-a ui-icon-google" href="#" data-role="ui-li-aside" data-icon="google" data-theme="a"/>
<a class="ui-block-b ui-icon-facebook" href="#" data-role="ui-li-aside" data-icon="facebook" data-theme="a"/a>
<a class="ui-block-c ui-icon-twitter" href="#" data-role="ui-li-aside" data-icon="twitte" data-theme="a"/a>
</div>
Simply create a inline button group:
<div data-role="controlgroup" data-type="horizontal" >
Up
Down
Delete
</div>
Style it as you wish. Take a look at this link, here you will find many more examples of jQM GUI elements. Here's an example: http://jsfiddle.net/Gajotres/YJfzP/
Make the images inline or imline-block elements. Add the following style to .ui-icon-google, .ui-icon-facebook and .ui-icon-twitter:
display: inline;
Or,
display: inline-block;