How to change tooltip background color? - javascript

I have created a tooltip in my html file like this:
<span title="" class="duedate-warning-msg"></span>
And I set the CSS property like this:
.duedate-warning-msg{
background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
border-color: #f5c7c7;
padding: .5em 0.25em 0.5em 2.5em;
title:"my tooltip";
color: #D11006;
}
span:hover{
position:relative;
}
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
The above style created tooltip perfectly. Only problem which I am facing is that I want background color of tooltip is blue. But it always shows gray. Why it is happening so?

Remove the background-image and add background, like so:
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background: #00F;
}

Easy, in background-image property replace #cccccc with a color of your choice, assuming that you want to keep the fade-to-almost-white (#eeeeee) gradient.

Remove the background image from span[title]:hover:after
Here is the working Demo

Related

Text on the top not center in the button

I have button with text on top
Here is code
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
text-align: center;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
display: block;
position: absolute;
top:0;
left:0;
}
<button class="settings-button-new"><span>Home</span></button>
It on the top, but not centered as you can see.
I try to use text-align: center; but seems it not works.
How can i center it in button?
Thank's for help
Just add below css code for center, if don't need to vertically center then the top:0 or as your need; and transform: translate(-50%, 0);.
.settings-button-new span {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc', GradientType=0);
background-image: linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<button class="settings-button-new"><span>Home</span></button>
Only center.
.settings-button-new span {
display: block;
position: absolute;
top: 5px;
left: 50%;
transform: translate(-50%, 0);
}
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc', GradientType=0);
background-image: linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
display: block;
position: absolute;
top: 5px;
left: 50%;
transform: translate(-50%, 0);
}
<button class="settings-button-new"><span>Home</span></button>
Maybe this code can help you
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
text-align: center;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
display: block;
position: absolute;
top:0;
left: 50%;
transform: translateX(-50%);
}
<button class="settings-button-new"><span>Home</span></button>
You can remove vertical aligning text using without absolute positioning: you can use vertical-align and pseudoelement for this. Source answer for this technique.
Also
You don't need absolute position in this case (and text-align: center).
I would recommend you to delete vendor prefixed properties because they are for very old browsers
linear-gradient will work for background, not background-image property
Demo:
/* styles to align button's text at the top */
.settings-button-new:after {
content: "";
display: inline-block;
vertical-align: top;
height: inherit;
}
/* styles to align button's text at the top */
.settings-button-new span {
vertical-align: top;
display: inline-block;
}
/* Cleaned up button styles */
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background: #fff linear-gradient(top, #fff 0%, #fcfcfc 100%);
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #fff;
}
<button class="settings-button-new">
<span>Home</span>
</button>
.settings-button-new span {
margin: 0px;
text-align: center;
}
can you change span to div , text-align:center will then work fine
remove the poistion .and simply add margin:auto
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
text-align: center;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
margin:auto;
}
<button class="settings-button-new"><span>Home</span></button>

Pressing CSS Styled button presents unwanted keyboard UIWebView

