Adrian Callaghan`s Blog

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.

For example:



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 ;)

VN:F [1.8.4_1055]
Rating: 0.0/10 (0 votes cast)
VN:F [1.8.4_1055]
Rating: 0 (from 0 votes)
Leave a Comment more...

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.

VN:F [1.8.4_1055]
Rating: 0.0/10 (0 votes cast)
VN:F [1.8.4_1055]
Rating: 0 (from 0 votes)
1 Comment more...

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 ;)

VN:F [1.8.4_1055]
Rating: 0.0/10 (0 votes cast)
VN:F [1.8.4_1055]
Rating: +1 (from 1 vote)
Leave a Comment more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!