bavotasan.com » button http://bavotasan.com by c.bavota Tue, 07 Feb 2012 15:42:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Creating a Scrolling Back to Top Button with jQuery http://bavotasan.com/2010/scrolling-back-to-top-button-jquery/ http://bavotasan.com/2010/scrolling-back-to-top-button-jquery/#comments Mon, 28 Jun 2010 20:55:39 +0000 c.bavota http://bavotasan.com/?p=2234 If you take a look way, way, way down at the bottom of this page, you will see a Back to Top button that scrolls the whole page until it reaches to top. It is a pretty simple effect to add to your site and looks a hundred-times cooler than just using your typical anchor name and link. Getting it all to work takes nothing more than a few lines of jQuery version 1.4.2.

First, we need to create our button/link. I am just going to use an anchor tag and some text:

<a href="javascript:void(0)" class="backtotop">Back to Top</a>

Next we need to add some jQuery between the <head> tags:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
jQuery('.backtotop').click(function(){
	jQuery('html, body').animate({scrollTop:0}, 'slow');
});
</script>

Remember, you can change the speed by replacing slow with a numerical value. You can also add some easing effects by including the jQuery UI. Read more about easing effects here.

]]> http://bavotasan.com/2010/scrolling-back-to-top-button-jquery/feed/ 6 Feed Me, Seymour 1.2 http://bavotasan.com/2010/feed-me-seymour-free-wordpress-theme/ http://bavotasan.com/2010/feed-me-seymour-free-wordpress-theme/#comments Sat, 19 Jun 2010 13:05:24 +0000 c.bavota http://bavotasan.com/?p=279 I have just updated Feed Me, Seymour for WordPress 3.0 and many of its new features. I have also cleaned up the code and added the Arturo Theme Engine v2.0 so that the admin interface works a whole lot better. Version 1.2 is currently only available on this site. Just click the download button below.

Here are some examples of different layout options.

feedmeseymourfeedme2feedme3

For more info go to Themes by bavotasan.com.

]]> http://bavotasan.com/2010/feed-me-seymour-free-wordpress-theme/feed/ 92 Issue with the User Logout Button in WordPress 2.7 http://bavotasan.com/2009/issue-with-the-user-logout-button-in-wordpress-27/ http://bavotasan.com/2009/issue-with-the-user-logout-button-in-wordpress-27/#comments Thu, 29 Jan 2009 18:19:53 +0000 c.bavota http://bavotasan.com/?p=181 I noticed a small issue in WordPress 2.7 when I was designing a login bar at the top of a client’s site and the logout link would not log the user out. I had coded the same way I had coded a logout button in the past, but it wouldn’t function properly. That is because WordPress 2.7 uses a new function to log a user out.

Here is the code I use to use:

<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout">Logout</a>

And here is the new code I now use:

<a href="<?php echo wp_logout_url() ?>">Logout</a>

And here is a little bit of spice to make it redirect back to the current page:

<a href="<?php echo wp_logout_url(get_permalink()); ?>" >Logout</a>

Nore: If you are using an theme that was designed before 2.7, you should go into your comments.php file and change the anchor tag around line 78 to fix your Logout link.

]]> http://bavotasan.com/2009/issue-with-the-user-logout-button-in-wordpress-27/feed/ 9 Adding a Simple Quicktag to the HTML Editor in WordPress http://bavotasan.com/2009/adding-a-simple-quicktag-to-the-html-editor-in-wordpress/ http://bavotasan.com/2009/adding-a-simple-quicktag-to-the-html-editor-in-wordpress/#comments Wed, 14 Jan 2009 16:01:19 +0000 c.bavota http://bavotasan.com/?p=158 When you are editing a post or writing a new post in WordPress, you might have noticed those buttons above the editing box. They add WYSIWYG type functionality to the WordPress editor for common functions such as bolding, italics and linking. WordPress refers to these buttons as Quicktags.

They should look something like this if you use the HTML editor.

quicktags

If you use the Visual editor they should look something like this.

quicktags2

If you have a function that you use often it is very simple to add it to the Quicktag bar. For this example, I am going to add a button that creates a span tag and asks for a class to the HTML editor Quicktag bar.

The file we need to work with is under wp-includes/js/quicktags.js.

First we need to create the button, so go to around line 36 and enter the following.

36
37
38
39
40
41
42

edButtons[edButtons.length] =
new edButton('ed_class'
,'span'
,''
,'</span>'
,'p'
); // special case

Then we need to add the part that actually makes it call the function that asks the user to enter a class name. Find this part around line 166.

166
167
168
169
170
171
172
173
174
175
176

function edShowButton(button, i) {
if (button.id == 'ed_img') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
}
else if (button.id == 'ed_link') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
}
}

And make it this.

166
167
168
169
170
171
172
173
174
175
176
177
178
179

function edShowButton(button, i) {
if (button.id == 'ed_img') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
}
else if (button.id == 'ed_link') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else if (button.id == 'ed_class') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertClass(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
}
}

And it needs one last part, the actual function, to work properly, so go to the end of the file and add this.

403
404
405
406
407
408
409
410
411
412
413
414
415

function edInsertClass(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = '';
}
if (!edCheckOpenTags(i)) {
var CLASS = prompt('Enter the Image location' ,defaultValue);
if (CLASS) {
edButtons[i].tagStart = '<span class="' + CLASS + '">'; edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);v }
}

When it comes down to it, this might actually be a little bit more complicated of a Quicktag to create but there you go.

]]> http://bavotasan.com/2009/adding-a-simple-quicktag-to-the-html-editor-in-wordpress/feed/ 5 How to Create an Aqua Button in Adobe Illustrator http://bavotasan.com/2008/how-to-create-an-aqua-button-in-adobe-illustrator-cs3/ http://bavotasan.com/2008/how-to-create-an-aqua-button-in-adobe-illustrator-cs3/#comments Sat, 22 Nov 2008 21:55:38 +0000 c.bavota http://bavotasan.com/?p=66 I recently needed to create some buttons for a client’s website and I thought it would be a fun little tutorial to put together to show you how quick and easy it is to create one of those nifty looking aqua buttons you see everywhere. It is only really a five step process and you can use any shape you choose.

Here are some samples I created.


Placing text or an image on top of the buttons is pretty simple and these buttons can really add some nice visuals to any professional web design.

]]> http://bavotasan.com/2008/how-to-create-an-aqua-button-in-adobe-illustrator-cs3/feed/ 0