I have the following coffeescript, which works except for the fact that when images take a while to load it runs before the images are loaded and then doesn't have the desired effect:
ready = ->
jQuery ->
$('.box').find('img').each ->
imgClass = if #width / #height > 1 then 'wide' else 'tall'
$(this).addClass imgClass
return
return
$(document).ready(ready)
$(document).on('page:load', ready)
How can I run my function only after the entire window is loaded?
My best attempt so far looks like
window.onload = ->
$('.box').find('img').each ->
imgClass = if #width / #height > 1 then 'wide' else 'tall'
$(this).addClass imgClass
return
return
but it doesn't work. I've tried several other possibilities too but I can't figure out whats wrong.
My question is different from this one since I don't want to wait until all the coffeescripts have finished loading, I want to wait until all of the images in my webpage have loaded.
To execute your desired code AFTER all images are loaded, use jQuery's load() method on the window. document watches the DOM, while window watches the contents.
In coffee, it would look like this:
$(window).load ->
alert 'All images are loaded'
The difference between this and what you had is you were using window.onload whereas I'm suggesting $(window).load().
Related
Problem:
I have a grid with lazy loading and therefore my data is not in memory.
To show the check box to select/deselct all i used this Question.
My code looks like this:
Grid<CustomClass> grid;
...
// set selection mode
grid.setSelectionMode(SelectionMode.MULTI);
// make select all check box visible
GridSelectionModel<CustomClass> selectionModel = grid.getSelectionModel();
((GridMultiSelectionModel<CustomClass>) selectionModel)
.setSelectAllCheckboxVisibility(SelectAllCheckboxVisibility.VISIBLE);
The Problem is, that the check box does not work in the UI as you can see:
If i log the selected items with the following code the check box works as expected
grid.addSelectionListener(l -> {
log.info("selected: " + l.getAllSelectedItems().size());
});
Question:
What can i do that the check box also works in the UI?
The Solution i found that the checkoxes are updated in the UI is to add dataPovider.refreshAll() in the listener.
Code of the Solution:
grid.addSelectionListener(l -> {
...
dataPovider.refreshAll();
...
});
I've seen a couple answers but can't seem to figure out how to apply them.
I have a page that's two divs. A side nav div and a main div. On the page load, the js below loads up the html into the main div. The same function is used to jump around (via the nav) within the doc once loaded.
The problem is, there are also links within the HTML to the function since there are some self-referencing points, etc.
The side nav ones work fine, the ones within the HTML don't. I'm assuming it's a compiling issue of sorts, but I can't quite figure out how to compile it correctly.
Here's the JS:
Ctrler.loadPage = function(hash){
if(!hash){
var url = "filename.html";
var xhr= new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange= function() {
if (this.readyState!==4) return;
if (this.status!==200) return;
cur = this.responseText;
cur = cur.replace(/{{sitePath}}/g, jsPath.path);
document.getElementById('maindiv').innerHTML= cur;
$('#maindiv').html = this.responseText;
};
xhr.send();
}
else{
document.getElementById(hash).scrollIntoView();
window.scrollBy(0, -90);
}
}
EDIT: I changed the lines that populate the div to this:
$compile(cur)($scope);
$('#maindiv').append(cur);
but it still doesn't work. It loads the first time, but ng-clicks still don't work.
I figured it out.
I needed to compile $('#maindiv') after I added cur. Not cur
i want to display the ion-refresher programmatically. e.g on the first page load i load the data and want to show the ion-refresher. i've not found any build in function only _beginRefresh. this function will fire the refresher, however it will not set the style attribute TOP on the refresher element. therefore it is hidden behind the NAV.
currently i've created a dirty workaround.
let scrollcontent = document.getElementsByClassName('ion-page')[0].getElementsByTagName('ion-content')[0].getElementsByClassName('scroll-content')[0]
let rect = scrollcontent.getBoundingClientRect()
document.getElementById('refresher').style.top = rect.top.toString() + 'px'
this.myRefresher._beginRefresh()
i'm wondering if there is a better aproach.
thanks
ok i've found a better approach...
#ViewChild(Content) ContentDashboard: Content;
this.RefresherDashboard._top = this.ContentDashboard.contentTop.toString() + 'px'
this.RefresherDashboard._beginRefresh()
I've made an aplication with vala where at some point I have to process a lot of files. I've created a window to choose a folder and then I get the paths of files and make some proces on them.
I've added a progress bar to this window to show how many files have been processed but for some reason it remains always empty.
Code about window:
this.files_window = new Gtk.Window();
this.files_window.window_position = Gtk.WindowPosition.CENTER;
this.files_window.destroy.connect (Gtk.main_quit);
// VBox:
Gtk.Box vbox = new Gtk.Box (Gtk.Orientation.VERTICAL, 5);
this.files_window.add (vbox);
// Buttons to open and close
Gtk.Button cancel = new Gtk.Button.with_label ("Cancel");
Gtk.Button select = new Gtk.Button.with_label ("Select");
vbox.add (select);
vbox.add (cancel);
// proogress bar
this.progress_bar = new Gtk.ProgressBar();
vbox.add(this.progress_bar);
// conect select to method do_stuff
select.clicked.connect (do_stuff);
this.files_window.show_all ();
As you can see, I connect the button "select" to the method "do_stuff" where I get the paths of selected files and make some process.
I update correctlly the fraction of the progres bar because I've added some prints to know if the value is correct and it is. It's just that the windows is not refreshing, possibly because all the work it is doing with the process of the files. Here is the code about do_stuff() method:
// some proces to get paths of files in the list sfiles
double fraction = 0.0;
this.progress_bar.set_fraction (fraction);
int processed_files = 0;
foreach (string sfile in sfiles) {
do_some_proces_to_file(sfile);
processed_files += 1;
fraction = (double)processed_files/(double)sfiles.length;
this.progress_bar.set_fraction (fraction);
stdout.printf("Real fraction: %f\n", this.progress_bar.get_fraction());
}
The printf shows that the value of the progres bar is being updated but in the window the bar is always empty.
Am I missing something? Is it the correct way to do the progres bar? Should I made another thread to do the stuff?
As #nemequ says, your code is blocking the main loop thread (which handles both user input and scheduling/drawing widget updates), hence it the progress bar is not updated until the method completes.
Using a thread is one way solve the problem, however using threads can lead to a lot of bugs however since it can be difficult to make even simple interactions between threads safe.
An async method avoids this by interleaving the code with the other work being done by the main loop. An async version of your do_stuff() would be pretty straight-forward to write, simply declare it async and put a yield in the for loop somewhere:
public async void do_stuff() {
...
foreach (string sfile in sfiles) {
// all of this is as before
do_some_proces_to_file(sfile);
processed_files += 1;
fraction = (double)processed_files/(double)sfiles.length;
this.progress_bar.set_fraction (fraction);
// Schedule the method to resume when idle, then
// yield control back to the caller
Idle.add(do_stuff.callback);
yield;
}
}
You can then kick it off from your click handler by calling: do_stuff.begin().
Unless there is some relevant code you're not showing, you're blocking the main loop. One option would be to do everything in a thread, and use an idle callback to update the UI. The basic idea is something like:
new GLib.Thread<void*>("file-processor", () => {
foreach (string sfile in sfiles) {
/* do stuff */
GLib.Idle.add(() => {
/* Update progress */
return false;
});
}
return null;
});
Depending on your application you may need to add a mutex to avoid race conditions. You may also need to add some logic for canceling the operation.
A better option might be to use a GLib.ThreadPool. You'd still want to update the UI from an idle callback, but this would allow each task to execute in parallel, which could provide a significant speed-up.
If I were you I'd probably wrap it all up in an async function to keep the API tidy, but you don't really have to.
I'm having a really hard time getting animations to work in React. Perhaps there is something I'm fundamentally missing.
I'm doing this in coffeescript -- I hope you don't mind.
I've created a very simple UI. Theres a div with a title in it. When you click the title, the title is changed, and I want to animate a fade in/out transition using VelocityJS.
ReactTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)
{div} = React.DOM
TitleClass = React.createClass
displayName: "Title"
render: ->
(div {onClick:#props.changeTitle}, #props.title)
componentWillEnter: (done) ->
node = #getDOMNode()
console.log "willEnter"
Velocity(node, 'transition.fadeIn', {complete: done})
componentWillLeave: (done) ->
node = #getDOMNode()
console.log "willLeave"
Velocity(node, 'transition.fadeOut', {complete: done})
Title = React.createFactory(TitleClass)
MainClass = React.createClass
displayName: "Main"
getInitialState: ->
title: 'Main'
changeTitle: ->
if #state.title is 'Home'
#setState {title: 'Main'}
else
#setState {title: 'Home'}
render: ->
(div {style:{width: '100%', fontSize:'25px', textAlign:'center', marginTop:'20px'}},
(ReactTransitionGroup {transitionName: 'fade'},
(Title {changeTitle:#changeTitle, title:#state.title})
)
)
Main = React.createFactory(MainClass)
React.render(Main({}), document.body)
So thats it. Pretty self explanatory. This ReactTransitionGroup is still quite a mystery to me. It is my understanding that any of its children should get calls to componentWillEnter and componentWillLeave but that doesn't end up happening. According to the docs it seems that I should see the console.log "willEnter" but I don't.
I've been hung up on this for hours. Any ideas?
There are two problems I can see in your code above.
The first one is that you are using React.addons.CSSTransitionGroup instead of React.addons.TransitionGroup.
The second problem is that you are expecting componentWillEnter to get triggered on mount when in fact componentWillAppear is the method being triggered.
CSSTransitionGroup watches for actual uses of the CSS transition property written onto the elements. I'm not sure exactly how, but it sounds like Velocity isn't doing its work in a way that CSSTransitionGroup is twigging to. You may have to call componentWillEnter and componentWillLeave manually. In this situation, it doesn't sound like that'll be hard.
EDIT: oops, I missed that you don't have key attributes on your child components in the group. From what I can tell, componentWillEnter and componentWillLeave should get called, irrespective of anything else, if you get keys on those kids.
The solution ends up being to use React.addons.TransitionGroup. The CSSTransitionGroup is just a wrapper that does CSS stuff.
The other issue is that to get the animation callbacks, the children must have a key!
ReactTransitionGroup = React.createFactory(React.addons.TransitionGroup)
# {clip}
(ReactTransitionGroup {transitionName: 'fade'},
(Title {changeTitle:#changeTitle, title:#state.title, key:'title'})
)