Develop Reference

Load specific CSS files from JavaScript in Rails

I'm working on taking a html5up template that I really like and put it in rails. I have it all working except for one thing. In the js they have this
skel.init({
reset: 'full',
breakpoints: {
'global': { range: '*', href: 'css/style.css', containers: 1400, grid: { gutters: 40 }, viewport: { scalable: false } },
'wide': { range: '961-1880', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
'normal': { range: '961-1620', href: 'css/style-normal.css', containers: 960, grid: { gutters: 40 } },
'narrow': { range: '961-1320', href: 'css/style-narrow.css', containers: '100%', grid: { gutters: 20 } },
'narrower': { range: '-960', href: 'css/style-narrower.css', containers: '100%', grid: { gutters: 15 } },
'mobile': { range: '-736', href: 'css/style-mobile.css', grid: { collapse: true } }
},
Which loads a certain css file depending on what size screen you have. This works fine when its just being loaded using apache but in rails all css gets throw together into an application.css when its in assets/stylesheets which means i wont be able to do anything like this. Is there any way to keep these css files separate and load them dynamically from js like it is here?

Figured it out. i just put in into public and then just referenced it from ../stylesheets/mycss.css

Categories overlaps when export the chart

I have this chart: http://jsfiddle.net/pLDeq/10/
exporting: {
enabled: true,
exportButton: {
enabled: true
},
buttons: {
customButton: {
symbol: 'url(http://cdn1.iconfinder.com/data/icons/fatcow/16/chart_bar.png)',
onclick: function() {
setChartColumn([name,name2], categories, [data,data2], ['column','column']);
}
}
}
}
In the jsFiddle the chart exports correctly but in my project looks like this:
What could be the problem? I'm using the same scripts.

I use this as a solution and work:
<meta http-equiv="X-UA-Compatible" content="IE=8" />

Show Row Details as a Popup/ToopTip form on Mouse Hover for each row in KendoUI Grid

I have a grid populated with data and
i want to show only 3 or 2 columns and hide rest of columns cause the grid goes very wide.
when the mouse is hovered over a row i want to show all the columns of that row as as popup /tooltip form.
Please help me with this. I searched a lot and only found out Editable popup and with button click not with hover.
function PopulateGrid() {
$("#recentNews").kendoGrid({
columns: [
{ field: 'Date', title: 'Date', width: 80,
template: '#=kendo.toString(toDate(NewsDate), "yyyy/MMM/dd") #'
},
{ field: 'TradeTime', title: 'Time', width: 60,
template: '#=kendo.toString(toDate(NewsTime), "hh:mm:ss") #'
},
{ field: 'Title', title: 'Description', width: 200 },
{ field: 'Country', title: 'Country', width: 40 },
{ field: 'Economy', title: 'Economoy', width: 40 }
],
dataSource: {
transport: {
read: {
url: 'Home/GetNews',
dataType: "json",
type: "POST"
}
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
}
},
pageSize: 100
},
// change: onChange,
// dataBound: onDataBound,
dataBound: HoverOnGrid,
pageable: true,
sortable: true,
scrollable: true,
height: 565,
width: 2000
});
}

There are two separate questions about what you are trying to implement:
Bind hover to the Grid rows (easy).
Generate a popup / tooltip that shows the rest of the columns (easy but requires some amount of coding).
Since it seems that you have already defined a function called HoverOnGrid lets write it as:
function HoverOnGrid() {
$("tr", "#recentNews").on("mouseover", function (ev) {
// Invoke display tooltip / edit row
var rowData = grid.dataItem(this);
if (rowData) {
showTooltip(rowData);
}
});
}
where grid is:
var grid = $("#recentNews").kendoGrid({
...
}).data("kendoGrid";
Now, the tricky question, how to show a tooltip / popup... There is no predefined way of doing it, you should do it by yourself. The closes that you can get is defining HoverOnGrid as:
function HoverOnGrid() {
$("tr", "#recentNews").on("click", function (ev) {
grid.editRow(this);
})
}
and the Grid initialization say:
editable: "popup",
But this opens a popup but with fields on edit mode (something that you can hack defining in the dataSource.schema.model that all fields are not editable:
model: {
fields: {
Date: { editable: false },
TradeTime: { editable: false },
Title: { editable: false },
Country: { editable: false },
Economy: { editable: false }
}
}
But it still shows update and cancel buttons in the popup.
So, my recommendation is writing a piece of code that creates that tooltip.
EDIT: For hiding the tooltip you should first intercept the mouseout event:
$("tr", "#recentNews").on("mouseout", function (ev) {
// Hide Tooltip
hideTooltip();
});
where hideTooltip might be something as simple as:
var tooltipWin = $("#tooltip_window_id").data("kendoWindow");
tooltipWin.close()
assuming that you are always using the same id for the tooltip (in this example, tooltip_window_id).

How to disable range selector from highstocks charts

I'm trying to disable the from - to range selector that comes by default in highstocks. Looked up the api documentation but didn't find a solution. Thanks for the support!

In your chart config, set rangeSelector.inputEnabled false.

The accepted answer will only disable the Range Selector;
If you want to remove it completely, you need:
rangeSelector: {
enabled: false
},

you can use add inputEnabled:false
rangeSelector : {
inputEnabled:false
},

You can use for StockChart just like below:
this.chartData = new StockChart({
title: {
text: 'Data Chart'
},
rangeSelector: {
selected: 0,
inputEnabled: false
},
series: [{
tooltip: {
valueDecimals: 2
},
name: 'Chart',
data: [],
type: undefined
}]
});

adding style to jquery dialog buttons

How do I go about adding styles to jquery buttons on a dialog? I want to color some one color and others another color.
I've tried using the class: but i didnt seem to get too much effect. am i doing something wrong? do i need to use something else? do i need to place something somewhere else?
code:
function DisplayCommonDialog(url, title, height, width) {
HideDialogs();
var dialogButtons = [{
text: "Save",
click: function () {
...
}
}
},
width: '70px'
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}];
if (title.indexOf("Delete") >= 0) {
dialogButtons = [{
text: "OK",
click: function () {
...
},
width: '70px'
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}];
}
if (popUpDialog != null) {
$("#").dialog("option", {
width: width,
height: height,
title: title,
open: function () {
...
},
close: function () {
...
},
buttons: dialogButtons
});
...
}
else {
popUpDialog = $("#").dialog({
width: width,
height: height,
autoResize: true,
modal: true,
title: title,
open: function () {
...
},
close: function () {
...
},
overlay:
{
opacity: 0.5,
background: "black"
},
position: ['center', 'center'],
buttons: dialogButtons
});
}
}

to add css class in dialog buttons, just use the button button property "class" :
$("#").dialog({
buttons: [{
"text":'your button name',
"click": $.noop,
"class": 'your-css-class1 your-css-class2'
}]
})
the property "class" in each declared button will be inserted when creating dialog.
Hope this help.
similare question about button style in dialog available here

http://jqueryui.com/themeroller/
or
How to style different hover colors for jquery dialog buttons
or how to change jquery dialog buttons

findout the CSS class being applied to the button using firebug and then override it in your css