I need to run a script after window get resized and isotope finish operating.
I thought callbacks would help but they're not fired in case of window resize.
As I need the updated container 's width value after resize, is there another way ?
Thanks for your help!
this worked..
docs
Similiar to a callback, onLayout is a function that will be triggered after every time an Isotope instance runs through its layout logic.
$('#container').isotope({
onLayout: function( $elems, instance ) {
// `this` refers to jQuery object of the container element
console.log( this.height() );
// callback provides jQuery object of laid-out item elements
$elems.css({ background: 'blue' });
// instance is the Isotope instance
console.log( instance.$filteredAtoms.length );
}
});
i was looking into that eather and couldnt find a solution. so i picked this ugly one:
$(window).smartresize(function () {
setTimeout(function () {
//your function
}, 810);
});
so on resize i set a timeout that calls 810ms after isotope relayout, which should take 800ms in jquery, or 0.8s in css3.
like is said, its ugly, but for now i fits the purpose..
Related
I am trying to capture scroll start/stop events for a page control. I want to find out if the last field of the page is in the viewport. The way I am trying to figure out if field is in the viewport is by using the method getBoundingClientRect(). All this works fine but I am not able to invoke this method as I am not able to capture the scroll event. I intend to call this method inside the event handler for scrollstop, so I know the user has stopped the scroll and now is the time to check if the field is reached.
Using this link to find out the events that can be handled:
https://sapui5.hana.ondemand.com/#/api/module:sap/ui/events/ControlEvents
It is a touch device so need to figure out how to handle touch event as well.
Currently, below is the code for mouse scroll which is not working. Other events like clicked, mouseover are working.
How to get onscrollstart and onscrollstop to work?
In controller.js
onAfterRendering: function () {
controller.getView().byId("PAGECONTROLID").addEventDelegate({
onclick: function(){
console.log("clicked"); // works on all panels within the page
},
onmouseover: function(){
console.log("mouseover"); // works on all panels within the page
},
onscroll: function(){
console.log("onscroll"); // IS NOT CORRECT EVENT, but tried it anyway
},
onscrollstart: function(){
console.log("scroll start"); // DOES NOT WORK
},
onscrollstop: function(){
console.log("scroll stop"); // DOES NOT WORK
}
})
Good morning guys, all right?
I render a grid with handlebars, after that, I need to adjust the height of the cards and activate another jquery plugin referring to a select options that is rendered by handlebars.
When I call the functions to adjust the height of the cards and activate the aforementioned plugin, right after the handlebars process does not work, but if I put a settimeout, most often works, but AI depends on the speed of the Internet, hard code....
I didn't find any reference to callback in relation to handlebars.
Following part of the code:
var source = $("#nome_template").html();
var template = Handlebars.compile(source);
$('#container_result').html(template(data));
setTimeout(function() {
funcaoAuxiliar();// function that adjusts height and activates the Select options plugin.
}, 3000);
Can someone give a help?
Thank you
Depending how your script containing the funcaoAuxiliar function is loaded.
If you load it via a script tag : This answer may help you
Verify External Script Is Loaded
If you load the script via an ajax call : use a callback function (example via jquery below)
$.getScript( "js/funcaoAuxiliar.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
// Do your stuff here once script is loaded
funcaoAuxiliar();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Is there any openui5 event Handler for orientationchange and window resize ?
onInit: function() {
var data;
this.drawChart(data); // working fine
$( window ).resize(function() {
this.drawChart(data); // not working
});
},
drawChart: function(data) {
//code for draw chart
}
OpenUI5 has built-in functionality for detecting orientation change as well as when there is a responsive size change (desktop->tablet for example).
Take a look at sap.ui.Device.orientation's attachHandler event:
Registers the given event handler to orientation change events of the
document's window.
Here is an example of using sap.ui.Device.orientation.attachHandler:
sap.ui.Device.orientation.attachHandler(function(mParams) {
if (mParams.landscape) {
alert('in landscape mode');
} else {
alert('in portrait mode');
}
});
Also of use is sap.ui.Device.media's attachHandler for detecting when the window is resized to a different range-set.
For directly listening to when the window is resized it looks like you already have a solution for that, just make sure you keep track of the correct scope to use:
var self = this;
$( window ).resize(function() {
self.drawChart(data);
});
I found the solution
this.* will not work inside jquery as this has a different meaning wherever its encapsulated...
in openui5 *.view.js this implies the view object
in *.controller.js this implies the controller object...
in jquery this implies the component in which it is placed or whatever it is referring to in that context...
you cannot simply mix "this" wherever you like
sap.ui.controller("oui5mvc.controllerName").drawChart(data);
I upgraded the kendo library to the 2014Q1 framework which had a few nice features that they were adding, however when I did that it broke any widget (grid, tabStrip, select lists, etc.) from rendering at all. I tracked it down to the layout/view not being able to activate the widget without being wrapped in a setTimeout set to 0. Am I missing something key here or did I build this thing in an invalid way?
http://jsfiddle.net/upmFf/
The basic idea of the problem I am having is below (remove the comments and it works):
var router = new kendo.Router();
var mainLayout = new kendo.Layout($('#mainLayout').html());
var view = new kendo.View('sample', {
wrap: false,
model: kendo.observable({}),
init: function() {
// setTimeout(function(){
$("#datepicker").kendoDatePicker();
// }, 0);
}
});
mainLayout.render('#container');
router.route('/', function() {
mainLayout.showIn('#app', view);
});
router.start();
Admittedly, I don't fully understand it, but hope this helps.
Basically when you try to init the #datepicker, the view elements have not been inserted into the DOM yet. You can put a breakpoint inside the init function, when it hits, check the DOM and you will see that the #app is an empty div, and #datepicker does not exist yet (at least not on the DOM).
kendo.Layout.showIn seems to need to exit in order for the view to finish rendering, but when it initializes the view's elements, it thinks the render is done and init is triggered incorrectly ahead of time. The setTimeout works because it runs the kendoDatePicker initialization asynch, the view is able to finish rendering before the timeout function.
Workarounds...
Trigger the view rendering from the view object itself:
var view = new kendo.View('sample', {
init: function() {
$("#datepicker").kendoDatePicker();
}
});
router.route('/', function() {
view.render('#app');
});
Select and find the datepicker from the view object itself:
var view = new kendo.View('sample', {
init: function() {
view.element.find("#datepicker").kendoDatePicker();
}
});
router.route('/', function() {
mainLayout.showIn('#app', view);
});
Near the bottom of this thread is where I got the idea for the 2nd option. Maybe someone else can come around and give a better explanation of whats going on.
I think I typed the code right, but when it runs, p fades out and in. (the toggle is in tab %)
Code
It's because you're calling this function directly after it.
$(function(){
$('p').fadeOut();
});
Take a look at this.
http://jsfiddle.net/8Wv7M/8/
You need to combine the fadeIn() method with the toggle() method. There is a method specific to combining toggle with fade: fadeToggle()
If you don't care about the fade effect, then nevermind had a working example above (comment 2).
See this jsFiddle
$(document).ready(function () {
$('#tabs').tabs();
$('button').button();
$('button').click(function () {
$('p').fadeToggle('slow');
});
});