Styling a "Preview" Page

[johnw]

I'm using Blueprint for my site, but I have a need for previewing
another page within the context of my main website page but not
inherit it's associated styling.

I'm using jQuery.dialog() to create the preview, but since the preview
markup needs to be embedded within the main website for jQuery to
grab, it inherits all the Blueprint styling. The page being previewed
has entirely separate css within it (it is an html email template with
<table>).

The page from which the preview occurs looks like this:

html
head
body
div .container
main page goes here
/div
div preview
email template code for jQuery dialog goes here. I don't want
to Blueprint to cascade here.
/div
/body

Any ideas on the best way to handle this?

[Hector Virgen]

You can use an iframe. jQuery can read the contents of the iframe from the outer page or it can load jquery on its own.

> --
> You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
> To post to this group, send email to bluepr...@googlegroups.com.
> To unsubscribe from this group, send email to blueprintcss...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en.
>

[Denis BEURIVE]

Hello,

I may have a solution. But, I have not tested it.

Using JavaScript, and JQuery specifically, you can access CSS (http://api.jquery.com/css/).

Therefore, you should be able to remove the inherited CSS, using JQuery.

Regards,

Denis

2011/3/29 johnw <john....@gmail.com>

[Denis BEURIVE]

Hello,

I just add some details about my previous intervention.

• You can bind a handler to the event "create", that is raised when the dialog is being created. See: http://docs.jquery.com/UI/Dialog
• You can access CSS using JQuery : http://api.jquery.com/css/
  

So my solution is :

You should bind a handler to the event "create". This handler should remove the CSS.

I did not test it. but it should work.

Regards,

Denis


http://docs.jquery.com/UI/Dialog

2011/3/29 Denis BEURIVE <denis....@gmail.com>

[johnw]

Seems like a good option, however iframe requires src = url.  My source is in a variable/string, which I don't think is an option for iframe?

[johnw]

Denis, I could just do that via a static stylesheet vs. using jQuery, but I didn't want to override every css element that Blueprint sets up, which is what I would have to do:
#mypreview { margin:0, padding:0, etc... }
which is the same as:
$("#mypreview").css('margin","0px").css("padding","0px").css...

I just want to wipe out any styles in one shot without doing individual settings back to zero, none. etc.

[Denis BEURIVE]

Hello,

Using JQuery, for a given item, you can remove all CSS classes in one single shot:

$("#item").removeClass();

Note: See http://stackoverflow.com/questions/1424981/how-to-remove-all-css-classess-using-jquery

Using JQuery, you can select all children of a given element;

http://api.jquery.com/find/

Therefore, considering a given element, you can remove all CSS to this element, and to all its children:

$("#item").removeClass(); // For the element itself.

$("#item").find().removeClass(); // For all its children.

It did not test the second line, but it should work.

A+

2011/3/29 johnw <john....@gmail.com>

[Denis BEURIVE]

Hello,

Using JQuery, for a given item, you can remove all CSS classes in one single shot:

$("#item").removeClass();

Note: See http://stackoverflow.com/questions/1424981/how-to-remove-all-css-classess-using-jquery

Using JQuery, you can select all children of a given element;

http://api.jquery.com/find/

Therefore, considering a given element, you can remove all CSS to this element, and to all its children:

$("#item").removeClass(); // For the element itself.


$("#item").find().removeClass(); // For all its children.

It did not test the second line, but it should work.

In a single line, it should also work :

$("#item").removeClass().find().removeClass()

A+

2011/3/29 johnw <john....@gmail.com>

[johnw]

Denis, how would that clear something inherited from, say:

body {line-height:1.5;background:white;}

Which is based on tags and not classes and which Blueprint has in screen.css?

[Denis BEURIVE]

Well, I don't see any easy way indeed.

The difficulty is to get the list of all CSS properties that apply to a given element. Once you have this list (of properties), you should be able to take each element on the list and remove the property.

Getting the list manually is not a good idea.

To get this list, I may use a browser's add-on. (ex: The FireFox extension "Web Developer").

https://addons.mozilla.org/fr/firefox/addon/web-developer/

You click on the element, and you get the list of CSS properties that apply to the element.

Note: You can do that with IE8 too (press F12, if I remember well).

Once you have the text from the add-on, you have a create a JavaScript array. This could easily be done using Perl (simple regexp).

var cssProperty = new array('color', 'height',...);

Once you have this list, you can erase all properties using JQuery.

The problem is : If you change your CSS (for the page), you may have to re-generate the list (var cssProperty) - but with a Perl script, it should be easy enough.


Regards,

Denis

2011/3/29 johnw <john....@gmail.com>

Denis, how would that clear something inherited from, say:

[Denis BEURIVE]

Hello,

Since your question is interesting, I have quickly written a very small Perl script that extracts all properties from a given list of style sheets.

For this script I used the CSS parser Allen Day and Cal Henderson, which you can find on the Comprehensive Perl Archive Network (aka CPAN).

URL : http://search.cpan.org/~iamcal/CSS-1.09/CSS.pm

This script takes all properties from a list of style sheets and generates a JavaScript array, as I said in my previous mail.

Usage :

perl css2js.pl --help
Usage: perl css2js.pl (--help | --stylesheets=<list of style sheets>)

Let's apply the script to BluePrint:

perl css2js.pl --stylesheets='forms.css;grid.css;ie.css;print.css;reset.css;typography.css'

This will create a JavaScrip array that contains all properties defined in the style sheets.

# Total: 42
var cssProperties = new array('font-style','border-right-width','background','padding-right','border','margin','border-right','height','margin-top','border-left-width','margin-right','color','width','position','display','padding-left','float','border-width','content','overflow-x','margin-left','border-bottom','border-color','border-style','background-color','font-family','padding','font','visibility','overflow','white-space','line-height','padding-top','margin-bottom','border-collapse','text-align','border-spacing','font-size','font-weight','clear','text-decoration','vertical-align');

OK. We have a quick and easy way to retrieve all the CSS properties to remove.

The JavaScript code should be:

for (i=0; i<cssProperties.length; i++)
{ $('#item').css(cssProperties[i], '').find().css(cssProperties[i], ''); }

The code above should remove all CSS properties listed in the array, for the element designed by its ID "item", and for all its children. I did not test it, but this part of the work should be OK.

I join the Perl script to this email (css2js.pl).

In order to use it, make sure to install the two following Perl modules:

• CSS: http://search.cpan.org/~iamcal/CSS-1.09/CSS.pm
• Getopt::Long: http://search.cpan.org/~jv/Getopt-Long-2.38/lib/Getopt/Long.pm

Note: These modules can be installed automatically using the CPAN installer (cpan -i CSS and (cpan -i Getopt::Long).

Regards,

Denis

2011/3/29 johnw <john....@gmail.com>

Denis, how would that clear something inherited from, say:

[Denis BEURIVE]

Hello John,

The problem was challenging. That's why I quickly wrote a JQuery add-on that does just what you need.

Usage:

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="cssClear.js"></script>
<script language="javascript">
    $(function()
    {
      var cssProperties = new Array('font-style','border-right',...);
      var cssPropertiesOther = new Array('font-style','border-right',...);
      $('[cssCleaning]').cssClear(cssProperties);
      $('[cssCleaningOther]').cssClear(cssPropertiesOther);
    });
</script>
...
<div cssCleaning="properties|classes|styles" class="span-20" style="background-color:#c0c0c0">
<div cssCleaning="properties|classes" class="span-20" style="background-color:#c0c0c0">
<div cssCleaningother="properties" class="span-20" style="background-color:#c0c0c0">

You can removes :

• Only classes.
• Only in-line styles.
• Only a given list of CSS property.
• Or a combinaision of the 3 previous actions.

I send :

• The JQuery add-on : cssClear.js
• The Perl script that extracts all CSS properties from the style sheets : css2Js.pl
• A HTML file use to test the JQuery add-on: clear.html

I'll put this add-on to the JQuery WEB site.

Regards,

Denis

2011/3/29 johnw <john....@gmail.com>

Denis, how would that clear something inherited from, say:

[johnw]

Wow, very cool.  Thank you for working on this.  I will try this once I get past my current roadblocks that I'm working through.

[Franz Josef Kaiser]

A lot of effort on this answer. Due to the nature of this list, your
answer (and therefore your efforts) will disapear in the depth of the
list within some weeks. I'd suggest to add your solution to the github
wiki and link here (or link inside the wiki to one of your gists -
that will increase the popularity of your github account, which in
this case would absolutetly be ok).

[Denis BEURIVE]

Hello,

I put the Perl script in a new page:

https://github.com/joshuaclayton/blueprint-css/wiki/property-extractor

I added a link to this page to the section "Tools and Resources", under the sub-section "Language-specific Utilities".

I tried to create a new page for the JQuery add-on. But there is a problem with the JavaScript syntax : It interferes with the syntax of the WIKI. I tried different kinds of WIKI (mediawiki, textile,...), but the JavaScript code does not fit.

Note : I am not an expert on WIKI. There may be a way to add some complex JavaScript code... but I ignore it.

Do you know a way to add "brut source code"?

Regards,

Denis

2011/3/30 Franz Josef Kaiser <24...@gmx.net>

[Denis BEURIVE]

Finally, I succeed in adding the JQuery add-on. but I had to replace :

cssClearAttr = cssClearAttr.replace(/^\[/, '');
cssClearAttr = cssClearAttr.replace(/\]$/, '');

By:

cssClearAttr = cssClearAttr.substring(0, cssClearAttr.length - 1);
cssClearAttr = cssClearAttr.substring(1, cssClearAttr.length);

The former did not fit into the WIKI...

The URL: https://github.com/joshuaclayton/blueprint-css/wiki/JQuery-Plugin-Clear-Css

Regards,

Denis

2011/3/30 Franz Josef Kaiser <24...@gmx.net>

A lot of effort on this answer. Due to the nature of this list, your

[Franz Josef Kaiser]

Hi Denis,

first i want to say thank you. Every effort taken on the Github-Wiki
pages is a big help for the community. And much more such a complex &
good written tutorial!

Now here comes the BIG sorry: I tried to quickly read through how you
could place the jQuery inside the page and thought i'd just switch to
textile syntax (right upper side), which didn't do any good. Sadly
everything got changed to the textile syntax and the complete tutorial
is broken. Further more i haven't got enough rights to revert the
changes (don't ask me why - i'll have to talk to Christian about
this). I'll be away for the next hours but fix that later. Btw: In
textile it should just add "pre" both in front and after the code
block. There also appears (sometimes) a small tutorial for the
different languages on top of the page when you edit. Maybe there's
some hint (in one word: the github wiki editing is really not the
best).

Until later,
K.

On 31 Mrz., 12:05, Denis BEURIVE <denis.beur...@gmail.com> wrote:
> Hello,
>
> I put the Perl script in a new page:
>
> https://github.com/joshuaclayton/blueprint-css/wiki/property-extractor
>

> I added a link to this page to the section "*Tools and Resources*", under
> the sub-section "*Language-specific Utilities*".

[Hector Virgen]

If you're still interested in an iframe-based solution I put together a quick jquery plugin as a proof-of-concept. You can check it out here:

http://www.virgentech.com/demos/iframeize/

The jQuery plugin can be found here:

http://www.virgentech.com/demos/iframeize/js/jquery/plugins/jquery.iframeize.js

I hope this helps!

--
Hector Virgen

Sr. Web Developer

http://www.virgentech.com

[Hector Virgen]

On Tue, Mar 29, 2011 at 9:24 AM, johnw <john....@gmail.com> wrote:

Seems like a good option, however iframe requires src = url.  My source is in a variable/string, which I don't think is an option for iframe?

To address your concern, my iframeize demo does not use a src attribute to load the iframe. It takes an existing dom node and injects it into an iframe created by the plugin, effectively resetting all styles.

[johnw]

Awesome.  Thanks.  I will try to adapt this to my string scenario where it is coming back from Ajax.  I will work on a version that I can essentially do this with: $('#mytarget').iframeize(mystringvar)

[Hector Virgen]

Very cool, should just require a small modification to the plugin.

[Franz Josef Kaiser]

@DENIS:

i just fixed the wiki page as promised.

The allowed textile formatting rules can be found all over the web,
but in short html tags like <pre> & code work also as "bc." and "@some
$code_line echo bla@" works. I'm not completely sure what you meant
with the javascript code (which one exactly), but please just try to
mod my changes and try to add it. If nothing works, feel free to
contact me via e-mail.

Cheers,
Franz Josef Kaiser.

[Denis BEURIVE]

@Franz

There is somethinh strange:

• Yesterday (31/03), around 16h (Paris time), the two pages looked good.
• Yesterday (31/03), around 23h30h (Paris time), I looked at the pages, since you told me that you will look at the 2 pages. The page about the Perl script did not look good. But I was too tired to look at it. I told myself that I'll try next morning.
• Today (01/04), at 9h45 (Paris time), the pages looked good again.

So I suppose I looked at the pages while you were touching them.



The problem with the JavaScript code was on the following page : https://github.com/joshuaclayton/blueprint-css/wiki/JQuery-Plugin-Clear-Css

I first tried "mediaWiki", then "textile.". I had trouble with the formatting. Some part of the code did not fit well. I tried to escape some characters... but I did not succeed.

 Then I tried "Markdown". It seemed much better... But, still, there was a problem.

For the JavaScript code, I just added 4 spaces at the beginning of each line (Doc: http://daringfireball.net/projects/markdown/basics). In fact, 99% the JavaScript code fits well. But the 2 following lines screwed up the entire page.

cssClearAttr = cssClearAttr.replace(/^\[/, '');
cssClearAttr = cssClearAttr.replace(/\]$/, '');

I isolated the problem to the characters "[" and "]". I tried to escape them... as mentioned in the Markdown documentation. But the page was still screwed up.

Finally I decided to replace the 2 lines above by 2 other lines, that do the same (but without using "]" and "[") :

cssClearAttr = cssClearAttr.substring(0, cssClearAttr.length - 1);

cssClearAttr = cssClearAttr.substring(1, cssClearAttr.length);

It worked... so I left the page that way.

From my point of view, the two pages looks good now. Do you see any problem on the pages?

Regards,

Denis

2011/4/1 Franz Josef Kaiser <24...@gmx.net>

[Franz Josef Kaiser]

@Denis:

So far everything looks good! And yes, the mess was caused by me :)

Some things i have to note: I currently added a note that the pages
you added are in "Draft-Mode" and shouldn't be used on live sites. I
also saw that jQuery is used without no conflict mode. I'd suggest
things that could be taken into consideration:
a) Has it been properly tested? Maybe it would make sense to ask some
people here on the list if they'd participate in a small'n'fast test-
group. I guess 3 are enough to find out if there are any hidden traps.
Feel free to open a new thread on this (I'm already thinking about how
we could get an active group of testers - ideas welcome).
b) Maybe you could find some examples that better describe some
possible use cases than "for some reason".

Cheers,
K.

[Denis BEURIVE]

Hello,

a) Has it been properly tested?

Not at all ;-) It's just a kind of "proof of concept".

I've written it in response to a question on the mailing list. But, I actually never used it.

b) Maybe you could find some examples that better describe some possible use cases than "for some reason".

I don't see any good reason, except the one mentioned by Johnw :

JQuery's pop-up windows are embedded in the main HTML document. Therefore, these windows inherit all CSS from the main document.

If you want to apply a specific style to these Windows, you need to find a way to "suppress" all inherited CSS. You can use Iframes, or you can use JavaScript.

Regards,

Denis

2011/4/1 Franz Josef Kaiser <24...@gmx.net>

@Denis:

--