Forums
View unanswered posts | View active topics It is currently Sat Dec 20, 2014 6:57 am



Reply to topic  [ 8 posts ] 
 PIE JavaScript edition – Attach from CSS 
Author Message

Joined: Sat Oct 13, 2012 9:26 pm
Posts: 3
Post PIE JavaScript edition – Attach from CSS
I'm in one of those situations where using the .htc method is not an option.
After having a taste of it, there was no way I was going to walk the DOM to attach PIE.

So this is my solution for attaching from the CSS:
Code:
.CORNERS {
    border-radius: 10px;
    -pie: expression(this._pieId || window.PIE && window.PIE.attach(this));
}


Sat Oct 13, 2012 9:41 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1448
Post Re: PIE JavaScript edition – Attach from CSS
Very interesting!

I'd want to double-check that the expression doesn't continue to execute after attachment (I believe the term is "single-run expression") but I can see this being very useful for folks.

It doesn't handle element destruction like the 'behavior' property does, but it's probably good enough in most simple cases.


Mon Oct 15, 2012 1:28 pm
Profile

Joined: Tue Nov 29, 2011 1:26 am
Posts: 38
Post Re: PIE JavaScript edition – Attach from CSS
Hello guys, sorry for being dumb but how we must use this on css?
I try to use in css under this example:
.secondary,.primary {
float: left;
margin-right: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
box-shadow: 0 0 2px 1px #ccc;
padding: 3px 7px;
font-weight: normal;
font-size: 11px;
color: #f5f5f5;
cursor:pointer;
border-radius:4px;
position:relative;
z-index:1;
background: -moz-linear-gradient(center top , #FF9172 0%, #FF0000 100%);
background: -webkit-linear-gradient(top, #FF9172 0%, #FF0000 100%);
background: -o-linear-gradient(top, #FF9172 0%,#ff0000 100%);
background: -ms-linear-gradient(top, #FF9172,#ff0000 100%);
-pie-background: linear-gradient(top, #FF9172, #ff0000 100%);
-pie: expression(this._pieId || window.PIE && window.PIE.attach(this));
}
I have main PIE.js in head and that document ready function for applying pie to my elements ...but unfortunately it is not working :(
I must use a specific css in head only for pie?
Thank's.


Thu Oct 18, 2012 12:41 am
Profile

Joined: Sat Oct 13, 2012 9:26 pm
Posts: 3
Post Re: PIE JavaScript edition – Attach from CSS
rulernature wrote:
I try to use in css under this example

Code:
<!DOCTYPE html>
<html>
   <head>
      <title>PIE TEST</title>
      <script type="text/javascript" src="PIE.js"></script>
      <style type="text/css">
         .secondary,.primary {
            float: left;
            margin-right: 9px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            box-shadow: 0 0 2px 1px #ccc;
            padding: 3px 7px;
            font-weight: normal;
            font-size: 11px;
            color: #f5f5f5;
            cursor:pointer;
            border-radius:4px;
            position:relative;
            z-index:1;
            background: -moz-linear-gradient(center top , #FF9172 0%, #FF0000 100%);
            background: -webkit-linear-gradient(top, #FF9172 0%, #FF0000 100%);
            background: -o-linear-gradient(top, #FF9172 0%,#ff0000 100%);
            background: -ms-linear-gradient(top, #FF9172,#ff0000 100%);
            -pie-background: linear-gradient(top, #FF9172, #ff0000 100%);
            -pie: expression(this._pieId || window.PIE && window.PIE.attach(this));
         }
      </style>
   </head>
   <body>
      <div class="primary">
         works for me
      </div>
   </body>
</html>


This works on IE7.
"expression" doesn't work on IE8+ unless quirksmode is triggered.

To test this, save to .html, open in IE9, press F12 and change Document Mode


Thu Oct 18, 2012 2:53 am
Profile

Joined: Tue Nov 29, 2011 1:26 am
Posts: 38
Post Re: PIE JavaScript edition – Attach from CSS
Unfortunately I need something like this on Ie8+ :( Do you think I can use something similar with your example but to work in IE8?
Thank's for your answer.


Fri Oct 19, 2012 2:34 am
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post Re: PIE JavaScript edition – Attach from CSS
jason wrote:
It doesn't handle element destruction like the 'behavior' property does, but it's probably good enough in most simple cases.


hey, couldn't a simple behavior:expression(...?...) take care of the destruction?


CarlitoGil wrote:
"expression" doesn't work on IE8+ unless quirksmode is triggered.


instead of quirks mode, you could just force ie in ie7-mode with the appropriate mata (but that's dirty too)


Wed Dec 12, 2012 5:05 am
Profile

Joined: Sat Oct 13, 2012 9:26 pm
Posts: 3
Post Re: PIE JavaScript edition – Attach from CSS
xem wrote:
you could just force ie in ie7-mode with the appropriate mata (but that's dirty too)


Try this in the HEAD tag
Code:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Should work on IE8 and leave IE9 the same.

As dirty goes, this isn't that much, I think.


Wed Dec 12, 2012 5:41 am
Profile

Joined: Wed Jan 09, 2013 1:16 am
Posts: 1
Post Re: PIE JavaScript edition – Attach from CSS
CarlitoGil wrote:
xem wrote:
you could just force ie in ie7-mode with the appropriate mata (but that's dirty too)


Try this in the HEAD tag
Code:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Should work on IE8 and leave IE9 the same.

As dirty goes, this isn't that much, I think.

That's like a good idea..
Any more ideas?


Wed Jan 09, 2013 1:17 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 8 posts ] 

Who is online

Users browsing this forum: Yahoo [Bot] and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.