I have written
<input type="file">
which results in one small text box along with browse button if i want to apply my custom CSS for this button then how do i do that?
Is there any plug-in to upload file from client to server where for button i can apply my own CSS?
Most browsers don't give you very much control over the styling of inputs of type="file", and even if they did, you wouldn't get a very consistent appearance as the control is rendered differently by different browsers: in Chrome, for instance, there's no input field.
If you want to control appearances, consider a tool such as uploadify
You could definitely apply styles to the upload button. Here's a link which details achieve this. http://www.burhankhan.com/css_tricks/styling-file-upload-input-box-in-css/
The options to style this element directly through CSS are very limited. One of the best know approaches to get around these limitations is this one by Shaun Inman.
Another option is an asynchronous upload using Flash, often done using swfupload.
Related
I saw a form on Qdoba.com. There is effect where if you click on a checkbox, the checkmark slides up and then if you uncheck it, the checkmark slides down.
Here is a link to the form: http://www.qdoba.com/menu-nutrition/burritos-menu-nutrition
I would like to know what language this was created in and if possible, how might I best approach recreating this.
Thanks for you help in advance.
It's done with JavaScript (powered by jQuery, but this is unnecessary).
However, a similar effect can be achieved with plain CSS, as shown in this Fiddle, by using the :checked selector.
HTML, looks like it uses CSS and jQuery (plugin). Looks like a few different types of code.
I don't know about the language, but this effect is accomplished with a CSS sprite. One image consists of a blank area with a checkmark below. When the user clicks on the checkbox the image slides upward so the checkmark appears to have been animated in. (Note also that the checkbox is a <div>, not an actual <input type="checkbox">; if you recreate something like this, be sure to consider the accessibility implications of using something other than an <input> as a checkbox.)
I'd like to disable the tumblr Photoset-function. That means I just want to have one picture on my tumblr-site instead of the "Layout" which is provided by Tumblr. But when the picture is clicked the Lightbox would still open. Thank you.
You can disable the normal photoset function by using the {block:Photos} {/block:Photos} block, which renders individually for each image in the set. It is also possible to select a single picture (plenty of themes do it), but I have no idea how you do it (I'm no developer, but I'll wager Javascript or undocumented code is involved), much less whether you can trigger the full lightbox without ever displaying the other images directly.
I am currently trying to replicate the functionality of the Sticky application (fourth example under "samples") in my GWT application, specifically NoteView (see the class NoteView in SurfaceView.java in my personal repo or download Google App Engine's SDK, where you'll find it in appengine-java-sdk-1.5.1/demos/sticky).
However, as hard as I try, I just cannot find the place where Google put in the gripper bars on the bottom right hand corner of every note, and where their code allowed the user to resize the note. grepping for "resize" and "resizable" in their sticky dir was not fruitful, and the CSS "resize" functionality was not used either. Also, GWT Textareas are not automatically resizable in the way that these notes in GWT are, and I don't know how to enable this or set it up.
I'm sorry but it really just is a textarea, and your browser does the rest (most browsers make textareas resizable nowadays).
Using Firebug or a similar developer tool, can you tell which differences are there between the Sticky sample and what your code does?
I figured it out -- it was old crud css left over from a gxt implementation. As soon as I removed the css file, the textarea automatically had gripper bars.
When a <select> tag is used in a HTML page, is there a way to style the text size in
the scroll wheel that shows on the iPhone?
There is this alternative.
http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch
It uses javascript to put the elements on the page.. I used it for a web/ iphone app and it worked really well. There would be custom styling if you wanted to change the default text sizes and you could also load in custom images..
I don't believe you can style the wheel that shows up on the iPhone directly. In fact, even modifying it in browsers has weird support. For example, http://jsbin.com/obake3 doesn't work at all in Chrome, only modifies the actual drop down in Safari and stretches the graphic in a very ugly way in Firefox.
We investigated and couldn't find any reliable way of altering the display so we looked into different libraries. We're having good luck with the Mobiscroll library for jQuery. It is a more up to date project than the cubiq project referred to in other responses.
The control is themable. You can easily change the appearance of if in CSS. It also comes with pre-defined, nice looking color schemes.
We chose it because it works across devices allowing for a more consistent look & feel.
Taken from Sitepoint Ref
The select renders slightly differently depending on the browser and operating system in use, and is well known as a troublesome HTML element to style with CSS (because the display is inherited from the operating system, rather than provided by the browser)
Does anyone know of a GWT widget that works like a spelling suggestor?
Ideally it would be similar to this: http://www.polishmywriting.com/
I need a click-triggered popup on user generated text so that I can suggest replacements (I am not building a spell-checker, but something similar). I also really like the way the polishmywriting menu is set up (when you click on an underlined word).
Is there a widget that would allow me to make something similar?
Basically I'm trying to clone the little popups used by spellchecking in Gmail and polishmywriting.
If not, what would be my first step to make it?
Thanks for your time and answers,
DTrejo
Have you had any luck yet? I know it's been quite a lot of time, but found this just now.
It is a very specific widget, so maybe you won't be able to find exactly what you are looking for. In that case, making one from scratch might prove as a challenge.
The first thing you will notice is that a regular gwt TextArea won't do the job of holding the text. You will need something more flexible to dynamically put clickable labels in the text itself.
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control, released as Open Source.
http://en.wikipedia.org/wiki/TinyMCE
There is also a gwt wrapper available, so you might find that useful:
http://code.google.com/p/tinymce-gwt/
If you check the polishmywriting editor after the spell checking markup is displayed, you will notice it is not a TextArea. The text is a series of paragraphs and the labeled parts are span elements. This are the elements you can easily access with gwt and put some click handlers there to open the popup.
And for the popups, it shouldn't be difficult. Use a standard gwt PopupPanel. The popup panel can be displayed in a relative position to other elements displayed on the page:
popup.showRelativeTo(otherElement);
If you did find something useful in the mean time, feel free to share.