I'm trying to use the jQuery.Gantt plugin with IkiWiki. My code has created the following HTML fragment:
<script src="./jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery.fn.gantt.js" type="text/javascript" charset="utf-8"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$("#meetings").gantt({"minScale":"months","scale":"weeks","maxScale":"days","source":[{"desc":"Meetings","name":"meetings","values":[{"from":"/Date(1381834800000)/","label":"meeting/20131015 gs progress","to":"/Date(1381831200000)/"}]}],"navigate":"scroll"});});</script>
which should render one event on my chart. I've also copied all the CSS from the project's style.css into my CSS.
The page on which this chart renders is being served up by Apache running locally.
The problem I'm getting is that it renders like this:
PNG
The calendar display is not right:
I'm not sure how the months are supposed to be displayed;
there's a grid which I think is supposed to be further down.
One good thing is that my event is actually displayed.
I'm not sure how to proceed with debugging this.
I think it is because Jquery Gantt is not compatible with Twitter Bootstrap 3.
In this example, they use v2.3.2
Consider checking the current, min and max scale for your gantt in the initialization object. That can be changed using the scaling buttons on the gantt chart as well.
To debug, I would gladly suggest the Firebug browser plugin
jQuery.Gantt is a cool plugin, but doesn't work well for sub-scale events. Anything rendered will always fill at least one grid, and be rounded to the nearest grid insert. That's why your meeting fills a full day from the pic.
As Darwin said, your problem is related to how Bootstrap resets the CSS for the page.
The stylesheet that comes with Bootstrap 3.0 "helpfully" resets the box-sizing CSS property for every single element on the page to be border-box, whereas the plugin you're using expects content-box, which is indeed the default box model. This messes with how the plugin sizes different elements on the page, resulting in what you're seeing.
The solution and workaround are both in the tracker for the plugin itself:
https://github.com/taitems/jQuery.Gantt/issues/102 .
Related
I have an html page with an image map. I am using ImageMapResize (jquery plugin) to allow browser resizing without losing my image-map coordinates. I am trying to also add ImageMapster (jquery plugin) to add styling to image map buttons.
It seems as if I can only get one or the other plugin to work. While both of these plugins are working on the page individually, if I use both the image map resizing will not work properly as it seems like the imagemapster plugin is blocking it from working somehow.
Is there a way to use both of these plugins without them impacting each other and to have them work simultaneously together?
Here is how I have my script tags. I have them at the end of my body tag. I've tried changing the order of the two methods but it just creates a different problem. Seems like I cant get the two plugins to cooperate. Thanks for any help.
<script src="https://cdnjs.cloudflare.com/ajax/libs/imagemapster/1.5.4/jquery.imagemapster.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>$('img').mapster();</script>
<script>imageMapResize();</script>
I am trying to implement Highcharts to display data on my web application. At the moment, I just want to see how Highchart works on my website so I have simply copied code from this fiddle and implemented it on my site. But for some reason, the chart does not display.
It may just be my inexperience (or quite frankly, my stupidity) but I don't know why the fiddle isn't loading. Have I missed anything?
Here is what I have done:
I have added the following to the head of the page:
<script src="https://code.highcharts.com"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="javascript/chart.js"></script>
chart.js is a seperate file, which consists of all the JavaScript from the fiddle.
Whenever you observe a problem, the first thing you need to check is whether there are any errors. When it comes to Javascript, you need to check the browser console. In this case, the $ in the error message is a strong hint that you forgot to include a script tag before the other script tags having its src attribute pointing to the location of jquery.
does anybody has a practical experience with setting up the Colorbox in Drupal 8? I'm trying to have the "common" functionality so after I click the image thumbnail it will be opened withing overlay Colorbox window.
I have installed everything I'v found related to the Colorbox but no success.
In the page code I can see:
<a href="/path/to/img.jpg" class="colorbox">
Also set of the colorbox related JS files:
<script src="/core/assets/vendor/jquery/jquery.min.js?v=2.1.4"></script>
<script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.0.5"></script>
<script src="/modules/colorbox/js/colorbox.js?v=8.0.5"></script>
<script src="/modules/colorbox/styles/plain/colorbox_style.js?v=8.0.5"></script>
<script src="/modules/colorbox_inline/js/colorbox_inline.js?o3m4ww"></script>
<script src="/modules/colorbox_load/js/colorbox_load.js?o3m4ww"></script>
All files are at the location as stated in src attributes above. Also Firebud doesn't show any JS related issue.
But if I click that A element the image is loaded as a new page without any Colorbox overlay :(
Thanks
So finaly - thanks to comments from Aram Boyajyan who pointed me to check the other themes where it worked, I've realized I should go back to school. Or at least back to good old times where were no CMSes or frameworks and we were supposed to pass the code throught the w3c validator to proudly display that cool icon about our site compliance ;-)
If I'd do that once I've updated each template file it would save me 3 nights of investigation.
So to summarize - due to missing some of the closing div elements Colorbox were not able to update corresponding elements properly and therefore were not working as expecte.
That's it.
I'm trying to implement bootstrap tooltips on my site - you'd think it would be easy enough, but something is not working correctly - the bootstrap tooltip is not functioning.
I'm calling all the right scripts, stylesheets and javascript - I believe. I'm following the example here: http://jsfiddle.net/TSZSL/171/ and I believe this javascript could be throwing me?
$('.example').tooltip();
Here's the page I'm referring to. I just get a regular tooltip with no bootstrap functionality.
The problem is your reference to boostrap's tooltip library. You can't link to it like that; it's not a CDN...
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>.
Use netdna's complete JS package or host the individual script yourself. See BootstrapCDN.
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
I may be missing something completely obvious here but when I call $("#zoom_slider").slider() I get no slider appear.
If you goto this url you can replicate the issue by click on any of the images in the main window, this will then load a larger image (currently of a watch). The slider should appear to the top right underneath where it says "Zoom" but it does not...
I include the jQuery UI from google via this call:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
I can't say for sure, but what I would try to do would be to put all of your script declarations in the <head></head> section of your HTML. Also, make sure you are using the most up to date versions of jQuery UI and jQuery.