I want my page to be able to alternate between two stylesheets. You can read the technique here: http://www.alistapart.com/stories/alternate/
and examples here: http://www.csszengarden.com/ I've written this using XHTML/CSS and a Javascript styleswitcher (so it's client side switching) in the following way: <link rel="stylesheet" href="styles/bare.css" type="text/css" title="Bare" media="screen, projection" /> <link rel="alternate stylesheet" href="styles/blue.css" type="text/css" title="Blue" media="screen, projection" /> <script type="text/javascript" src="styles/styleswitch.js"></script> does anybody knows how can (or at least the easiest way) achieve this in Seaside? (I´m using Squeak with Seaside 2.61-mb8. I've seen an e-mail from Avi Bryant from may 2004 but haven't found anything in the SqueakMap and Cincom Public Repository, any idea?). Juan _______________________________________________ Seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
2006/9/20, Burella Juan M. <[hidden email]>:
> I want my page to be able to alternate between two stylesheets. You can read > the technique here: > http://www.alistapart.com/stories/alternate/ > > and examples here: http://www.csszengarden.com/ > > I've written this using XHTML/CSS and a Javascript styleswitcher (so it's > client side switching) in the following way: > > <link rel="stylesheet" href="styles/bare.css" type="text/css" title="Bare" > media="screen, projection" /> > <link rel="alternate stylesheet" href="styles/blue.css" type="text/css" > title="Blue" media="screen, projection" /> > <script type="text/javascript" > src="styles/styleswitch.js"></script> > > does anybody knows how can (or at least the easiest way) achieve this in > Seaside? > > (I´m using Squeak with Seaside 2.61-mb8. I've seen an e-mail from Avi Bryant > from may 2004 but haven't found anything in the SqueakMap and Cincom Public > Repository, any idea?). Try the following, add these methods to WAHtmlRoot styleElementWithHref: anUrlString titled: aTitleString media: aMediaString ^(self styleElementWithHref: anUrlString) attributeAt: 'title' put: aTitleString; attributeAt: 'media' put: aMediaString; yourself linkToStyle: url titled: aString media: aMediaString self addHeadElement: (self styleElementWithHref: (self absoluteUrlForResource: url asString) titled: aString media: aMediaString) then in your root component class: updateRoot: anHtmlRoot super updateRoot: anHtmlRoot. anHtmlRoot linkToStyle: 'styles/bare.css' titled: 'Bare' media: 'screen, projection'. anHtmlRoot linkToStyle: 'styles/blue.css' titled: 'Blue' media: 'screen, projection'. anHtmlRoot linkToStyle: 'styles/styleswitch.js' Damn we need the canvas api for head elements too. Philippe _______________________________________________ Seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
> Damn we need the canvas api for head elements too.
+1 -- Lukas Renggli http://www.lukas-renggli.ch _______________________________________________ Seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
In reply to this post by Philippe Marschall
2006/9/20, Philippe Marschall <[hidden email]>:
> 2006/9/20, Burella Juan M. <[hidden email]>: > > I want my page to be able to alternate between two stylesheets. You can read > > the technique here: > > http://www.alistapart.com/stories/alternate/ > > > > and examples here: http://www.csszengarden.com/ > > > > I've written this using XHTML/CSS and a Javascript styleswitcher (so it's > > client side switching) in the following way: > > > > <link rel="stylesheet" href="styles/bare.css" type="text/css" title="Bare" > > media="screen, projection" /> > > <link rel="alternate stylesheet" href="styles/blue.css" type="text/css" > > title="Blue" media="screen, projection" /> > > <script type="text/javascript" > > src="styles/styleswitch.js"></script> > > > > does anybody knows how can (or at least the easiest way) achieve this in > > Seaside? > > > > (I´m using Squeak with Seaside 2.61-mb8. I've seen an e-mail from Avi Bryant > > from may 2004 but haven't found anything in the SqueakMap and Cincom Public > > Repository, any idea?). > > Try the following, add these methods to WAHtmlRoot > > styleElementWithHref: anUrlString titled: aTitleString media: aMediaString > ^(self styleElementWithHref: anUrlString) > attributeAt: 'title' put: aTitleString; > attributeAt: 'media' put: aMediaString; > yourself > > linkToStyle: url titled: aString media: aMediaString > self addHeadElement: > (self > styleElementWithHref: (self absoluteUrlForResource: url asString) > titled: aString > media: aMediaString) > > then in your root component class: > > updateRoot: anHtmlRoot > super updateRoot: anHtmlRoot. > anHtmlRoot linkToStyle: 'styles/bare.css' titled: 'Bare' media: > 'screen, projection'. > anHtmlRoot linkToStyle: 'styles/blue.css' titled: 'Blue' media: > 'screen, projection'. > anHtmlRoot linkToStyle: 'styles/styleswitch.js' The last line should of course read: anHtmlRoot linkToScript: 'styles/styleswitch.js' Philippe _______________________________________________ Seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Philippe, thanks for your reply. I've downloaded the latest Seaside and tested your suggestion but the styles aren't swapped at all.
If you look carefully, there's two values of the "rel" property: <link rel="stylesheet" ... <link rel="alternate stylesheet" ... rel="stylesheet" it means to "default stylesheet" So I've added the following: addLinkToStyle: url titled: aString media: aMediaString self addHeadElement: (self addStyleElementWithHref: (self absoluteUrlForResource: url asString) titled: aString media: aMediaString) addStyleElementWithHref: anUrlString titled: aTitleString media: aMediaString ^(self styleElementWithHref: anUrlString) attributeAt: 'rel' put: 'alternate stylesheet'; attributeAt: 'title' put: aTitleString; attributeAt: 'media' put: aMediaString; yourself and finally in my WATestComponent updateRoot: aRoot "Configure the receiver's meta-data'" super updateRoot: aRoot. aRoot addHeadElement: ((WAHtmlElement named: 'meta') attributeAt: 'author' put: '-'; attributeAt: 'description' put: '-'; attributeAt: 'content-type' put: 'text/html; charset=UTF-8' yourself). aRoot linkToStyle: 'template\styles\bare.css' titled: 'Bare' media: 'screen, projection'. aRoot addLinkToStyle: 'template\styles\blue.css' titled: 'Blue' media: 'screen, projection'. aRoot linkToScript: 'template\styles\styleswitch.js' It doesn't work. I've putted an alert() in the .js file and is showed when the page is rendered, but it seems the styles aren't read or parsed, although they both "<link rel=...>" specificationes appear in the head of the xhtml. Commenting out the super send doesn´t have any effect too. However, when I've defined the message #style style | file | file := (FileStream readOnlyFileNamed: 'template\styles\blue.css') ascii. ^[file contents] ensure: [file close]. the page is rendered with the blue.css style. But nothing happens when I clicked the link to swap the style. Hence it seems to be like the style stuff is hardcoded to the #style message in the client class (my WATestComponent). Any ideas? Is this a bug? I've tested with Squeak 3.8 and Firefox 1.5 and Opera 9. You can test with the attached .js Greetings On 9/20/06, Philippe Marschall <[hidden email]> wrote: 2006/9/20, Philippe Marschall <[hidden email]>: _______________________________________________ Seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside styleswitch.js (3K) Download Attachment |
Philippe, thanks for your reply. I've downloaded the latest Seaside and tested your suggestion but the styles aren't swapped at all.
If you look carefully, there's two values of the "rel" property: <link rel="stylesheet" ... <link rel="alternate stylesheet" ... rel="stylesheet" it means to "default stylesheet" So I've added the following: addLinkToStyle: url titled: aString media: aMediaString self addHeadElement: (self addStyleElementWithHref: (self absoluteUrlForResource: url asString) titled: aString media: aMediaString) addStyleElementWithHref: anUrlString titled: aTitleString media: aMediaString ^(self styleElementWithHref: anUrlString) attributeAt: 'rel' put: 'alternate stylesheet'; attributeAt: 'title' put: aTitleString; attributeAt: 'media' put: aMediaString; yourself and finally in my WATestComponent updateRoot: aRoot "Configure the receiver's meta-data'" super updateRoot: aRoot. aRoot addHeadElement: ((WAHtmlElement named: 'meta') attributeAt: 'author' put: '-'; attributeAt: 'description' put: '-'; attributeAt: 'content-type' put: 'text/html; charset=UTF-8' yourself). aRoot linkToStyle: 'template\styles\bare.css' titled: 'Bare' media: 'screen, projection'. aRoot addLinkToStyle: 'template\styles\blue.css' titled: 'Blue' media: 'screen, projection'. aRoot linkToScript: 'template\styles\styleswitch.js' It doesn't work. I've putted an alert() in the .js file and is showed when the page is rendered, but it seems the styles aren't read or parsed, although they both "<link rel=...>" specificationes appear in the head of the xhtml. Commenting out the super send doesn´t have any effect too. However, when I've defined the message #style style | file | file := (FileStream readOnlyFileNamed: 'template\styles\blue.css') ascii. ^[file contents] ensure: [file close]. the page is rendered with the blue.css style. But nothing happens when I clicked the link to swap the style. Hence it seems to be like the style stuff is hardcoded to the #style message in the client class (my WATestComponent). Any ideas? Is this a bug? I've tested with Squeak 3.8 and Firefox 1.5 and Opera 9. You can test with the attached .js Greetings On 9/20/06,
Philippe Marschall <[hidden email]> wrote: 2006/9/20, Philippe Marschall <[hidden email]>: _______________________________________________ Seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside styleswitch.js (3K) Download Attachment |
In reply to this post by Burella Juan M.
2006/9/29, Burella Juan M. <[hidden email]>:
> Philippe, thanks for your reply. I've downloaded the latest Seaside and > tested your suggestion but the styles aren't swapped at all. > If you look carefully, there's two values of the "rel" property: > > <link rel="stylesheet" ... > <link rel="alternate stylesheet" ... > > rel="stylesheet" it means to "default stylesheet" > So I've added the following: > > addLinkToStyle: url titled: aString media: aMediaString > > self addHeadElement: > (self addStyleElementWithHref: (self absoluteUrlForResource: > url asString) > titled: aString > media: aMediaString) > > addStyleElementWithHref: anUrlString titled: aTitleString media: > aMediaString > ^(self styleElementWithHref: anUrlString) > attributeAt: 'rel' put: 'alternate stylesheet'; > attributeAt: 'title' put: aTitleString; > attributeAt: 'media' put: aMediaString; > yourself What's the difference again between href and and url? > and finally in my WATestComponent > > updateRoot: aRoot > "Configure the receiver's meta-data'" > > super updateRoot: aRoot. > aRoot addHeadElement: > ((WAHtmlElement named: 'meta') > attributeAt: 'author' put: '-'; > attributeAt: 'description' put: '-'; > attributeAt: 'content-type' put: 'text/html; charset=UTF-8' > yourself). Is ignored anyway. > aRoot linkToStyle: 'template\styles\bare.css' titled: 'Bare' media: > 'screen, projection'. > aRoot addLinkToStyle: 'template\styles\blue.css' titled: 'Blue' media: > 'screen, projection'. > aRoot linkToScript: 'template\styles\styleswitch.js' Backward slashes? srsly? > It doesn't work. I've putted an alert() in the .js file and is showed when > the page is rendered, but it seems the styles aren't read or parsed, > although they both "<link rel=...>" specificationes appear in the head of > the xhtml. So everything is rendered as it should it just doesn't work as descripbed in the tutoriasl > Commenting out the super send doesn´t have any effect too. Sure, it only disables the #style method. > However, when I've defined the message #style > > style > | file | > file := (FileStream readOnlyFileNamed: 'template\styles\blue.css') > ascii. > ^[file contents] ensure: [file close]. > > the page is rendered with the blue.css style. But nothing happens when I > clicked the link to swap the style. Hence it seems to be like the style > stuff is hardcoded to the #style message in the client class (my > WATestComponent). The code you posted above looks pretty hard coded to me. > Any ideas? Is this a bug? > I've tested with Squeak 3.8 and Firefox 1.5 and Opera 9. You can test with > the attached .js It would help if you could come up with a minimal demo of the problem. > Greetings > > > On 9/20/06, Philippe Marschall < [hidden email]> wrote: > > > > 2006/9/20, Philippe Marschall < [hidden email]>: > > > 2006/9/20, Burella Juan M. <[hidden email]>: > > > > I want my page to be able to alternate between two stylesheets. You > can read > > > > the technique here: > > > > http://www.alistapart.com/stories/alternate/ > > > > > > > > and examples here: http://www.csszengarden.com/ > > > > > > > > I've written this using XHTML/CSS and a Javascript styleswitcher (so > it's > > > > client side switching) in the following way: > > > > > > > > <link rel="stylesheet" href="styles/bare.css" type="text/css" > title="Bare" > > > > media="screen, projection" /> > > > > <link rel="alternate stylesheet" href="styles/blue.css" > type="text/css" > > > > title="Blue" media="screen, projection" /> > > > > <script type="text/javascript" > > > > src="styles/styleswitch.js"></script> > > > > > > > > does anybody knows how can (or at least the easiest way) achieve this > in > > > > Seaside? > > > > > > > > (I´m using Squeak with Seaside 2.61-mb8. I've seen an e-mail from Avi > Bryant > > > > from may 2004 but haven't found anything in the SqueakMap and Cincom > Public > > > > Repository, any idea?). > > > > > > Try the following, add these methods to WAHtmlRoot > > > > > > styleElementWithHref: anUrlString titled: aTitleString media: > aMediaString > > > ^(self styleElementWithHref: anUrlString) > > > attributeAt: 'title' put: aTitleString; > > > attributeAt: 'media' put: aMediaString; > > > yourself > > > > > > linkToStyle: url titled: aString media: aMediaString > > > self addHeadElement: > > > (self > > > styleElementWithHref: (self > absoluteUrlForResource: url asString) > > > titled: aString > > > media: aMediaString) > > > > > > then in your root component class: > > > > > > updateRoot: anHtmlRoot > > > super updateRoot: anHtmlRoot. > > > anHtmlRoot linkToStyle: 'styles/bare.css' titled: 'Bare' media: > > > 'screen, projection'. > > > anHtmlRoot linkToStyle: 'styles/blue.css' titled: 'Blue' media: > > > 'screen, projection'. > > > anHtmlRoot linkToStyle: 'styles/styleswitch.js' > > > > The last line should of course read: > > > > anHtmlRoot linkToScript: 'styles/styleswitch.js' > > > > Philippe > > _______________________________________________ > > Seaside mailing list > > [hidden email] > > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > > _______________________________________________ > Seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > Seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
In reply to this post by Burella Juan M.
Hi
See attached file for an example that works for me. God damn WA(Rendered)HtmlRoot is such a piece of crap. Hack on top of hack. Uglier than the night. Needs canvas now! Philippe 2006/10/1, Burella Juan M. <[hidden email]>: > Philippe, thanks for your reply. I've downloaded the latest Seaside and > tested your suggestion but the styles aren't swapped at all. > If you look carefully, there's two values of the "rel" property: > > <link rel="stylesheet" ... > <link rel="alternate stylesheet" ... > > rel="stylesheet" it means to "default stylesheet" > So I've added the following: > > addLinkToStyle: url titled: aString media: aMediaString > > self addHeadElement: > (self addStyleElementWithHref: (self absoluteUrlForResource: > url asString) > titled: aString > media: aMediaString) > > addStyleElementWithHref: anUrlString titled: aTitleString media: > aMediaString > ^(self styleElementWithHref: anUrlString) > attributeAt: 'rel' put: 'alternate stylesheet'; > attributeAt: 'title' put: aTitleString; > attributeAt: 'media' put: aMediaString; > yourself > > and finally in my WATestComponent > > updateRoot: aRoot > "Configure the receiver's meta-data'" > > super updateRoot: aRoot. > aRoot addHeadElement: > ((WAHtmlElement named: 'meta') > attributeAt: 'author' put: '-'; > attributeAt: 'description' put: '-'; > attributeAt: 'content-type' put: 'text/html; charset=UTF-8' > yourself). > aRoot linkToStyle: 'template\styles\bare.css' titled: 'Bare' media: > 'screen, projection'. > aRoot addLinkToStyle: 'template\styles\blue.css' titled: 'Blue' media: > 'screen, projection'. > aRoot linkToScript: 'template\styles\styleswitch.js' > > It doesn't work. I've putted an alert() in the .js file and is showed when > the page is rendered, but it seems the styles aren't read or parsed, > although they both "<link rel=...>" specificationes appear in the head of > the xhtml. Commenting out the super send doesn´t have any effect too. > However, when I've defined the message #style > > style > | file | > file := (FileStream readOnlyFileNamed: 'template\styles\blue.css') > ascii. > ^[file contents] ensure: [file close]. > > the page is rendered with the blue.css style. But nothing happens when I > clicked the link to swap the style. Hence it seems to be like the style > stuff is hardcoded to the #style message in the client class (my > WATestComponent). Any ideas? Is this a bug? > I've tested with Squeak 3.8 and Firefox 1.5 and Opera 9. You can test with > the attached .js > > Greetings > > > On 9/20/06, Philippe Marschall < [hidden email]> wrote: > > 2006/9/20, Philippe Marschall < [hidden email]>: > > > 2006/9/20, Burella Juan M. <[hidden email]>: > > > > I want my page to be able to alternate between two stylesheets. You > can read > > > > the technique here: > > > > http://www.alistapart.com/stories/alternate/ > > > > > > > > and examples here: http://www.csszengarden.com/ > > > > > > > > I've written this using XHTML/CSS and a Javascript styleswitcher (so > it's > > > > client side switching) in the following way: > > > > > > > > <link rel="stylesheet" href="styles/bare.css" type="text/css" > title="Bare" > > > > media="screen, projection" /> > > > > <link rel="alternate stylesheet" href="styles/blue.css" > type="text/css" > > > > title="Blue" media="screen, projection" /> > > > > <script type="text/javascript" > > > > src="styles/styleswitch.js"></script> > > > > > > > > does anybody knows how can (or at least the easiest way) achieve this > in > > > > Seaside? > > > > > > > > (I´m using Squeak with Seaside 2.61-mb8. I've seen an e-mail from Avi > Bryant > > > > from may 2004 but haven't found anything in the SqueakMap and Cincom > Public > > > > Repository, any idea?). > > > > > > Try the following, add these methods to WAHtmlRoot > > > > > > styleElementWithHref: anUrlString titled: aTitleString media: > aMediaString > > > ^(self styleElementWithHref: anUrlString) > > > attributeAt: 'title' put: aTitleString; > > > attributeAt: 'media' put: aMediaString; > > > yourself > > > > > > linkToStyle: url titled: aString media: aMediaString > > > self addHeadElement: > > > (self > > > styleElementWithHref: (self > absoluteUrlForResource: url asString) > > > titled: aString > > > media: aMediaString) > > > > > > then in your root component class: > > > > > > updateRoot: anHtmlRoot > > > super updateRoot: anHtmlRoot. > > > anHtmlRoot linkToStyle: 'styles/bare.css' titled: 'Bare' media: > > > 'screen, projection'. > > > anHtmlRoot linkToStyle: 'styles/blue.css' titled: 'Blue' media: > > > 'screen, projection'. > > > anHtmlRoot linkToStyle: 'styles/styleswitch.js' > > > > The last line should of course read: > > > > anHtmlRoot linkToScript: 'styles/styleswitch.js' > > > > Philippe > > _______________________________________________ > > Seaside mailing list > > [hidden email] > > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > > > _______________________________________________ > Seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > _______________________________________________ Seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside StyleDemo-pmm.1.mcz (2K) Download Attachment |
Free forum by Nabble | Edit this page |