Jquery mobile 1.4.0 remove disc from custom icon - javascript

As a wrote in the subject I'm going crazy for remove the disc from the custom icon on my JQM APP.
I've tried some solution found on the web but nothing is working.
This is a demo where on the left I got my home custom icon with disc and on the right the native home icon without disc:
http://jsfiddle.net/5nBVa/
This is the code I use:
.ui-icon-myhome:after {
background-image: url("http://www.mywine.info/images/theme/home.png");
/* Make your icon fit */
background-size: 24px 24px;
background-color: transparent;
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
}
Anyone can show me the way to remove it?
Thanks

If I understand what you want, you just need to set the background-color of the link to transparent:
.ui-icon-myhome{
background-color: transparent !important;
}
Here is your updated FIDDLE
UPDATE: OP wants image to fill the circular button and be the same size as a standard icon button with disc.
The icon is actually on the anchor tag's :after. Making the background-size, the width and height the same size as the button will cause the image to take up the whole button space. Adjust the margin-top and margin-left to keep the image centered within the button:
.ui-icon-myhome:after {
background-image: url("http://www.mywine.info/images/theme/home.png");
/* Make your icon fit */
background-size: 32px 32px;
background-color: transparent;
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
width: 32px !important;
height: 32px !important;
margin-top: -15px !important;
margin-left: -15px !important;
}
Updated DEMO

Not sure what you're trying to do, but have you tried adding class="ui-nodisc-icon" ?
Check Removing the disc in the following page : http://demos.jquerymobile.com/1.4.0/icons/index.html

Related

How to ensure that the css border goes inside the image

I have a some picture with border add with photoshop but these border are dirty.
I would overwrite these border without doing it with photoshop again (Can not use a script because almost every picture are too specifics), because my client gave me about 15000 pictures with this error..
Then, I though about css border.
So, how can I make the border around the image to fill the inside of it ?
Is it possible ? Have you a better idea ?
EDIT
List of ideas which don't work for my case:
css attribute : border-style: inset (thank you anyway Abdul Basit)
css attribute : clip
Thank you in advance.
you can give inset border
border-style: inset;
can add a width that covers approx of all borders
border-width: 5px;
or you can use image as a border for all.
You can use box-shadow with inset to simulate a border. However the box-shadow does not work directly on the image element, because it will render behind.
You can solve this by making an .image-wrapper class with a box-shadow on.
And to make this shadow render in front of your image you just need to set the z-index to -1.
* { box-sizing: border-box; }
.img-wrapper {
box-shadow: inset 0 0 0 20px red; // Fake border on the inside
display: block;
margin: 50px auto;
width: 90%;
}
.img-wrapper img {
display: block;
position: relative;
width: 100%;
z-index: -1; // Render the image behind the box-shadow
}
Demo

Using Single Image for Hover Effect

I Had read somewhere on a webtutorial that we can use only a single Image for hover effects in css. For Eg. I Need to input only this image in CSS
So, When the Facebook Icon is not hover we see the dull grey icon, but when someone hovers over the icon, the blue icon is displayed and I need to use only one image file in the CSS for this purpose.
How Can we do that. Also, I would like to know what are these kind of images know as ?
They are called sprites
They allow you to use one image for multiple elements, that can look entirely different
Official Documentation
I made a quick example to do what you required here
<div></div>
div {
background: url('http://i45.tinypic.com/2jee9zo.png');
background-position: -10px -15px;
height: 70px;
width: 70px;
}
div:hover {
background-position: -10px 83px;
}
You can use a CSS sprite. This is a useful tool: http://es.spritegen.website-performance.org/
Further reading: http://www.w3schools.com/css/css_image_sprites.asp
edit: Its called a spirte (sorry added this, cause i forgot to awnser your first question how this was named)
You can do this by positioning your background image as in example from my work down below
This is CSS, btw
input#searchSubmit { height: 34px; width: 36px; background: url('../images/searchSubmit.png') no-repeat; margin: 8px 8px 0 4px; cursor: pointer; border: none; }
input#searchSubmit:hover { background-position: 0px -34px; }
As you see, as I hover over the searchSubmit , it will change the background position of the image, pasted on the button, showing instead of the black with red search icon, the red with white search icon.
site is here, so you can see it in action, all my action buttons are made this way btw.
click here for seeing this in action

Why i cannot show popup on some websites?

