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)
Related
I am trying to have two divs (red boxes) side by side, and within each red box should be a bordered link.
One link is on two lines whereas the second link is on one line.
The links should lie at the center (horizontally and vertically) of each box, and the two boxes should also be perfectly aligned.
My code is the following. I had to set the links as "display: table-cell;" to keep the two boxes aligned. If you have another solution, i'm listening ^^.
* {
margin: 0;
padding: 0;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: inline-block;
}
#marketing-link, #prints-link {
color: white;
vertical-align: middle;
display: table-cell;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: .2em;
}
<body>
<div id="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
Thanks guys!
Ok, i found the solution.
Each link should be set to display as inline-block and should be contained within a div displayed as a table-cell.
This allows to center the link vertically.
The table-cells should themselves be contained within divs displayed as inline-blocks. This allows the red boxes to be aligned and to have a space between them.
Here is the final code:
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: table-cell;
vertical-align: middle;
margin-right: 20px;
}
#marketing-link, #prints-link {
color: white;
display: inline-block;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
padding: .2em;
}
<body>
<div class="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
</div>
<div class="container">
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
I am developing a mobile web app with JQuery Mobile. I have some divs that are laid out as a table using display table, row, cell.
<div class="table detail">
<div>
<div class="detailHeadings">Expiration:</div>
<div class="detailValues">#{viewBean.expiration}</div>
</div>
<div>
<div class="detailHeadings">ID:</div>
<div>#{viewBean.Id}</div>
</div>
<div>
<div class="detailHeadings">Email:</div>
<div class="detailValues">#{viewBean.email}</div>
</div>
<div>
<div class="detailHeadings">ZIP Code:</div>
<div class="detailValues">#{viewBean.zipCode}</div>
</div>
</div>
With the following css:
.table {
display: table;
width: 100%;
color: #333333;
table-layout: fixed;
}
.table > div {
display: table-row;
}
.detail .detailValues {
text-overflow: ellipsis;
overflow: hidden;
display: table-cell;
white-space: nowrap;
}
.detailHeadings {
font-weight: bold;
padding-right: 10px;
width: 30%;
display: table-cell;
}
This works fine, however I want to be able to copy just the Id. When I do a long press on windows phone or android I can select the id just fine. However, on iOS it only allows me to select the entire table. This is a problem anytime I use display:table. Is there a way to let iOS know what I want to be able to copy?
Add the below to your CSS:
.table div .detailHeadings, .table div:not(:nth-child(2)) .detailHeadings + div {
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
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;
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
I have a problem with a div that at the begin is fixed in the bottom-left corner. I need to do it draggable but when I use jquery to do it the bottom position remains and the size of the div changes.
You can see the behavior in this page: http://paraguasparados.com
The div css code is:
.fcp-cpanel{
position:fixed;
bottom:20px;
left:10px;
z-index: 99999;
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('../img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
The jquery code is:
$jn("#fcp-cpanel").draggable({
containment:"body",
scroll: false,
opacity: 0.35
});
When in firebug I remove the 'bottom' css style it works like it should.
Thanks for any help.
The easiest solution to this is to add a width and height to your fixed draggable <div> to stop it from resizing on drag.
The problem is that you are making a fixed element draggable and so the bottom css attribute is messing it up when you start moving it. A fix for this is to create a container div that has the fixed css attributes and inside you can add the draggable element. Something like this:
css:
.fcp-cpanel-container{
position:fixed;
bottom: 10px;
left:10px;
}
.fcp-cpanel{
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
html:
<div class="fcp-cpanel-container">
<div class="draggable fcp-cpanel">
<p><b>Amigos Online</b>
<span id="onlusers" class="onlusers">0</span><span onclick="register()"><img title="Registrar" alt="Registrar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/visible.jpg"></span>
<span onclick="maximize()" id="fcp-micon">
<img title="Maximizar" alt="Maximizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/max.jpeg">
<img style="display:none;" title="Minimizar" alt="Minimizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/min.jpeg">
</span>
</p>
</div>
</div>
I set up a working example with your code here: http://jsfiddle.net/NdUNu/.
I tried this and it did what I wanted
$(function() {
$("#draggable").draggable({ containment: "window" });
});