The default behavior of the tooltip on google chart's legend is showing only when the word is broken for being too long.
What I want to do is to always show the tooltip regardless of the word being complete or not. Is this possible?
You could try to overwrite the tooltip functionality to display the text. Made an example using jquery, however it also makes tooltips for title and axis ticks, but should be close to what you want:
function myReadyHandler(){
$('g text').mouseenter(function(e){
if($(this).text().indexOf('...')!= -1) return;
$('.charts-tooltip').hide();
$('body').append('<div style="position: absolute; visibility: visible; left: '+(e.pageX-50)+'px; top: '+(e.pageY+20)+'px;" class="charts-tooltip"><div style="background-color: infobackground; padding: 1px; border: 1px solid infotext; font-size: 14px; margin: 14px; font-family: Arial; background-position: initial initial; background-repeat: initial initial;">'+$(this).text()+'</div></div>');
})
$('g').mouseleave(function(e){
$('.charts-tooltip').hide();
})
}
google.visualization.events.addListener(chart, 'ready', myReadyHandler);
Here is a working example: http://jsfiddle.net/Lwkorqn9/
Related
I was trying to build myself a portfolio site. When I thought I was about to finish building the basic template, the margin and media queries stuff totally drove me crazy.
Here is my temporarily hosted domain, www.kenlyxu.com/portfolio_new
I made the pages fit to whatever browser size by using
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
I'm trying to make 10px margin on all side and on every page so that I use this container.
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 100%;
width: 100%;
}
#workcontainer {
margin: 10px;
background-color: #f29e28;
width: 100%;
}
I hope the end result would be like orange background with white margins on all sides. When seeing my site on the desktop, the margin-right and margin-bottom not showing. They only show when I use width: 98.5%;
Also, the orange background color should expand according to the size of browser. On the iPhone 5 portrait view, the orange background does not extent the bottom part. I tried to use some standard media queries for it, but I don't know what values should I give to each of the mobile devices.
Try
Position:fixed;
in
# thethecontainer
now your code looks like
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 98%;
position:fixed;
width: 98.5%;
}
I am using 2 regions with 1 region display selector to create some tab functionality between regions. See the following as an example: http://apex.oracle.com/pls/apex/f?p=19914:30 I used the following to remove the 'Show All' button http://apexplained.wordpress.com/2012/07/16/hide-the-show-all-tab-in-a-region-selector/
Mine looks the same as the example above however it doesnt have the rounded corners on the region display selector.
I wondered how you can apply the rounded corners to the display selector, increase the font size and height of the region display selector?
I've tried style="" in the 'Region Attributes' of the Region display selector but no luck. When investigating my page in Firefox using Firebug the display selector is held in a DIV / in an UL list but i wouldnt know how to access those in the APEX builder.
The region display selector has rounded corners when using Chrome, but not in Internet Explorer.
Please could i have some help with my problem.
Oracle Version: Oracle version 10.2.0.4.0
Full APEX version: Application Express 4.1.1.00.23
Browser(s) and version(s) used: Internet Explorer 7 & 8
Theme: Simple Red
Template(s): The standard templates with the Simple Red theme.
Region/item type(s): 3 HTML pages each holding text box fields.
Thank you.
See example below of region display selector:
Example of region selector html from Simple Red theme
<div class="apex-rds-container">
<ul class="apex-rds" id="485041125812774413_RDS">
<li class="apex-rds-first">
<span>Show All</span>
</li>
<li class="apex-rds-selected">
<span>datepicker</span>
</li>
<li class="apex-rds-last">
<span>region 2</span>
</li>
</ul>
</div>
inspect style tab for
DIV
.apex-rds-container {
height: 40px;
margin: 0 0 9px;
}
UL
ul.apex-rds {
background: url("../images/bg-anchor-nc.gif") repeat-x scroll 0 0 transparent;
border: 1px solid #999999;
border-radius: 8px 8px 8px 8px;
box-shadow: 1px 2px 2px #AAAAAA;
float: left;
list-style-type: none;
margin: 0;
}
LI
ul.apex-rds li {
float: left;
list-style: none outside none;
}
A
ul.apex-rds li.apex-rds-first a {
border-left: 0 solid #000000;
}
ul.apex-rds li a {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
display: block;
height: 16px;
padding: 1px 10px 0;
text-decoration: none;
}
a {
color: #660000;
}
SPAN
ul.apex-rds li span {
color: #000000;
font-size: 11px;
}
So, this shows that a background image is used for the UL. This image's dimensions are 1x18px according to firebug. Hovering over an item will set a different background image, as will a current region selection.
So, if you want a larger selection, use a larger image. Increase the div height. Set the correct styles for current/non-current items.
To increase font size, alter the css for the SPAN.
Borders are done with border-radius: 8px 8px 8px 8px; which don't work in IE.
All css can be found in the theme css file in your apex_images folder: /i/themes/theme1/css/theme_4_0.css
Go to line 1316,
/* -------------------- Region Display Selector -------------------- */
You can find everything you need there.
Don't mess in that file though. If you will, make a backup. Work clean and override properly within a css of your own!
I have seen many answers on the line of
How to change the cell color of a jquery datepicker
But they for some reason do not apply to my example.
http://plungjan.name/test/datepicker_orange.html
I want the WHOLE cell content to be orange, not just what we can see behind the link IN the cell
So what I can see as
.ui-state-default {
background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
which controls the link inside the cell with a class name set by me to "orange"
<td class=" orange" onclick="DP_jQuery_1327604402271.datepicker._selectDay('#toDate',1,2012, this);return false;" title="Almost sold out">
<a class="ui-state-default" href="#">15</a>
</td>
where the orange class is given by me in this code:
return [true,"orange","Almost sold out"];
It shows
and not
Which I can get if I remove the background image of the above ui-state-default in firebug
What is the correct method of changing the complete cell color of the cells I now change using the beforeShowDay?
I tried helping the situation by overriding the default:
.ui-state-default {
background-color: transparent;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
Did not make any diffence
#mplungjan Change css to this:
td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important;}
If you put your class directly on the tag you have to change it to this:
.ui-state-default {
background: #E6E6E6;
border: 1px solid #D3D3D3;
color: #555555;
font-weight: normal;
}
In CSS if you have a backgorund image and a background color then the browser will show you the image which in this case is that gradient grey that you have in the first example.
Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):
We've got a gradient over text with a drop shadow on a background that has a slight gradient.
I've tried every method I could find.
This method won't work with a text-shadow.
The PNG overlay method won't work because I don't have a solid color background.
This method won't work because it requires me putting the text string in the CSS and my text will be dynamic.
So, I'm stumped.
It doesn't need to work in every browser (I'm fine with ignoring IE, if necessary). If it only works in Webkit browsers, that'd be fine as well.
That should be the answer:
HTML
<h1><span>Filthy</span></h1>
CSS
h1 {
position: relative;
font-size: 300px;
line-height: 300px;
text-shadow: -3px 0 4px #006;
}
h1 span {
position: absolute;
top: 0;
z-index: 2;
color: #d12;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
content: attr(cssFilthyHack);
color: #000;
text-shadow: 3px 3px 1px #600;
}
JS
$('h1').each(function(i, e){
var el = $(e);
el.attr('cssFilthyHack', el.find('span').html());
});
The important thing is to use content: attr(cssFilthyHack); to extract the text from the h1 text. You could add the text a second time in html like this
<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>
Or you use the js jQuery method to do this automatically.
UPDATE
Replaced the a tag with span, added js function.
See the example here in action: http://jsfiddle.net/alligator/Gwd3k/
I have a standard CSS menu, made with UL and LI tags. I need them to get to cover the whole page, horizontally (not my real case, but I'll take this to simplify the situation). However, the items are created dynamically and so I'm not able to hardcode any with to LI items, nor margins.
I've seen solutions using JavaScript to set those values but I would really love to avoid them.
Lastly, I've seen a pretty good solution which is setting
#menu {
width: 100%;
/* etc */
}
#menu ul {
display: table;
}
#menu ul li {
display: table-cell;
}
This will create the desired behavior in most browsers... except for IE.
Any ideas?
EDIT: Thanks for the responses. However, as the code that generates the items isn't mine, I'm not able to set inline styles when creating them without using JavaScript later.
You can't set the height or width of an inline element. http://www.w3.org/TR/CSS2/visudet.html#inline-width
Try display:inline-block;
here is the fix for ie:
display:inline-block;
zoom:1;
*display:inline;
If you want to let the element get the whole available space, there is no need to define a priori the width of the menu elements (of course, it will help in equally sizing the li elements). You can solve this problem by working on the display property.
#menu{
display: table;
width: 100%;
}
#menu > ul {
display: table-row;
width: 100%;
}
#menu > ul >li {
display: table-cell;
width:1%
}
Note that width:1% is required to avoid cell collapsing.
If your menu items are being dynamically generated (so you don't know how many there will be prior) then you can add a style="width:xx" attribute to the lis (or in <style> at the top... or where ever you please, really). Where xx should either by width_of_parent_div_in_px/number_of_elements+'px', or 100/number_of_elements+'%'. The lis should also be block-level elements, and floated left.
#menu ul li {
float: left;
clear: none;
display: inline;
padding: 10px;
height: 25px; //how tall you want them to be
width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}
The width: 18% may be about right if you have 5 elements across, accounting for border and padding. But it will vary due to how many elements you have, how much padding, etc.
If you are open to using Flexbox then it isn't hard to do. Full credit for the code I am about to post goes to CSS Tricks as this is their CSS.
Below is an example that includes vendor prefixes.
#menu{
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
}
<ul id="menu">
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
The only issue with Flexbox is if you need to support IE 9 and below, otherwise, I see no reason to not use Flexbox. You can view browser support for Flexbox here.
Here's what worked for me:
#menu{
height:31px;
width:930px;
margin:0 auto;
padding:3px 0px 0px 90px;
color:#FFF;
font-size:11px;
}
#menu ul{
display:inline;
width:930px;
margin: 0 auto;
}
#menu ul li{
list-style:none;
padding:0px 0px 0px 0px;
display:inline;
float:left;
width:155px;
}