i made a chrome extension, and my extension will show popup on webpage. I create popup by div tag like this:
var myPopupDiv = document.createElement('div');
myPopupDiv.className = "popup";
document.body.appendChild(myPopupDiv);
And css for popup class as following:
div.popup {
color: #fafafa !important;
border-color: #000000 !important;
border-width: 0px !important;
-webkit-border-radius: 10px !important;
background-color: #363636 !important;
font-size: 16px !important;
padding: 8px !important;
overflow: visible !important;
z-index: 999999 !important;
text-align: left !important;
cursor: default;
position: absolute !important;
}
I dont know why my popup sometimes show up on some pages and sometimes it is not shown up on some others. For a specific case, my popup cannot be shown up when my extension work on stackoverflow webpage.
what is wrong with my javascript code?how can i make a popup display on any webpages?
Thanks for your help.
I just checked, and StackOverflow's CSS defines a popup class with display: none. Use the Chrome "Inspect Element" panel to check if your div is added to the DOM, and if it got the display: none style applied. I'd fix this by coming up with a unique name for your CSS class.

How to create google plus circle with mouseover effect?

Those of you who have seen google plus may know what Im taking about...
Essentially my problem is this. I would like to have a circle with radius for example of some number of pixels with text in the center. On mouseover, the outline of the circle expands by whatever it was plus 5. When I mouse out, the circle gradually shrinks back to its original size. If the text in the middle of the circle is clicked then an alert box of some sort pops up.
What is a good way to do this and how? Does it involve div tags?
Use CSS3 border-radius to create your circle and some JS to do the animations...or you could try to do them with CSS3 as well.
http://jsfiddle.net/DOSBeats/cE6Yb/
This version uses JS.
Here is the CSS code they use:
.eswd {
background: url("/images/experiments/nav_logo78.png") repeat scroll 0 -243px transparent;
}
.esw {
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
display: inline;
height: 15px;
margin-left: 5px;
overflow: hidden;
vertical-align: 6px;
width: 24px;
}
HTML:
<button g:pingback="/gen_204?atyp=i&ct=plusone&cad=S0" title="Recommend this page" g:undo="poS0" g:type="plusone" g:entity="http://anewyorkthing.com/" onmouseover="window.gbar&&gbar.pw&&gbar.pw.hvr(this,google.time())" onclick="window.gbar&&gbar.pw&&gbar.pw.clk(this)" class="esw eswd" style="" id="gbpwm_0"></button>

CSS rollover problems with Internet Explorer 7

I wrote some CSS in my HTML code to create rollover buttons. Then i tried to run it with IE 7 and surprise! it doesn't run. In fact it shows both the button and underlying rollover. How can i get around IE's inability to cache background images? Preferably using CSS but javascript 'will' be tried.
Sample CSS:
#Menu
{
width: 100%;
height: 32px;
margin-top: 93px;
padding-left: 13px;
}
#Menu a
{
height: 32px;
line-height: 32px;
width: 123px;
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
float: left;
margin-left: 3px;
text-decoration: none;
color: #1e1e1d;
font-size: 12px;
text-align: center;
}
#Top #Menu a:hover, #Top #Menu a.active
{
background-position: 0px 0;
text-decoration: underline;
}
Well firstly you are giving conflicting instructions ...
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
... the background is already positioned using shorthand.
I assume that your regular and hover states both share the same image, so why not do both with shorthand? Remove...
background-position: -123px 0;
... and for your hover and active states, use ...
background-position: bottom left;
Then have both your states in one image, one below the other (which I assume is what you've been trying anyway).
Image rollover issue comes mainly because of downloading image every time on hovering a link or tab. This flicker is caused by the delay when the primary image is removed and the rollover image is loaded (even though they are technically the same image, Internet Explorer prefers to treat them separately).
check it out complete fix for rollover issue:
http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html
if you are using the :hover pseudo-selector, then it won't work in IE unless it is an anchor tag. Try changing the button into an anchor. You can still make it look like a button using css.
If you want to use javascript, then have a look at jQuery.
Try making sure your CSS background syntax is correct. Some browsers let you specify the properties in any order however IE will choke. You should specify the attachment in the form X Y (horizontal then vertical). You currently have top left. Make it left top. Also you have no-repeat at the end of the line, it should come just after the url declaration and before the position declaration.
The order for CSS background shorthand values should be:
background-color
background-image
background-repeat
background-position
background-attachment
eg. background: #fff url(example.jpg) no-repeat left top fixed;

Categories