We Keep Coding

Dynamically adjusting Kendo UI tooltip position?

I surprisingly have not found anything on this issue while googling around for it. My use case seems fairly straight forward, the kendo ui tooltip overflows the window if it should go out of the window.
So, I want to keep the tooltips to the right or left of my elements. I have the tooltip set up like this:
var clickTooltip = $('#some-element').kendoTooltip({
filter: '.tooltip-eles',
position: 'left',
width: 250,
showOn: 'click',
autoHide: false,
content: kendo.template($('#tooltipTemplate').html()),
show: function(e) {
console.log(e);
var tooltipElement = e.sender.popup.element;
var tooltipPosition = isTooltipInBounds(tooltipElement);
e.sender.setOptions({position: tooltipPosition});
}
}).data('kendoTooltip');
Where isTooltipInBounds checks if the tooltip goes off the right or left side of the window, and returns the opposite direction, which I want the tooltip to be on to avoid any overflow.
So, for the case where the tooltip extends off the right side of the window, it returns left. So I setOptions and put position as 'left', but the tooltip does not change positions.
I am not sure of how I may be able to dynamically change the position setting of the tooltip to the side of my element that has space for it. Does anyone know how you might do this?

I'm hesitant to post this answer as it is a bit hack-y and uses bits of non-public-api/private code of the Tooltip widget, and requires polishing to be remotely production, but...
The problem with your current code is that the show event of the Tooltip fires after the Tooltip is already shown, so attempting to change the position here is too late.
There is no built-in beforeShow event on the Tooltip.
But, internally the Tooltip is using a Popup widget(Popup widget documentation).
The Popup widget has an open event that does fire before the Popup is shown, which is also cancel-able FYI.
So, if you can attach a handler to the open event of the Tooltip's internal Popup, you can make changes to the Popup before it is shown.
Unfortunately, the internal Popup widget of the Tooltip is not constructed until the Tooltip is shown for the first time, which makes it difficult to attach the handler when you setting up Your Tooltip.
Initialize the Tooltip:
var tooltip = $('#some-element').kendoTooltip({
position: 'left',
width: 250,
showOn: 'click',
autoHide: false,
content: "It's the tooltip!",
}).data('kendoTooltip');
HACK #1, force the creation of the internal Popup widget so that we can attach our handler to its open event:
tooltip._initPopup();
This uses a "private" method of the Tooltip that it calls the first time the Tooltip is shown and sets up its popup member.
Attach our handler:
tooltip.popup.bind("open", function (e) {
// Figure out position...
var tooltipPosition = isTooltipInBounds();
console.log(tooltipPosition);
// Map tooltip position to Popup position using mapping defined inside Tooltip widget code...
var popupPosition = mapTooltipPostionToPopPosition(tooltipPosition);
// Set position of Popup before it is shown.
e.sender.setOptions(popupPosition);
});
This is doing a few things:
Performing your logic for determining the position of the Tooltip, which I have faked with a random number generator for fun. You will need to somehow get the tooltip target in here to perform your actual logic.
function isTooltipInBounds() {
var tooltipPosition;
switch (Math.floor(Math.random() * 2) + 1) {
case 1:
tooltipPosition = "left";
break;
case 2:
tooltipPosition = "right";
break;
};
return tooltipPosition;
}
HACK #2: Mapping the Tooltip position to Popup position. Internally, the Tooltip does this during _initPopup() using a mapping array that is defines privately(which I have copied):
function mapTooltipPostionToPopPosition(tooltipPosition) {
var POSITIONS = {
bottom: {
origin: 'bottom center',
position: 'top center'
},
top: {
origin: 'top center',
position: 'bottom center'
},
left: {
origin: 'center left',
position: 'center right',
collision: 'fit flip'
},
right: {
origin: 'center right',
position: 'center left',
collision: 'fit flip'
},
center: {
position: 'center center',
origin: 'center center'
}
};
return POSITIONS[tooltipPosition];
}
Passes the Popup position config to the Popup using setOptions.
See it in action(Kendo Dojo)
Since this is using a couple of internal/private structures from inside the Tooltip widget source code, it is fragile and subject to breaking if Kendo changes.
It also requires some CSS, etc to make it look nicer and whatnot.
If this was me looking for this functionality, I would submit Kendo support ticket asking if it was possible as they can be super helpful, even if we are trying to do unsupported things....but I'm a paying customer so that may not be possible for you.

