Re: [jQuery] Widget Challenge
Why the bottom?
Is that where the Apple menu is? I don't know, I don't have an Apple
computer.
I like the idea of cloning the icon to maintain the menu position. I'll be
honest and say that I simply don't have the JS/jQuery knowledge to clone it.
Is it just:
$(img).clone().appendTo(img);
??
That would just add it next to the image... Hmmm... No. I don't know enough
about it to do that with ease! :)
Paul Bakaus wrote:
Hi Dan,
some improvement idea for the page you have set up: Stick the outer
container to the bottom of the page via position: absolute or fixed, this
way you don't have the bumping problem for the height of the outer
container.
Other than that, I had almost the same idea you talked about, one
additional
idea:
if you hover the icon, you clone the icon and stick it on top centered of
the original (outside the original list). This way you don't alter the
original list height and width, and it would look like a real
magnification
(even dojo does not have this effect!)
Maybe I can work something out again, improve it a bit further.
See ya!
2006/9/28, Dan Atkinson [EMAIL PROTECTED]:
As an aside,
I wrote out this in a webpage with a few choice icons.
It doensn't really work in IE, but I thought I'd stick your code up
there:
http://dan-atkinson.com/fisheye/
Cheers,
Dan
Paul Bakaus wrote:
Hi!
I have put up a little function that does something like the fisheye
plugin.
However, this is only a concept, it doesn't behave like the real one.
It
will not detect near containers and therefore is not very smooth.
the function:
$.fn.fisheye = function() {
this.each(function() {
var fishHeight = parseInt($(img, this).height());
var fishWidth = parseInt($(img, this).width());
$(this.childNodes).hover(
function() {
$(this.childNodes).animate({ height: 150, width: 150 },
200);
},
function() {
$(this.childNodes).animate({ height: fishHeight, width:
fishWidth }, 500);
});
});
}
test it like this:
ul class=fisheye
li http://happyday.dk/funnypics/animal/images/monkey.jpg
/li
li http://happyday.dk/funnypics/animal/images/monkey.jpg
/li
li http://happyday.dk/funnypics/animal/images/monkey.jpg
/li
li http://happyday.dk/funnypics/animal/images/monkey.jpg
/li
li http://happyday.dk/funnypics/animal/images/monkey.jpg
/li
/ul
and style the ul like you want it. have fun.
--
Paul Bakaus
Web Developer
Hildastr. 35
79102 Freiburg
--
View this message in context:
http://www.nabble.com/Widget-Challenge-tf2341740.html#a6554195
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
Paul Bakaus
Web Developer
Hildastr. 35
79102 Freiburg
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/Widget-Challenge-tf2341740.html#a6561209
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
This is exactly what I was working on last night! I have already been able to track mouse proximity around an element (not exactly rocket science!) but I removed the script and HTML from the page because I didn't want some folks getting confused. Determining its distance from dead centre, however, proves to be a challange. But I guess it's just a case of determining the width and height of the element, dividing the values by two, and adding that with the value of the mouse position x and y divided by two. The closer the mouse gets to the centre, the close to zero it gets. Sounds simple enough! :-P wycats wrote: It would be nice if surrounding icons to the one being hovered over also got magnified (by exponentially smaller amounts). Example: If we had an icon set of A B C D E F G And D was being hovered over, the magnifications might be as follows: A 100% B 120% C 144% D 172% E 144% F 120% G 100% What Apple does to make the effect really slick is modify the magnfications depending where on the icon the mouse is. Totally centering the mouse on the icon has equal magnification to the left and right icons, while moving the mouse to the left on the icon increases the magnification of the left icons and decreases it on the right. The trick would be coming up with a good way to track the mouse movements on the icon itself and an algorithm for changing the magnification, but it'd be dead sexy. I'd use it :-D -- Yehuda Katz Web Developer | Wycats Designs (ph) 718.877.1325 -- View this message in context: http://www.nabble.com/Widget-Challenge-tf2341740.html#a6561134 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
Dan Atkinson wrote: Why the bottom? Is that where the Apple menu is? I don't know, I don't have an Apple computer. I like the idea of cloning the icon to maintain the menu position. I'll be honest and say that I simply don't have the JS/jQuery knowledge to clone it. Is it just: $(img).clone().appendTo(img); ?? That would just add it next to the image... Hmmm... No. I don't know enough about it to do that with ease! :) Couldn't that be done, just by changing the CSS 'position' property so something like 'fixed', 'absolute', or whatever (haven't had time to look it up!) so it no longer affects the surrounding element. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
I'll have a look at positioning now. Also, putting a link around it seems to break it. I've messed about with it, but all it does now is twitch! :-) Mark Gibson-8 wrote: Dan Atkinson wrote: Why the bottom? Is that where the Apple menu is? I don't know, I don't have an Apple computer. I like the idea of cloning the icon to maintain the menu position. I'll be honest and say that I simply don't have the JS/jQuery knowledge to clone it. Is it just: $(img).clone().appendTo(img); ?? That would just add it next to the image... Hmmm... No. I don't know enough about it to do that with ease! :) Couldn't that be done, just by changing the CSS 'position' property so something like 'fixed', 'absolute', or whatever (haven't had time to look it up!) so it no longer affects the surrounding element. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ -- View this message in context: http://www.nabble.com/Widget-Challenge-tf2341740.html#a6562581 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
I start working on the same think: fisheye menu http://interface.eyecon.ro/development/demos/fisheye.html is just a draft hope something nice will come out of this. Yehuda Katz wrote: Dojo released a new widget today: a spreadsheet widget. and it ocurred to me that while we don't quite have anything like that yet, there are scattered widgets throughout the jQuerysphere. I figured it'd be nice for us to put together a jQuery widget package that, to the extent possible, mirrors the Dojo widget set. The challenge is this: where there is no existing widget, create it. The holy grail, at this point, would be a replication of their spreadsheet widget or their rich text editor widget. I'd like to put together the widget pack at some point in the next month, and I'll be featuring the widget pack in next month's Magazine. Theere's nothing requiring an exact mirror of the Dojo widgets, so feel free to submit widgets that are not present in Dojo. You can check out what Dojo has currently at http://dojotoolkit.org/ Enjoy! -- Yehuda Katz Web Developer | Wycats Designs (ph)718.877.1325 ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
Yehuda, Can you put this on the jQuery blog page, to generate more interest, please? It has so few articles, and something like this shouldn't be buried away in the mailing list. This way, we can digg the story, and bring more attention to the widget challenge. We could also begin a competition for a 'killer jwidget'. wycats wrote: Dojo released a new widget today: a spreadsheet widget. and it ocurred to me that while we don't quite have anything like that yet, there are scattered widgets throughout the jQuerysphere. I figured it'd be nice for us to put together a jQuery widget package that, to the extent possible, mirrors the Dojo widget set. The challenge is this: where there is no existing widget, create it. The holy grail, at this point, would be a replication of their spreadsheet widget or their rich text editor widget. I'd like to put together the widget pack at some point in the next month, and I'll be featuring the widget pack in next month's Magazine. Theere's nothing requiring an exact mirror of the Dojo widgets, so feel free to submit widgets that are not present in Dojo. You can check out what Dojo has currently at http://dojotoolkit.org/ Enjoy! -- Yehuda Katz Web Developer | Wycats Designs (ph) 718.877.1325 ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ -- View this message in context: http://www.nabble.com/Widget-Challenge-tf2341740.html#a6567647 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
As an aside,
I wrote out this in a webpage with a few choice icons.
It doensn't really work in IE, but I thought I'd stick your code up there:
http://dan-atkinson.com/fisheye/
Cheers,
Dan
Paul Bakaus wrote:
Hi!
I have put up a little function that does something like the fisheye
plugin.
However, this is only a concept, it doesn't behave like the real one. It
will not detect near containers and therefore is not very smooth.
the function:
$.fn.fisheye = function() {
this.each(function() {
var fishHeight = parseInt($(img, this).height());
var fishWidth = parseInt($(img, this).width());
$(this.childNodes).hover(
function() {
$(this.childNodes).animate({ height: 150, width: 150 }, 200);
},
function() {
$(this.childNodes).animate({ height: fishHeight, width:
fishWidth }, 500);
});
});
}
test it like this:
ul class=fisheye
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
/ul
and style the ul like you want it. have fun.
--
Paul Bakaus
Web Developer
Hildastr. 35
79102 Freiburg
--
View this message in context:
http://www.nabble.com/Widget-Challenge-tf2341740.html#a6554195
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
Hi Dan,some improvement idea for the page you have set up: Stick the outer container to the bottom of the page via position: absolute or fixed, this way you don't have the bumping problem for the height of the outer container.
Other than that, I had almost the same idea you talked about, one additional idea:if you hover the icon, you clone the icon and stick it on top centered of the original (outside the original list). This way you don't alter the original list height and width, and it would look like a real magnification (even dojo does not have this effect!)
Maybe I can work something out again, improve it a bit further.See ya!2006/9/28, Dan Atkinson [EMAIL PROTECTED]
:As an aside,I wrote out this in a webpage with a few choice icons.
It doensn't really work in IE, but I thought I'd stick your code up there:http://dan-atkinson.com/fisheye/Cheers,DanPaul Bakaus wrote:
Hi! I have put up a little function that does something like the fisheye plugin. However, this is only a concept, it doesn't behave like the real one. It will not detect near containers and therefore is not very smooth.
the function: $.fn.fisheye = function() { this.each(function() { var fishHeight = parseInt($(img, this).height()); var fishWidth = parseInt($(img, this).width());
$(this.childNodes).hover( function() { $(this.childNodes).animate({ height: 150, width: 150 }, 200); }, function() {
$(this.childNodes).animate({ height: fishHeight, width: fishWidth }, 500); }); }); } test it like this: ul class=fisheye
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li li
http://happyday.dk/funnypics/animal/images/monkey.jpg /li li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li li
http://happyday.dk/funnypics/animal/images/monkey.jpg /li /ul and style the ul like you want it. have fun. -- Paul Bakaus Web Developer
Hildastr. 35 79102 Freiburg--View this message in context: http://www.nabble.com/Widget-Challenge-tf2341740.html#a6554195
Sent from the JQuery mailing list archive at Nabble.com.___jQuery mailing listdiscuss@jquery.com
http://jquery.com/discuss/-- Paul BakausWeb DeveloperHildastr. 3579102 Freiburg
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
Feel free to include what's on http://www.dyve.net/jquery (autocomplete, autohelp, googlemaps, editable). On 9/27/06, Yehuda Katz [EMAIL PROTECTED] wrote: Dojo released a new widget today: a spreadsheet widget. and it ocurred to me that while we don't quite have anything like that yet, there are scattered widgets throughout the jQuerysphere. I figured it'd be nice for us to put together a jQuery widget package that, to the extent possible, mirrors the Dojo widget set. The challenge is this: where there is no existing widget, create it. The holy grail, at this point, would be a replication of their spreadsheet widget or their rich text editor widget. I'd like to put together the widget pack at some point in the next month, and I'll be featuring the widget pack in next month's Magazine. Theere's nothing requiring an exact mirror of the Dojo widgets, so feel free to submit widgets that are not present in Dojo. You can check out what Dojo has currently at http://dojotoolkit.org/ Enjoy! -- Yehuda Katz Web Developer | Wycats Designs (ph) 718.877.1325 ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
Said famous CMS has support for doing precisely that, and in fact uses such support for its own module development. John hinted before that he was looking to go in that direction, which I think would be terrific for all involved. On Wednesday 27 September 2006 01:24, Paul Bakaus wrote: Hi there, as you may know, the jQuery website is going to be updated soon, supported by a famous cms. Maybe it would be good to build in a plugins platform into the page, where every developer can add his plugin, like for example Firefox Plugins, mozdev. etc. What do you think? 2006/9/27, Dylan Verheul [EMAIL PROTECTED]: Feel free to include what's on http://www.dyve.net/jquery (autocomplete, autohelp, googlemaps, editable). On 9/27/06, Yehuda Katz [EMAIL PROTECTED] wrote: Dojo released a new widget today: a spreadsheet widget. and it ocurred to me that while we don't quite have anything like that yet, there are scattered widgets throughout the jQuerysphere. I figured it'd be nice for us to put together a jQuery widget package that, to the extent possible, mirrors the Dojo widget set. The challenge is this: where there is no existing widget, create it. The holy grail, at this point, would be a replication of their spreadsheet widget or their rich text editor widget. I'd like to put together the widget pack at some point in the next month, and I'll be featuring the widget pack in next month's Magazine. Theere's nothing requiring an exact mirror of the Dojo widgets, so feel free to submit widgets that are not present in Dojo. You can check out what Dojo has currently at http://dojotoolkit.org/ Enjoy! -- Yehuda Katz Web Developer | Wycats Designs (ph) 718.877.1325 ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ -- Larry Garfield AIM: LOLG42 [EMAIL PROTECTED] ICQ: 6817012 If nature has made any one thing less susceptible than all others of exclusive property, it is the action of the thinking power called an idea, which an individual may exclusively possess as long as he keeps it to himself; but the moment it is divulged, it forces itself into the possession of every one, and the receiver cannot dispossess himself of it. -- Thomas Jefferson ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
On Wed, 27 Sep 2006, Paul Bakaus wrote: as you may know, the jQuery website is going to be updated soon, supported by a famous cms. Maybe it would be good to build in a plugins platform into the page, where every developer can add his plugin, like for example Firefox Plugins, mozdev. etc. I like the idea. And I've got a few simple plugins I could contribute. Dave ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
Hi!I have put up a little function that does something like the fisheye plugin. However, this is only a concept, it doesn't behave like the real one. It will not detect near containers and therefore is not very smooth.
the function:$.fn.fisheye = function() { this.each(function() { var fishHeight = parseInt($(img, this).height()); var fishWidth = parseInt($(img, this).width());
$(this.childNodes).hover( function() { $(this.childNodes).animate({ height: 150, width: 150 }, 200); }, function() { $(this.childNodes).animate({ height: fishHeight, width: fishWidth }, 500);
}); }); }test it like this: ul class=fisheye liimg src="" href="http://happyday.dk/funnypics/animal/images/monkey.jpg">http://happyday.dk/funnypics/animal/images/monkey.jpg
height=64 width=64 //li liimg src="" href="http://happyday.dk/funnypics/animal/images/monkey.jpg">http://happyday.dk/funnypics/animal/images/monkey.jpg
height=64 width=64 //li liimg src="" href="http://happyday.dk/funnypics/animal/images/monkey.jpg">http://happyday.dk/funnypics/animal/images/monkey.jpg
height=64 width=64 //li liimg src="" href="http://happyday.dk/funnypics/animal/images/monkey.jpg">http://happyday.dk/funnypics/animal/images/monkey.jpg
height=64 width=64 //li liimg src="" href="http://happyday.dk/funnypics/animal/images/monkey.jpg">http://happyday.dk/funnypics/animal/images/monkey.jpg
height=64 width=64 //li /uland style the ul like you want it. have fun.2006/9/27, Dan Atkinson
[EMAIL PROTECTED]:Great idea Yehuda!You've been doing a lot to promote the jQuery scene lately, which can only
be a good thing for future development!I personally would love to see something like the fisheye widget which isawsomely cool.There really needs to be more plugins on the scene that have the 'wow'
factor. Currently IMHO, thickbox holds that title, and yet there are othersthat could extend Cody's work further with simple things like Interface.I've already begun work on a model window plugin/widget much alike the one
on Dojo (called jAlert). Basically, they do the same as alerts, but looknicer, and can be resized, dragged, minimized, maximized and closed. Thisresulted from my work on Thickbox and JavaWin.wycats wrote:
Dojo released a new widget today: a spreadsheet widget. and it ocurred to me that while we don't quite have anything like that yet, there are scattered widgets throughout the jQuerysphere. I figured it'd be nice for us to put
together a jQuery widget package that, to the extent possible, mirrors the Dojo widget set. The challenge is this: where there is no existing widget, create it. The holy grail, at this point, would be a replication of their spreadsheet
widget or their rich text editor widget. I'd like to put together the widget pack at some point in the next month, and I'll be featuring the widget pack in next month's Magazine. Theere's
nothing requiring an exact mirror of the Dojo widgets, so feel free to submit widgets that are not present in Dojo. You can check out what Dojo has currently at
http://dojotoolkit.org/ Enjoy! -- Yehuda Katz Web Developer | Wycats Designs (ph)718.877.1325 ___
jQuery mailing list discuss@jquery.com http://jquery.com/discuss/--View this message in context:
http://www.nabble.com/Widget-Challenge-tf2341740.html#a6525264Sent from the JQuery mailing list archive at Nabble.com
.___jQuery mailing listdiscuss@jquery.comhttp://jquery.com/discuss/
-- Paul BakausWeb DeveloperHildastr. 3579102 Freiburg
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
Paul,
That's a good start! I see what you're doing!
A larger z-indexed div could be created around each fisheye image, and a
calculation could be done to determine how far from the centre of the box
the mouse cursor is. The image can then be scaled depending on this value.
This also means that the div surrounding the image would intersect with with
the other elements as they would overlap. This should make the animation
smoother.
That's just off the top of my head however.
Paul Bakaus wrote:
Hi!
I have put up a little function that does something like the fisheye
plugin.
However, this is only a concept, it doesn't behave like the real one. It
will not detect near containers and therefore is not very smooth.
the function:
$.fn.fisheye = function() {
this.each(function() {
var fishHeight = parseInt($(img, this).height());
var fishWidth = parseInt($(img, this).width());
$(this.childNodes).hover(
function() {
$(this.childNodes).animate({ height: 150, width: 150 }, 200);
},
function() {
$(this.childNodes).animate({ height: fishHeight, width:
fishWidth }, 500);
});
});
}
test it like this:
ul class=fisheye
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
li http://happyday.dk/funnypics/animal/images/monkey.jpg /li
/ul
and style the ul like you want it. have fun.
--
Paul Bakaus
Web Developer
Hildastr. 35
79102 Freiburg
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/Widget-Challenge-tf2341740.html#a6528643
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Widget Challenge
Yehuda Katz schrieb: You can check out what Dojo has currently at http://dojotoolkit.org/ I haven't worked with Dojo and therefore dunno about its structure, I hope someone else can answer this question: Would it be possible to write an adapter to allow using Dojo widgets with jQuery as its base? -- Jörn ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
