I'm trying to do a list with two sections and different links on each one but I am not able to do it without using an icon in the right section of the list.
I have tried to put data-icon='false' everywhere but it doesn't work, it uses the default icon.
I also have tried to use and it works but I am not able to make it look as good as the split list.
Any idea on how to do this??
Thank you very much!
Can you override .ui-icon class of jquery mobile something like this,
.ui-icon-your_name_icon {
width: 18px;
height: 18px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background-position: 50% 50%;
background: url("../images/some_one_image_transparent.png") no-repeat scroll 0 0 transparent;
}
I hope this helps. :)
I have managed to do it with controlgroup like this and playing with widths in .css file:
<li data-role='list-divider'>
<div data-role='controlgroup' data-type='horizontal' >
<a class='resume' type='button' href='javascript:void(0)'>
<span class='name' >Object Name </span>
</a>
<a class='info' type='button' href='javascript:void(0)'>
<span class='name'>Max Value </span>
</a>
</div>
</li>
Related
I'm working on a custom navbar on a site I'm making but I've run into an issue. I've searched around and have found some similar threads, but nothing that has worked for me. I have a navbar with an image and some text underneath. What I'm trying to accomplish is while hovering over either the text or image, the hover effect for both occurs. The issue is that for the image, the hover effect is done thru an ID and the text hover effect is done thru a class. Here is my markup for one of the sets.
<div class="col-md-2 col-sm-1">
<a href="#Url.Action("Index","Home")" title="HOME" style="margin-left:10px;">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And here is the CSS for the image:
#homenav {
margin: 0 auto;
display: block;
width: 47px;
height: 50px;
background: url('../Images/NAV_ICONS/NAV_HOME.png') no-repeat 0 0;
}
#homenav:hover {
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
And the CSS for the text:
.navtext{
font-family: RobotoCondensed-Bold, 'Arial Narrow', Arial, sans-serif;
color: #00457c;
overflow: hidden;
white-space: nowrap;
}
.navtext:hover{
color: #ee2e24;
}
And just for clarity, I'm simply trying to make both turn the same color red. Any advice will be greatly appreciated.
Could this fit your needs ?
Put both div (#navbar and .navtext) inside a wrapper div, then put your hover styles in those selectors:
#wrapper:hover #homenav
and
#wrapper:hover .navtex
See fiddle here.
But the hover styles come for a hover over the whole wrapper div.
When using css :hover, the property changes will only affect the element being hovered. You would have to use Javascript/JQuery to do this, but it's pretty straightforward.
First, we need to change the :hover css elements into classes like so
.navtextHover{
color: #ee2e24 !important;
}
.homeNavHover {
background: url('http://lorempixel.com/g/400/200/') no-repeat 0 0 !important;
}
We also need to add a new class. This class will essentially mean that they are all tied together when hovered - ie, when one is hovered, all will be treated as hovered. So add that to the HTML (I called it syncedHover)
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;">
<div id="homenav" class="syncedHover"></div>
<div class="navtext syncedHover">HOME</div>
</a>
</div>
Then the javascript merely adds the classes on hover and removes them on exit
$(".syncedHover").hover(
function () {
$("#homenav").addClass("homeNavHover");
$(".navtext").addClass("navtextHover");
},
function () {
$("#homenav").removeClass("homeNavHover");
$(".navtext").removeClass("navtextHover");
}
);
This could be written better by passing data to the JQuery method on hover so you don't have a list of addClass methods, but this isn't too cumbersome for only two elements.
This JSFiddle shows a working example with how it can be done https://jsfiddle.net/bou7mqk3/1/
You just need to put a class on the link instead. As in, the parent a tag that the two elements are nested inside.
In this HTML the only change is the additional class on the link - 'your-class', and I removed the unnecessary syncedHover classes:
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;" class="your-class">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And then update your CSS to this:
.your-class:hover #homenav{
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
.your-class:hover .navtext{
color: #ee2e24;
}
No JavaScript needed at all!
I am having a tough time fixing a small issue. I am little embarrassed in asking help for this CSS issue but a different set of eyes might help fix this.
ISSUE
Go to http://ajaxtown.com/uranium/
Extreme top you will find a bar (telephone number and social icons and search)
Now resize the window (mobile size)
Again maximize it to full width.
You will see the search icon coming down.
RESOLUTION
While experimenting with firebug, i found that if you inspect element on the search icon, you will find the below css.
.top-search {
float: left;
width: 40px;
}
If i uncheck float and then again check it, everything gets fixed. The search icon gets aligned with the social icons.
But I am not able work this out.
Any help will be highly appreciated.
Please let me know if I am not clear with my question.
Saha
I placed the search into the .social-icons div
<div class="social-icons top-social-icons">
<i class="icon icon-twitter"></i><i class="icon icon-facebook"></i><i class="icon icon-rss"></i>
<div class="top-search">
<a class="top-search-bt open" href="#">
<i class="icon"></i></a>
</div>
</div>
Quick fix
That works for me on Chrome (Canary)
<div class="social-icons top-social-icons">
//social icons here
<a class="top-search-bt open" href="#"><i class="icon"></i></a>
</div>
CSS fix
.topbar-right .topbar-right-inner {
border-right: 1px solid #E2E2E2;
width:163px;
}
#media only screen and (max-width: 767px)
{
.topbar-right .topbar-right-inner {
border-right: none;
margin: 0 auto;
}
}
I managed to solve it this way:
In CSS:
//Before
.top-search {
float: left;
width: 40px;
}
//after
.top-search {
display: table;
width: 40px;
}
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
In stackoverflow, when we hover on a user's reputation we see a text. I have seen this at many places and the source code tells me that it can be done without js. And i tried and got only this-
<div="text">hover me</div>
Use the title attribute, for example:
<div title="them's hoverin' words">hover me</div>
or:
<span title="them's hoverin' words">hover me</span>
The title attribute also works well with other html elements, for example a link...
<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
Often i reach for the abbreviation html tag in this situation.
<abbr title="Hover">Text</abbr>
https://www.w3schools.com/tags/tag_abbr.asp
You're looking for tooltip
For the basic tooltip, you want:
<div title="This is my tooltip">
For a fancier javascript version, you can look into:
http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632
The above link gives you 12 options for tooltips.
This can also be done in CSS, for more customisability:
.hoverable {
position: relative;
}
.hoverable>.hoverable__tooltip {
display: none;
}
.hoverable:hover>.hoverable__tooltip {
display: inline;
position: absolute;
top: 1em;
left: 1em;
background: #888;
border: 1px solid black;
}
<div class="hoverable">
<span class="hoverable__main">Main text</span>
<span class="hoverable__tooltip">Hover text</span>
</div>
(Obviously, styling can be improved)
I want to use pretty 3d button images on my website. However, currently the way this works is the text is part of the image.
So, when I want to change the text (or make a new button) it's a 10 minute editing chore instead of a 20 second text change.
I've seen a few websites that have a blank button with text on it.
The real trick is making the entire image clickable. I've been able to make the link inside an image visible but that's a poor UI. Users will expect to click the button anywhere and failure to behave that way will frustrate them.
It seems like they're wrapping a .DIV tag with an image background around a Hyperlink.
<Div (class w/ image>
<a> text
</a>
EXAMPLE:
https://www.box.net/signup/g
Anyone have any insight or explanation of how this works?'
CODE SAMPLE
<a href="#" class="button" style="position: relative;left:-5px;"
onmousedown="return false;"
onclick="document.forms['register_form'].submit(); return false;">
<span>
My text
</span>
</a>
Make the button a background image:
<style>
div.button a {
display: block;
width: /* image width */;
line-height: /* image height */;
text-align: center;
background: url(/* image uri */) no-repeat;
}
</style>
Would setting your anchor to display:block and giving it a height/width equal to your div/background image help you?
perhaps something like
a {
width: something ;
height: something;
display: block;
background: url('hi.png');
}
also,
input { background: url('hi.png'); }
is an alternative
Your example is just placing CSS styles on the a tag...
From there:
The tag:
<a onclick="document.forms['register_form'].submit(); return false;"
onmousedown="return false;" style="position: relative; left: -5px;"
class="button" href="#">
<span>Continue</span>
</a>
Note that they are using JS for some reason, and not using the href, I don't like that.
Then, the button class:
a.button
{
background:transparent url(../img/greenbutton2.gif) no-repeat scroll left top;
font-size:16px;
height:42px;
line-height:42px;
width:155px;
}
This is just how that site you linked to did it.
I found this rather impressing. Using GWT to style hyperlinks.