Developer's Closet A place where I can put my PHP, SQL, Perl, JavaScript, and VBScript code.

5Dec/130
Adding Style to a File Upload Button

File upload buttons are notoriously difficult to style - browsers always want to use their own style for this button. However, to keep a site's style consistent, it is necessary to style event file input types. I found a great solution using jquery and css:

jquery:
<script type="text/JavaScript">

$(window).load(function () {
    var intervalFunc = function () {
        $('#file_name').html($('#file_upload').val());
    };
    $('#file_click').on('click', function () { // use .live() for older versions of jQuery
        $('#file_upload').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

</script>

html:
<!-- display file name(s) to the user -->
<p id="file_name"></p>


<!-- hidden from the user's view -->
<input style="display:none" id="file_upload" type="file" size="4" name="files[]" multiple/>


<!-- image viewed by the user -->
<input id="file_click" type="button" class="button" value="Browse for Files"/>

css:

<style>

.button
{
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
	font-size: 14px;
	color: #494D54;
	background: #B3BECC;
	background: -moz-linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#CED9EA),color-stop(100%,#B3BECC));
	background: -webkit-linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	background: -o-linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	background: -ms-linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	background: linear-gradient(top,#CED9EA 0%,#B3BECC 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CED9EA',endColorstr='#B3BECC',GradientType=0);
	padding: 4px 8px 4px 8px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #808080;
	cursor: pointer; 
	cursor: hand;
}

</style>

Filed under: JavaScript, jQuery No Comments
21Feb/130
Add a Tooltip using CSS and jQuery with Gradient and Round Borders

The perfect cross-browser tooltip is hard to find. You can always use the default, but it may not match your theme. Based on information I found in this article, I wrote a very nice tooltip using CSS and jQuery.

Your page requires jQuery (WordPress already has it) and the function must load after the page (you can shortcut this requirement and put the code at the bottom of the page, but I wouldn't recommend this).

HTML:

<a href="http://www.developerscloset.com" class="theTooltip">Developers Closet</a><span>Add a nice tooltip here.</span>

Here is the jQuery code:

// add theTooltip to the page
$('.theTooltip').hover(function () {
    var offset = $(this).offset();
    $(this).next('span').fadeIn(200).addClass('showTheTooltip');
    $(this).next('span').css('left', offset.left + 'px');
    }, function () {
        $(this).next('span').fadeOut(200);
});

And here is the CSS:

.theTooltip + span {
    display:none;
}
.showTheTooltip {
    color: #494D54;
    font-size: 11px;
    font-weight: lighter;
    background: #CCCCCC; /* for non-css3 browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F4F4F4)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFFFFF,  #F4F4F4); /* for firefox 3.6+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F4F4F4'); /* for IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#F4F4F4')"; /* IE8,IE9 */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); /* IE10 */
    padding:5px;
    margin-top: 11px;
    margin-left: 23px;
    position: absolute;
    border: 1px solid #808080;
    max-width: 300px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
Filed under: jQuery No Comments