I got one serious problem, concerning a canvas carousel. I decided, as a first html/canvas/javascript approach, to try to make myself some picture carousel.
You can find it here, on everypage of my homepage http://www.wizopunk-art.com
I deactivated the carousel, so just...
var wizopunk = new backroundViewer("backgroundCanv");
..somewhere in your console
As you might sens right away, the animation isn't very effective.. It seems I got some kind of memory leak, but I'm unable to find it on my own.. I was hoping you might have some hint, like usefull tools or even if somebody want to throw an eye in my own script.. I got the impression that each picture I draw on the canvas is kept in memory..
here the link to the script :
http://www.wizopunk-art.com/javascript/carousel.js
I don't know if my description is precise enough, and I don't mean to bother or something.. so please just tell me if I'm missing something in my message
PS : sorry for my poor english..
First... a better way of creating a rendering loop is using requestAnimationFrame instead of setInterval. Another thing is rendering everything in background first. Overe here you can find quite many performance tips on developing with the canvas element. (http://www.html5rocks.com/en/tutorials/canvas/performance/)
Related
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
I have a problem getting an svg file and javascript file talking. They are both referred to in this html document - http://www.trjps.co.uk/image_store_old/button_tests/button_tester_A.html. I want a button click on an svg element (the small circle) to trigger a js function (an animation using rapael).
I got something like this to work on a small demo
<path onclick="setAttribute('style','fill:gold'), top.popup()"... />
but it won’t work on this more complex one.
I know many answers cover this topic but, still, I’ve had no success. Help and pointers are welcome and needed. I might be barking up the wrong tree on how I'm doing this. Thank
I got it working. This was stopping it
window.onload = function() {..(all my raphael javescript)..}
My whole javascript was encased in this function, as the raphael examples suggested. I took it out and got results.
I've not done much js and have no idea why this matters but it does. Maybe I'll learn it's importance in due course but for the time being, "done it better than perfect" as a sizable social media company may or may not have printed on it's walls. Thanks for the helps.
so this is more a curiosity question than an actual question so please bear with me. I just checked out :
http://www.apple.com/iphone/
And the cover slideshow just looks really impressive to me. I do not want to reproduce it, but I am just genuinely interested in how this works.
From my inspection, they just use a bunch of timed webkit transitions/transformations, but I don't know exactly whats going on.
Also, is there an easy way to create this behavior without hardcoding it, because that's what I would do right now.
Here's an explanation: http://johnbhall.com/iphone-4s/
I'm just answering my own question, since no one could really offer me an answer besides hard coding. I assume Apple just puts a lot of effort in it. i'm still impressed by the sophisticated use of css transitions, especially where objects would transition into the next frame
Here's a working demo with source code.
Basically the idea is,
preload all the images
there's a timer, which fires every N seconds
when the timer fires, start a transformation animation, which slides the new image in.
Elaborations on the idea allow you to stop/reverse/pause/resume, to automatically stop after one cycle, and so on.
The tradename for this effect is "slider". so you can google for slider and find lots of discussion. There are sliders for jquery (nivoslider), there's one for mootools (slideitmoo), there's framework-free options (like the scriptiny demo I linked), and so on.
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.
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.