Loading spinner and message displaying when back button clicked

When links on my page are clicked, a spinner and a message appear on the page. It works, and they disappear appropriately when the new page is loaded in.
I utilized spin.js found here to implement the loading spinner.
I found a bug though. When a user clicks the back button on their browser, it goes back to the previous page, but in the state of displaying the spinner and error message. I want to of course go back to the state where the message is hidden and the spinner is not showing.
According to this post, it sounds like the issue might have to do with cacheing.
I am using the jquery-turbolinks gem
Below is my code:
#app/assets/javascripts/foo.js
$(document).ready(function(){ #for turbolinks compatability
(function default_hide_waiting_message(){
$("#waiting_message").hide();
}());
(function display_loading_spinner_and_message(){
$(".show_loading_spinner_on_click").on('click', function(){
var opts = {
lines: 12 // The number of lines to draw
, length: 7 // The length of each line
, width: 5 // The line thickness
, radius: 10 // The radius of the inner circle
, scale: 1.0 // Scales overall size of the spinner
, corners: 1 // Roundness (0..1)
, color: '#000' // #rgb or #rrggbb
, opacity: 1/4 // Opacity of the lines
, rotate: 0 // Rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 100 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout()
, zIndex: 2e9 // Use a high z-index by default
, className: 'spinner' // CSS class to assign to the element
, top: '50%' // center vertically
, left: '50%' // center horizontally
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration (might be buggy)
, position: 'absolute' // Element positioning
}
var target = document.getElementById('spinner')
var spinner = new Spinner(opts).spin(target)
$("#waiting_message").fadeIn('slow');
});
}());
});

The issue is happening because the $(document).ready function isn't getting called when you hit back. You'll need to update your javascript to accommodate Turbolinks.
Instead of using $(document).ready try using the appropriate page event, such as page:load. The available options are listed in the Turbolinks docs
Your final javascript would have something similar to $(document).on("page:fetch", default_hide_waiting_message)

$(window).bind("pageshow", function(event) {
$("#waiting_message").hide();});

Setting height of fancybox 2.1.4 iframe dynamically after contents finish rendering

We have some jQuery graphs that load into a fancybox iframe. Recently, some of these graphs are too tall for the fancybox frame, and the design requirement is that there is no scroll bar unless the height is over 700px AND there is no more than 10px of whitespace above and below the graph.
I tried this:
afterLoad : function(){
//(...)
$('.fancybox-inner').height($('.fancybox-iframe').contents().height() + 20);
console.log($('.fancybox-inner').height());
}
The console.log() correctly displays the desigred height.
But the fancybox is still displayed with the default height.
Putting a breakpoint on the console.log() line, the page displays the fancybox frame on the top of the window, graph rendered and iframe with the correct height. When I release the debugger stop, fancybox moves the frame to the center of the viewport, and it is back to the default height (the same behavior when not in debug mode).
How can I make fancybox use the desired height? It depends on the graph, so I cannot set it in the options.

Dealing with iframes make things a bit difficult but you may try something like
$(document).ready(function () {
$("a.fancybox").fancybox({
type: "iframe",
fitToView: false, // we need this
autoSize: false, // and this
maxWidth: "95%", // and this too
beforeShow: function () {
// find the inner height of the iframe contents
var _newHeight = $(".fancybox-iframe").contents().find("html").innerHeight();
this.height = _newHeight
}
}); // fancybox
}); // ready
Notice we disable fitToView and autoSize to be able to set the preferred height, however we also need to set a maxWidth to avoid fancybox going off screen dimensions.
Also notice we used the beforeShow callback to set the this.height setting.

