I'm looking to show a country's tooltip from outside of the geochart. I've searched through the API, but I'm not seeing the method for doing so.
<script>
google.load('visualization', '1', { packages: ['geochart'] });
google.setOnLoadCallback(function()
{
var data = google.visualization.arrayToDataTable([
["Country","Count"],
["Mexico",600],
["Canada",400]
]);
new google.visualization.GeoChart(document.getElementById('map')).draw(data);
});
</script>
<div id="map" style="width: 500px; height: 300px;"></div>
<ul>
<li>Canada</li>
<li>Mexico</li>
</ul>
<p>Is there a way to trigger the map tooltips when hovering over the links above?</p>
Here's a very basic fiddle to start with
You can do this overriding styling for Google Chart Tooltips defined by:
http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/core/tooltip.css
Use for example:
<style>
.google-visualization-tooltip {
border: dashed 1px !important;
position: fixed !important;
top: 30px !important;
right: 250px !important;
margin: 10px 0 0 400px !important;
}
</style>
Tooltip will be floating on the right side of chart.
Related
Need a solution when child region classic report overflow Parent region horizontal Scroll bar add.
If I understood you correctly, you want to add a horizontal scrollbar into the Classic report region. If that's so, two options I know (adjust values so that they fit your report; these are just examples):
Put this into region header:
<div style="border: 1px solid black; width: 500px; height: 300px; overflow: auto">
Region footer:
</div>
Another option: put this into the HTML header:
<style type="text/css">
<!--
div.scroll
{
height: 300px;
width: 500px;
overflow: auto;
border: 1px solid #666;
background-color: #CCC;
padding: 8px;
}
-->
</style>
Region header:
<div class="scroll">
Region footer:
</div>
I have a popover functionality to be implemented in my project developed using ember js. I have a button, which when clicked should show a popover with a list of action menus.
I tried an example with bootstrap popover, which looks good to our cause, but I am unable to use that as we are not using bootstrap lib and don't want to include it only for this popover feature.
Is there any inbuilt support from ember js on the popover function yet (we are using ember v0.2.3)? I know it has a modal implementation but that will diable all other functions on the page until closed.
If you are aware of any custom popover impls that can be ported for trial, please let me know.
Thanks!
A nested component would be ideal for this. Rendering into an outlet like the modal examples doesn't make much sense to me.
You will need to handle a click event in your component's .js file.
Use a property on the component like isOpen to keep track of whether the popover should be shown or not.
Use an if isOpen in your component's template to control whether the child component (the popover) gets rendered or not.
Edit: Working JSBin
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember-template-compiler.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember.debug.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script type='text/x-handlebars'
data-template-name='application'>
<p>The element below is a component.<br><br><br><br><br><br><br></p>
{{popover-item text='click or hover for popover' class='popover-wrapper'}}
</script>
<script type='text/x-handlebars'
data-template-name='components/popover-item'>
<a href='#' class='popover-link'>{{text}}</a>
{{#if isOpen}}
{{popover-menu isOpen=isOpen}}
{{/if}}
</script>
<script type='text/x-handlebars'
data-template-name='components/popover-menu'>
{{#if isOpen}}
<div class='popover'>
<ul>
<li><a href='#'>popover item one</a></li>
<li><a href='#'>popover item two</a></li>
<li><a href='#'>popover item three</a></li>
</ul>
</div>
{{/if}}
</script>
</body>
</html>
Javascript:
App = Ember.Application.create();
App.Router.map(function(){
return [];
});
App.PopoverItemComponent = Ember.Component.extend({
isOpen: false,
click: function() {
this.toggleProperty('isOpen');
},
openPopover: function() {
this.set('isOpen', true);
}.on('mouseEnter'),
closePopover:function() {
this.set('isOpen', false);
}.on('mouseLeave')
});
CSS (very very rough)
* { box-sizing: border-box; }
body { font-family: sans-serif; }
a {
text-decoration: none;
color: #000;
}
.popover-link {
display: inline-block;
width: auto;
padding: 10px;
background: #6FAEEC;
}
.popover-link:hover {
background: #70B5F9;
}
.popover-wrapper {
position: relative;
}
.popover-link {}
.popover {
border: 1px solid #ddd;
position: absolute;
bottom: 40px;
background: #fff;
padding: 0;
box-shadow: 3px 3px 9px -4px rgba(0,0,0,0.75);
}
.popover ul {
list-style:none;
margin: 0;
padding: 0;
}
.popover a {
display: block;
padding: 5px 10px;
vertical-align:middle;
border-bottom: 1px solid #efefef; #efefef;
}
.popover a:hover {
background: #efefef;
}
Ok, I'm trying to tinker with my navigation menu. I want something like this website:
http://aleksfaure.com/
He has a single image (logo) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice.
Here's the relevant HTML and CSS I have with my current nav menu. I'm still kind of a intermediate beginner at this.
HTML
<nav role="navigation">
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<ul id="nav-right" style="float:right;">
<li>Portfolio</li>
<li>Contact</li> </ul>
</ul></nav>
CSS
#header nav {
position: relative;
width: 700px;
height: 163px;
display: block;
margin: 0 auto;
text-align: center;
}
#header nav ul li {
float: left; list-style: none;
}
ul#nav li a {
display: block;
width: 100px;
height: 100px;
padding: 50px 0 0 0;
margin: 0 10px 0 10px;
font-family: 'MuseoSlab-500', Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #000;
text-shadow: 0 2px 1px #bbbaba;
text-decoration: none;
}
ul#nav li a.mainnav:hover {
color: #13cad1;
text-shadow: 0 2px 1px #fff;
}
You don't need to use two separate lists. Treat the entire menu, including your image, as one list. Consider something like this for your HTML:
<div>
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li><img src="images/yourLogo.png"></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
And make sure you have your style set to float: left;
#nav li { float: left; list-style: none;}
Then, just center the entire div on the page, and style your links as you want.
SEPARATE NOTES:
In your code, you are missing the closing tag for your first unordered list.
The navigation element is not very widely supported, so depending on your audience you may want to use a div.
So in my code I have a sticky footer. And the sticky footer has the #wrap container with a min-height of 100%. But with min-height you can't use height:100% on objects inside the wrap div.
So I add height:100% but it messes with the layout by making the footer roll over the content in the wrap div when window height is too small.
Anyone have fixes for this?
<div id="wrap">
<div id="main">
<div id="content">
</div>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
body{
color: #FFF;
background-image:url('../images/black_denim.png');
}
#wrap {
min-height: 100%;
margin-bottom: -200px;
position: relative;
}
#topBanner{
width: 200px;
margin: 0px auto;
}
.clearfooter {
height: 200px;
clear: both;
}
/* footer */
#footer {
position: relative;
height: 200px;
width: 100%;
min-width: 960px;
}
If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.
body{
padding-bottom:200px;
}
#footer {
position: fixed;
bottom:0;
height: 200px;
width: 100%;
}
EDIT:
if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.
many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.
I am using dynamic content (WordPress) and would like to center a logo in the middle of a list like: http://www.munto.net/queed-v1/.
I tested it out and my theory works, provided the number of items on both sides is the same...but if they're different it messes up the navigation.
You can see a live example at: http://joshrodgers.com/.
What I did was made my logo a background image and centered that to my unordered-list, then I set a width on each list-item (so that if there was a super-long one it wouldn't mess up the navigation), and finally after the third link I put a 200px margin on to the right of the list-item (that way there is no list-item over the logo)...but like I said this works perfectly if the number of items is even, if the items equal an odd number it looks funny.
Not sure what the best way to do this, so - what would be the best way to fix this?
Page Code:
<html>
<head>
<title>Josh Rodgers - El Paso, Texas</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li class="example">super new lodge</li>
<li>Programs</li>
<li>Events</li>
<li>Contact Us</li>
<li>Contact Us</li>
</ul>
</body>
</html>
CSS Style:
/* Reset */
#import url("reset.css");
body {
margin: 0 auto;
position: relative;
width: 1000px;
}
ul {
background: #ff0000 url("images/example.jpg") top center no-repeat;
height: 200px;
margin: 0 auto;
text-align: center;
width: 1000px;
}
li {
background: #ffff00;
color: #ff0000;
display: inline-block;
font-size: 20px;
padding: 20px 0;
position: relative;
top: 70px;
width: 100px;
}
li.example {
margin-right: 200px;
}
*Figured I'd work on a normal php solution before integrating it into WordPress.
Thanks,
Josh
From a design point of view i would maybe consider making the logo the home link. A lot of web users are accustomed to clicking the logo and it taking them home. You could still incorporate the home text underneath the logo.
I would probably not use your method of margin-right: 200px to not cover the logo, anything you change before that list item will shift the margin.
Ultimately i would suggest rethinking having the logo set as a background-image and make it one of the list items.