I don't really understand issues 1 and 3

issue number one, it seems you completely understand what is going on with the resize, so why would you take it out just because it didn't help with the smaller screens? just leave it in and also call it once when the page first loads. You are trying to do one or the other, but it sounds to me like you want both, so why arent you doing both?

jsfiddle.net/SJsuJ/31

I just took "window resize" off of your function, gave it a name, and then called it once right away and once every resize event.

and to point 3, just because you can learn more here doesn't mean that you shouldn't also google. a quick google of "How do I resize the canvas in Raphael" came up with the right answer on the first link. just put that one line in your decider function one for each slim, or original (or you can put it in the slim/original functions either way...) and that's it

When you don't also google on your own it makes me want to help a little less, because it makes me feel like I'm doing all the work...

That's not a problem if you want to contract me to write it for you :) then you never have to google anything ;)

jsfiddle.net/SJsuJ/32 in this one I made the default color blue so that the circle could be added to the blue gear when it gets created. otherwise if I add a circle to the default gear structure, it fades with the rest of the gears when they move around. I didn't like the way that looked jsfiddle.net/SJsuJ/33

So, solution #32 is likely the one you want, but it really only works well if you want to add a link to one gear. If you want to add a link to more gears, all gears or an arbitrary selection of gears I would need to make it a little more complex. Either drill down on an element to prevent them from changing when the gears reposition, or separate the gears from the animation entirely... either would work fine, but you would need to know what it is you want.

@blaze4218

Hi there

All fine with you?

Thanks for the support!

I did Google about the paper set width and height and indeed found that....

But had no time to make changes, this morning I had oral surgey on my jaw, so I didn't work today

I saw the difference between fiddle 32 and 33

You are right, the 32 is better looking.

I want a link to all 5 gears

Originally I had solved it by placing the gears into a div and give that an onlcick event

So its complicated now you mean?

Not sure, I didn't tackle it because I wanted to know first what it was you were looking for

Strange the circles are being the color of the gear when changing size in fiddle 33

I have found a good reference of raphael, but I can't find a solution in it for this problem

They also use a (square) transparant fill like you did with opacity 0

and they placed it over the total object

My earlier solution with the divs required 5 times a paper, so that was really inefficient

the way i did 33 was that the circles were part of the original gear, but with 0 transparency. but the ghost effect changes the transparancy of all the shapes to .2 which fades the gear out but it fades the circle in. that is where it got a little complicated, but I'm making the circles separate from the gears.

ok clear

so the solution is seperate circles who behave the same slimTransform and origin transform like the gears?

that's what i think we should try first, the other way is to drill down in the gear grouping when we ghost out to prevent the circles from changing... that can be trick sometimes...

ok

ok, i moved the fill out of the initial gear creation and instead put it with the rest of the settings and went through all the gears and did

    gears[i].gear[0].attr({
        fill: gears[i].fill
    })

changing only the fill of the [0] element of the gear and circle grouping

jsfiddle.net/SJsuJ/40

actually, this one jsfiddle.net/SJsuJ/41

under normal circumstances the center circle is transparent, that way you can still place it on top of other elements and it is see through, but when it is ghosting it becomes a solid white circle...it's really not noticable...

o yes

thats smart!

so you have now set the inner fill in the path

" inner fill in the path"?

in var gear?

mistype

Thanks for the support till now

I have to go to bed

Tomorrow I'll try to make it for mobile only

Let's see if I can make it on my own

to stack the gears on top, but with the text blocks between it.

on a screen lets say about 480px.

just to get familiar with this sort of coding....

@blaze4218

I was wondering, how you learn your very good skills of JS?

Books, tutorials on internet....?

I have ordered a starters book of javascript

I learned from the internet.

ok

There is a lot to find on the net

I read alot about it when it was new, and i made small scripts that were like regular functional programming, but with very bad styling

but I have to learn the basics about vars and arrays and that kind of stuff first

then I read about modern javascript patterns and how to abstract data

ok clear

then I joined stack exchange and let other people critisize my code to make me better

and still learning...

yes that works well

I have changed it already, the gears for mobile

how easy it is with help of a master! :-)

see my testserver

I can't reccommend anything that is better than reading lot's and lot's of onine articles and blogs that discuss the problems and finer points of javascript. also remember to read the comments section of the blogs because people discuss what they read and sometimes it helps you understand the article better

yes true

I totally agree with that

you removed the ghost effect?

yes to try how to disable it

I will put it back on

ok

I can "read" the code now

yes i see the mobile version, very good!

I understand what you did, but by coding yourself is a total different thing

I always have error-hints given by dreamwaever

forgot a , or ; or totally misplaced a ; on the wrong position

but you have shown that you understood what I was telling you. That itself is a big compliment, so thank you

You were great in explanation!

Thats great about a chat, you can react quick to eachother

I have already learned more about JS and Raphael then in a year before

there is no way to message a user directly in stack exchange, and once we are done with this room I think it will get closed... so if you want to work on something together again you can reach me at blaze4218@yahoo.com and we can come to this or another chat room and work on other stuff.

yes that would be great

If I have a JS related issue or project for a customer of mine, I will contract and hire you

I would be honored

you've earned it!

I have trust in you after this project for my own site

:)

so enjoy your evening, I'll go to sleep and thanks a lot.

you too. sleep well

:-)