[Cosmo-dev] Re: [commits-cosmo] (mde) [4084] Have to set the path for button background images dynamically

[Travis Vachon]

Ay yi yi..

I ran into this problem as well implementing the forgot password stuff.

We can count on static relative paths in CSS, the problem here is  
that because we're dynamically injecting the css from ui.css into the  
page the links are interpreted (correctly) as relative to the CSS  
(that is, the current page).

My solution was to move these styles into global.css, which is a  
normal css file brought in with a <link> include. It appears to be  
working great in my working copy, and I was planning on merging to  
trunk after the 0.6.1 branch. Looks like we should chat before that  
happens though..

-Travis


On Apr 10, 2007, at 4:43 PM, svncheckin at osafoundation.org wrote:

> Revision
> 4084
> Author
> mde
> Date
> 2007-04-10 16:43:01 -0700 (Tue, 10 Apr 2007)
> Log Message
>
> Have to set the path for button background images dynamically
> with script since you can't count on static relative paths in
> the CSS.
> Modified Paths
>
> cosmo/branches/mde/cosmo/src/main/webapp/js/cosmo/ui/widget/Button.js
> cosmo/branches/mde/cosmo/src/main/webapp/templates/default/ui.css
> Diff
>
> Modified: cosmo/branches/mde/cosmo/src/main/webapp/js/cosmo/ui/ 
> widget/Button.js (4083 => 4084)
>
> --- cosmo/branches/mde/cosmo/src/main/webapp/js/cosmo/ui/widget/ 
> Button.js	2007-04-10 23:31:08 UTC (rev 4083)
> +++ cosmo/branches/mde/cosmo/src/main/webapp/js/cosmo/ui/widget/ 
> Button.js	2007-04-10 23:43:01 UTC (rev 4084)
> @@ -42,6 +42,9 @@
>      handleOnClick: "",
>
>      fillInTemplate: function() {
> +        var smFlag = this.small ? '_sm' : '';
> +        var backgroundPath = cosmo.env.getImagesUrl() +
> +            'button_bgs' + smFlag + '.gif';
>          if (typeof(this.handleOnClick) == "string") {
>           eval("this.handleOnClick = function() {" +  
> this.handleOnClick + ";}");
>          }
> @@ -50,6 +53,8 @@
>          // DOM handles
>          this.domNode.id = this.widgetId;
>          this.domNode.name = this.widgetId;
> +
> +        this.domNode.style.backgroundImage = 'url(' +  
> backgroundPath + ')';;
>          // Finish setting up
>          this.setText(this.text);
>          this.setWidth(this.width);
> Modified: cosmo/branches/mde/cosmo/src/main/webapp/templates/ 
> default/ui.css (4083 => 4084)
>
> --- cosmo/branches/mde/cosmo/src/main/webapp/templates/default/ 
> ui.css	2007-04-10 23:31:08 UTC (rev 4083)
> +++ cosmo/branches/mde/cosmo/src/main/webapp/templates/default/ 
> ui.css	2007-04-10 23:43:01 UTC (rev 4084)
> @@ -271,7 +271,6 @@
>      height: 24px;
>      padding: 0 0 2px 0;
>      cursor: pointer;
> -    background-image: url(templates/default/images/button_bgs.gif);
>      background-repeat: repeat-x;
>      background-position: 0px 0px;
>  }
> @@ -301,7 +300,6 @@
>      height: 18px;
>      padding: 0 0 1px 0;
>      cursor: pointer;
> -    background-image: url(templates/default/images/ 
> button_bgs_sm.gif);
>      background-repeat: repeat-x;
>      background-position: 0px 0px;
>  }
>
> _______________________________________________
> Commits-Cosmo mailing list
> Commits-Cosmo at osafoundation.org
> http://lists.osafoundation.org/cgi-bin/mailman/listinfo/commits-cosmo

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osafoundation.org/pipermail/cosmo-dev/attachments/20070410/88861fa4/attachment.htm