I have a custom routing application that takes information for a route from google maps. It then creates a Google Visualizations DataTable to hold all the steps in the route.
My current problem is that in order to reduce overflow for very large routes, I have enabled paging in the options of the DataTable. This leads to a not so printer friendly version because only the portion of the data that is shown in the table will be printed. The other portions of the table are loaded dynamically by the API when you click prev and next.
Is there a not so hard way to get the DataTable to be printer friendly when it comes time without sacrificing the ability to have paging enabled?
This is the way that I ended up solving this problem. I will not accept my own answer just in case someone has something much more elegant.
Originally I had:
var visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
sort: "disable",
allowHtml: true,
showRowNumber: true,
page: "enable",
pageSize: 9
});
I added another one that went to a div that I would hide with css.
//Create a second Visualization that Will be hidden.
var visualization = new google.visualization.Table(document.getElementById('printerFriendly'));
visualization.draw(data, {
sort: "disable",
allowHtml: true,
showRowNumber: true,
page: "disable"
});
Then I added the following rules to one of my css files.
#media print
{
#table{ display:none; }
}
#media screen
{
#printerFriendly{ display:none;}
}
This hides one table during normal use and hides the other during printing. I was hoping for something a little cleaner than this but this solution was very easy to implement.
There's a few ways you could do it.
If the changes you need in order to make the page "printer friendly" can be done purely by changing the CSS styling, then all you need to do is add another style sheet for print media:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
That is a pretty easy and transparent way to do it: the print media style sheet that will be used for printing, while your original style sheet will be used for web viewing.
So you could change the way things are displayed, or even toggle visibility whether it's being viewed on the web or printed...that should get you where you need to be.
To be honest I'm not too familiar with what you're doing, but it sounds like the user has to make a new request for each page...in that case just CSS styling will not help you.
You'll have to either make the information available all on one page ( just parts invisible), or set up a function in the app, or an option, et cetera that spits out a printer-friendly version.
#media print
{
#table > div > div { overflow: visible !important; }
}
This will solve your problem.
Explain:
2'nd div below #id used to create table have overflow: auto. This lead to fit info in this block. Changing it to overflow: visible will lead to show it content.
Check how it works on developer.mozilla.org/en-US/docs/Web/CSS/overflow
Related
I am currently using Datatables to apply a nice way of filtering and modifying a table that I have. It works just fine, but I am just trying to move the filter to the upper left, and the length changer to the upper right.
I have read through the dom documentation from the Datatables website but still cannot get it to work.
I have tried many variants of the following:
"dom":'fltip'
No matter how I position this, I cannot get the filter textbox to align left.
Is this something that can be done with the dom positioning attribute of the datatable, or does it have to be done in the CSS.
Thanks!
Try this
"dom" : <'row'<'col-md-3'f>><'row'<'col-lg-12't>>
row is location of components, col-xx-xx is the size based on bootstrap and 'f' is for filter; 't' is for table. Feel free to play around different components.
It loos like you need some kind of class/id with some CSS involved to get what you're looking for (based on this). I'd say you're better off just running with some basic CSS.
<style type="text/css">
#lhs_filter {
float: left;
}
#lhs_length {
float: right;
}
</style>
I am working the (fantastic) jQuery DataTables plugin and have begun to use the 'Responsive' extension so that it responds well on varied devices etc.
It is working fine however it adds some buttons to allow each row to be expanded to show the columns which have been hidden.
However, this is actually really annoying since it shows all the columns I have deliberately not shown as well as not looking ideal (imho).
Does anybody know how to remove these buttons?
Cheers,
Jack
I did a bit more or an intensive search of the docs and found that these 'expanded rows' are refered to as child rows and can be disabled as follows.
Initially I simply included the
"responsive": true,
tag in my datatables. These child rows may be disabled with:
"responsive": {
"details": false
},
I thing you can override the CSS style of this button and hide it from user:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
display:none
}
Change also the padding of the cell:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child {
padding-left: 10px; /* Instead of 30px */
}
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)
In google maps version 3.14 there are some new css rules added for the custom infowindow. I use the infobox plugin and now many of my elements styles are overwritten.
For example:
.gm-style div,.gm-style span,.gm-style label,.gm-style a {
font-family: Roboto,Arial,sans-serif;
font-size:11px;
font-weight:400
}
.gm-style div,.gm-style span,.gm-style label {
text-decoration:none
}
.gm-style a,.gm-style label {
display:inline
}
.gm-style div {
display:block
}
.gm-style img {
border: 0;
padding: 0;
margin: 0
}
Is there any way to change that except that I have to overwrite this google styles via "!important"?
EDIT:
The font "Roboto" will be also loaded. If you care about performance, then that is not really great.
EDIT2:
Ok, !important isn't necessary. Overwriting the google styles is also possible with increasing the specificity of the CSS selectors. But this doesn't change that I have to overwrite all google styles. And the roboto font will loaded too.
From what I can see the new css rules are guaranteed to break styling for all markers, controls and info windows web wide, so maybe this will not remain in the 3.exp version long enough become part of an official release. In the meantime to protect you self against breaking changes like this. You should probably do two things:
1 Set a version on your link to the maps api. Something like
<script src="http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=true" type="text/javascript"></script>
will make sure that you are always accessing the current release version of the maps API. If you want to be more conservative you can specify the major and minor releases as well. If you specify a major and minor version then you can test updates to the maps API as part of your regular release schedule. If you are accessing the maps API as part of a wrapped mobile application then you cant control when your users update your app, so you will probably want to just set v=3 and then try to insulate your app from changes in the maps css (see 2. below)
2 Style your markers, controls, or info windows so that you better control the styling. For example, if you have a marker with html like
<div class="my-marker">...</div>
You can prevent the maps API from setting you font size by a css rule like
div.my-marker {
font-size: 18px;
...
}
Note, given maps API styles like
.gm-style div {
font-size: 11px;
...
}
you will have to specify the absolute sizes of you elements, relative measurements, like em's wont protect you against potential changes to, for example, font-size: 11px;
I had the same problem and Emads answer worked well for me after I addet a event listener.
google.maps.event.addListener(map, 'idle', function()
{
jQuery('.gm-style').removeClass('gm-style');
});
The problem is I still can't see any way to stop google loading the Roboto font.
EDIT: Well... there is a pretty easy way, to stop that.
Just use GET to load an older version of the google API like this:
<script src="http://maps.google.com/maps/api/js?v=3.13&sensor=false"></script>
In this API verion, google won't change the gm-style at all. So you don't need to override any classes or styles.
jQuery('.gm-style').removeClass('gm-style');
OR
find this in file /wp-content/themes/rentbuy/js/scripts.js
<div class="overlay-simple-marker"
and replace it with
<span class="overlay-simple-marker"
InfoBox also provides style element in options
var labelOptions = {
content: label,
boxStyle: {
//Insert style here
},
.
.
}
For those following this issue, please see the post by google in this thread:
https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs
This is a breaking change in version 3.14, because the elements are now styled by CSS rather than inline.
The default fonts used in labels and UI elements has changed. UI
elements are styled with CSS by the API, which means that custom CSS
that targets DOM elements on the map may require some adjustments if
you would like these to apply instead of the new default styling.
See changes in visual refresh for further details.
This is not a very good move by Google maps, because of the use of descendant selectors (on a div child!), which are not at all efficient.
To fix this you will need something quite specific like the following:
Given HTML
<div class="gm-style">
<div class="myClass-parent">
<div class="myClass">Lorem ipsum dolor</div>
</div>
</div>
Try something like
.myClass-parent > div.myClass
{
font-weight:600;
}
Simply styling div.myClass may not work.
I too have been struggling with the added gm-styles and Roboto font loading since 3.14 was introduced.
Found this issue reported as a "bug" on the google maps API codebase. Please star and comment on it at http://code.google.com/p/gmaps-api-issues/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal&groupby=&sort=&id=6078
In response to dorr Baums solution, for those using prototype js you can use the following to remove this class.
google.maps.event.addListener(map, 'idle', function() {
$$('.gm-style').invoke('removeClassName', 'gm-style');
});
Since Google changed the behavior of older versions it wont work anymore to load v1.13.
The new styles and roboto-font will always load. My new solution is to save every stylesheet into a separate file and include the following script:
google.maps.event.addListener(map, 'idle', function()
{
$('style').remove();
});
This will remove every style-tag written by googles api and keeps your own style save but the roboto font will still be loaded. I don't see any way to stop that.
I fixed this on my map by doing the following. Hope it helps
Create my own div inside the infowindow and set your own css.
<div class='iw'>infowindow content</div>
Set the link to the css file BEFORE! the google api in the page head.
Hold Ctrl & click refresh on your browser to force full refresh to load any css changes. I was using Firefox.
Instead of removing the class through DOM manipulations and instead of using an older Google Maps version which is obviously mostly unwanted, simple deactivate the style globally by resetting the font attribute:
.gm-style { font: initial !important; }
or put your Google Map into a container and style .gm-style inside your container:
<div class="MapContainer">
[google map component here]
</div>
and in your CSS style definitions:
.MapContainer .gm-style { font: initial; }
I need some help on the topic: as i am printing the webpage it prints all well but not the background images, so my page breaks up at some places.Please suggest.
Regards
Jos
In your print stylesheet you should use something along the lines of:
.background {
display: list-item;
list-style-image: url(image.gif);
list-style-position: inside;
}
Please note that you can't use image sprites and more advanced background positioning this way and you need to do it for every image.
I just came across the same issue. My header background image wasn't printing on single post articles, leaving a big white gap at the head of the page where the header image would normally show. So to fix this, I added the background image via HTML directly on the page - which your users browser will print by default. Below is a basic example of how to achieve this:
1, Create a blank style sheet and name it print.css. Now add this style sheet to your page header, and make sure media="print". We need this in order to tell the browser which elements we want and don't want to print:
<link rel="stylesheet" href="pathtoyour/css/print.css" type="text/css" media="print" />
2, Add the image you want printed to your page and make sure it has an ID so we can style it within the print.css and your main style sheet:
<div id="header">
<img id="print-image" src="pathtotheimageyouwanttoprint.jpg"/></div>
</div>
3, In your main style sheet, add your image ID so we can tell browsers to stop the image from showing during normal viewing of your page:
#print-image {display:none}
4, In your print.css style sheet, because we've told your image to not display in your main style sheet, we need to now make sure that your image prints and doesn't remain hidden. Add the following to achieve this:
#print-image {display:block;}
You're done. Test and adjust styling to suit.
Doing this also allows you to fully customise the way your page is printed, for example - when printing, you now have the ability to hide your print button, menu items etc. and can code in any styling as per normal.
Hope this helps.
Try using David Aragon's Javascript
function replaceSprite(selector){
if ($.browser.msie == true) {
var back_x = $(selector).css('background-position-x'),
back_y = $(selector).css('background-position-y'),
back_position = back_x+" "+back_y;
} else {
var back_position = $(selector).css('background-position');
}
var back_image = $(selector).css('background-image'),
width = $(selector).width(),
height = $(selector).height(),
index1 = back_image.indexOf('http'),
index2 = back_image.indexOf('.png');
back_position = back_position.split(" ");
back_image = back_image.substring(index1, (index2+4));
$(selector)
.append('<img src="'+back_image+'"/>')
.css('width',width)
.css('height',height)
.css('overflow','hidden');
$(selector).find('img')
.css('margin-left',back_position[0])
.css('margin-top',back_position[1]);
}
http://quickleft.com/blog/printing-css-sprites
This is a user setting in the browser. By default some browsers won't print background images.
The user may choose to print background images also, but you can't force this with code or markup.