I have a div with images scrolling throw responsive slides and next to this div I have navigation buttons to change pages.
I need that buttons to be centered vertically with the images and I have a function to do it:
function CenterArrow()
{
var posV=($("#slider1").height() - $("#navegacao").height())/2;
$("#navegacao").addClass(" visible-lg visible-md");
$("#navegacao").css('top',posV+'px');
}
$(function()
{
$("#slider1").responsiveSlides({
maxwidth: 400,
speed: 800,
timeout: 4000,
after: function(){
CenterArrow();
}
});
$("#slider1").show();
});
In the responsive slides there is an adjust of some image's height, so I need to call CenterArrow after resposive slides.
I tried to put it in the after callback, as you can see in the code above, but in the first slide the navigation buttons don't show.
I've also tried in the before callbakc, and although it shows a few seconds earlier it still doesn't show in the first slide.
Is there a ready callback, or something similar?
Thanks
Related
I'm using zoomcharts geomap in a div in my page. While I place the cursor over the map and scroll, then the map will zoom. I want to disable the zoom functionality and I want to scroll the page if I scroll while cursor is over the map.
I tried to disabled the zoom using the zoomcharts documentation below.
Interaction: {
zooming: {
enabled: false
}
}
This helps to disable the zoom only but I want the page to scroll. any idea on how to do the same?
You can do it like this:
chart = new GeoChart(options);
setTimeout(function(){
chart._impl._map.scrollWheelZoom.disable();
}, 100);
I've got a StackLayout where one of the entries is a GridLayout of a fixed size. Normally this GridLayout is not visible.
On tapping a button, I'd like the GridLayout be made visible - but I'd like to animate it open - - like a menu open.
Any ideas?
Actually toggling visibility is not too bad - it seems to animate the open - any way to control the speed?
The close operation is maybe too fast for what I'm trying to achieve.
You could animate the opacity of your grid. so when you click on it you would
// View is your gridView, this would hide it completely
view.opacity = 0;
// when you want to show it.
// fade in view.
view.animate({
opacity: 1,
duration: 250
}).then(() => {
//Set the visibility to collapsed after the animation is complete
//I believe you will want to do this so that the surrounding views adjust accordingly.
view.visibility='collapse';
}, (err) => {});
// when you want to hide it.
// fade out.
view.animate({
opacity: 0,
duration: 250
}).then(() => {
view.visibility='visible';
}, (err) => {});
You also may want to look into translate for you animations so you can move view down, left, up, right any way you want.
I am using bootstrap template and Kendo Window and so far positioning of modal kendo windows wasn't too hard.
But now as I a use a different layout for a certain area, I find myself having problems with that matter.
following code is expected to create a centered (x-axis) modal kendo window:
#(Html.Kendo().Window()
.Name("Window1")
.Visible(false)
.Position(builder => builder.Top(100))
.Draggable()
.Content(#<div class="kendoWindowContent"><p>Please wait...</p><div class="k-loading-image"></div></div>)
.Width(1000)
.Title("Title1")
.Actions(actions => actions.Close())
.Modal(true)
.Resizable())
..and displaying via:
var wnd = $("#ownerVoucherCreateWindow").data("kendoWindow");
wnd.refresh({
url: '#Url.Action("Voucher_Create", "OwnerVoucher")'
});
wnd.open();
The window is not beeing displayed in the middle of the x axis.
Are there any constraints in order to have the kendo window beeing centered.
Window centering requires the usage of the center() method. Since the Window content is loaded via Ajax, you need to center the widget in its refresh event.
var wnd = $("#ownerVoucherCreateWindow").data("kendoWindow");
wnd.one("refresh", function(e) {
e.sender.center();
});
wnd.refresh({
url: '#Url.Action("Voucher_Create", "OwnerVoucher")'
});
wnd.open();
It is also possible to trigger centering in every refresh event, instead of just once.
Another option is to set explicit width and height. In this case you can center the Window at any time, because the widget dimensions will not change after changing (loading) the content.
ok I guess I was just lucky that all my kendo windows happened to be displayed centered although specifying an explicit offset to top like described.
I assumed, that the window would automatically center on y-axis when having only an x-axis position set.
As it seems this is not the case. I don't really know why this has been working in the past.
Anyway, I figured out a way to center the window depending on the browsers' viewport and window width:
just in case anybodes cares...
function displayWindowCenteredOnYAxis(kendoWindow) {
var windowOptions = kendoWindow.options;
var pos = kendoWindow.wrapper.position();
var viewPortWidth = $(window).width();
var wndWidth = windowOptions.width;
pos.left = viewPortWidth / 2 - wndWidth/2;
kendoWindow.wrapper.css({
left: pos.left
});
kendoWindow.open();
}
Usage:
var wnd = $("#id").data("kendoWindow");
wnd.refresh({
url: '#Url.Action("Action", "Controller")'
});
displayWindowCenteredOnYAxis(wnd);
I have a Kendo ui chart which displays a column chart from a dynamic data source. But occassionally, the chart opens half the size of the available space. When I click on some links or change the date, it resizes itself. Any idea why its causing it?
In the datasource change event, its showing the container div's width as 0 when it shows this behaviour. I can give more details if needed
I tried the refresh method as given in one of the answers but its not of help
This happens generally when you open a chart in a animated window before it is finished expanding.
My suggestion is to redraw the chart when you are sure everything is loaded and fully opened.
$("#myChart").data("kendoChart").redraw();
If you have not disabled animations you may want to do that before this and re-enable them after.
$("#myChart").data("kendoChart").options.transitions = false;
When you have got all the necessary data in the controller you can call a Javascript CallBack function in which you can set the transition to false and then redraw the chart and set transition to true, also you can hide the chart by default and make it visible on Javascript CallBack function
Try this
var chart=$("#chart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if(chart)
{
chart.redraw();
}
Thanks
This is what I using for my charts:
if($("#areaChart").data("kendoChart")) {
$("#areaChart svg").width(Number($('.k-content').width()));
$("#areaChart svg").height(Number($('.k-content').height()));
$("#areaChart").data("kendoChart").refresh();
}
Taken from here
Have you checked the resize() Method?
I fixed it by adding a small delay after calling the CreateChart() function as below:
CreateChart(this.id, this.id + " this week", "week", null);
sleep(1000);
its working fine now
$("#divSensingData").kendoChart({
chartArea: {
width: 900,
height: 500
},
i did face same problem after resize kendo chart.
$(window).resize(function () { $("#chart").data("kendoChart").refresh(); });
it's working
One thing I don't understand is how did Minima.pl (http://minima.pl/pl) implement that feature within Isotope library where clicking on a thumbnail opens up a bigger gallery of images (a single clickable image, clicking on it makes it cycle through the rest of the images in a gallery) while resorting the Isotope items?
Here is how far I got -> http://tinyurl.com/cr5kzml
Anyone have any ideas on what I'm missing, how do I get this working?
Well, I am author of minima.pl website ;).
The part which takes care of repositioning of tiles after enlarging clicked one:
$('#mainContent').isotope('reLayout', function(){
$('html, body').animate({scrollTop: item.offset().top - 10}, 400);
});
It also takes care of scrolling browser window to top of clicked tile.
I am triggering the above action after loading clicked tile content (by AJAX). The trick is to trigger it simultaneously with enlarging the clicked tile.
I will be glad to answer any additional questions.
Actually, this is simple to achieve. Normally, a click on an Isotope .item can, for example, maximise it, another click minimises it. If you want interactivity inside a clicked-on Isotope .item, you simply don't attach the minimisation function to it. Instead, clicking on another Isotope .item minimises the previously selected = maximised item. By keeping track of the previously selected .item, clicks inside the maximised .item won't close it. Basic logic for an example that allows maximising and minimising only by clicking on a "header" zone inside each Isotope .item:
$(document).ready(function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 128 // corresponding to .item divs width relationships
}
});
// $container.isotope('shuffle'); // randomise for every new visitor
$items = $('.item'); // to reference methods on all .item divs later
$('.header').click(function () { // instead of registering the entire .item div (default use), only its .header div (child div) receives clicks
var $previousSelected = $('.selected'); // necessary for switching
if ($(this).parent().hasClass('selected')) { // use $(this).parent() (not $(this)), because the .header div is a child of the .item div
$(this).parent().removeClass('selected');
$(this).parent().children('.maximised').hide();
$(this).parent().children('.minimised').show();
$items.find('.minimised, .header').removeClass('overlay'); // returns all .minimised divs to previous state after the .item is closed again
} else {
$previousSelected.removeClass('selected');
$previousSelected.children('.minimised').show();
$previousSelected.children('.maximised').hide();
$(this).parent().addClass('selected');
$(this).parent().children('.minimised').hide();
$(this).parent().children('.maximised').show();
$items.not('.selected').find('.minimised, .header').addClass('overlay'); // adds .overlay on each .item which is not currently .selected
}
$container.isotope('reLayout'); // comment out to mimick old masonry behaviour
});
});
The actual interactivity inside each Isotope .item can then be coded however you like; hardcoded or dynamic...
By click on a thumbnail a ajax function return the same gallery except a bigger replacement for the thumbnail. Then let isotope rearrange the gallery. You can find an example here: http://www.maxmedia.com or http://www.phpdevpad.de (my own site).