yeah, but it gets the job done, and it's not like you have all those
DIVs in the HTML. Jonathan and I used the same technique for a fade
technique in the Learning jQuery book. Not sure why I didn't think of
doing something similar for this. I guess I was fixated on getting a
single png background image to work cross-browser. I'm really glad I
sought help here. You've knocked me out of my tunnel vision, that's
for sure.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jul 16, 2007, at 1:52 PM, Glen Lipka wrote:
Great minds...something something.
That gradient plugin is neat, but, my goodness, its like I exploded
a bomb packed with DIVs instead of shrapnel!. :)
Glen
On 7/16/07, Brandon Aaron <[EMAIL PROTECTED]> wrote:
Heh ... I'm secretly working on a shadow plugin that does just
this ... although not a secret anymore. It would be a follow up to
my gradient plugin. No timeline on when I'll get it done though ...
looks like I'll have some time this week ... so maybe this week or
maybe next month. :)
--
Brandon Aaron
On 7/16/07, Glen Lipka < [EMAIL PROTECTED]> wrote:
I guess the first one could have been done with a div that was
background-color: black; and then set the opacity to 0.5 or
whatever. No need for a png in that.
A very common use case is just the 3px feather fade. Its not very
big, just 3px in width. I think the first one, if you dynamically
make 3 divs of the exact same opacity. Literally duplicates. And
then offset them 1px, 2px and 3px. And they were not pngs, just
divs with opacity of 0.2 or 0.3. Then the overlapping would cause
it it mirror the feather effect.
Hmm, Ill have to try that one. Might make a decent plugin by
itself. SOmething like:
$("div").shadow({
feather: '3px',
color: 'black',
opacity: '0.2'
});
I suppose it would require the dimensions plugin to position it?
Just brainstorming.
Glen
On 7/16/07, Karl Swedberg <[EMAIL PROTECTED]> wrote:
very, very nice! exactly what I was looking for. thanks so much, Glen!
I'll take a look at implementing this tonight or tomorrow.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jul 16, 2007, at 1:38 AM, Glen Lipka wrote:
Maybe a more scalable solution:
http://www.commadot.com/jquery/shadows/v2.htm
I made a box (just one to start, but obviously there could be
several different opacities.)
Technique is to stretch the box and move it around underneath.
That way you can create your own shadow effect.
One could even replace the box for a custom look.
It would be cool to use the corners plugin with this. Didnt work
on first try.
This kind of thing would enable you to make options about which
direction the shadow goes, what opacity and how far away from the
content.
I need to go to sleep.Karl, does this help.
Glen
On 7/15/07, Glen Lipka < [EMAIL PROTECTED]> wrote:
http://www.commadot.com/jquery/shadows/
Ok, the first experiment was using a 1x1 image.
I didnt fix for IE6 yet, but it's in the ballpark...nothing
special happening.
Ok, so the bad part was when I tried to stretch a non-1x1 image
with a fade. The fade of the shadow scaled (of course), so that
wont work.
Luckily there is another way. Thank goodness for positioning.
By the way, these arent completely done with a ribbon on them.
But I hope these give the basic idea.
Should these have rounded corners too?
Hmm.
Glen
On 7/15/07, Karl Swedberg < [EMAIL PROTECTED]> wrote:
Brilliant! You totally rock, Glen! Way above and beyond (but
please, keep going. ;-) )
Can't wait to see the demo.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jul 15, 2007, at 11:31 PM, Glen Lipka wrote:
Starting to look at it now. I recently had to do some fancy png
shadows. ( http://www.sparkt.com/testing.html)
I totally gave up on trying to make it a background. Luckily you
usually have a workaround.
Here is my plan, and Ill work on it now...
I am going to make 10 png files, 10x10 with 24-bit transparency.
Each one will be be a different opacity. 10%, 20%, etc. The
reason to make it 10x10 is to give the edges a fade, so the
shadow blurs.
Then I am going to try and make your clueTip html, except rather
than use the div as a background, I will create a layer div,
absolutely positioned underneath. Then offset it with left and top.
In fact, if this works, then you could allow the user to define
the opacity, and the shadow offset!
Ok, Im going to work on a demo. I think it will work though.
PNGs stretch nice with width/height attributes.
Glen
On 7/15/07, Karl Swedberg <[EMAIL PROTECTED]> wrote:
Hi all,
After I posted the clueTip beta, I realized that something had
regressed and the pngFix code wasn't working properly to get the
drop-shadow effect working in IE6.
I've worked that part out by, starting with the pngFix code in
Jörn's tooltip plugin (thanks!) and, among other things, changing
the "sizingMethod" attribute from "crop" to "scale." I also re-
worked and simplified the CSS for the clueTip quite a bit.
Nevertheless, it's still looking a little funky, depending on the
contents of the clueTip.
I was wondering if there are any CSS gurus out there who might be
able to look at this in IE6 and help me find a solution. I'm
usually able to tread fairly nimbly through CSS territory, but
this issue has me flummoxed.
here are thethe files I'm using to try to sort this out:
demo/test page: http://test.learningjquery.com/clue/demo/
index.html
style sheet: http://test.learningjquery.com/clue/
jquery.cluetip.css
cluetip plugin: http://test.learningjquery.com/clue/
jquery.cluetip.js
drop shadow image: http://test.learningjquery.com/clue/shadow.png
I made all the clueTips "sticky" for easier inspection/
manipulation in a DOM viewer.
Also, here is a zipped file of everything, including Dimensions,
jquery.js, images, and so on:
http://test.learningjquery.com/clue/ cluetip-test.zip
Any help at all would be greatly appreciated.
** One more thing. I just received a question from someone about
the IE <select> "punch-through" problem and whether the clueTip
plugin handles that.
I started writing a response that I'd like to share with the
list, in case anyone has any strong opinions that I should take
into consideration:
excellent question! The short answer is, no [I haven't accounted
for this IE problem]. But it should. Somehow. That was an
oversight on my part.
That said, I'm a bit torn about how best to go about doing it.
Do I bake it right in to the plugin itself? Do I put in yet
another option? If so, should the default be true (i.e. yes, add
the iframe hack with all corresponding css) or false?
I wonder if it might be best to leave that problem for the
bgIFrame plugin to solve. ( http://jqueryjs.googlecode.com/svn/
trunk/plugins/bgiframe/)
It does a great job of it, and I certainly couldn't do any
better. On the other hand, I understand the disadvantages of
having to include too many javascript file references on a
single web page.
What are your thoughts?
Thanks so much,
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
