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
31Jan/120
JavaScript RegExp to Replace Between Text

I wanted to replace all text between two tags. It seems odd, but it resovled an issue I had.

Here is the text:

Hello<table>
<tr>
<td>Some Text</td>
</tr>
</table> World

Here is the JavaScript command to replace all text between the <table and /table> tags with nothing.

string = 'Hello<table>\n<tr>\n<td>Some Text</td>\n</tr>\n</table> World';
var rx = new RegExp("<table[\\d\\D]*?\/table>", "g");
string.replace(rx, "");

Would result in: Hello World

The reason this works is: [\d\D] matches all characters, including new lines and spaces. Followed by: *?

Filed under: JavaScript No Comments
31Jan/120
Insert a string at a position within another string

I needed to insert a string within another string at a specific position. It is easy to retrieve the position of a string within another string. Here are two examples:

var string="Hello World";
var position = string.search("e");
alert(position);
position = string.indexOf("e");
alert(position);

Would both return:
1

I prefer using indexOf because it allows a start position and is quicker than using regex. Next, how do you insert: "i H" into this string. You can use substring, like this:

var result = string.substr(0, position) + "i H" + string.substr(position);

Which would return: "Hi Hello World"

I found a few great examples online for this, but I settled on the following using slice to cut up the string (array in the case of slice) and join to concatinate the array (string):

var result = [string.slice(0, position), "i H", string.slice(position)].join('');

Hope this helps!

Filed under: JavaScript No Comments