Hi Gilles, thanks for checking my code.
On 31 mar, 17:32, Gilles <[email protected]> wrote:
> If the style are appended to the head it works just fine.
>
> Here I am not sure I get why the div is created nor why the span
> variable is declared (probably snippet of code and it is use somewhere
> else i assumed)
>
> <body>
> <p id="test">This test should have border and padding!</p>
> <script type="text/javascript">
> var div = document.createElement('div');
> // <br/> added to avoid a bug in IE
> div.innerHTML = '<br /><style>#test { border:2px solid #000;
> padding:1ex; }</style>';
> var span = div.getElementsByTagName('span')[0];
> document.body.appendChild(div);
> </script>
> </body>
This was only a example of dynamically inject style tag into HTML.
As said, it works fine in Firefox and Opera, so no relocation (to the
head) is needed.
I added "<br />" to avoid a bug from IE6 & IE7 and now it works for
those browsers too.
But Chrome and Safari doesn't apply the styles at all, so in this case
we need a fallback.
>
> But from your plugin you seems to add them to the head in the end,
> which should be fine, i tried redoing the above code in JQuery, just
> using:
>
> <body>
> <p id="test">This test should have border and padding!</p>
> <script type="text/javascript">
> // <br/> added to avoid a bug in IE
> $('head').append('<style type="text/css">#test { border:2px solid
> #000; padding:1ex; }</style>');
> </script>
> </body>
>
> and it work fine in safari as well. Safari might have issue with
> cascading stylesheet injected in the <body> after the DOM is loaded if
> they are not in the <head> tag. So basically if some <style> or
> <script> are added to head it load them.
My goal was to be able to inject style and link tags anywhere in the
DOM, and have them applied.
Also I want to "unapply" those styles if the original content is
removed.
Then, when the original content is removed, remove also the style.
Imagine a modification in jQuery so html() moves every <style> to
<head>, then:
<p id="test">Test</p>
<div id="container"></div>
<script>
$(function(){
$('#container').html('<style>#test { color:red; }</style>');
$('#container').empty()
});
</script>
The style is added to head, so is applied, and #test will be colored
red.
Then, the container is emptied but, as the style is in the head, color
remains red.
I want to be able the style to be unapplied, as if it were inlined and
removed.
In less words, as it happens on Firefox, Opera or, even, in IE.
>
> For the fcase where you have inline @import('foo.css'); you could
> simply convert that to a <link href="foo.css"...> and the problem
> might go away.
>
Yes, it would be perfect if I could modify those HTML and CSS files.
But I don't know the exact content, so I must make no assumptions on
the code received.
> Also I don't understand:
>
> In Safari and Chrome, the style isn't removed when loading 1) after 3)
> or 5).
> After 2) or 4) it works ok.
>
> You say the style sin't remove, yet your list show:
>
> 1) <p>Default, no style</p>
> 2) <style type="text/css">#test { color:red; }</style>
> 3) <link rel="stylesheet" href="remote.css" /> and remote.css #test
> { color:red; }
> 4) <style type="text/css">@import url("remote.css")</style>
> 5) <link rel="stylesheet" href="import.css" /> and import.css @import
> url("remote.css")
>
> where 1) doesn't actually have a style anyway, so surely it's normal
> it doesn't get removed.
I hope this is understandable with the previous explanation, but to be
sure:
When loading 3) or 5) the browser processes the related CSS.
Next, when loading 1) while 3) or 5) are active, the (previous) CSS
should be removed and unapplied.
But it's not and I don't know why.
Curiously, it works with 2) and 4) before 1).
>
> Not sure all my newbie advices will help or point you in the right
> direction, but thought i share them anyway :)
>
All advices are good in some way.
Thanks a lot for share your points
> On Mar 31, 10:08 am, Berny Cantos <[email protected]> wrote:
>
> > Hello to all jQuery developers and enthusiasts. This is my first post
> > in this list.
> > I hope I'm not breaking the rules replying to this two months old
> > thread, but I'm highly interested in this topic.
>
> > I'm developing an internal web app that makes intense use of AJAH,
> > with HTML responses coming from all kind of sources.
> > That means I have no control over the presence of <style> tags nor
> > <link> ones, but I want to apply them nonetheless.
> > Also, I'd like those rules to be cleaned when the related style/link
> > tags are removed from the body.
> > This could happen if I replace completely the content of the parent
> > node i.e. via another AJAH request.
>
> > The inconsistencies among browsers are THIS big. Even bigger.
> > But I need to be as cross-browser as posible, so I tried feature
> > detection on this.
> > I finally developed a plugin that modifies $.fn.html to relocate style
> > and link tags, but it has some issues.
>
> > IE browsers choke on stylesheets containing import declarations.
> > Also, removing stylesheets containing import declarations doesn't work
> > in Chrome and Safari.
>
> > See the code athttp://tinyurl.com/djsmln
>
> > I thought this topic would be interesting for lots of web developers,
> > but I barely found 1 thread about it.
> > Can somebody please help me with this?
> > Thanks in advance
>
> > Berny
>
> > On 6 feb, 12:51, ajp <[email protected]> wrote:
>
> > > Apologies - I was using release 2.0.160.0 of Chrome, not the 1.0
> > > branch; but injecting arbitrary styles into the body _does work_ on
> > > this build.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
