i have a fusion chart and i want to print it but in the place of chart i am getting blank space.
Here is the code..
<script type="text/javascript">
function selectBehaviourTypes(id){
$.post('/reports/tbchart', {Guid: id, Chart:"yes"}, function(response)
{
$("#chart_div").html(response);
});
}
</script>
<div style="float: right"><img src="<?=$this->baseUrl('/images/icons/small/print.png')?>" title="Print" alt="Print" /></div>
<div id="div_print">
<div id="chart_div"></div>
</div>
Help me out
regards
uday
The charts rendered are displayed properly on screen but printed output had been not proper try using PrintManager class for printing.
Print Manager takes a bit of time to prepare all the charts ready for printing.If print action is invoked while the Print Manager is not yet ready with the image, the chart does not show up in the print media. The function managedPrint() is called, it automatically waits for the chart to get ready before it proceeds to call the window.print() function.
For more information, please refer to : FusionCharts Print Manager Documentation
Related
Im trying to implement google adsense ads and they aren't showing up, but when I inspect the area they are suppose to be it looks like they are there. Im working in a rails 5 app and I am using turbolinks, which Ive seen may cause issues. Heres the code in my project:
<div class: 'recipe-card-link'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout="image-top"
data-ad-layout-key="-90+2e-hl+fr+q4"
data-ad-client="ca-pub-****************"
data-ad-slot="8061638025"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
When I inspect the item it has a bunch of etc inputs and looks like it called the script and put everything there but nothing shows up. Its just a white space.
EDIT: Attached an image of what it shows when I inpsect (since I cant copy all of it)
1.- First, try changing:
script async to script async='async'
2.- Then use the following JS to run adsense.
<script>
//<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-YOURID",
enable_page_level_ads: true
});
//]]>
</script>
Currently I have to press a on the top right-hand corner of the map to show my current location (it is the little person in the picture), is there a way for when the map load it automatically shows your location? I attached the code as well and a picture to explain. Thanks, I apologize in advance for my lack of knowledge.
<html>
<head>
<script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Kmjtd%7Cluua2qu7n9%2C7a%3Do5-lzbgq"></script>
<script type="text/javascript">
/*An example of using the MQA.EventUtil to hook into the window load event and execute defined function
passed in as the last parameter. You could alternatively create a plain function here and have it
executed whenever you like (e.g. <body onload="yourfunction">).*/
MQA.EventUtil.observe(window, 'load', function() {
/*Create an object for options*/
var options={
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/
zoom:13, /*initial zoom level of map*/
latLng:{lat:40.735383, lng:-73.984655}, /*center of map in latitude/longitude*/
mtype:'osm' /*map type (osm)*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('geolocationcontrol', function() {
map.addControl(
new MQA.GeolocationControl()
);
});
});
</script>
</head>
<body>
<div id='map' style='width:750px; height:280px;'></div>
</body>
</html>
Based on the documentation, you could try calling activate on the geolocation control after you create it.
If that does not cause a re-center/zoom then you may need to register a handler for the onLocate callback (also in the control). When your callback is called you can manually re-center/zoom the map.
Bear in mind that geolocation can be very inaccurate, doing it automatically will probably annoy users for whom that is the case.
How can i use google earth API with backbone.js+jquery mobile ?
I have created application using backbone.js, underscore.js and jQuery Mobile.
For google earth API, I am using sample code listed at https://developers.google.com/earth/documentation/#using_the_google_earth_api
My template rendering, and all other pages are working fine But when i load google earth API in one tag, it's not loading and in js console i get message: "ERR_INVALID_DIV ".
Google.earth module never calls back initCallback, It's always calls failureCallback when google.earth.createInstance is invoked.
I explain some sample code of mine application as under, so based on that may be you get my code structure and it helps you to solve my issue.
my js code as under,
myjs1.js
var ge;
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
console.log(' init call back call ');
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCB(errorCode) {
console.log(errorCode);
}
Now my Backbone code as under,
myjs2.js
WebApp.MyPage= Backbone.View.extend({
initialize:function (result) {
this.template =_.template($('#myPage').html());
},
render:function (eventName) {
var self = this;
mydata = object dict of my data;
$(self.el).html(self.template({mydata:mydata}));
google.load("earth", "1");
init();
google.setOnLoadCallback(init);
}
Now my HTML code like as under,
<script type="text/template" id="myPage">
<div data-role="page">
<div data-role="content">
<div id="map3d" style="height: 400px; width: 600px;"></div>
</div>
</div>
</script>
myhtml.html
Is there any way to fix this?
Any help appreciated.
The Earth API works with the Google Earth Plugin, which is available only on Windows and Mac OSX. It is not available on mobile devices, sorry!
If you're testing on your Mac or Windows system, you should be able to get it working. The error code ERR_INVALID_DIV sounds like it isn't finding the map3d div. I would put a debugger; statement in the code just before the google.earth.createInstance() call, and then look around in the DOM inspector and see if map3d is in the DOM. It should be coming in from your template if that part is working.
But this won't help you when you try to load your site on a mobile device, because you won't have the Earth plugin available there.
When dynamically creating a div using an .ajax() function. I'm unable to attach the .tabs() widget to the newly created .
This link creates the new div and pulls the #tabs div from "somefile.php"
Creates New Div
Here is the dynamically created div:
<div id="newdiv">
<div id="tabs">
<ul>
<li>Example One</li>
<li>Example Two</li>
</ul>
</div>
</div>
Here is the script I'm using. Output - Error: (d || "").split is not a function
Copy code
$( "#tabs" ).live(function(){
$(this).tabs()
});
I'm able to show the tabs when adding an event parameter, However I want the tabs to display without an event.
Copy code
$( "#tabs" ).live("click", function(){
$(this).tabs()
});
Someone please help me understand what I'm missing. I've been stuck on this for 3 days.
Chris
Are you trying to assign the live handler before the AJAX callback has completed?
My suspicion is you need to move your code into the success handler of your AJAX object and not use live because I don't think it does what you think.
If you post more of your code we'll be able to help you out a bit more.
My guess as to what you're trying to do:
$.ajax({
type: "GET",
url: "/tabs/",
async: true,
success: function() {
$('#tabs').tabs()
}
});
RSG is correct in that you're using the live function incorrectly. The live function is specifically for attaching event handlers to elements and calling functions. As RSG pointed out, in your case the best thing to do is call the tabs widget in the success function of the ajax request.
I am using the new v3 of the Google Maps API. Basically the issue I have is that I have a Google Map within jQuery UI Tabs. The map is not in the first tab, so you have to click the tab to view the map, but it does not always render correctly. I.e. sometimes the map images are not correctly placed.
I had this problem when I was using v2 of the API, but I managed to resolve the problem by initializing my Map like this:
map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});
Unfortunately that doesn't work in v3. I had a look at the suggestions in this thread: Problems with Google Maps API v3 + jQuery UI Tabs
Nothing really worked for me, but I used one of the workarounds in that I initialize the map function on tab load:
$(function()
{
$("#tabs-container").tabs({show: function(event, ui)
{
if(ui.panel.id == "viewmap")
{
mapiInitialize();
}
}});
});
This is all good but I much rather prefer for the map to be "there" when the user clicks on the tab. It sometimes takes a few seconds for the map to load up and all the user see's in that time is a plain gray background - some sort of loading indicator might have helped.
So does anybody have any suggestions? My markup and CSS is as follows:
<div id="tabs-container">
<ul>
<li><span>Details</span></li>
<li><span>Location Map</span></li>
<li><span>Reviews (<?php echo $numrows; ?>)</span></li>
</ul>
<div id="details"><?php echo $details; ?></div>
<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;">
<div id="map" style="height: 340px;"></div>
</div>
<div id="reviews"><?php echo $reviews; ?></div>
</div><!-- end tab-container -->
Try this when you are initializing your jQuery UI tabs:
$("#tabs-container").tabs({
show: function(event, ui) {
google.maps.event.trigger(map, 'resize');
}
});
Note: You will have to initialize the map before you initialize the tabs.
Once you switch to the tab that has the map call google.maps.events.trigger(map, 'resize'); that should then make it display correctly.
just use
map.setZoom( map.getZoom() );