|
|
Rank: Newbie
Groups: Registered
Joined: 9/13/2011
Posts: 7
Location: Los Angeles, CA
|
Using latest SU build and Quick Start code. Have tried kw_hover class override and "a" element override in CSS. Help...?
|
|
|
Rank: Administration
Groups: Administrators
Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ
|
kw_hover was the old class for SlickUpload 5. The new way is like this:
a:hover, .su-hover a, input[type=file]
{
cursor:pointer;
}
Also, one thing to keep in mind -- this doesn't work in all browsers. It should work great in IE, but Firefox will ignore the pointer style when applied to a file input (which is what the element that we skin).
|
|
|
Rank: Newbie
Groups: Registered
Joined: 9/13/2011
Posts: 7
Location: Los Angeles, CA
|
ChrisHynes wrote:
kw_hover was the old class for SlickUpload 5. The new way is like this:
a:hover, .su-hover a, input[type=file]
{
cursor:pointer;
}
Also, one thing to keep in mind -- this doesn't work in all browsers. It should work great in IE, but Firefox will ignore the pointer style when applied to a file input (which is what the element that we skin).
The Firefox issue makes this unacceptable then. Is there a way I can use my own button or a javascript-referring link to do the same thing?
|
|
|
Rank: Administration
Groups: Administrators
Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ
|
I did a little research on this and it appears that more recent versions of FF (4+) do allow you to set the pointer using the css below. Older versions should give you the pointer. I guess we need to come up with a compatibility matrix that shows what which browsers support.
Which exact browser are you seeing the I-Beam in? Do you see it after applying the css I gave you? I can take a look and see if there's any special casing we can do.
Since SlickUpload is a browser only component with no Flash/ActiveX/Java plugins, we're limited to what the browser supports. Unfortunately, if that specific browser doesn't support the cursor setting, there's no way to work around the pointer issue. Fortunately, the vast majority of browsers do support setting the cursor on input type="file", and most of the ones that don't will display a pointer icon.
A little background on the file input skinning -- the method SlickUpload uses is to create an opacity:0 file input that is overlaid overtop of the element you use for the "Add Files" button. This is the best cross browser way, unfortunately. You'd think you could use a hidden file input and call .click() on it to show the file browse dialog. We'd love to be able to do it this way -- it'd simplify a bunch of code. The problem is, most browsers don't support .click() on file inputs. I'm not sure if its an accidental omission or because they consider it a "security issue", but Chrome is the only browser with solid .click() support.
|
|
|
Rank: Newbie
Groups: Registered
Joined: 9/13/2011
Posts: 7
Location: Los Angeles, CA
|
Not working in FF 6.02 (windows 7).
Is working in IE 9.
Can you do anything with jquery? I understand the problem, but there's got to be a hack for the cursor somehow - maybe layering another control over that, or moving the file input text box over a bit so it's not on the link, or something? Just thinking out loud.
|
|
|
Rank: Administration
Groups: Administrators
Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ
|
Lets try a different tack and set the cursor based on the parent element:
.su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *
{
cursor:crosshair;
}
This should set the cursor on the fileselector/folderselector element and everything below it. It sets it always, and doesn't do anything with hover. We don't worry about the hover selector in this case, as we're setting a cursor and not a hover state.
I set it to crosshair here so we can definitely see exactly where the cursor element is supported. Once we figure that out, flip it back to pointer or default.
If I take the stock Quickstart example and add this css, it works for me in FF back to v4, as well as IE and Chrome. Does that work on your end?
We can't move the file input box around, because it needs to be under the mouse pointer always so that it is the element that actually is clicked.
|
|
|
Rank: Newbie
Groups: Registered
Joined: 9/13/2011
Posts: 7
Location: Los Angeles, CA
|
Didn't work. Here's my css:
body
{
font-family: Verdana, Arial, helvetica;
font-size: 10px;
color: #666666;
}
h1
{
font-size: 24px;
color: #08A4E2;
font-weight: bold;
}
.field-row-start, .field-row-end
{
clear: both;
}
.field-desc
{
font-size: 14px;
color: #08A4E2;
font-weight: bold;
text-align: right;
float: left;
width: 120px;
margin-right: 20px;
margin-bottom: 10px;
}
.field-data
{
text-align: left;
float: left;
margin-bottom: 10px;
}
input, .textblockinput
{
width: 500px;
}
.desc
{
width: 500px;
margin-left: 140px;
}
a
{
text-decoration: none;
color: #08A4E2;
font-style: italic;
}
.addFilesButton
{
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
a:hover, a.addFilesButton:hover
{
text-decoration: underline;
}
.su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *
{
cursor: crosshair;
}
Here's the relevant code:
<cc1:SlickUpload ID="slickUpload" runat="server" FileListStyle="clear:both" FileSelectorStyle="float:left;padding-right:1em"
Style="overflow: hidden; zoom: 1" UploadProgressDisplayStyle="clear:both" OnUploadComplete="slickUpload_UploadComplete"
OnClientUploadSessionStarted="onSessionStarted" OnClientBeforeSessionEnd="onBeforeSessionEnd">
<SelectorTemplate>
<a href="javascript:;" class="addFilesButton">Add files</a>
</SelectorTemplate>
<SelectorFolderTemplate>
<a href="javascript:;" class="addFilesButton">Add folder</a>
</SelectorFolderTemplate>
Give me your email and I'll send you a link to the actual page on the web if that helps.
Back to top
 PM  EMail  WWW
|
|
|
Rank: Administration
Groups: Administrators
Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ
|
A link would be great. My email is chrish at krystalware dot com.
|
|
|
|
Guest |