I have this jsfiddle code from where we can see how moving the mouse over the chart is creating pop-up boxes. The issue for me is the case when these pop-up boxes are shown above the stock-tools menu and it results like
So is there any way how can I bring the pop-up boxes before the stock-tools, so that I can avoid the case which I captured above?
I tried with changing the z-index property of some classes (which I detected dynamically), but was not able to fix it.
Enable outside property and set z-index for a tooltip container with a value greater than 10:
tooltip: {
outside: true
}
CSS:
.highcharts-tooltip-container {
z-index: 10 !important;
}
Live demo: https://jsfiddle.net/BlackLabel/3m2wue7b/
API Reference: https://api.highcharts.com/highstock/tooltip.outside
Related
edit
Since originally posting this question, I've gone down a couple more paths trying to solve the issue. It's still not solved, but now my questions are different. The original question is below, and then I'll add a section below that with updates.
original question
I'm working on a Rails 4 application and having some trouble with JavaScript and the Chartkick gem.
I have two JavaScript functions that make it so that a user can click an icon and an element will drop down below the icon/appear on the page, and the icon will switch from a right-pointing arrow to a down-pointing arrow. The code is this:
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
}
else
{
document.getElementById(d).style.display = "none";
}
}
$(function() {
$('.toggle-icon').click(function() {
$(this).find('i').toggleClass('fa-arrow-circle-o-right fa-arrow-circle-o-down');
});
});
And the haml:
%a{href: "javascript:ReverseDisplay('toggle-stats#{item.id}')", class: 'toggle-icon'}
%i.fa.fa-arrow-circle-o-right
%div{id: "toggle-stats#{item.id}", style: "display: none;"}
= the items to be displayed
It works. However, I expect the items that drop down to take up the full width of the page, like so:
But instead, when I first click the toggle icon, they show up squished, like this:
If I then resize the browser just a tiny bit, the graph pops out to full-width, and it stays that way no matter what I do from there. I can't figure out how to get ahold of the generated mark-up, because this chart comes from Chartkick, as a gem. The generated html in the browser has this line:
<div dir="ltr" style="position: relative; width: 300px; height: 300px;">
Where the width: 300px is what's being changed to width: 1000px when I change the browser size. I don't have to change the browser size permanently or significantly. Once that width has changed to 1000px the first time it stays there - but the minute I refresh the page and click the icon to toggle the chart again, it's back to 300px. I don't know how to hook into this div, because it's generated by the gem and I don't know how to add a class to it. I've tried adding styling to a parent element that ensures all of that parent elements' children are width: 100%, but that doesn't do anything.
Anyway, I don't think that adding a class to it is the solution here. I just have no idea what is - I don't JavaScript incredibly well. I'm pretty much completely new to all front-end work as a whole. What's going on here, and how can I make these charts always be the full width of the page when they're toggled?
Notes: Am testing this in Chrome. I tested in Firefox and it does the same thing.
OK, I'm starting to wonder if this has something to do with the fact that I'm using a JavaScript function in order to capture dynamic item IDs - a page may have any number of these toggle-able charts, and so calling a jQuery function on each id seems impossible, because I don't know what ID is.
I removed the jQuery call, however, and the problem persists.
One of those times when rubber-ducking the Stack Overflow question box has not yet answered my question. So I guess I'll submit and hope for outside help here. :/
adjusted question
This question in the Github issues for Chartkick has lead me down a different path. The solution is not necessarily in attempting to restyle the charts at all. Instead, what I'm trying to do is trigger a resize event, because the chart automatically regenerates when the browser window is resized. This is both what's causing the problem and where the solution seems to lie.
My code:
.row
.col-sm-12
%h3.title-block.second-child
Stats by Video
.panel-groupd#faqList
- #claim.presenter.videos.each_with_index do |video, index|
.panel.panel-default
.panel-heading
%h4.panel-title
%a.chart{data: { toggle: "collapse", parent: "#faqList" }, href: "#video#{index}" }
= "'#{video.title}' at #{video.event.display_name} on #{display_date(video.recorded_at)}"
%div.panel-collapse.collapse{id: "#video#{index}"}
.panel-body
- if video.impressions.count > 0
%h4
Impressions by Hours (24 hours)
= line_chart video.impressions.group_by_day(:created_at, range: 1.day.ago...Time.now).count
...a couple more charts
:javascript
$(".chart").click(function() {
window.dispatchEvent(new Event('resize'));
});
So the intention here is that when I click the .panel-heading, this both drops down the .panel-body with the charts in it and resizes the window, which makes the charts resize correctly (or, rather, should).
It kind of works, in that, when I first click the .panel-heading trigger, it does not resize the charts, but when I click it again, the charts are resized perfectly for a split second... just before they become hidden from view again. :(
I've tried adding a time out to the javascript, like so:
:javascript
$(".chart").click(function() {
setTimeout(1000);
window.dispatchEvent(new Event('resize'));
});
But it doesn't appear to do anything at all.
So what I'm wondering here is how to get this resize event to work once the dropdown .panel-body is out so that the charts will resize appropriately on their own.
Here's a screen cast of the current problem, in case I didn't describe it clearly enough:
https://youtu.be/5quMGABoDs8
I don't know anything about Ruby or Chartkick, but in order to override that inline styling, you would have to use !importantin the css.
So, if you try that technique of giving all the children of the parent element width: 100% again, you might want to implement it something like this:
.importantRule { width: 100% !important; }
$( "parentElement > childElement" ).addClass('importantRule');
(First line goes in your CSS file, second line goes in JS)
I am using Chosen library to enable easy filtering on a dropdown control and i am facing one issue now.
I am using bootstrap tab control to arrange the items in a form and if i place the Dropdown inside the inactive tab item width of Choosen dropdown is 0 (invisible at all ).
How can i fix this?
#Html.DropDownListFor(model => model.OriginalItem.AuthorId, (SelectList)ViewBag.LicensorList, "Select", new { #class = "chosen-single chosen-default" })
$('#OriginalItem_AuthorId').chosen({ no_results_text: "Oops, nothing found!" });
This is the way i am using chosen library
This is because the width is calculated by Chosen before the dropdown is visible.
There are at least two workarounds:
CSS workaround :
.chosen-container {
width: 100% !important; /* desired width */
}
JS workaround (on Chosen initialization) :
$(".chosen-select").chosen(
{
width: '100%' /* desired width */
});
Just use width in percentage within single quotes:
<select chosen width="'100%'" ... ></select>
This works also for modal windows in which the content is compiled without being visible (width=0).
A responsive chosen using this technique can be seen here: http://plnkr.co/edit/RMAe8c?p=preview
There is issue of Tabcontainer when we set "AutoPostBack=True" of TabContainer, then it sloves issue of shrinking dropdown width after changing tabpanel.
Please Mark it if it is workable
I'm newbie to JavaScript. I used the search to find solution for my problem, but I couldn't find what I was looking for.
I am using this jquery.balloon.js, which transforms the default browser rendering of the tooltip to customized one (with adding some CSS to it – background, border, etc.).
This is the JavaScript code:
$(document).ready(function(){
$('a').balloon({
position: "bottom",
tipSize: "0"
});
});
Everything works just fine: when I hover the mouse on a link with included title attribute, the tooltip shows up customized. When I hover out the mouse the tooltip hides.
The problem comes when browsing on touch screen devices.
There is no mouse for hovering, so I tap once on the link and the balloon tooltip shows up (the link does not activate, the link is activated only when I tap twice), but then the tooltip does not hide. I tap somewhere on the body, but the tooltip remains on the screen.
I know how to hide elements in JavaScript by clicking/tapping outside them (in the html or body) with $('html').click(function() { //code });, but here the problem is that the tooltip is not an element, but attribute...
How to hide only the tooltip with tapping somewhere in the body?
You can test this behavior on the jquery.balloon.js site here with any touch screen device to see that once activated by tapping the tooltip can't hide.
Thanks for the only answer, but I figured it out.
I have created a class with the following code:
$.balloon.defaults.classname = ".balloon";
$.balloon.defaults.css = null;
This way I created .balloon class which allowed me to customize the tooltip by myself. I used this code to hide the tooltip by hiding the .balloon (which hides the newly customized jQuery tooltip):
$(document).ready( function(){
$('body').click( function(event){
event.stopPropagation();
$('.balloon').hide();
});
});
You can call the hideBalloon function.
I have an html5 page with a dropdown menu using mootools. It's working if I use the hide() and show() functions. But, I want the menu's to slide in and out, like this:
var m = e.getElement(".dropdown-menu, .sidebar-dropdown-menu");
if (e.hasClass('active')) {
m.hide();
e.removeClass('active');
} else {
m.show();
e.addClass('active');
}
Instead of hide and show I want slideIn and slideOut:
var m = new Fx.Slide(e.getElement(".dropdown-menu, .sidebar-dropdown-menu"));
if (e.hasClass('active')) {
m.slideOut();
e.removeClass('active');
} else {
m.slideIn();
e.addClass('active');
}
Working example: http://jsfiddle.net/wzzeZ/
Not working: http://jsfiddle.net/37V53/1/
It's not throwing errors; where do I look to fix it?
There are a few things going on here.
First of all, you're not seeing any errors because there are none. If you litter the code with console.log() calls, they all run.
It's a style issue that's preventing the menus from displaying.
The FX.Slide Class in Mootools doesn't seem to explicitly set the 'display' property of the element you're sliding to block. You still need to call .show() for it to work.
Next, if you check out the docs for FX.Slide, you'll notice that it creates a wrapper element to do the slide effect (the container is needed for the height animation, overflow: hidden, etc.)
Unfortunately that seems to be messing with the positioning of the menu, which is positioned relatively to its containing element - but the containing element has height and overflow: hidden styles which then hide the menu (not to mention, even if you could see it, it's in the right place).
To see what I'm talking about check out this updated Fiddle here: http://jsfiddle.net/37V53/2/
If you run that in Firefox with Firebug, and you hover your cursor over the element that's logged to the console, you'll see Firebug's blue hilight appearing where your element actually is being displayed - in the middle of the window, and hidden from view.
This is a combination of assumptions made in the MooTools Classes you're using working against each other; You'll probably be better off writing your own (simple) slide-out script using FX.Tween rather than FX.Slide.
I created a sample of how to do this based on the original Fiddle (that works) - http://jsfiddle.net/LkLgk/
Trick is to show the element to the browser but not the user (by setting visibility: hidden before display: block, grab the height, set height to 1px, visibility back to visible, then tween the height to the previously detected value.
Hope that points you in the right direction; remember, when in doubt, console.log everything!
It is a bit difficult to explain my issue but I will try using images.
Demo: http://jsfiddle.net/H8Qbn/13/
I try to automatically arrange jQuery dialogs using Isotope.
The first picture shows that everything is working just fine.
The second picture shows what is happening when trying to resize the 1st jQuery dialog. It is resizing just fine and all other dialogs are automatically arranged.
When I try to arrange the second dialog it first moves according its position(top, left) and then resizes and all other dialogs are not automatically arranged.
The third dialog behaves exactly the same as 2. It moves according its position (top, left) and is not arranged automatically.
Any suggestions?
Isotope is not made for draggable dialog boxes; see what the plugin author says regarding this type of functionality.
EDIT Fiddled around with a few more things and got the layout to rearrange when a dialog is closed with .remove(); however, dragging is not suported (see above) and resizing manually won't work either. Why do you need manual resizing of dialog boxes? Can't that be done programmatically?
The jquery masonry plugin can compute the new position when you call it with the masonry("reload") function on the surrounding container after you have resized the dialog boxes or add or remove items. I used it in my Javascript when I add or remove an image to my surrounding container. You can see the Masonry plugin working live in my homepage at the web address http://www.chihoang.de.
This is my prepend and append function with masonry("reload") at the end:
if (ele.Additem == "Append") {
container.append($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
} else if (ele.Additem == "Prepend") {
container.prepend($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
}
And this is my remove function:
$j('.brick').remove(":contains('" + ele.Headline + "')");
container.masonry('reload');