I have a local html resource loading in a UIWebView. One button is styled with CSS that when pressed, presents an unwanted keyboard and allows typing on the button
In my local html file
<style>
.button {
border: 0px solid #ed1717;
background: #e01414;
background: -webkit-gradient(linear, left top, left bottom, from(#e01414), to(#e01414));
background: -webkit-linear-gradient(top, #e01414, #e01414);
background: -moz-linear-gradient(top, #e01414, #e01414);
background: -ms-linear-gradient(top, #e01414, #e01414);
background: -o-linear-gradient(top, #e01414, #e01414);
background-image: -ms-linear-gradient(top, #e01414 0%, #e01414 100%);
padding: 14px 28px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
font-size: 17px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
</style>
html button local resource
align=center ><INPUT onclick=calculate(this.form) class=button value="Press" name=calculate_button>
Try setting the type="button" attribute to the input element. This should do the trick :)

jQuery ajax load function doesn't include custom javascript file

I have made a custom jquery popupbox for "Tell a friend" application on my website. It uses the jQuery load function to include a php file from Modules folder and display it into the popupbox. The CSS Works fine but when I bind Javscript to it, It doesn't work at all.
The code below popups the "Tell a friend Form from module folder"
/* Popup for Email to a friend*/
$("#emailtoafriend").click(function (){
$("#overlay").removeClass("overlayHide");
$("#overlay").addClass("overlayShow");
$("#overlay").fadeIn("slow");
$("#popup").load('modules/mod_tellafriend/default.php');
return false;
});
This code below, fires off when a user clicks on the Close Button. This doesn't work
$(".btnClose").click(function (){
alert("Works");
$("#overlay").fadeOut("slow");
$("#overlay").removeClass("overlayShow");
$("#overlay").addClass("overlayHide");
return false;
});
And below is the CSS am using on this popupbox
.overlay{
width: 100%;
height: 100%;
position: absolute;
}
.overlayHide{
display: none;
}
.overlayShow{
display: block;
background: url(../images/overlay.png) repeat;
z-index: 1;
}
.popups{
border: 1px solid #666;
background-color: #FFF;
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
padding: 10px;
-webkit-box-shadow: 0px 1px 14px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 1px 14px rgba(255, 255, 255, 1);
box-shadow: 0px 1px 14px rgba(255, 255, 255, 1);
}
.popupTitle{
font-weight: bold;
font-size: 16px;
border-bottom: 1px solid #CCC;
padding-bottom: 5px;
}
.popupdescription{
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
}
.btnsubmit{
width: 100px;
line-height: 20px;
font-weight: bold;
background-color: hsl(120, 69%, 17%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#23c123", endColorstr="#0d490d"); background-image: -khtml-gradient(linear, left top, left bottom, from(#23c123), to(#0d490d)); background-image: -moz-linear-gradient(top, #23c123, #0d490d); background-image: -ms-linear-gradient(top, #23c123, #0d490d); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #23c123), color-stop(100%, #0d490d)); background-image: -webkit-linear-gradient(top, #23c123, #0d490d); background-image: -o-linear-gradient(top, #23c123, #0d490d); background-image: linear-gradient(#23c123, #0d490d); border-color: #0d490d #0d490d hsl(120, 69%, 10%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.46); -webkit-font-smoothing: antialiased;
}
.btncancel{
width: 100px;
line-height: 22px;
font-weight: bold;
color: #000;
border: 1px solid #CCC;
background: #FFF;
}
What's wrong?
Why does CSS works fine and JavaScript doesn't. All my Javascripts are being loaded in the bottom of the page (Not on the head).
$.load can't load jsfile or javascript.
you can put the jsfile in parent page who call load ;
and put js in $.load function ,like:
$("#popup").load('modules/mod_tellafriend/default.php',function(){
//javascript
});

How to stop HTML element getting covered when window resized?

I have a nav bar and a a div on a website right now. The div is slightly covering the nav bar, however when I resize my window it completely covers the nav bar. I would like it to always somewhat cover the nav bar but not completely.
HTML
<body>
<div id="wrapper">
<ul>
<li class="nav">Home</li>
<li class="nav">About Me</li>
<li class="nav">Projects</li>
<li class="nav">Resume</li>
<li class="nav">Contact</li>
</ul>
<div id="bod">
<h1 class="title">Home</h1>
</div>
</div>
</body>
CSS
#bod {
height: 100%;
width: 86%;
background-color: #F4F3EE;
position: absolute;
top: 0px;
right: 0px;
box-shadow: -1px 0px 10px 1px #999;
-moz-box-shadow: -1px 0px 10px 1px #999;
-webkit-box-shadow: -1px 0px 10px 1px #999;}
.nav {
border: 1px solid #F4F3EE;
width:20%;
height:100px;
color: #F4F3EE;
margin: 2px 0px 0px 10px;
text-align: left;
font-family: Tahoma, Geneva, sans-serif;
font-size: 30px;
padding: 0px 0px 5px 0px;
list-style-type: none;
border-radius: 5px;
box-shadow: -1px 0px 10px 1px #999;
-moz-box-shadow: -1px 0px 10px 1px #999;
-webkit-box-shadow: -1px 0px 10px 1px #999;
box-shadow: inset 1px 2px 4px #F4F3EE;
-moz-box-shadow: inset 1px 2px 4px #F4F3EE;
-webkit-box-shadow: inset 1px 2px 4px #F4F3EE;
background: #b58aa5;
background: -moz-linear-gradient(top, #ad8599 1%, #b58aa5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ad8599), color-stop(100%,#b58aa5));
background: -webkit-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: -o-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: -ms-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: linear-gradient(to bottom, #ad8599 1%,#b58aa5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad8599', endColorstr='#b58aa5',GradientType=0 );
JavaScript
$(document).ready(function() {
$('.nav').mouseenter(function() {
$(this).animate({marginLeft: '-=20px'}, 100);
$(this).addClass('.nav1');
});
$('.nav').mouseleave(function() {
$(this).animate({marginLeft: '+=20px'}, 100);
});
});
I can't for the life of me figure out what to do make sure the user can still see the nav when the window is resized.
Set left: 200px; on #bod, that will fix it. Then you can get rid of the width: 86%; which is set on #bod as well. You are absolutely positioning #bod, this means that #bod is taken out of the regular flow and turned into it's own thing. Now you can set top, left, bottom and right to specify the space between the sides of the web page and #bod. If you set bottom: 0px; on #bod you won't need height: 100%; on #bod either.

How to make links look like tabs using html/css?

I have this wireframe I am working from: http://problemio.com/wireframe.pdf
I am trying to make the tabbed items that read like "ongoing discussion | suggested solutions | solution history... " to look tabbed as they are on the wireframe.
So far I am able to use JavaScript to show/hide the correct elements, but what I am not sure how to do is highlight the tab that is active, and how to draw the lines surrounding the tab.
Here is an example of what I have so far:
http://www.problemio.com/problems/problem.php?problem_id=179
Even if I make each link a div, how do I toggle between the styling of those divs?
Thanks!!
If you already have the showing and hiding down and are looking for a non-jQuery option you could try something like this:
http://jsfiddle.net/wqEdj/
It's a basic styling of straight anchor elements.
You're easiest bet will be using jQueryUI Tabs. Example here http://jqueryui.com/demos/tabs/
Here is a CSS/JS solution that you can run here to see it in action. JQuery is used, but could easily be replaced with standard JS. No images required.
The source of this solution:
https://css-tricks.com/better-tabs-with-round-out-borders/
Another related example with the tabs under the line can be found here: http://codepen.io/chriscoyier/pen/JozNqX
$(function() {
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("selected");
$(this).addClass("selected");
});
});
.tabrow {
text-align: center;
list-style: none;
margin: 20px 0 20px;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 12px;
font-family: verdana;
position: relative;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
.tabrow li:before,
.tabrow li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
.tabrow li:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
.tabrow li:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}
<ul class="tabrow">
<li>Lorem</li>
<li>Ipsum</li>
<li class="selected">Sit amet</li>
<li>Consectetur adipisicing</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Categories