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.
Related
I was trying to edit this beautiful Rutt-Etra demo code https://www.airtightinteractive.com/2011/06/rutt-etra-izer/
My issue is that i need to render and save pictures of the highest resolution possible (300dpi would be great, 600dpi even better). Totally new to three.js whatsoever, just looking to know at which part of the code should i care for/look at.
Any help is appreciated (even alternative methods to get the biggest resolution with this image processing)
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/)
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.
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.
I was task to convert a something like this flash file into jQuery...
any help or advice? it should be html 4. I'm not new to jQuery so if you have links that I can use to help me build this would be appreciated..
thanks,
Reigel
edit: update/progress
okay, as jAndy suggested, I found this for rotating images
First 10 seconds it's a nice watch, but every second beyond is boring.
To accomplish that just with javascript / jQuery, one would need to load & cache like 500 images. I'd create an object/class for each image which stores coordinates, rotating angle, speed, img source etc. and finally fire those into some animating object/class.
Looks very possible with javascript, but I guess just the DOM is too damn slow to handle this, so your only choice here can be canvas. Since you mentioned just to use HTML4 I don't think this is a task which can be fairly done.
Actually I would recommend a library like raphael or cakejs, but again, all those are using HTML5 canvas to render images.