I'm currently trying out Dygraphs (which seems really great btw!), but for some strange reason, the annotations feature won't work for me, AND it also fails in the exact same way on the jsFiddle version of Dygraphs' own gallery example of annotations, so this is most likely a bug/problem the devs really might want to take a look at(!).
To reproduce (same thing happens in both latest Firefox and latest Chrome):
1.
Look at the "annotations" example in the Dygraphs gallery, here:
http://dygraphs.com/gallery/#g/annotations
It works just fine and looks great, like this:
2.
Press the "Edit in jsFiddle" button, for that very example on that very page.
You are now sent to jsFiddle, and if you press the "Run" button there, the chart itself (colored curves etc) is shown just fine, but, only the "stems" of the annotation "signs" are shown, while the text contents of the annotations are all displayed as normal text to the left of the chart?! Like this:
Seems like some kind of CSS problem or similar to me, am I correct?
Since the example is Dygraphs' own example, which also works on their own site but not on jsFiddle, all suspicions of incorrectly formatted data or code can also be let go, I guess. It also happens to all my own Dygraphs charts on my own computer that I try to annotate, but this native Dygraphs gallery example is a much better example to investigate from I guess?
So, my question is of course, why does this happen, and how do I fix it to get the annotations working and displaying correctly?
ADDITION:
Let's make it even simpler, in order to isolate the problem without any hesitation.
Here is a very simple example for Dygraph annotations that I have put together on my own local disk (i.e. as a stand-alone HTML file):
<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div id="test_chart" style="width:750px; height:350px;"></div>
<script type="text/javascript">
var test_annotations = [
{
series: "TestCol1",
x: "2017-05-26",
shortText: "A",
text: "Test annotation",
cssClass: 'annotation'
}
];
testchart = new Dygraph(
document.getElementById('test_chart'),
"Date,TestCol1\n" +
"2017-05-25,110\n" +
"2017-05-26,80\n" +
"2017-05-27,75\n",
{}
);
testchart.setAnnotations(test_annotations);
</script>
</body>
</html>
When I open this file (locally with file:// in Chrome on my computer, having the latest dygraph.js and dygraph.css in the same directory), this is what I get:
As you can see, exactly the same problem as described above appears here, i.e. only the "stem" of the test annotation is visible in the graph itself, while the annotation text ("A") is displayed to the left of the graph.
The Firebug console is empty after having loaded this file, and no attempts (unsuccessful or otherwise) of loading any images are anywhere to be found in the Firebug network tab either.
Again, this very much feels like some kind of CSS positioning problem to me, but I may of course very well be wrong?
The answer to provide to this question would then be:
How, in as few and simple changes/steps as possible, would I get this local example PoC code for Dygraphs annotations to work as intended, i.e. showing the annotation text "A" inside a square at the correct position inside the graph (i.e. at the position where the "annotation stem" is currently just displayed, just as is done in the working example on the Dygraphs page, in my first screendump above in this question)?
Setting
position: absolute
solved the problem for me.
The gallery example loads images from dygraphs.com. When you load the demo on jsfiddle, it tries to load the images from jsfiddle, which doesn't work. dygraphs annotations are working fine, it's just that the image files are missing.
It seems that I was right about the CSS positioning problem after all.
The annotations are rendered by Dygraphs by adding the following HTML to the DOM of the page (this is the exact HTML for my test annotation in my local example code in the question test above, extracted live using Firebug):
<div style="font-size: 14px; left: 392.5px; top: 241.214px; width: 16px; height: 16px; color: rgb(0, 128, 128); border-color: rgb(0, 128, 128);" class="dygraph-annotation dygraphDefaultAnnotation dygraph-default-annotation annotation" title="Test annotation">A</div>
If I (as suggested by this SO question) add the CSS property position: relative to this div (manually, using Firebug), the graph suddenly looks like this:
See, the annotation text is now correctly positioned! It's still missing its opaque background and colored border though, but I guess this is just the result of even more CSS properties missing for some reason?
So, let's focus then on why there is missing CSS for the annotations I guess?
My best guess is that the dygraph.css file isn't properly loaded under certain conditions (apparently both on jsFiddle and locally on my computer, even though it is indeed there in the same directory as the HTML file and dygraph.js)? Or am I wrong?
A Firebug dump of the applied CSS for the annotation div seems to support this. Here is the CSS from Firebug for the annotation div of my local example (and also same in jsFiddle):
And here is the CSS for the same thing in the working instance in the gallery on the Dygraphs site:
See, the classes from dygraph.css is completely missing in my local example and in the jsFiddle example (even though indeed explicitly referenced in the class attribute of the annotation div's html code, as can be seen above), even though the CSS file is indeed there in the same directory as the dygraph.js file?!
#danvk, do you have any idea why this happens, and if Dygraphs could be patched somehow to avoid this from happening, and thus load all the CSS that it is supposed to for the annotations?
The only working hack-solution I can find for the moment is to dump the entire contents of dygraph.css inline in the <head> of the HTML file, as so:
<style>
/**
* Default styles for the dygraphs charting library.
*/
.dygraph-legend {
position: absolute;
font-size: 14px;
z-index: 10;
width: 250px; /* labelsDivWidth */
/*
dygraphs determines these based on the presence of chart labels.
It might make more sense to create a wrapper div around the chart proper.
top: 0px;
right: 2px;
*/
background: white;
line-height: normal;
text-align: left;
overflow: hidden;
}
...
/* For y2-axis label */
.dygraph-label-rotate-right {
text-align: center;
/* See http://caniuse.com/#feat=transforms2d */
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
</style>
After that it's finally working fine:
Addition:
It seems like others too (1) (2) have this general problem regarding the loading of CSS files. No accepted answer to neither that SO question nor Mozilla support thread though, and indeed, none of the suggested answers work for me either. WTF, how can such a huge problem be generally unknown/unanswered? Please do also note that the same thing happens for me in both Chrome and Firefox, and also on multiple computers, out of which some have never opened the file before, so no strange cache-related effects should be involved either. Either way, it would seem like the bug is outside of Dygraphs' scope.
I'm afraid I'm late to the party, but it looks the problem is still valid (or workaround is not well documented). I was able to have better estimation of position by adding in index.html:
<style>
.dygraph-annotation {
position : relative;
display:inline-block;
}
</style>
However still annotations are not following the chart well:
The option attachAtBottom : true added to annotations might help here a bit, but still annotations are jumping on hovering graph (I guess this is because of legend taking some place)
All day trying to solve the same problem as the author at the beginning of this post. Yes, changing the CSN file allows you to somehow solve the problem, but everything worked by itself without dancing with a tambourine when I added this one line:
link rel = "stylesheet" href = "// cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" /
As always, you need to be more attentive to the little things)
I have an issue getting content inside the projectpages. (I literally tried to figure this out for 4 days now, searching the web - i will give my right arm for solving this)
So I have a simple index.html page with 7 projects (7 thumb images representing each portfolio project). When i click on one of the images i would like to get to the page showing its content - i get to the new page /#/WORK1/ but i can't figure out where/how to insert my content in this new url?
You can see the problem at my site here:
awesth.dk
Here is the code i am using for the 7 projects. WORK1, WORK2 etc.
<div id="projectPages">
<div class="project page-project" data-url="/WORK1/" >
<!-- Will be fetched on-demand -->
</div>
...
(So I don't know how I get it to be "fetched on-demand")
And here is the 7 clickable thumbs:
<div id="projectThumbs" >
<div class="wrapper">
<a class="project "href="/WORK1/" >
<div>
<div class="project-image"><div class="intrinsic"><div class="content-fill"><img data-src="/img/upcoming.png" data-image="/img/upcoming.png" data-image-dimensions="2500x1401" data-image-focal-point="0.5,0.5" alt="work" data-load="false"/><noscript><img src="/img/upcoming.png"></noscript></div></div><div class="project-item-count">0</div></div>
<div class="project-title">Titel1</div>
</div>
</a>
...
Pleaaase help
You need to use write some JavaScript code using JQuery.
There are methods you need:
click() – to add click event handler.
data() – to get value from data attribute.
load() – to load contents from some URL to some element.
UPD
There is an example of using these methods. Does it fit your case?
https://jsfiddle.net/up495fzs/
UPD2
You need to update your HTML code on the server.
Pay attention to data-project-id="1" and id="project-id-1". And update numbers respectively.
In data-url set your relative path. If you want to load WORK1.html file, you should write: data-url='/WORK1.html' (without / at the end).
UPD3
The connection between blocks are made by data-project-id="1" and id="project-id-1" attributes.
I change the way to get url. I leave it in <a href="..."> and removed from <div class="project page-project">.
https://jsfiddle.net/up495fzs/6/
But for now I realised that I don't understand why you need many <div class="project page-project"> elements. Why not to use just one?
https://jsfiddle.net/up495fzs/5/
UPD4
And you need to know about CORS (Cross-origin resource sharing) – https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
You could load contents just from your web site. It'll fail if you will try to load page from external web site.
UPD4
You could use history.pushState(null, null, link.href); to update the URL of the page.
http://diveintohtml5.info/history.html
Updated JSFiddle:
https://jsfiddle.net/up495fzs/8/
You won't see URL changes at JSFiddle because it runs in a frame.
Try it on your page.
UPD5
Add link to JQuery library to the <head> of your page but before my script.
Add my script wrapped with $(function() { /* JS code */ }); to execute it properly.
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
...
<script>
$(function() {
/* JS code from JSFiddle */
});
</script>
I have already asked such a question here but haven't got a reply which could work out. It is really important for me to resolve the problem. So, I try to develop an app using ExtGWT 2.3.0 / GWT 2.5.1 but faced the problem that widgets (both GWT and GXT) are not visible in browsers. I've been trying to solve this issue more than week but unfortunatelly I've failed. The stuff I have alredy tried:
using different libraries of GWT/GXT (using ExtGXT 3.x doesn't settle a problem);
creating project using Maven web-app / gxt3+ archetypes;
deploying project on Tomacat / lunching under GWT;
using different styles in GWT-module (like <inherits name='com.google.gwt.user.theme.standard.Standard'/>);
rewriting .css-file;
compiling project by Maven / GWT compiler;
cleaning up cache files in all relevant temp directories (as Windows' as well as Intellij IDEA's);
making Maven's clean install;
using different browsers of different versions (IE 8 and 11, Chrome, FF 24 and 36);
trying to lunch app in browsers with / without GWT developer plugin;
browsing internet to find solution (especially stackoverflow);
Maybe I left out smth but the list of actions is pretty much big.
By the way I logged actions and there were no any errors or exeptions thrown. If I declare border settings for the widgets in .css their borders become visible that testifies that widgets are on page. So, if anyone has experienced such a problem or just could suggest something please let me know. Frankly it is very important for me. Please take a look at screenshots of the folder structure / setting of the project. Thank you in advance.
EntryPoint - class
public class ProjectEntryPoint implements EntryPoint {
#Override
public void onModuleLoad() {
Viewport viewport = new Viewport();
final BorderLayout borderLayout = new BorderLayout();
BorderLayoutData northData = new BorderLayoutData(Style.LayoutRegion.NORTH, 20);
northData.setSplit(false);
northData.setCollapsible(false);
BorderLayoutData centerData = new BorderLayoutData(Style.LayoutRegion.CENTER);
centerData.setCollapsible(false);
BorderLayoutData westData = new BorderLayoutData(Style.LayoutRegion.WEST, 200, 150, 300);
westData.setCollapsible(true);
westData.setSplit(true);
ContentPanel mainPanel = new ContentPanel();
mainPanel.setStyleName("mainPanel");
ContentPanel navPanel = new ContentPanel();
mainPanel.setStyleName("navPanel");
HTML headerHTML = new HTML();
headerHTML.setHTML("<h1>RSS Reader</h1>");
viewport.add(mainPanel, centerData);
viewport.add(navPanel, westData);
viewport.add(headerHTML, northData);
viewport.setLayout(borderLayout);
viewport.layout();
RootPanel.get().add(viewport);
}
}
module
<module rename-to='Project'>
<inherits name='com.google.gwt.user.User' />
<inherits name='com.extjs.gxt.ui.GXT' />
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<entry-point class='GXT3App.client.ProjectEntryPoint' />
<source path='client' />
<source path='shared' />
<add-linker name="xsiframe" />
</module>
.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="gxt-all.css">
<title>Project</title>
<script type="text/javascript" language="javascript" src="Project/Project.nocache.js"></script>
</head>
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
.css
.mainPanel {
border: 1px solid black;
}
.navPanel {
border: 1px solid black;
}
It looks like a problem with missing styles - please double check that gxt-all.css is available from where you reference it in your host page. Use your browser's developer tools to see if it's not throwing a 404.
It seems that the missing resources are mentioned in Step 1 in the setup.txt file that is bundled with GXT 2.3:
Create a Google Web Application Project project within Eclipse.
Copy the contents of the /resources folder in the download to a {foldername} location within your war folder.
Substitute {foldername} with the name of the folder you've created for resources within your war folder.
Add the following stylesheet to your host page.
<link rel="stylesheet" type="text/css" href="{foldername}/css/gxt-all.css" />
If you are using Charts, add the following script to your host page.
Add the following entry to you projects module xml file.
<inherits name='com.extjs.gxt.ui.GXT'/>
Eclipse Setup (should be similar for other development environments). These instructions assume you have a existing project and launch configuration.
Add gxt.jar to the project.
Add GXT jar to launch configuration.
This surely can't be the answer, but you have a typo in your code :
ContentPanel mainPanel = new ContentPanel();
mainPanel.setStyleName("mainPanel");
ContentPanel navPanel = new ContentPanel();
mainPanel.setStyleName("navPanel");
where the last line (I think) should be
navPanel.setStyleName("navPanel");
I solved the issue. I wouldn't say that it is an elegant solution but it works.
As discussed above the problem was in absence of .css-file which defined selectors that described widgets' styles (gxt-all.css). When creating project be sure that the following folders with relevant files are presented in project's webapp-directory (in the case you use Maven's web-app-archetype):
chart
css (contains gxt-all.css and gxt-grey.css)
desktop
flash
images
themes
All that stuff you can find in GXT installation archive in the folder resources. To use it just put all that folders in your project and define path to gxt-all.css in your host-html. It works for GXT 2.x.
I've got a JavaScript fix specifically for IE9 and want to load it into my project only for that browser. I thought I might be able to do something like this in my .gwt.xml:
<script src="ie9svgfix.js">
<when-property-is name="user.agent" value="ie9"/>
</script>
But unfortunately this doesn't work. Does anybody know a clean way to do this in GWT?
Thanks,
Jon
You can try conditional comments:
<!--[if IE 9]>
<script src="ie9svgfix.js"></script>
<![endif]-->
The cleanest way in GWT would be to use deferred-binding and inject the script with the ScriptInjector in the IE9 permutation; or have the script loaded by the host page, in which case you can use conditional comments (as suggested by Stano).
With deferred-binding, you'd have to create a class to "deferred-bind" with a specific implementation for IE9.
class SvgFix {
public void fix() { /* no op */ }
}
class SvgFixIE9 {
#Override
public void fix() {
ScriptInjector.fromUrl(GWT.getModuleBaseForStaticFiles() + "ie9svgfix.js")
.setWindow(ScriptInjector.TOP_WINDOW)
.inject();
}
}
And in your EntryPoint, inject the script:
GWT.<SvgFix>create(SvgFix.class).fix();
And finally then choose the appropriate implementation based on permutation:
<replace-with class="com.example.client.SvgFixIE9">
<when-type-assignable class="com.example.client.SvgFix" />
<when-property-is name="user.agent" value="ie9" />
</replace-with>
BTW, note that <script> in gwt.xml files is not supported with the xsiframe linker, and I'd encourage you to use it going forward (it has all the advantages of all the other linkers, and none of their drawbacks, plus it adds Super Dev Mode, flexibility/configurability, etc.)
This is my first question asked, so if I leave out details please be a little lenient. Thanks!
I am using the Facebook Like Button plugin on my site (tried both HTML5 version and xfbml version). I have included all necessary tags and scripts for xfbml and HTML5 support. I have followed the "spec" and done a thorough amount of searching here and elsewhere to the problem:
The like button functions correctly, except that the flyout/popup that is supposed to show after clicking the button doesn't load. I mean load, not show (and yes I already checked for overflow:hidden issues per the spec). The new <span> (which includes the <iframe>) are added to the DOM immediately after the like button <span>, and they load all of the code that is supposed to be there:
<span class=" fb_edge_comment_widget fb_iframe_widget " style="top: 19px; left: 0px; z-index: 10000;">
<span>
<iframe id="fa02aa64d8da" class="fb_ltr" scrolling="no" name="fee6eb9f6f2768" style="border: medium none; overflow: hidden; height: 225px; width: 401px;" src="http://www.facebook.com/plugins/comment_widget_shell.php?api_key=233493930007947&locale=en_US&master_frame_name=fa12240bc73214&sdk=joey">
<html>
<head>
<body onload="onPageLoad()">
<script>
var onPageLoad = function() {
document.domain = 'facebook.com';
var loc = window.location.toString();
var index = loc.indexOf('?');
var qs = loc.substring(index + 1);
var params = qs.split('&');
var master_frame_name = '';
for (var i in params) {
var components = params[i].split('=');
if (components[0] == 'master_frame_name') {
master_frame_name = components[1];
break;
}
}
try {
var master_frame = parent.frames[master_frame_name];
master_frame.ExternalNodeConnectWidget.onCommentWidgetLoaded(document);
} catch (e) {}
};
</script>
</body>
</html>
</iframe>
</span>
</span>
Now after that <span> is loaded it is supposed to fire the script function onPageLoad which should load all of the data into the <iframe>. Instead I get a bunch of errors:
There is the infamous Unsafe Javascript attempt to access frame with URL
When you manually run the onPageLoad() function (in hopes of it loading the content into the iframe) in the console/Firebug, you get
(in Chrome 15)
Error: SECURITY_ERR: DOM Exception 18
code: 18
message: "SECURITY_ERR: DOM Exception 18"
name: "SECURITY_ERR"
__proto__: DOMException
(in Firefox 7)
Error: Illegal document.domain value
document.domain = 'facebook.com';
I presume this has to do with cross-domain requests, but it seems like for other people, they just get the error but the popup still loads properly. Any ideas how to get this to work?
This is a known Facebook bug: http://developers.facebook.com/bugs/293075054049400
Basically, one gets this behavior if secure browsing is enabled on the Facebook user's account.
If you have secure browsing disabled (as it is default) here is another possible solution:
You cannot use localhost in the og:url since Facebook cannot surf that page to get the data. So when developing, enter the live site URL in og:url, og:image, the like/share button url etc. Even that might not help, the click needs to be made on the live site, when I deployed it worked fine.
Anyone know a work around for this to make it easier when developing locally?