Is there a prototype / extension which will assist in cross-browser support of PNG images? http://www.alistapart.com/articles/pngopacity/ It seems to me that a class could be developed which would zip through the DOM and make changes where needed for IE 5.5 / IE 6.0 to handle PNG images. I don''t want to write one if it''s been done before. Sam _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
I''ve used /IE7/ in the past to work with transparency. However it is not the prototype way. http://dean.edwards.name/IE7/ On 6/19/06, Sam <sam.google-Uc2IQQBAS6sAvxtiuMwx3w@public.gmane.org> wrote:> > > Is there a prototype / extension which will assist in cross-browser support > of PNG images? > > http://www.alistapart.com/articles/pngopacity/ > > It seems to me that a class could be developed which would zip through the > DOM and make changes where needed for IE 5.5 / IE 6.0 to handle PNG images. > > I don''t want to write one if it''s been done before. > > Sam > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >
I placed the following code in the window.onload method. It works but only
on inline images. It will not work if the image is loaded through css. For
the transparent PNG''s I use Fireworks 8 and export as PNG 32.
Also, I did not write this code. I got it off of some website. I forget
which and I will link to it if I can find it.
/*************** Transparent PNG **************************/
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
//transperent png support
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length)
="PNG")
{
var imgID = (img.id) ? "id=''" + img.id +
"'' " : ""
var imgClass = (img.className) ?
"class=''" +
img.className + "'' " : ""
var imgTitle = (img.title) ? "title=''" +
img.title + "''
" : "title=''" + img.alt + "'' "
var imgStyle = "display:inline-block;" +
img.style.cssText
if (img.align == "left") imgStyle =
"float:left;" +
imgStyle
if (img.align == "right") imgStyle =
"float:right;" +
imgStyle
if (img.parentElement.href) imgStyle =
"cursor:hand;" +
imgStyle
var strNewHTML = "<span " + imgID + imgClass +
imgTitle
+ " style=\"" + "width:" +
img.width + "px; height:" +
img.height + "px;" + imgStyle + ";"
+ "filter:progid:
DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\''" + img.src +
"\'',
sizingMethod=''scale'');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
On 6/19/06, Nicolas Terray
<nicolas.terray-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> I''ve used /IE7/ in the past to work with transparency. However it
is
> not the prototype way.
> http://dean.edwards.name/IE7/
>
> On 6/19/06, Sam <sam.google-Uc2IQQBAS6sAvxtiuMwx3w@public.gmane.org>
wrote:
> >
> >
> > Is there a prototype / extension which will assist in cross-browser
> support
> > of PNG images?
> >
> > http://www.alistapart.com/articles/pngopacity/
> >
> > It seems to me that a class could be developed which would zip through
> the
> > DOM and make changes where needed for IE 5.5 / IE 6.0 to handle PNG
> images.
> >
> > I don''t want to write one if it''s been done before.
> >
> > Sam
> >
> >
> > _______________________________________________
> > Rails-spinoffs mailing list
> > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> >
> >
> >
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
This is likely where the code came from: http://homepage.ntlworld.com/ bobosola/index.htm Simply add pngfix.js to your page and only execute it in IE < 7: <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> HTH On Monday, June 19, 2006, at 10:29 AM, Casey O''Neill wrote:>I placed the following code in the window.onload method. It works but only >on inline images. It will not work if the image is loaded through css. For >the transparent PNG''s I use Fireworks 8 and export as PNG 32. > >Also, I did not write this code. I got it off of some website. I forget >which and I will link to it if I can find it. > >/*************** Transparent PNG **************************/ >var arVersion = navigator.appVersion.split("MSIE") > var version = parseFloat(arVersion[1]) > > //transperent png support > if ((version >= 5.5) && (document.body.filters)) > { > for(var i=0; i<document.images.length; i++) > { > var img = document.images[i] > var imgName = img.src.toUpperCase() > if (imgName.substring(imgName.length-3, >imgName.length) =>"PNG") > { > var imgID = (img.id) ? "id=''" + img.id + "'' " : "" > var imgClass = (img.className) ? "class=''" + >img.className + "'' " : "" > var imgTitle = (img.title) ? "title=''" + >img.title + "'' >" : "title=''" + img.alt + "'' " > var imgStyle = "display:inline-block;" + >img.style.cssText > if (img.align == "left") imgStyle = "float:left;" + >imgStyle > if (img.align == "right") imgStyle = "float:right;" + >imgStyle > if (img.parentElement.href) imgStyle >"cursor:hand;" + >imgStyle > var strNewHTML = "<span " + imgID + imgClass + >imgTitle > + " style=\"" + "width:" + img.width + "px; height:" + >img.height + "px;" + imgStyle + ";" > + "filter:progid: >DXImageTransform.Microsoft.AlphaImageLoader" > + "(src=\''" + img.src + "\'', >sizingMethod=''scale'');\"></span>" > img.outerHTML = strNewHTML > i = i-1 > } > } > } > >On 6/19/06, Nicolas Terray <nicolas.terray-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> >> I''ve used /IE7/ in the past to work with transparency. However it is >> not the prototype way. >> http://dean.edwards.name/IE7/ >> >> On 6/19/06, Sam <sam.google-Uc2IQQBAS6sAvxtiuMwx3w@public.gmane.org> wrote: >> > >> > >> > Is there a prototype / extension which will assist in cross-browser >> support >> > of PNG images? >> > >> > http://www.alistapart.com/articles/pngopacity/ >> > >> > It seems to me that a class could be developed which would zip through >> the >> > DOM and make changes where needed for IE 5.5 / IE 6.0 to handle PNG >> images. >> > >> > I don''t want to write one if it''s been done before. >> > >> > Sam >> > >> > >> > _______________________________________________ >> > Rails-spinoffs mailing list >> > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >> > >> > >> > >> _______________________________________________ >> Rails-spinoffs mailing list >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >> > > >_______________________________________________ >Rails-spinoffs mailing list >Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >Cheers! --David Teare http://1Passwd.com - Best OS X Password Manager -- Posted with http://DevLists.com. Sign up and save your mailbox.
I use this... http://homepage.ntlworld.com/bobosola/pnghowto.htm On 6/19/06, Casey O''Neill <j.casey.oneill-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I placed the following code in the window.onload method. It works but only > on inline images. It will not work if the image is loaded through css. For > the transparent PNG''s I use Fireworks 8 and export as PNG 32. > > Also, I did not write this code. I got it off of some website. I forget > which and I will link to it if I can find it. > > /*************** Transparent PNG **************************/ > var arVersion = navigator.appVersion.split("MSIE") > var version = parseFloat(arVersion[1]) > > //transperent png support > if ((version >= 5.5) && (document.body.filters)) > { > for(var i=0; i<document.images.length; i++) > { > var img = document.images [i] > var imgName = img.src.toUpperCase() > if (imgName.substring(imgName.length-3, imgName.length) => "PNG") > { > var imgID = ( img.id) ? "id=''" + img.id + "'' " : "" > var imgClass = (img.className) ? "class=''" + > img.className + "'' " : "" > var imgTitle = (img.title) ? "title=''" + img.title + "'' > " : "title=''" + img.alt + "'' " > var imgStyle = "display:inline-block;" + > img.style.cssText > if (img.align == "left") imgStyle = "float:left;" + > imgStyle > if (img.align == "right") imgStyle = "float:right;" + > imgStyle > if (img.parentElement.href) imgStyle = "cursor:hand;" + > imgStyle > var strNewHTML = "<span " + imgID + imgClass + imgTitle > + " style=\"" + "width:" + img.width + "px; height:" + > img.height + "px;" + imgStyle + ";" > + > "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" > + "(src=\''" + img.src + "\'', > sizingMethod=''scale'');\"></span>" > img.outerHTML = strNewHTML > i = i-1 > > } > } > } > > > On 6/19/06, Nicolas Terray <nicolas.terray-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > I''ve used /IE7/ in the past to work with transparency. However it is > > not the prototype way. > > http://dean.edwards.name/IE7/ > > > > On 6/19/06, Sam < sam.google-Uc2IQQBAS6sAvxtiuMwx3w@public.gmane.org> wrote: > > > > > > > > > Is there a prototype / extension which will assist in cross-browser > support > > > of PNG images? > > > > > > http://www.alistapart.com/articles/pngopacity/ > > > > > > It seems to me that a class could be developed which would zip through > the > > > DOM and make changes where needed for IE 5.5 / IE 6.0 to handle PNG > images. > > > > > > I don''t want to write one if it''s been done before. > > > > > > Sam > > > > > > > > > _______________________________________________ > > > Rails-spinoffs mailing list > > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > > > > > > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >
I''m looking over these scripts for PNG transparency. So many variables, so little time... Things to consider: size of the code, reliability, but what is bothering me is some of the scripts modify the <img> to the point that I am concerned about whether the ID I have assigned to the image, along with the events, will survive. This would kill my application. Of course I can test but first... I normally use "View Generated Source" from the NLIS (in IE) or http://chrispederick.com ''s "Web Developer" for Firefox to view the HTML additions and updates made by JavaScript. Both have worked flawlessly in the past. However, using Dean Edward''s IE7, the NLIS "View Generated Source", shows no changes to the HTML at all. This can''t be true, so I have two problems. Why is NLIS not showing the changes, and (2) What is Dean Edwards method? Does it <span> the <img> and nuke the <img src="blank.gif"> like the other solutions? Last, it seems like the solutions I''ve tested leave IE 6 in a "loading page" state. The status bar shows it''s loading the png image, and the cursor is an hourglass when hovered on the browser menus (but the browser is not "locked") yet the page appears fully rendered. I wonder what''s up with that, and that makes (3) problems that need answers. I''m digging away, if anyone knows the answer, it could save me some time. Sam
Sam wrote:> Is there a prototype / extension which will assist in cross-browser > support of PNG images?I''ve used this one before: http://www.bazon.net/mishoo/articles.epl?art_id=430 Not prototype-based but simple. The only problem with all the Javascript-based solutions is that if a Javascript error occurs then the image might show messed up (more than before) and unless you get the onload handled right you might be waiting until everything is loaded before your images look decent. There are some CSS-based solutions out there that will apply the filter with CSS. Those are nice because they apply as soon as the image is displayed and you don''t have to worry about Javascript errors. I don''t have a reference handy but if you can''t find one I will see if I can dig one up. Eric
Thank you everyone for forwarding the references to so many good PNG solutions. I was able to resolve my issues posted earlier and can now say some of the solutions seem very good. Dean Edward''s solution is neat in that it doesn''t require wrapping the <img> with spans and the <img retains the ID, Class and Style. The IE7 lib is 90Kb which might is a factor that needs consideration. I also liked webfx http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html Which gives a 4Kb JavaScript and renders nearly an identical solution as shown by "View Generated Source". Retains the <img, ID, Class, Style... So that JavaScript lookups of the modified img element will continue to work as planned (as long as the src field is not part of the lookup). It''s unfortunate that every solution requires changing the img element src attribute to "blank.gif", making runtime JavaScript replacement of the image difficult, but perhaps not impossible. Playing with the src attribute (e.g. for hover effect) would require significant reworking of the png.js files. Sam
Sam, I understand your pain. Longstanding problems with IE like PNG support
make me want to kill someone!!
I also had some of the concerns you did about PNG scripts. I hacked this
one together and found it very useful. It does not work on css-specified
background images. Best of luck.
function IEPngs(pngList,blankGifPath)
{
var loaderSrc;
for( var i=0; i<pngList.length; i++ )
{
loaderSrc = pngList[i].src;
pngList[i].src = blankGifPath;
pngList[i].style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=''"+loaderSrc+"'',sizingMethod=''scale'');";
}
}
if( document.all )
IEPngs($$(''#png_container
img''),''images/blank.gif'');
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Sam
Sent: Monday, June 19, 2006 9:00 AM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: RE: [Rails-spinoffs] PNG and Alpha-Transparency
I''m looking over these scripts for PNG transparency. So many
variables, so
little time...
Things to consider: size of the code, reliability, but what is bothering me
is some of the scripts modify the <img> to the point that I am concerned
about whether the ID I have assigned to the image, along with the events,
will survive. This would kill my application.
Of course I can test but first...
I normally use "View Generated Source" from the NLIS (in IE) or
http://chrispederick.com ''s "Web Developer" for Firefox to
view the HTML
additions and updates made by JavaScript. Both have worked flawlessly in
the past.
However, using Dean Edward''s IE7, the NLIS "View Generated
Source", shows no
changes to the HTML at all. This can''t be true, so I have two
problems.
Why is NLIS not showing the changes, and (2) What is Dean Edwards method?
Does it <span> the <img> and nuke the <img
src="blank.gif"> like the other
solutions?
Last, it seems like the solutions I''ve tested leave IE 6 in a
"loading page"
state. The status bar shows it''s loading the png image, and the cursor
is
an hourglass when hovered on the browser menus (but the browser is not
"locked") yet the page appears fully rendered. I wonder
what''s up with
that, and that makes (3) problems that need answers.
I''m digging away, if anyone knows the answer, it could save me some
time.
Sam
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Ken,
Thanks for the snippet. It was so short even I could understand the code.
Here''s a snippet to modify the filename on mouseover / mouseout for
pngs in
IE or whatever browser. IT checks for the filter style and if present,
modifies that attribute, not the src attribute.
function pngHover(event) {
if(event.type == ''mouseover'') {
if(this.style.filter) // add -hover to filename on mouseover
this.style.filter = this.style.filter.replace(''.png'',
''-hover.png'');
else
this.src = this.src.replace(''.png'',
''-hover.png'');
} else {
if(this.style.filter) // remove -hover from filename on mouseout
this.style.filter = this.style.filter.replace(''-hover.png'',
''.png'');
else
this.src = this.src.replace(''-hover.png'',
''.png'');
}
}
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
This is my own little script I whipped together once, works for me :)
function iePNG() {
var images = document.getElementsByTagName("img");
if (images[0].style.filter != null) {
var src;
for (var i = 0; i < images.length; i++) {
src = images[i].src;
if (src.indexOf(".png") > 0) {
images[i].src = "images/blank.gif";
images[i].style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''" +
src + "'')";
}
}
}
}
I don''t really understand why you need all those complex span
solutions and such, but if there''s something wrong with my code
I''d
very much appreciate the feedback.
btw, the blank.gif is a transparent 1*1 gif.
Andreas
On Jun 19, 2006, at 23:16 , Sam wrote:
> Ken,
>
> Thanks for the snippet. It was so short even I could understand
> the code.
>
> Here''s a snippet to modify the filename on mouseover / mouseout
for
> pngs in IE or whatever browser. IT checks for the filter style and
> if present, modifies that attribute, not the src attribute.
>
>
> function pngHover(event) {
> if(event.type == ''mouseover'') {
> if(this.style.filter) // add -hover to filename on mouseover
> this.style.filter = this.style.filter.replace(''.png'',
''-
> hover.png'');
> else
> this.src = this.src.replace(''.png'',
''-hover.png'');
> } else {
> if(this.style.filter) // remove -hover from filename on mouseout
> this.style.filter =
this.style.filter.replace(''-hover.png'',
> ''.png'');
> else
> this.src = this.src.replace(''-hover.png'',
''.png'');
> }
> }
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> btw, the blank.gif is a transparent 1*1 gif.OT: And remember that every 1x1 trans gif that''s bigger than 42 bytes is too big! =)
Hi i also use and like the webfx solution. i read an article at: http://microsoftgadgets.com/Blogs/gadgetnews/archive/2006/06/07/6045.aspx also see http://microsoftgadgets.com/forums/5975/ShowPost.aspx which talks about problems with using PNGs any experiences with this? does this also apply to filter:progid:DXImageTransform.Microsoft.AlphaImageLoader or does it only mean that you should not apply any additional filters?? matthias Sam schrieb:> Thank you everyone for forwarding the references to so many good PNG > solutions. I was able to resolve my issues posted earlier and can now say > some of the solutions seem very good. > > Dean Edward''s solution is neat in that it doesn''t require wrapping the <img> > with spans and the <img retains the ID, Class and Style. The IE7 lib is > 90Kb which might is a factor that needs consideration. > > I also liked webfx > > http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html > > Which gives a 4Kb JavaScript and renders nearly an identical solution as > shown by "View Generated Source". Retains the <img, ID, Class, Style... So > that JavaScript lookups of the modified img element will continue to work as > planned (as long as the src field is not part of the lookup). > > It''s unfortunate that every solution requires changing the img element src > attribute to "blank.gif", making runtime JavaScript replacement of the image > difficult, but perhaps not impossible. Playing with the src attribute (e.g. > for hover effect) would require significant reworking of the png.js files. > > Sam > > > > > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >-- Matthias Platzer Geschäftsführer ------------------------------------------- knallgrau new media solutions gmbh pezzlgasse 7|1, A-1170 wien phone: +43 - 1 - 522 76 37 fax: +43 - 1 - 522 76 38 mobil: +43 - 699 - 1134 0946 http://www.knallgrau.at weitere News im Knallgrau Weblog: http://www.knallgrau.at/company/weblog
I have created user login''s that work with sessions. I am trying to
make a timed logout, so that when the user is idle for a minute, they
are logged out. If their login time''s out, they should be redirected
to controller Headline and action Index. In my application.rhtml I
periodically call a function in application controller called
session_expiry... i do that like this:
<%= periodically_call_remote :frequency => 10, :update =>
"all", :url
=> { :controller => "application", :action =>
"session_expiry"} %>
here is the function in application controller
def session_expiry
@time_left = (session[:expires_at] - Time.now).to_i
unless @time_left > 0
reset_session
render_component :controller => "headline", :action =>
"index"
end
end
The PROBLEM:
When the session ISN''T timed out, then session_expiry doesn''t
render
anything, and doesn''t have session_expiry.rhtml - this throws an
error. I want session_expiry to not render anything when the user
isn''t timed out, so that they stay on the page they were on. How do
I accomplish this?
Seemingly Similar Threads
- booting a dos floppy from a disk image over pxe
- minimizing device-dependent code in graphics scripts
- Sysinux 6 will not boot ISOs on BIOS (i.e. pre-UEFI) systems
- Builder.node, each() and Event.observe - Help!
- before_filter application => exclude some other controllers