My Tips

Tips in programming, code fragments, maybe helpfull in other projects. Its good to have those tips in one place, here .

Create smooth page scrolling button using javascript

Posted on February 2012
Posted in: Javascript. Tagged: .

Example for smooth scrolling button(link) is in the bottom right corner of the page.

 

 

 

Html(link):

<div id="top-button" class="fixed-button">
<span><a href="javascript:void(null);">top &uarr;</a></span>
</div>
<div id="scroll-button" class="fixed-button">
<span><a href="javascript:void(null);">bottom &darr;</a></span>
</div>

Css:

.fixed-button {
background: none repeat scroll 0 0 #111111;
border: 1px dotted #444855;
color: #989eae;
bottom: 0;
right:2px;
font-size: 12px;
height: 15px;
padding: 10px;
position: fixed;
text-align: center;
width: 50px;
z-index: 800;
}

Javascript code:

$(document).ready(function()
{
   
   if($(window).height() < $('body').height())
   $('#scroll-button').show();
   $(window).scroll(function(){ smoothScroller(); });
   
   $('#top-button a').click(function(e){
      $('html, body').animate({scrollTop: '0px'}, 800);
      return false;
   });
   
   $('#scroll-button a').click(function(e){
      $('html, body').animate({scrollTop: $('body').height() + 'px'}, 800);
      return false;
   });
   var smoothScroller = function()
   {
   // get the height of #wrap
   var $wrapHeight = $('body').outerHeight()
   // get 1/4 of wrapHeight
   var $quarterwrapHeight = ($wrapHeight)/4
   // get 3/4 of wrapHeight
   var $threequarterswrapHeight = 3*($wrapHeight)
   // check if we're over a quarter down the page
   if( $(window).scrollTop() > $quarterwrapHeight )
   {
       $("#top-button").show();
       $("#scroll-button").hide();
   }
   else
   {
      $("#top-button").hide();
      $("#scroll-button").show();
   }
  }
 });

My favorite WordPress plugins

Posted on January 2012
Posted in: Wordpress.

This is a list of WordPress plugins that I use in creating websites:

  • WP-PageNavi –  numeric pagination
  • Relevanssi -improved search engine
  • CKEditor For WordPress – replace poor defaut editor with CKEditor
  • W3 Total Cache – improve web site performance
  • Post Notification – for sending newsletters
  • Connections – advanced  contact list grouping by categories. Includes picture, main data(first name, middle name, last name etc.) ,address data(2 addresses, city, zip code, state), emails, phones(selecting types: work phone, cell phone, home phone, fax etc.), biography etc.

How to measure text width(in pixels) of the input box value or select box text

Posted on January 2012
Posted in: Javascript.

 Function for text width measure in pixels:

(function($) {
     $.fn.textWidth = function () {
     $body = $('body');
     $this =  $(this);
     $text = $this.text();
     if($text=='') $text = $this.val();
       var calc = '<div style="clear:both;display:block;visibility:hidden;"><span style="width;inherit;margin:0;font-family:'  + $this.css('font-family') + ';font-size:'  + $this.css('font-size') + ';font-weight:' + $this.css('font-weight') + '">' + $text + '</span></div>';
     $body.append(calc);
     var width = $('body').find('span:last').width();
      $body.find('span:last').parent().remove();
     return width;
    };
 })(jQuery);

Call of the function:

var $input = $(input_element_id);
var text_width =  $input.textWidth();
alert(text_width);

 

 

Remove custom filters in page with multiple query_posts

Posted on January 2012
Posted in: Wordpress.

There are situations where one page contains multiple post queries(function query_posts) for different conditions(parent categories, tags, etc.), and some of post queries have custom filters(added by add_filter function). Next query_posts call will keep this custom filters, and that could make totaly unespected posts results. Before execute next post query, please add this kind of code to remove previous custom filter, i.e.:

if (has_filter('posts_where', 'filter_date_range_future')) remove_filter( 'posts_where', 'filter_date_range_future');

 'filter_date_range_future' is example function:

function filter_date_range_future($where = '') {
  $where .= " AND post_date >= '" . date('Y-m-d') . "'";
  return $where;
}