Author Archive
styling form buttons with divs
by Adrian on Aug.28, 2009, under Programming
Styling a button inside a form with multiple div`s to achieve a curved button with click events etc, can be done relatively easy with the use of javascript.
firstly lets take a look at our raw code
<form method="post" action="">
<input type="submit" name="submit">
</form>Next we place the button within no script tags, so it only displays if javascript is switched off, so that
non javascript enabled browsers can still submit.
<form method="post" action="">
<noscript>
<input type="submit" name="submit">
</noscript>
</form>Now we add the javascript styled button
<form method="post" action="" name="mainForm">
<noscript>
<input type="submit" name="submit">
</noscript>
<script type="text/javascript">
<!--
// do the submission
function submitform(){
document.mainForm.submit();
}
// print the button
document.write('<a href="javascript:submitform();" style="text-decoration:none; color:#fff; font-weight:bold;">');
document.write('<div id="buyButtonMid">');
document.write('<div id="buyButtonLeft"></div>');
document.write('submit');
document.write('<div id="buyButtonRight"></div>');
document.write('</div>');
document.write('</a>');
// -->
</script>
</form>Then style your button accordingly with your css,
/* buy button */ #buyButtonRight{ width:16px; height:44px; display:block; position:absolute; top:0; right:0; cursor:pointer; } #buyButtonLeft{ width:16px; height:44px; display:block; position:absolute; top:0; left:0; cursor:pointer; } #buyButtonMid{ height:24px; min-width:20px; /*max-width:300px;*/ padding:13px 20px 7px 20px; display:block; position:relative; float:left; cursor:pointer; color:#ffffff; font-size:13px; text-decoration:none; } /* normal */ #buyButtonLeft{background:url('images/add2bas_left.jpg');} #buyButtonMid{background:url('images/add2bas_mid.jpg');} #buyButtonRight{background:url('images/add2bas_right.jpg');} /* hover */ #buyButtonMid:hover #buyButtonLeft{background:url('images/add2bas_left_hover.jpg');} #buyButtonMid:hover {background:url('images/add2bas_mid_hover.jpg');} #buyButtonMid:hover #buyButtonRight{background:url('images/add2bas_right_hover.jpg');} /* click */ #buyButtonMid:active #buyButtonLeft{background:url('images/add2bas_left_click.jpg') no-repeat;} #buyButtonMid:active {background:url('images/add2bas_mid_click.jpg');} #buyButtonMid:active #buyButtonRight{background:url('images/add2bas_right_click.jpg');}
Job done
wordpress comment count as a button
by Adrian on Jul.30, 2009, under Programming, Work, wordpress
Styling the wordpress comment count as a button/icon etc can be tricky because the normal call to the comments
1 | comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); |
formats the output as an anchor point with the correct link, alt tags etc already set up.
So in order to intercept this and then add you own anchor point with divs/imagery etc you need to make a custom request
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // SQL $SQL = "SELECT COUNT(*) AS Count FROM $wpdb->comments WHERE comment_approved='1'"; $SQL.= "AND comment_post_ID='".intval($post->ID)."'"; // Sort the array into a string prefixed with 'Comments ' list($comments) = $wpdb->get_results($SQL, ARRAY_A); $comments='Comments ('.$comments['Count'].')'; // generate the alt and title tags $alt = 'Comment on '.$post->post_title; // echo the button if this is not a single and not a page if (!is_single() && !is_page()) { // anchor open echo '<a href="'.get_permalink($post->ID).'" alt="'.$alt.'" title="'.$alt.'">'; // complex formatting rules for the comment pop up, go here echo $comments; // anchor close echo '</a>'; } |
The above does exactly the same, formats the link etc, but now you can access the anchor point directly and format it your own way.
ftp open in explorer by default in windows
by Adrian on Jul.27, 2009, under Programming, Work
How to make explorer open by default when opening an ftp connection, I found can be easy..
I needed to make IE6 style FTP access without the extra pop up step, from a desktop shortcut at work and after much googling, and messing with the registery, attempting to make an ftp site open immediatly in explorer without the main browser opening (pre IE7), I found it can be simply done like this.
1. create a bat file (open notepad, save the file with the affix .bat, making sure .txt is not selected in the dropdown)
2. in the batch file add
1 | start explorer ftp://USERNAME:PASSWORD@FTP_SERVER_ADDRESS |
3. add the shortcut to the desktop, and style the icon
Now when the user clicks the shortcut, voila IE6 style FTP access without the extra step, much easier than poking around with the registery
General discussion RSS Feed