I post this topic coz it might help. But if it doesn't help please tell me to delete it. As we know that friendster is updated again some of our codes aren't working anymore... but for the meantime we can still used our CSS putting this code in ABOUT ME section: but for javascript still not working...We haven't another alternative for it. here some of codes that might help us or give us an idea that can Integrate Javascript in CSS...but as I try this the only works is the alert message that I made..so now, I ask for a help of you guys to enhance this code and maybe it could help us... Works in Explorer and Opera. Recently it has been discovered that it's possible to add JavaScript to CSS files. [b]The trick[/b] First of all let's review the trick itself. If you saw one or two alerts when entering this page the trick works in your browser. If you didn't see any alerts, it doesn't work. As far as I know it only works in Explorer (Windows and Mac) and Opera. This DIV has the following styles [quote]#test { border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert(message);') }[/quote] When parsing the CSS file, Explorer and Opera encounter the JavaScript and execute it. They execute it only once, though, so if you'd repeat the background-image: etc for another class or id, you still see one alert only. As a second test I defined these styles for an element with id="test2": [quote]#test2 { border: 1px solid #cc0000; padding: 10px; background-image: url('javascript:alert(message2);') }[/quote] However, I did not put this element in my HTML. Explorer on Windows and Opera don't show the second alert, but Explorer on Mac does. Apparently Explorer Mac also parses styles for absent elements. Good to know. [b]Restrictions[/b] So far so good, this simple example works. However, when I tried to actually do something useful I ran into the restrictions of this technique. [b]Quotes[/b] First of all there is some trouble with quotes. My very first test was: [quote]background-image: url('javascript:alert('It works');')[/quote] Explorer Windows showed the alert fine, but Explorer Mac complained about the quotes. Opera did nothing. When I tried [quote]background-image: url('javascript:alert(\'It works\');')[/quote] Explorer Mac and Opera showed the alert fine, but Explorer Windows complained about the quotes. I'm not sure who's right here, and avoided the problem by rewriting my test to use a variable message to hold the alert text. In a real script this would be a serious problem, though. [b] Generating a background image [/b] Then I tried to write a simple script that generates a random background image for an element. This was the only actual, practical use of the technique I could think of. I tried [quote]background-image: url(javascript: document.write('pix/test'+(parseInt(Math.random()*5)+1)+'.gif'));[/quote] and Explorer Windows wrote the image name to the document, incidentally destroying this page. It didn't work without the document.write, either. At the moment I don't think generating a random background image is at all possible. Useless JavaScript belongs in a JavaScript file, not in a CSS file. I'd only insert JavaScript in a CSS file if that course of action would have clear advantages. Since this technique doesn't work in all browsers and cannot be used to actually insert dynamic content into a CSS file, it has no redeeming features whatsoever. Therefore I don't see any reason to use it. But how about using it to make sure a certain script is only executed in Explorer and Opera? I advise against it, for three reasons: You rarely need a script that works in Explorer and Opera, but no other browsers. Any attempt to make sure a certain script only works in one browser is worse than useless. Secretly this technique would serve as a browser detect, and anyone who uses a browser detects will get what he deserves. Besides, assuming this technique will remain restricted to these two browsers is very dangerous and would secretly be a CSS hack. Sure, at the moment it doesn't work in any other browser. But suppose we find a practical use for the technique? Then other browsers might start supporting it, too, and our scripts, written to be executed only in Explorer, would misfire disastrously. If this technique is useful, we cannot count on it remaining restricted. On the other hand, if it is useless we don't need it anyway. so as i discover also that for Internet Explorer (that normally only allows :hover styles on links) is pretty handy, but what really impressed me about it is his way of integrating arbitrary Javascript functions into the stylesheet itself: [quote]body { background: url(" javascript: document.body.onload = function(){ ...custom js here... } "); }[/quote] By specifying a rule like this in the browser's user stylesheet, it might even be possible to run a custom set of Javascript commands on opening of any visited website. (Although my brief attempt at making this work proved unsuccessful.) [b]Credit BY:[/b] [b] hujan miung [/b] [b] javascript.com[/b]

Last edited by lordheinz (2008-08-05 11:25:48)