Forums
View unanswered posts | View active topics It is currently Fri Oct 24, 2014 7:33 am



Reply to topic  [ 3 posts ] 
 Injecting the good stuff via jQuery = :[ 
Author Message

Joined: Wed Aug 11, 2010 9:14 am
Posts: 3
Post Injecting the good stuff via jQuery = :[
Before I begin this post I'll add I have this working outside of jQuery, with something like the following:

// Wordpress header.php
<!-- CSS -->
<!--[if IE]>
<style type="text/css">
html.js body #page #header .branding a.toggleHide-Btn,
html.js body #nav-above .nav-previous a,
html.js body #nav-above .nav-next a,
body #page,
body #page #header .branding .image,
body #page .content #primary-wrapper #primary .hentry .entry-head .entry-title a,
body #page .content #primary-wrapper #primary .hentry .entry-head .entry-edit a.post-edit-link,
body #page .content #primary-wrapper #primary .comments ul#commentlist .comment.odd,
body #page .content #primary-wrapper #primary .comments ul#commentlist .comment .buttons .comment-edit a.comment-edit-link,
body #page .content #primary-wrapper #primary .comments ul#commentlist .comment .buttons .comment-reply a.comment-reply-link,
body #footer .nav-section,
body #footer ul#siteInfo-credits li.siteInfo-credits,
body.s-category-festivals #page .content #primary-wrapper #primary .comments ul#commentlist .comment .buttons .comment-edit a.comment-edit-link,
body.s-category-festivals #page .content #primary-wrapper #primary .comments ul#commentlist .comment .buttons .comment-reply a.comment-reply-link,
form input[type="text"],
form textarea,
form input[type="submit"]{behavior:url(<?php bloginfo('template_url') ?>/styles/PIE-1.0beta1/PIE.php);}
</style>
<![endif]-->

My problem occurred today when I tried to replace all of the above CSS and inject the behavour into elements that already have a border-radius CSS property instead. (For simplicity I've used the most basic of code below; using only the body selector. The full script included an if statement):

// Wordpress footer.php
<script type="text/javascript">
$(document).ready(function () {
// CSS3PIE
$('body').each(function () {
$(this).css('behavior', 'url(<?php bloginfo('template_url'); ?>/styles/PIE-1.0beta1/PIE.php)');
});
});
</script>

I also tried an absolute URL.

... both worked. I know this because in both cases the script crashed IE(8).

Is it possible to use CSS3PIE in combination with jQuery? Has anyone else tried this?

Thanks,


Wed Aug 11, 2010 9:22 am
Profile

Joined: Wed Aug 11, 2010 9:14 am
Posts: 3
Post Re: Injecting the good stuff via jQuery = :[
*Bump?* :roll:


Mon Aug 16, 2010 3:04 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Injecting the good stuff via jQuery = :[
It's certainly possible to apply the behavior via jQuery, as the css3pie.com homepage does exactly that for the demo. Try using the syntax:

Code:
element.addBehavior('url/of/PIE.htc');


That said, applying the behavior this way has performance implications, namely that you won't get any CSS3 styles applied until after jQuery and any other scripts have fully loaded and the documentready event has fired. This is one of the big advantages of using HTC-via-CSS rather than JS as the wrapper for PIE: it can be downloaded asynchronously and can be applied right away, often before any of the page has been rendered, so you don't get any flash of unstyled elements.


Mon Aug 16, 2010 8:31 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Google [Bot], 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:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.