I'm working with jvectormap to organize images that were collected across the globe.
When a user hovers over a marker, an image with a description appears above the marker. Instead of this image completely obscuring the map, I'd like the tip affixed to the left of the map, so nothing is obscured.
I've tried changing the position value for .jvectormap-tip. I can't quite figure out how to fix the tip to the left (its default behavior to to hover directly over the marker).
.jvectormap-tip {
position: absolute;
display: none;
border: solid 1px #CDCDCD;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
}
I expect the position attribute needs to be changed, along with something else. Not sure what tho..
I would suggest You to create your own custom positioned div and the use the provided functions to show/hide it. Use the on*TipShow hooks (invoked before) to prevent the default tip to be shown.
function showInfo(code) {
/* Show custom div */
}
function hideInfo() {
/* Hide custom div */
}
$("#map").vectorMap({
map: "world_mill",
// other settings...
onMarkerTipShow: function(e, tip, code) {
return false; /* Don't show the standard marker tip */
},
onMarkerOver: function(e, code) {
showInfo(code);
},
onMarkerOut: function(e, code) {
hideInfo();
},
onRegionTipShow: function(e, tip, code) {
return false; /* Don't show the standard region tip */
},
onRegionOver: function(e, code) {
showInfo(code);
},
onRegionOut: function(e, code) {
hideInfo();
}
});
Related
I am attempting to combine scroll-behavior: smooth; with the overflow-anchor CSS property to ensure classic 'stay at the bottom' chat app behavior:
New message elements appear at the bottom of the chat area.
When the chat area isn't scrolled all the way down, existing elements stay on screen (ie, no scrolling happens) when new elements are added
When the chat area is scrolled all the way down, and new elements are added, the chat area scrolls down.
I have the scrolling behavior working - please run the code snippet below - but the scrolling isn't smooth:
let chatArea = document.querySelector('.chat-area');
let anchor = document.querySelector('.anchor');
// https://ajaydsouza.com/42-phrases-a-lexophile-would-love/
let messages = [
'I wondered why the baseball was getting bigger. Then it hit me.',
'Police were called to a day care, where a three-year-old was resisting a rest.',
'Did you hear about the guy whose whole left side was cut off? He’s all right now.'
];
function randomMessage() {
return messages[(Math.random() * messages.length) | 0];
}
function addMessage() {
let message = document.createElement('div');
message.className = 'message';
message.innerText = randomMessage();
chatArea.insertBefore(message, anchor);
}
setInterval(addMessage, 1000);
.chat-area {
scroll-behavior: smooth;
}
.chat-area * {
overflow-anchor: none;
}
.anchor {
overflow-anchor: auto;
height: 1px;
}
.message {
border: 1px solid black;
padding: 12px;
margin: 6px;
background-color: #ccc;
}
<div class="chat-area">
<!-- new content dynamically inserted here -->
<div class="anchor"></div>
</div>
As you can see from running the code snippet above, everything works it's just like scroll-behavior: smooth doesn't seem to be having an effect.
How can I combine scroll-behavior: smooth with overflow-anchor: auto?
I've a website with 3 pages.
https://mywebsite.com/#
https://mywebsite.com/#features
https://mywebsite.com/#download
I want to change the some of the CSS based on which anchor I'm at.
Here's an example of what I'm trying to do, what I get and what I expect.
#header-outer #social-in-menu a i::before{
color: #000000;
}
This does change social button colors to black but on every anchor. I've tried to wrap it with a[href*="features"] so that it would only change in #features link but social icons remains white.
This is what I tried to achieve show social icons black only in #features anchor.
a[href*="features"] {
#header-outer #social-in-menu a i::before{
color: #000000;
}
}
This one has no effect. Changes nothing. First part of CSS however does change icons to black but on all anchors.
How can I achieve this?
What I try to have as the end result is:
a[href*="features"] {
#header-outer #social-in-menu a i::before{
color: #000000; /* could be a different colour */
}
}
a[href*="download"] {
#header-outer #social-in-menu a i::before{
color: #FFFFFF; /* could be a different colour */
}
}
You can do something like:
$(document).ready(function() {
$(document).on("click", "a", function(e) {
var id = $(this).attr("href").substring(1);
$(".parent").attr("id", id);
});
});
a {
color: black;
}
#features a {
color: red;
}
#download a {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
Home
Features
Download
</div>
What this does is basically update the id of the parent element that wraps your anchors. This solution doesn't use :target and involves the use of Javascript/Jquery.
Hi I am trying to build a angular single page app for mobile that uses a map on one page. It also should include a sticky footer, and is based on bootstrap. The sticky footer css interferes with the css needed to get the map to take up all of the remaining screen space, so I add a class='map' to the html element to override certain css elements (see below).
Everything works nicely until I go to the map page, leave it and then return to the map page. In this instance the map is not working correctly at all. It is hard to describe, so please try the plnkr.
I have found CSS that works for the map reloading, but then that breaks something else in the site. It is driving me crazy trying to combine the two models, hence my appeal for help.
Update: I have now found that resizing the screen rectifies the rendering issues, until you leave and return to the map. Of course a mobile use cannot change their screen size, but this may help find a solution.
html {
position: relative;
min-height: 100%;
}
html.map {
height: 100%
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.map body {
/* For Google map */
height: 100%;
margin-bottom: 0;
padding-bottom: 60px;
padding-top: 60px
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
header {
width: 100%;
background-color: #ccc;
height: 60px;
top: 0;
}
.map header {
position: absolute;
}
UPDATE
I implemented a solution similar to yours, which I found in this blog article. Essentially, you have to trigger a resize event in order to have the map repainted correctly when it goes from hidden to visible.
But I put my code into a directive instead of a controller (doesn't bloat controller and decorates the element it affects), instead of adding a watcher it runs only after the directive/element is linked (more performant), and it doesn't require you to re-enter your coordinates in order to refresh:
.directive('autoRefresh', function($timeout){
return {
restrict: 'A',
link: function(scope, elem, attrs){
$timeout(function(){
var center = scope.map.getCenter();
google.maps.event.trigger(scope.map, "resize");
scope.map.setCenter(center);
});
}
}
})
Updated Plunker
OK, so what I was missing was to trigger the resize event. This now works perfectly in my plunker but not yet in my more complex actual code. Nearly there!
restosApp.controller('mapCtrl', function($scope) {
$scope.$watch('map', function() {
google.maps.event.trigger($scope.map, 'resize');
var ll = new google.maps.LatLng(52.374, 4.899);
$scope.map.setCenter(ll);
});
});
I am building a webapp in .net using some of the AJAX features; in this case it is TabContainer.
Below is a screenshot of the area I want to play with.
The menu on the left is the tabs of TabContainer. The right side is tab's content. I would like to have the "Update PCR" button to be right underneath "Disciplines Affected". The problem is that the left and right side are a part of ONE block, which is TabContainer.
Are there any suggestions to how would I format the CSS of the Button to align right underneath TabContainer's menu? I could add the button as a part of the menu but, then I would have to set the control to AutoPostback, which defeats its purpose in this case in the first place... Any suggestions would be appreciated!
EDIT:
Here is the existing CSS
.ajax_tabController .ajax__tab_tab
{
background-color: #3c6f91;
padding: 5px;
border: 1px solid #ffffff;
color:#ffffff;
border-left: 3px solid #5AB0DB;
}
.ajax_tabController .ajax__tab_hover .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration:none;
}
.ajax_tabController .ajax__tab_active .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration: underline;
}
Also, there is CSS that overrides some settings to make TabContainer Vertical instead of Horizontal. I know, that there is a property .UseVerticalStripPlacement but it messes up with the height of the control and throws a JavaScript error.
.ajax__tab_header
{
float: left;
}
.ajax__tab_body
{
margin-left: 160px;
}
.ajax__tab_outer
{
display: block !important;
}
.ajax__tab_tab
{
width: 210px;
height: auto !important;
}
You need to position the top of the button relative to the bottom of the tab elements. This can be done with jquery. See How to position one element relative to another with jQuery?
It's going to be a bit hit and miss, but try something along the lines of:
.updatePcrButton {
position: absolute;
top: 100px; /* These will be whatever the measurement is to */
left: 5px; /* be directly under the last element */
z-index: 99; /* Arbitrary amount to put it above any other elements */
}
This is pretty messy to be honest - it relies on your not changing the position of the control thereafter.
Perhaps a better way would be to add an extra tab to the TabContainer and handle any Tab clicks yourself.
-- Edit -- May be more useful --
Nikita, I had completely forgotten about this as it was in an old Classic ASP app of mine, but you could try these two JS functions that are probably more useful to you:
function curTop(obj){
rv = 0;
while(obj) {
rv += obj.offsetTop;
obj = obj.offsetParent;
}
return rv;
}
function curLeft(obj){
rv = 0;
while(obj) {
rv += obj.offsetLeft;
obj = obj.offsetParent;
}
return rv;
}
They pull the position from the specified object. If you add the height of the button that you want to position under then you may find this improves the location for you and prevents any funny business with CSS.
Kind regards,
Westie.
I am having hard time finding a way to display a loading image in a Div right next to a control they have clicked while waiting for a request.I am using a UpdateProgress Bar but it is supposed to be placed at a certain place on the page.I want to display it next to any control they select.Just like how it is on Facebook.
Closest thing I can think of is a absolute positioned div which is placed next to each element. However it doesn't seem too valid since if the loading thingie is to the right of every progress link, it might overlap etc.
I'm quite sure that Facebook made all these progress bars prepositioned and hidden, and not just one div for all of them.
I guess you could try something like:
<div id="progress_bar"></div>
<style type="text/css">
div#progress_bar {
background: url('the_url_for_your_gif.gif') no-repeat center;
display: none;
height: 20px; /* Adjust yourself */
position: absolute;
width: 30px; /* Adjust yourself */
}
</style>
<script type="text/javascript">
var extra = 10; /* 10px extra for space */
var prog_top = 0;
var prog_left = 0;
$(function() {
$('a').live('click', function() {
var h = $(this).offset();
prog_top = h.top;
prog_left = (h.left + $(this).width() + extra);
});
});
function progress_thingie(loading) {
if (loading)
$('div#progress_bar').css({
'top' : prog_top,
'left' : prog_left
});
$('div#progress_bar').showToggle(loading);
}
</script>
Basicly this would save positions on every <a> you press and use those positions for the progress div.
Simply call the javascript function progress_thingie() and send a TRUE or FALSE to it, depending on if it's loading or done.