jquery ui effect with meteor onRendered callback not working - jquery-ui

I want to add a jquery ui effect to a div element when the template is rendered , so I tried using the onRendered callback :
Template.home.onRendered(function(){
this.$('.hidden').show('fold',1000).removeClass('hidden');
});
the removeClass bit work , but the effect is not working , is there any solution to this problem ?

Related

JQuery ui - mobile: combine sortable with swipe event

Hello I'm trying to combine in a div the .sortable operation of jquery-ui with swipe evente on mobile device. Unfortunately when a div is .sortable it does not handle the 'swipe' event.
Any Ideas?
jQuery UI doesn't support touchevents at the moment. You could use a plugin which converts the mouseevents as touch events here is link to the Homepage and Github. Thats the only way i know how to make jQuery UI widges touchable.

jquery mobile + knockout hide issue

I am stuck on this, I am trying to unhide / hide jquery mobile flip switches using knockout. When knockout action is applied the jquery mobile controls stopped working. Could you please help me on this
here is the code
target.formattedValue(target());
return target;
and jsFiddle where the third control would hide if female selected but when male selected again the control disabled and not working
http://jsfiddle.net/FU7Nq/45
San.
When inspecting the rendered DOM of the following element:
<div data-bind="if: isMale">...</div>
you can see that after the radio button is changed to female, then the entire rendered HTML of that DIV is removed. Then, when switching back to the male, the content of that DIV is rendered back, but is this means that events are still attached to those slider HTML elements? I'm not sure how the way jQuery mobile attached the events, but it seems to me that this is the problem, cause you are clicking on the slider, but no action is taken. You can workaround this by recreating the Slider again:
$("#select-ifmale").slider()
Eventually this can be a bug in jQuery mobile. Sorry for suggesting this as an answer, but I don't have enough points, just to comment on your question.

Canvas width=0 when using JQuery mobile

I'm trying to get my Three.js app to work with JQuery Mobile and have run into a little issue. I'm new to JQuery mobile, but everything I have read says that I should use:
$(document).on('pageinit', function(){
});
instead of
$(document).ready() {
});
my problem is that if I move my initialization code from document ready to to pageinit, then nothing is being displayed even though the rendering loop is running.
I have looked at the html and discovered that the canvas element that Three.js/WebGL reders to has a width of 0 when using pageinit, and a width matching the display with when using document ready.
Everything I have read about JQuery Mobile warns against using document ready, so I'd really like to get this to work with page init. Can anybody help me figure out why the canvas element has a zero width when using pageinit?

Best way to customize JQuery UI Resizable method

I modified one method of JQuery UI Resizable to achieve a centered resize. This works fine if I just link to my modified jQuery UI source. But I would like to link to the CDN hosted minified JQuery UI code and just inject the modified _respectSize method when making the call $("#selector").resizable({ .. });
What is the best way to do this?
Include this after bringing in jQuery UI and before you create your resizable widget.
$.ui.resizable.prototype._respectSize = function() {
//Do your custom thing here.
};

Selenium Test to test Jquery Effects ( Slide, fade)

We have a web application and we are using JQuery UI transition effects fade and slide. We would like to automate this using selenium.
Does any one has any suggestion how can I achieve this goal ?
Thanks
yes man this is doable , for example :
to test JQuery fade you should first understand the logic for this method,
JQuery fadeOut() change the element display to display: none;
so you can get the element display value using JavascriptExecutor
before runing jQuery fade and after ,
and check if the display value as you expected :
((JavascriptExecutor)driver).executeScript("return $('#yourElementSelector').attr('style')");
note : change #yourElementSelector to your css selector
and save the Executor into var so you can test the value like so

Resources