Universal PNG fix script? - javascript

Does anyone know of a universal, one stop PNGFix script that isn't dependent on a specific library (like jQuery or Prototype?).
I just want to drop it in the header and have it take care of all transparent .png's from my stylesheets and markup.
Can't seem to find one that will do the job.

We used to use this at my company, until we finally moved off of IE6:
http://www.twinhelix.com/css/iepngfix/. Just google "png fix" or "IE6 png fix" and you'll find dozens of resources. But as others have already warned, many of these cause more problems than they solve, and individual fixes are usually in order.
The best solution would be to not support IE6. Start lobbying with your company's IT department.

A non-library dependent one would be http://www.dillerdesign.com/experiment/DD_belatedPNG/
However you have to individually point out which elements should be targeted. There is never going to be a script that will fix every single png properly because there are so many position/layout scenarios and bugs relating to stacking order in IE6 that it's impossible to account for every situation which is why it's best to individually fix elements.

I think this is the easiest way to ie png fix. Unit Png fix
this is best compare than Helix Png Fix

Related

How to best handle having thousands of DOM elements in browser

I'm working on building a sort of "word cloud" in the browser using html and javascript. The idea is to have a while bunch of words on the screen each one maybe with a different size or different color.
Issue is that I may need 100k+ words on the screen as it is a big area that will be covered. I have attempted to do this using pure html, using span elements with different styles for each word. However this approach makes the browser choke as I assume it is rendering too many DOM elements. Approaches using tables and divs were also unsuccessful.
I am wondering if I am approaching this the wrong way? I suspect there is a more performant way to do this, perhaps using canvas or svg, though these will require more work to integrate I would assume. I also want the user to be able to interact with some of the words such as deleting them or changing them. This makes the html approach seem easiest.
Any help or pointers would be appreciated!

HTML Image map with selectable regions triggering popup content

It has been a long time since I have had to do Image Mapping! Probably like 4-5 years.
The last time I achieved this using the tag and creating tags for polygonal shapes. This of course works, and is still supported html, even in HTML5. Question is though, is this still a good way to go for image mapping? Or should i scrap this direction and aim to use Canvas or SVG techniques instead?
There are a couple of factors in regards to the decision:
The client uses IE7, so the solution has to work with IE7 and IE8, hence me thinking not to use SVG or Canvas, it would be easier I guess to use the old school map tag, at least it will easily work across all platforms.
The Map has quite custom styles (strokes around the areas with a margin gap too)
Each area has a rollover state, with a popup with content unique for each region. This will have to be achieved with JS. Are there any issues using JS to interact with the DOM structure of the map using map tag?
It's not essential, but I would to make the map somewhat responsive to the viewport.
Using the tag frankly feels really old school, dated and dirty. But, to be honest for my case, it seems like the most suited solution. What does everyone think?
Any feedback welcome,
Thanks,
Craig
For your requirements I think best suite is SVG. By some work around you can make use of all time favorite jQuery with SVG and build cool stuff so quickly. I was able to develope a ticket booking tool on theaters with SVG maps within two weeks.
Also now every one needs every thing on mobile and it works on mobile with just no efforts.
Try to convince client to upgrade IE, that will be best for you. All the best.

Javascript 3d-like carousel for complex content

I have been spending about 7 hours today, trying to:
a) Create my own carousel using intensive javascript and CSS3 features (see this pastebin)
b) Setup and integrate the Roundabout plugin from FredHQ
c) Setup and integrate the Cloud Carousel plugin from Professor Cloud
Both third party solutions were tried because i failed in accomplishing what i wanted by myself. Unfortunately, both solutions do not work the way i would require them to. Both are amazing for displaying images, but i need to show more complex content, a heavily styled DIV with multiple encapsulated DIVs inside, PNGs with transparency, and so forth.
FredHQ's version did not work as it did not scale the content inside my DIVs. Not even the text was scaled, until i removed the font-size parameter, but that is something i need for a proper layout. Cloud's version works with images only.
I have hit a wall and i cannot seem to find any other solution. It seems the word "carousel" is used for slideshows and sliders, so i find hundreds of such solutions, but not one that works like i need it to.
What i need is decreasing opacity on further objects, while the center one is at full opacity. Also further objects should be scaled down by certain scale factors. It does not have to be 3D (not desired, even), but due to the scaling it would look 3d-like.
It does not have to be jQuery, although its probably a good idea if it is.
Does anybody know or can anyone point me to a proper solution?
Have you looked at monete(git), http://www.jacklmoore.com/monte? 184 line. Not sure you'll find something easier to dig into and make it work your way. Hundreds of solutions? So I'll take it you looked at the cycle plugin as well. That's probably one of the most mature and robust ones out there. You're asking for a lot in your question and these kind of question just wear people out after a while. That's all.
You probably won't find anything that fits your needs EXACTLY and you'll have to roll it yourself or hire someone. If you get something going and come back for specific help, you'll fair much better.

Find links to images in HTML (incl. outside of common tags/attributes)

I'd like to find (using javascript) all of the references to image links on an HTML page. Since I'm also looking for image references that may not be displayed, or are in unknown attribute types, simply looking for image tags or src's etc. isn't enough. As such, I haven't yet found a simple method using an html parser to do this.
Having looked through the stackoverflow threads, I don't want to lose my soul by employing the dark method of matching that dare not speak its name - I hesitate to mention it here, lest I draw down the fury of those who hate using regu1#r_expre$$i0n$ for such a purpose. But I haven't found the right method yet either.
I know that all links that look like images links are not, and vice versa, but that's OK. I don't need complete coverage, just the widest possible without sacrificing speed. so I'm guessing that following all the links is too intensive, and restricting myself to links that 'look' like images will be just fine.
Anthony was right, regex worked just fine for my purpose here.

What's the best way to apply a drop shadow?

What is the best method for applying drop shadows? I'm working on a site right now where we have a good deal of them, however, I've been fighting to find the best method to do it. The site is pretty animation heavy so shadows need to work well with this.
I tried a jQuery shadow pulgin. The shadows looked good and were easy to use but were slow and didn't work well with any animations (required lots of redrawing, very joggy).
I also tried creating my own jQuery extension that wraps my element in a couple gray divs and then offsets them a little bit to give a shadow effect. This worked well. It's quick and responsive to the animation. However, it makes DOM manipulation/traversal cumbersome since everything is wrapped in these shadow divs.
I know there has to be a better way but this isn't exactly my forte. Thoughts?
ShadedBorder is a good looking and easy to use Shadow-Library. check it out
You don't need to wrap those shadow-divs around the other content, just set them a little askew and place them on a lower z-index !-)
if your main problem is to navigate the DOM, just add a class and/or id to your element, and refer it with JQuery selectors. even better if you store the ref in a variable, so you don't need to select it too frequently
Although it is yet to have full cross-browser support, you might like to try using the CSS 3 text-shadow property.
It largely depends on how frequently your images will need to be changing, and the colored areas that they'll be covering. Because I'm guessing that you'll be needing to pay attention to IE6 compliance, most alpha-PNG solutions will cause such horrible jittery-ness that you'll spend more time in performance optimzation than you would have wanted to guess.
To solve this in the past, since our images are modified less than once a month, we call the images through a caching-PHP script which automatically applies the shadow using a pre-defined background color so we don't have to rely on any transparency. This results in faster downloads (fewer HTTP requests) and a faster-interface because there's less Javascript/CSS magic in the works.
I understand that this is a very old-school solution, and the above solutions would be entirely acceptable if your images were static, but being cross-browser compliant and animated will likely force you to do a solution of this style.

Categories