Get scroll position in JQuery when using onepage_scroll plugin

I'm using the great onepage_scroll plugin for a site. Below a set threshold the page reverts to normal scroll behaviour. However at this point - when I try to use scrollTop() to get the distance from the top of the page it always returns 0.
var vph = $(window).height();
var responsiveThreshold = 640;
$(".onepage_scroll").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: false, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: scrollCatchBefore, // This option accepts a callback function. The function will be called before the page moves.
afterMove: scrollCatchAfter, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: responsiveThreshold // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
});
// Fix menu if page is too small
if(vpw<responsiveThreshold) {
$("#navigation").hide();
/* Every time the window is scrolled ... */
$('body').scroll( function(){
var scrollPos = $('html').scrollTop();
console.log(vph);
console.log(scrollPos);
if(scrollPos > vph) {
$("#navigation").fadeIn();
} else {
$("#navigation").fadeOut();
}
});
}
I've also tried both of the following:
$('body').scrollTop();
$('.onepage_scroll').scrollTop();
$(window).scrollTop();

Looking at how onepage_scroll works, it is not moving the body or the divs in a typical manner. So scrollTop is not the solution here.
It is using translate3d on the following div in question...
<div class="main onepage-wrapper">
With the following modified styles as the plugin operates...
-webkit-transform: translate3d(0px, -100%, 0px);
This answer may be of use to you...
Get translate3d values of a div?

To know current index of section:
var nCurSect = $("section.active", ".main").data("index");
Then you can just multiply it to the screen height and get offset.

CarouFredSel - turn off infinite scrolling?

I have a horizontal scrolling carousel:
_gotoNext: function (that) {
//tjobbe - put funciton here to check if there is anything else after the last slide, then stop / disable the gotonext. must only scroll one if only one is available (or 2). same for go to prev
that.$element.find('.mediaCarousel').trigger("next", false);
},
//This method tells the mediaCarousel to go to the previous slide.
_gotoPrev: function(that, callback) {
that.$element.find('.mediaCarousel').trigger("prev", false);
},
http://jsfiddle.net/YVCTx/
I need it to STOP or at least disable the next button when it gets to the last item. If there is an un-even number I also need it to only scroll one or two items, or let it do the full three.
My current code doesn't seem to be paying attention to the built in "infinite: true (or false)" option.
For example, I have 7 items at the moment, and I scroll 3 at a time. I'd like to stop at the third scroll, so that the second scroll only goes as for as the items in the list.
Any ideas if this is possible?

It seems that there is a circular and an infinite option which you can set.
I would imagine one of those would do what you want (most probably the infinite one):
$('#carousel').carouFredSel({
circular: true, // Determines whether the carousel should be circular.
infinite: true, // Determines whether the carousel should be infinite. Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.
responsive: false, // Determines whether the carousel should be responsive. If true, the items will be resized to fill the carousel.
direction: "left", // The direction to scroll the carousel. Possible values: "right", "left", "up" or "down".
width: null, // The width of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable widths), "auto" (measure the widest item) or a percentage like "100%" (only applies on horizontal carousels)
height: null, // The height of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable heights), "auto" (measure the tallest item) or a percentage like "100%" (only applies on vertical carousels)
align: "center", // Whether and how to align the items inside a fixed width/height. Possible values: "center", "left", "right" or false.
padding: null, // Padding around the carousel (top, right, bottom and left). For example: [10, 20, 30, 40] (top, right, bottom, left) or [0, 50] (top/bottom, left/right).
synchronise: null, // Selector and options for the carousel to synchronise: [string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example: ["#foo2", true, true, 0]
cookie: false, // Determines whether the carousel should start at its last viewed position. The cookie is stored until the browser is closed. Can be a string to set a specific name for the cookie to prevent multiple carousels from using the same cookie.
onCreate: null // Function that will be called after the carousel has been created. Receives a map of all data.
});
Source: documentation