Loading ...
Sorry, an error occurred while loading the content.
 

adding images to calendar widget

Expand Messages
  • pdlnhrd
    I am trying to use the calendar widget and define the images to use for left/right/close. I created a style to override the default behavior but it isn t
    Message 1 of 3 , May 2, 2008
      I am trying to use the calendar widget and define the images to use for left/right/close.  I created a style to override the default behavior but it isn't being applied.    

      When I am using firebug and I inspect the anchor for the left/right/close it looks like firebug shows the css is being applied correctly but the image is not showing up in the calendar.  Also when I am in firebug if I roll over my new css class it will display the image so I am assuming it has the correct path to the image.

      Sorry I don't have a place to host the file, but here is all the information.


      Here is my file layout:

      calendar.html
      calendar_icon.gif
      calrt.gif
      yahoo.js
      dom.js
      event.js
      calendar.js
      calendar.css


      Here is my html:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
          <head>
              <meta http-equiv="content-type" content="text/html; charset=utf-8">
              <title>Popup Calendar</title>
              <link rel="stylesheet" type="text/css" href="calendar.css">
              <script type="text/javascript" src="yahoo.js"></script>
              <script type="text/javascript" src="dom.js"></script>
              <script type="text/javascript" src="event.js"></script>
              <script type="text/javascript" src="calendar.js"></script>
              <style type="text/css">
                  .popupCalendar { display:none; z-index:1}
                  .calnavright{background-image:url('calrt.gif');}
              </style>
          </head>

          <body class="yui-skin-sam">
              <img id="date_start_img" src="calendar_icon.gif" />
              <div id="date_start_div" class="popupCalendar"></div>
              <script type="text/javascript">
                  YAHOO.namespace("foo");
                  YAHOO.foo.init = function() {
                      function handleSelect(type,args,obj) {
                          var dates = args[0];
                          var date = dates[0];
                          var year = date[0], month = date[1], day = date[2];
                          alert( month + "/" + day + "/" + year);
                          obj.hide();
                      }
                      YAHOO.foo.dateStart = new YAHOO.widget.Calendar("dateStart","date_start_div", { title:"Choose a date:", close:true } );
                      YAHOO.foo.dateStart.selectEvent.subscribe(handleSelect, YAHOO.foo.dateStart, true);
                      YAHOO.foo.dateStart.render();
                      YAHOO.util.Event.addListener("date_start_img", "click", YAHOO.foo.dateStart.show, YAHOO.foo.dateStart, true);
                  }
             
                  YAHOO.util.Event.onDOMReady(YAHOO.foo.init);
              </script>
          </body>
      </html>


      Here is the output inside firebug:

      .yui-skin-sam .yui-calendar .calnavright {calendar.css (line 7)
      background:transparent url(../../../../assets/skins/sam/sprite.png) no-repeat scroll 0pt -500px;
      bottom:0pt;
      cursor:pointer;
      height:15px;
      margin-right:0.4em;
      right:-10px;
      top:0pt;
      width:25px;
      }
      .yui-calendar .calnavright {calendar.css (line 7)
      position:absolute;
      z-index:1;
      }
      background-image:url(calrt.gif);
      }


    • Satyen Desai
      Hi, Try increasing the specificity of your rule. e.g.: yui-skin-sam .yui-calendar .calnavright { background-image:url(calrt.gif); } Or, if you want to limit
      Message 2 of 3 , May 2, 2008
        Hi,
        Try increasing the specificity of your rule.

        e.g.:

        yui-skin-sam .yui-calendar .calnavright {
        background-image:url(calrt.gif);
        }

        Or, if you want to limit the customization to a
        particular instance:

        #dateStart .calnavright {
        background-image:url(calrt.gif);
        }

        Hope that helps,
        Satyen
      • pdlnhrd
        Satyen, Increasing the specificity of my rule is what was needed. Here is css class that I ended up using: .yui-skin-sam .yui-calendar .calnavright {
        Message 3 of 3 , May 2, 2008
          Satyen,

          Increasing the specificity of my rule is what was needed. Here is css
          class that I ended up using:

          .yui-skin-sam .yui-calendar .calnavright {
          background: url(calrt.gif) no-repeat;
          }


          It would not allow me to just use background-image, but it is working
          now. Thank you for your help.

          --pdlnhrd
        Your message has been successfully submitted and would be delivered to recipients shortly.