Forums

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view

Ben Walsh

  • Username: benw
  • Joined: Mon Oct 25, 2010 4:42 pm
  • Posts: 7
  • GitHub: bwalsh
  • Gists: bwalsh
  • Offline
  • Profile
Tags:

Skinning the uploader

Post Posted: Thu Dec 09, 2010 11:38 am
+0-
I'm really not getting how the buttonSkin and boundingBox of the YUI uploader work.

I have an image. I want that to be how the button appears. So, I set the size of the div element explicitly to be the same size as my image, and set that div element to be my boundingBox, and set the image to be my buttonSkin.

YUI uploader seems to think "ah, you want the image to be scaled to some random size that's almost but not quite related to the dimensions of the bounding box, and to change and move around on mouseover!"

That's not what I want. I want the image to appear as I specified. And to stay there.

Ben Walsh

  • Username: benw
  • Joined: Mon Oct 25, 2010 4:42 pm
  • Posts: 7
  • GitHub: bwalsh
  • Gists: bwalsh
  • Offline
  • Profile
Tags:

Re: Skinning the uploader

Post Posted: Thu Dec 09, 2010 1:12 pm
+0-
OK, here's fun! Of course it involves some fakery and overlaying and so forth. Stuff omitted for clarity, but:

Code:
<script type="text/javascript">
  new Y.Uploader({ boundingBox : "#realUploadButton", transparent: true });
</script>

<style type="text/css">
  #uploadContainer {
   position: relative;
   height: 20px;
   width: 200px;
  }
  #uploadContainer div {
   position: absolute;
   top: 0px; left: 0px; width: 100%;
   float: left; cursor: pointer;
  }
  #fakeUploadButton {
   background: url('/path/to/my/upload/image'), no-repeat left center;
  padding-left: 20px;
  }
</style>
<div id="uploadContainer">
  <div id="fakeUploadButton">Upload a file</div>
  <div id="realUploadButton"></div>
</div>
Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
cron

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group