I have a shiny-app which has a leaflet map, and some data on an absolutePanel.
I also have a table below the map. The problem is when I scroll down to view the table, the absolutePanel comes down too and overlaps with the table. I would like the absolutePanel to stay on top and not come down when I scroll down to view the table. Anyway to fix this?
Code for absolutePanel:
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
style="padding-left: 8px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px",
draggable = TRUE, top = 126, left = "auto", right = 20, bottom = "auto",
width = 250, height = "auto", #data goes here)
Changed fixed = FALSE which keeps the absolutePanel where it is and doesn't move it relative to the page.
Related
The problem is I want to make the gray button hidden and get revealed after hovering on a card with hotel pictures.
Currently, I have this site as an example: https://cofffelo.github.io/HotelShop/#
I tried to hide the buttons at their default state by display:none and make it display:block by executing :hover pseudo-index, but because it was hidden from the start, there was nothing to hover, and because I'm kind of a newbie, I ran out of ideas.
The code I tried to add:
.cardbutton{
display: none;
}
.cardbutton:hover{
transform: translateY(30px);
display: block;
background-color: #333;
}
You can use a transition delay
.cardbutton:after {
opacity: 0;
content: "";
}
.cardbutton:hover:after {
opacity: 1;
transition: opacity 0s linear 1.5s;
content: "content text here";
}
I have a set of several radio button and would like the ability to customize the layout more detailed, I know you can choose vertical or horizontal layout but I would like to combine the two. What I currently have is shown in the below picture, is it possible to keep the first 5 buttons in the same vertical column, then make the next set of 5 buttons in a vertical column to the right of the first 5, and then the last 2 in a third column to the right of those 5?
Current code:
radioButtons("b_Bet_Sizes", "",
choiceNames = list("17.5%", "35%", "62.5%", "75%", "90%", "125%", "150%", "175%","300%","400%","geo2","geo3"),
choiceValues = c(0.175,0.35, 0.625, 0.75, 0.9,1.25,1.5,1.75,3,4,"geo2","geo3")
),
You can play with CSS to meet your needs. Try this
css <- "
.shiny-options-group {
height: 100px;
width: 600px;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
row-count: 5;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
margin-top: 0px;
}
.control-label {
padding-bottom: 10px;
}
div.radio {
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 5px;
}
"
radioLab <-list(tags$div(align = 'left',
class = 'multicol',
radioButtons("b_Bet_Sizes", "",
choiceNames = list("17.5%", "35%", "62.5%", "75%", "90%", "125%", "150%", "175%","300%","400%","geo2","geo3"),
choiceValues = c(0.175,0.35, 0.625, 0.75, 0.9,1.25,1.5,1.75,3,4,"geo2","geo3")
), style = "font-size:75%"))
ui <- shinyUI(
navbarPage("TITLE",
tabPanel("TABULATE",
tags$head(tags$style(HTML(css))),
fluidRow(
column(width = 6, radioLab, align = "center"),
column(6)
)
)))
server <- shinyServer(function(input, output) {
})
shinyApp(ui,server)
We are using nnnick chart.js (open source chart) in our application for reporting purpose.There is a requirement to show the Custom tool-tip in the line chart.
As of now , Normal chart tooltip is showing based on the X-axis and Y axis dataset values. But Here we want to show the Dynamic additional data in the Tooltip.
For Example ,
Let us take a Student Enrollment .
here
X Axis Value - Enrollment Month (Jan,Feb,Mar....etc)
Y Axis Value - Number of Enrollments (10,20,30...ect)
After the Line chart is plotted , Now it is displaying (Jan ,10) in the tooltip.
We have to show the Number of Male & Female student details in the tool tip On mouse over the data point Jan 10 (i.e) (Jan,10, Male:5 , Female 5 ).
If you see the above screen shot , Green color is toop-tip is the normal one which is a built-in option. Red Color highlighted tool-tip is the one we are expecting.
Please provide any suggestion on this .
So you can achieve this using the custom tool tip function in the newer (not sure when it was included) version of chart js. You can have it display anything you want in place of a normal tooltip so in this case i have added a tooltip and a tooltip-overview.
The really annoying thing is though in this function you are not told which index you are currently showing a tooltip for. Two ways to solve this, override the showToolTip function so it actually passes this information or do a quick little hack to extract the label from the tooltip text and get the index from the labels array (hacky but quicker so i went for this one in the example)
So here is a quick example based upon the samples in chartjs samples folder. This is just a quick example so you would prob need to play around with the positioning and stuff until its what you need.
Chart.defaults.global.pointHitDetectionRadius = 1;
Chart.defaults.global.customTooltips = function(tooltip) {
// Tooltip Element
var tooltipEl = $('#chartjs-tooltip');
var tooltipOverviewEl = $('#chartjs-tooltip-overview');
// Hide if no tooltip
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
tooltipOverviewEl.css({
opacity: 0
});
return;
}
//really annoyingly we don;t get told which index this comes from so going to have
//to extract the label from the text :( and then find the index based on that
//other option here is to override the the whole showTooltip in chartjs and have the index passed
var label = tooltip.text.substr(0, tooltip.text.indexOf(':'));
var labelIndex = labels.indexOf(label);
var maleEnrolmentNumber = maleEnrolments[labelIndex];
var femaleEnrolmentNumber = FemaleEnrolments[labelIndex];
// Set caret Position
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// Set Text
tooltipEl.html(tooltip.text);
//quick an ddirty could use an actualy template here
var tooltipOverviewElHtml = "<div> Overall : " + (maleEnrolmentNumber + femaleEnrolmentNumber) + "</div>";
tooltipOverviewElHtml += "<div> Male : " + (maleEnrolmentNumber) + "</div>";
tooltipOverviewElHtml += "<div> Female : " + (femaleEnrolmentNumber) + "</div>";
tooltipOverviewEl.html(tooltipOverviewElHtml);
// Find Y Location on page
var top;
if (tooltip.yAlign == 'above') {
top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
// Display, position, and set styles for font
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + top + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
tooltipOverviewEl.css({
opacity: 1,
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
};
var maleEnrolments = [5, 20, 15, 20, 20, 30, 50]; // Integer array for male each value is corresponding to each month
var FemaleEnrolments = [5, 0, 15, 20, 30, 30, 20]; // Integer array for Female each value is corresponding to each month
var labels = ["Jan", "February", "March", "April", "May", "June", "July"]; //Enrollment by Month
var lineChartData = {
labels: labels,
datasets: [{
label: "Student Details",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [10, 20, 30, 40, 50, 60, 70], //enrollement Details overall (Male + Female)
}]
};
var ctx2 = document.getElementById("chart2").getContext("2d");
window.myLine = new Chart(ctx2).Line(lineChartData, {
responsive: true
});
#canvas-holder1 {
width: 300px;
margin: 20px auto;
}
#canvas-holder2 {
width: 50%;
margin: 20px 25%;
position:relative;
}
#chartjs-tooltip-overview {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left:200px;
top:0px
}
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.chartjs-tooltip-key {
display:inline-block;
width:10px;
height:10px;
}
<script src="https://raw.githack.com/nnnick/Chart.js/master/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder2">
<div id="chartjs-tooltip-overview"></div>
<div id="chartjs-tooltip"></div>
<canvas id="chart2" width="600" height="600" />
</div>
Ok, so I've searched around a bit and cannot find an answer to my question. At least not one that matches my problem exactly; so here's to hoping you guys don't have better luck, and that one of you knows the answer to my problem.
Before anyone asks... Yes, I am a developer with Microsoft, Yes, IE is our product, Yes, ALMOST everyone on my development team would rather use Firefox or Chrome as opposed to IE, and no... we have no control over how it operates, because that is the responsibility of the Internet Explorer team. In addition, we are not the evil empire everyone makes us out to be.
That being said, I'll give you what code I can in hopes to paint the best picture possible.
The select dropdown is a customized version, where I've hidden it's default arrow via a div tag and included my own dropdown arrow in the background of it's surrounding div with a class rightarrow. These elements are dynamically bound together via jQuery, here is the jQuery code...
function loadMarketSelector(options) {
// If the market selector already exists, just make sure it's visible.
if ($('#marketSelectorContainer').show().length) {
return;
}
var settings = { defaultCsvMarket: "", marketLabel: "", addUrl: "", loadingId: "", panelId: "", csvMarketOptions: [] };
if (options) {
$.extend(settings, options);
}
var $select = $('<select>', { id: 'csvMarketSelector', name: 'csvMarketSelector' }).addClass('items');
var defaultCsvMarketLowercase = settings.defaultCsvMarket.toLowerCase();
// Populate the market list
$(settings.csvMarketOptions).each(function (index, element) {
var $option = $('<option>', { title: element.label, text: element.label, dir: element.dir });
$option.data('marketId', element.market);
// If the user hasn't selected a market yet, use the best guess for their current language
if (element.market.toLowerCase() == defaultCsvMarketLowercase) {
$option.attr('selected', true);
$option.attr('class', 'selected');
} else {
$option.attr('class', 'other');
}
$select.append($option);
});
var $marketSelectorContainer = $('<div class="marketCont" id="marketSelectorContainer">').append($('<div class="marketvalue">').append($('<span>', { text: settings.marketLabel })).append($('<div class="marketlist">').append($('<div class="rightarrow hidden">').append($select))));
$('#payment-options-iframehost').before($marketSelectorContainer);
// When the user clicks on a market, refresh the page with the locale set to that market and with the redemption interface already open
$('.marketlist select').bind({
change: function () {
// Reload the page with the language set to the selected market and with the "redeem card" menu already open
var langParam = "lang=" + $(this).find('option:selected').data('marketId');
window.location.hash = 'redeem';
if (!window.location.search) {
window.location.search = langParam;
}
else if (window.location.search.search(/lang=/)) {
window.location.search = window.location.search.replace(/lang=(.+)&?/, langParam);
}
else {
window.location.search += '&' + langParam;
}
},
click: function(e){
$(this).parents('.rightarrow').toggleClass('downarrow');
//Once the select box is clicked collect the options right and left offsets.
var leftPos = $(this).offset().left;
var rightPos = leftPos + $(this).width();
//After the select box is clicked, if the mouse moves outside of the left and right positions;
//deactivate the dropdown box and return the sprite to it's original position.
$(document).mousemove(function(e){
if (e.pageX < leftPos-10 || e.pageX > rightPos+10) {
$('.marketlist select').trigger('blur');
}
})
},
blur: function () {
if ($(this).parent().hasClass('downarrow')) {
$(this).parent().removeClass('downarrow');
}
}
});
var mkt = $('.marketlist select option.selected').data('marketId'),
iframeId = settings.panelId + " iframe";
if (typeof mkt !== "undefined") {
// If the market passed to the page (via the lang param or the browser language) is CSV supported, load the PCS iframe
bam.ui.loadIframe(iframeId, appendParameters(settings.redeemCardUrl, { lmkt: mkt, mkt: mkt }), settings.loadingId, true, function () { $('.rightarrow').show();});
}
else {
// If the market is not supported, hide the description text but don't load PCS (since it won't work). The selector will be blank by default.
$(iframeId).hide();
}
}
Here is the css that applies to each of the elements...
.payment-options-page .marketCont {
height: 40px;
margin-left: 50px;
margin-bottom: 2px;
}
.payment-options-page .marketvalue .marketlist {
overflow: hidden;
margin-top:4px;
text-align: left;
width: 231px;
border: 1px solid #7c7c7c;
display: block;
vertical-align: middle;
height: 19px;
padding-left: 10px;
line-height: 19px;
cursor: pointer;
background: #fff;
}
.payment-options-page .marketvalue .marketlist .rightarrow select
{
height: 19px;
background: transparent;
border: 0;
border-radius: 0;
width: 253px;
position: relative;
cursor: pointer;
padding-left: 20px;
left: -20px;
z-index: 100001;
}
.payment-options-page .marketlist .rightarrow
{
background: url('/Content/all/imgs/transactions_down_right_arrow.png') no-repeat;
background-position: -318px -220px;
height: 19px;
width: 180px;
float: left;
cursor: pointer;
padding-left: 10px;
}
.payment-options-page .marketvalue .downarrow {
background: url('/Content/all/imgs/transactions_down_right_arrow.png') no-repeat;
background-position: -319px -277px;
height: 19px;
float: left;
cursor: pointer;
margin-right: 9px;
}
.payment-options-page .marketvalue .marketlist .rightarrow,
.payment-options-page .marketvalue .hover .downarrow
{
position:relative;
overflow:hidden;
}
The semantic select box works fine in all browsers if I click directly on the select box. The problem is when I click on the custom arrow in IE it acts as if it's dropping the list down (ie: The arrow changes from a right arrow to a down arrow and the select box highlights)(See the IE image) but the dropdown box acts as if it is hiding behind other elements.
The other form elements are in an iframe, where the country drop-down list is not.
Clicking on the arrow works in firefox...
Works in Chrome...
Clicking on the arrow in IE does not
but clicking on the select box itself does work...
I am having the same issue in a couple of projects right now and couldn't find an answer, so I've resolved to simply let the IE browsers use their default dropdown arrow. If you already have an IE only stylesheet (if not read this article on best practices for conditional styles - http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) then you can just target the arrow there, and tell it not to display:
.payment-options-page .marketlist .rightarrow {display: none;}
The result might not look perfect, but it functions properly at least. From what I can tell the other browsers ignore the overlapping element, and for whatever reason IE registers this element and won't allow the click to work, and can't be fixed by offsetting the 'z-index' of either of the elements.
EDIT
A little more searching and I found a reason why. IE does not support pointer-events: none - which is the css property you need to apply to your arrow to let the browser know it should be ignored. See this answer for more info: https://stackoverflow.com/a/17441921/2539808
I'm still on the hunt for a solution to this problem, and I'll definitely let you know if I find one that can function while still looking the way we want it to :)
I just got started with Raphael, but I don't get it right to make multiple canvases in ScaleRaphael
(I#m using this to make the site after responsive > are there alternatives for that?
Multiple ScaleRaphael Canvases: http://jsfiddle.net/karo/gMyP5/13/
or full view: http://jsfiddle.net/karo/gMyP5/13/embedded/result/
A strange thing happens here.
The red circle should be in the 2nd div but if you look in the code with eg. firebug in the fullview then you see that both svgs are in the inside a Why is that?
Do you have any idea for me?
Thanks Kaor
my code:
HTML
<div id="wrapper">
<div id="paper"></div>
<br>
<div id="paper2"></div>
</div>
JavaScript:
var paper = new ScaleRaphael("paper",200,200);
var circle = paper.circle(100, 100, 60).attr({fill:'red'});
var paper2 = new ScaleRaphael("paper2",200,200);
var circle2 = paper2.circle(50, 50, 30).attr({fill:'black'});
function resizePaper(){
var win = $(this);
paper.changeSize(win.width(), win.height(), true, false);
paper2.changeSize(win.width(), win.height(), true, false);
}
resizePaper();
$(window).resize(resizePaper);
CSS
#wrapper
{
position:relative;
}
#paper {
background-color: lightgray;
width:100%;
height:200px;
position:relative!important;
}
#paper2
{
background-color: orange;
width:100%;
height:100px;
position:relative!important;
}
svg
{
position:absolute!important;
top:0;
left:0;
}
ScaleRaphael only supports one canvas. In the code you can see it re-referencing the first existing svggroup or vmlgroup element.
You do not need ScaleRaphael to do what you are doing. Since version 2 Raphael has included Paper.setViewBox and it always included Paper.setSize, which together do this already.
I found an issue and a workaround how it works....
Have a look here: http://jsfiddle.net/karo/r4qvt/12/
I have first the paper div and then the red div
<div id="paper"></div>
<div id="red"></div>
</div>
</div>
And if I make the redpaper for the div "red" and the rectangle in it before I make the paperGrey and "talk to the" first div. THEN IT WORKS
var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});
var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});
If I do it the OTHER WAY ROUND IT DOESNT WORK
var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});
var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});
...strange, but I found a solution ;)