I am currently trying to code my own JS drag and drop script (out of sheer curiosity and boredom, I know it would be much easier with a framework). My aim is a fully working Firefox3 version , IE can wait for now.
I just got stuck on a weird bug. When I drag the div for the first time, it works ok. When I drag it for the second time, it does not stick after releasing the button and I have to click once more to get it down. Third and consequent drags work flawlessly again (!?!).
Please see [the original page][1] (as I said, FireFox only for now) for an idea of what happens. The whole thing is done as a div with two events (onmousedown and onmouseup) using document.captureEvents(Event.MOUSEMOVE) for the intermediate movement. The script can be found [here][2] (disregard the bottom ajax part, it is prepared for some additional tricks and the bug stays if I take it out).
Please let me know if you have encountered something similar in the past or if you see a mistake somewhere. I know there may be better ways to go around the whole thing but I am specifically looking for a way to make my approach work.
EDIT: Chrome and Safari work.
EDIT: Taking the links offline, working on new version.
Well first up this works for me in FF3 if that's what you're asking.
This isn't going to be what you want to hear, but I strongly recommend you pick up a DnD method from mootools or jquery or similar. Just from an efficiency standpoint, DnD is a horrible thing to code up (done it a few times myself) and if you're not capable (no offence meant here) of resolving the numerous bugs that come up it's just going to be a huge drain of your time compared to just going with a robust mature implementation off the shelf. It is a hard thing to do.
If you do what to continue with your own code (as an exercise or out of pride - I can appreciate that :) ) this kind of problem is typically the result of either an event not being captured where you think it is because some other event got in the way first, a flag not being set where you think it is, or (or because of) an error which breaks out of your code at an unexpected point. Try and trace logically what's happening by logging out the event triggers.
If you could define how it wasn't working in more detail I might be able to trace it further (since I seemingly can't replicate), but I do suggest you explore the benefits of a solid library.
Related
I am trying to find some example code using a javascript library for a force directed graph in which the user can move any node around (and the graph responds dynamically) - but then each node can be clickable and open an "node detail" page (in a different tab).
I looked through D3.js, arbor.js, jit (javascript infoviz toolkit), springy. Those all look great and have demos which are close to what I want, but not quite there.
I'm not an experienced js programmer, I mostly do server side stuff.
My fear is that I might try to learn one of these libraries to try and implement my use-case only to find that it won't work for some reason. For example, one of these (D3) has a discussion in its forum that clicking a node is often mistaken for moving the node and there didn't seem to be a quick workaround. In another one (arbor.js), the front page (in addition to being minified) shows something close to what I want but the nodes which are movable are not clickable and the nodes which are clickable are not movable.
FF or Chrome is fine - I don't need IE support.
I am also open to something Flash based - as long as I don't need to compile anything in Actionscript/Flash - something with a js/html API.
Thanks.
I think that's a pretty good list of tools you have. Protovis?
I suspect it's actually not going to be much work to grab a click event from any JS-based tool-- but I haven't done that specifically with any of the ones you mention.
A couple years ago I did a prototype project using a pure Javascript implementation. Everything is just DOM nodes, so you can definitely grab clicks as necessary. It's fine, but since the code is not actively maintained (as far as I could find), I did have to do quite a bit to fit it to my needs. Using something with more recent and active development is a good idea. I also learned that performance was going to be an issue, especially in Firefox. You can play with my prototype and see where it breaks down-- which it does. I think 100 nodes or so is the danger point.
Good luck!
This is probably a common pattern in coding, though I am not knowledgeable enough to recognize it or use the correct terminology (I would've googled it then).
When you are creating an object that will invoke a method in a loop, but the content of the loop can change according to a certain set of conditions, do you do (pseudo-code):
method _method($condition){
switch($condition){}
}
or
method init($condition){
switch($condition){
case 1:
this._method = function(){};break;
case 2:
this._method = function(){};break;
....
}
}
I prefer version 1 as it is more maintainable, but I feel version 2 is lighter. Am I correct?
I realize the answer can differ quite a lot depending on the use case, so here is mine: I have a javascript slider, implemented as a jQuery plugin. depending on options, when the slider comes to the last frame, it either scrolls back to start, or seamlessly loops. Now, if it must seamlessly loop, then when each slide advance, I must set the element that has just disappeared on the left to be queued at the far right. Which means I have to detect when the element has disappeared from the view, and do a helluva of other checks for scrollLeft values and whatnot that I don't need to do if I am simply scrolling.
So how should I go about that?
I'm sure you understand this, but it's worth repeating:
If it ain't broke, don't fix it.
You can almost never find a performance problem in non-toy software by just thinking about it.
When people learn how to solve performance problems (as, IMHO, I have),
they are often asked what the secret is.
The secret is simple - don't guess, do diagnose.
Here's the method I use.
Everybody knows that, but they go ahead guessing anyway.
For one example, review the answers to this question.
Your use case seems to be simple and doesn't need much computing time, though you should use the code which is more readable for you and easier to maintain.
When using performance critical code you should keep the code within a loop as short/inexpensive as possible.
I am experimenting with jQuery and the animate() functionality. I don't believe the work is a final piece however I have problem that I can't seem to figure out on my own or by trolling search engines.
I've created some random animate block with a color array etc and everything is working as intended including the creation and deletion of the blocks (div's). My issue is within 2mins of running the page, Firefox 4 is already at more than a 500,000k according to my task manager. IE9 & Chrome have very little noticeable impact yet the processes still continue to increase.
Feel free to check out the link here: http://truimage.biz/wip300/project%202/
My best guess are the div's are being created at a greater speed than the 2000ms they are being removed however I was hoping an expert might either have a solution or could explain what I am doing wrong and some suggestions.
On another note, from the start of my typing this out till now the process is at 2,500,000k. Insane!m
It could be a lot of things other than just your script there. It could be a mem leak in one of the jQuery things you use, pretty hard to say.
Something you could try is this though:
Instead of creating new squares, use a "square pool". Let's say you create 20 squares and just keep re-using them instead of creating new ones.
You'd basically just have an array for the pool and take elements out from it when they are displayed, and put them back to it when the animation finishes.
There is a page that uses PHP to fetch search results from Google Search API and then it puts the results on the page some funny way in a circle. The code may look crappy but seems that it works more or less fine in Firefox. When you enter a search query and click submit button or Next/Previous links, it fills the wheel with results. The problem is its work in IE. It works there very slowly and then it doesn't clear the wheel before filling in new data, but puts it over that. My friend asked me to help him with this code. Please give me a piece of advice how I can fix it. Thanks so much!
Raphael runs very slowly under IE documented here.
As I understand it, VML itself in IE is fast enough, but the Raphael layer has some inefficiency.
I see you're using Raphael.js, which renders vector in VML/SVG (depending on browser). IE8 has degraded support for VML, unfortunately, and I hear it's also quite a bit slower than IE7. BTW, in IE7 it's kinda funny looking.
In terms of Raphael, it may be something as simple as resetting some context, I'm not sure. I've looked at Raphael before, but never used it.
I am aware that Javascript WYSIWYG editors use the inbuilt editor mode of the browser to function, but that comes up with various problems and issues.
Can an editor be built from scratch in JS, something like what Buzzword people have done with flash/flex? I came across this blog post recently and I am just wondering if this can be built (atleast to a moderate extent) using Javascript?
It depends what you mean by "from scratch". Google Docs provides a pretty good text editor in JS. Is that what you mean ?
Of course you can do it and it is not very difficult.
But before reinventing the wheel please take a look at all the existing ones.
Many of them are really very well written and open source.
Almost anything can be done with JavaScript. You have the basic building tools right there - you can intercept all mouse events and nearly all keyboard events. You can use a GIF animation for simulating the caret. The trickier part might be measuring the size of text so that you can position your caret where you need to. I'm not exactly sure how you could do that. But if you figure that out, the rest is doable. Although it will really require tons of wheel-reinventing code.
Reminds me of a little experiment I did sometime back... I basically tried to create a primitive editor by simply listening to keypresses on a DIV and to insert them into the DIV as a new node. So imagine, each character would be wrapped in a tag! It actually worked. But, once it reaches a couple of paragraphs, node insertion and deletion becomes rather slow. You will type a character, and it would only appear after a slight delay, and this simply unacceptable, and eventually I just gave up. Anyway it was just a random thing I wanted to try out..
Coming back to your question, I wonder if this can be replicated in JS alone as frankly the flash has superior raw processing power compared to JS. Even if it's technically feasible, I doubt whether it will be fast enough to actually work well. My two cents!
Atwood's Law:
Any application that can be written in JavaScript, will eventually be
written in JavaScript.