12 июн. 2011 г.

SyntaxHighlighter 3: fix scroll height in chrome and install to blogger

I desided to add SyntaxHighliter to my blog. All how-tos I found in Internet was about depricated 1.7 version (2007) but current version is 3.*.

There are 2 ways to install - if you have your own fileshosting you should upload js and css files from developers site to your server. Another way - is to use cloudhosting (Amazon) which author gives us.

Here we are implementing the second approach. All we need to do is to include css and js files. Open edit html template and before closing tag body add following code:
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript">
</script>
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.autoloader(
   'xml http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js',
   'sql http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js',
   'php http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
   'js http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
   'java http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js',
   'groovy http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js',
   'css http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'
);
 
SyntaxHighlighter.all();

</script>

Read more about autoloader and configuration on developers site.
And at the top of head tag include css resources:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
Now try too look how it works.

SyntaxHighlighter Chrome vertical scroll bug 

And now take a look your page in Chrome browser. If you see an vertical scrollbar - you found a known bug. To fix it just add in css under including shCore.css (thats why we move thouse files on top of the head) next line:
.syntaxhighlighter {overflow-y: hidden !important;}
You can add it manually the same way as we include js and css or use template designer -> advanced -> add css.

4 июн. 2011 г.

JS: prepare data to send form via ajax

How to join all inputs.
var inputs = [];
$('select, input[type=radio][checked=checked], input[type=text], input[type=hidden]', $("form")).each(function(){
inputs[$(this).attr('name')] = $(this).val();
});
alert(inputs.join('&'));

Mysql: get next\prev id with exact ordering

Task is to show previous and next link to smth. For example next\previous product in category.
It is hard to create this links because ids are not in a sequance (some entries were deleted or there is an order).

And, naturally, we dont  want to select all ids and search in loop :)

Ноwto do it in one sql-query

Lets have in our table `main_table` fields `id` and `name`. Last one in order to sort.
CREATE TABLE `main_table`(
  `id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(50) NULL,
  PRIMARY KEY (`id`)
) COLLATE='utf8_general_ci' ENGINE=InnoDB ROW_FORMAT=DEFAULT;

REPLACE INTO 
  main_table (id, name) 
VALUES 
  (1, '1st entry'), 
  (2, '2nd entry'), 
  (3, '3rd entry'), 
  (5, '4th entry, but id is 5');


Getting prev ID.
SELECT 
  t1.id, t1.name, t1.prev as prev_id
FROM 
(SELECT mt.id, mt.name, @prev_id as prev, @prev_id := id 
FROM `main_table` mt, (SELECT @prev_id:=0) ni 
ORDER BY name ASC) as t1;
Here is hack to declare variable @prev_id variable which contains:
(SELECT @prev_id:=0) pi
And:
@prev_id as prev, @prev_id := id
Mysql place @prev_id to column 'prev' of result set, and than set @prev_id to current id, which on the next iteration will be previous. For the first entry @prev_id will be 0.

Getting next ID.
Basically, to get next ID we need just change ordering. In our example from ASC to DESC
SELECT 
  t1.id, t1.name, t1.next as next_id
FROM 
(SELECT mt.id, mt.name, @next_id as next, @next_id := id 
FROM `main_table` mt, (SELECT @next_id:=0) ni 
ORDER BY name DESC) as t1;
And finally:
SELECT 
  t1.next as next_id
FROM 
(SELECT mt.id, mt.name, @next_id as next, @next_id := id 
FROM `main_table` mt, (SELECT @next_id:=0) ni 
ORDER BY name DESC) as t1
WHERE t1.id = 3;