Code Blog

Displaying 1-5 of 6 results.
2016/04/26 Javascript,Yii

I had read about how to do a parallax effect for my background image (so effectively 1 layer parallax effect). I means that the background image slowly moves along as I scroll the text on my blog. In my case the background moves with 1/5 of the speed of the web page scrolling.

However I ran into some troubles when I happened to write too long post (i.e. many photos in posts quickly adds up in height). I had added some margin by using a tall background image in order to avoid this, but that was just a quick hack, and finally that just didn't seem to be able to solve it. 

Actually I would like the image to wrap around once it runs out of pixels to cover the whole web page window. I guess the setting the CSS background property to "repeat-y" and then use a javascript call to update the height as I scroll should do the trick but I opted for another solution.

 I decided to create 2 images that are shifted half-way in Y direction and swap between them as I scroll down. 

Illustration of switching between the two background images. One good tips I found is to use the "offset" filter in Photoshop and enter a 50% vertical offset and then re-save the image.

.bg
{
  background-position: 50% 0;  
  position: fixed;
  width: 1000px;
  height: 2000px;
  bottom:0;
  top:0;
  left:0;
  z-index: -1;	
}

.bg1 
{
  background-image: url('images/bg1.jpg');
}

.bg2 
{
  background-image: url('images/bg2.jpg');
}

I added a div at the top of the web page: <div class="bg bg1"></div>

$(window).scroll(function(e){
  parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();
  var imageheight = 2000;
  var bgscroll = scrolled*0.2 % imageheight;

  if ( bgscroll >= imageheight/2 ) {
  	$('.bg').removeClass('bg1').addClass('bg2');
  	$('.bg').css('top',imageheight/2-bgscroll+'px');
  } else {
  	$('.bg').removeClass('bg2').addClass('bg1');
  	$('.bg').css('top',-bgscroll+'px');
  }
}

I can then use the CSS class property to switch between background images for the bg div element.

When should the switch happen to the 2nd image? When half the first image has been scrolled up and out of sight. I therefore check for the background image scroll There is a half image height offset for the 2nd image. The image needs to be at least twice at high as the web browser window inner height (not incl toolbars/scrollbars). Please note the image dimension I have used is 1000 x 2000px for this example (width x height) and these values need to be changed for the code to work correctly with other dimensions.

2016/02/17 Yii

Run into the following situation: The CListView in Yii dynamically loads data into its view, but the Lightbox/Slimbox and SyntaxHighlighter don't know about this change. The easiest solution I found is to attach javascript code to 'afterAjaxUpdate' for the CListView widget to run through and update the new content. I found the SyntaxHighlighter solution in a forum, but had to slightly modify it so it will autoload all possible syntaxes. I don't really like to edit the source code of the extension (as it will break at next update), but I'm not sure what the better way would be to do this.

Add this function below in the JMSyntaxHighlighter.php (JMSyntaxHighlighter extension directory)

The timeout value is a quick hack that's not very pretty. I hope there's also better ways to fix this.

function ajaxHigh(){
  SyntaxHighlighter.vars.discoveredBrushes=null;
  SyntaxHighlighter.autoloader.apply(null, path(
   "applescript @shBrushAppleScript.js",
   "actionscript3 as3 @shBrushAS3.js",
   "bash shell @shBrushBash.js",
   "coldfusion cf @shBrushColdFusion.js",
   "cpp c @shBrushCpp.js",
   "c# c-sharp csharp @shBrushCSharp.js",
   "css @shBrushCss.js",
   "delphi pascal @shBrushDelphi.js",
   "diff patch pas @shBrushDiff.js",
   "erl erlang @shBrushErlang.js",
   "groovy @shBrushGroovy.js",
   "java @shBrushJava.js",
   "jfx javafx @shBrushJavaFX.js",
   "js jscript javascript @shBrushJScript.js",
   "perl pl @shBrushPerl.js",
   "php @shBrushPhp.js",
   "text plain @shBrushPlain.js",
   "py python @shBrushPython.js",
   "ruby rails ror rb @shBrushRuby.js",
   "sass scss @shBrushSass.js",
   "scala @shBrushScala.js",
   "sql @shBrushSql.js",
   "vb vbnet @shBrushVb.js",
   "xml xhtml xslt html @shBrushXml.js"
 ));
 setTimeout("SyntaxHighlighter.highlight();", 250);
}

In the view file:

$this->widget('zii.widgets.CListView', array(
 'dataProvider'=>$dataProvider,
 'itemView'=>'_view',
 'afterAjaxUpdate'=>'js:function(id,data){
   $(".viewcontent a").slimbox();
   ajaxHigh(); 
 }'
));

The JQuery call will match all <a href> tags within every <div class="viewcontent"> box and bind its event handler to slimbox (i'm running slimbox2.js).

On a side note this is what the official website (alexgorbatchev.com/SyntaxHighlighter) of SyntaxHighlighter says about AJAX integration:

Version 3.0 is fully CommonJS compatible.

A lot of people have tried using SyntaxHighlighter with AJAX and other "non-standard" ways that I have never originally imagined it being used in. With 3.0 release, SyntaxHighlighter can just render HTML code for you completely separately from the DOM, which means that not only it plays well with AJAX, you can use it on the server side with node.jsRingoJSJaxer or any other JavaScript platform.

This sounds quite interesting but would be a quite different solution than my current Yii1 build.

2016/02/15 Yii,CSS

Wanted to update my TinyMCE editor to be able to upload images directly in the browser. So updated the TinyMCE (using the "newtinymce" extension for TinyMCE 4 and "elfinder" extension).

Some things needed changing.

The attribute is the model field that stores the text for the editor.

The "connectorRoute" default set to 'admin/elfinder/connector' made me a bit confused. I guess this means I should have an AdminController to control access for this functions. But the documentation only specified adding an ElfinderController.

The elfinder is a file manager extension to TinyMCE as it doesn't support file uploads out of the box.

I had some problems that the "file upload" got hidden behind the other popup dialog boxes. I solved it by this hack, probably not the best solution ..

elfinder.full.js in extensions/elfinder/assets/js I added:

$('.el-finder-dialog').css( { 'z-index': '10000000'} );

after the append(..).dialog(..) call in the upload function definition (line 2106 in the source file).

But the better way is to add it to the CSS file. First I had to create a CSS for the specific item's views.

To include the CSS add the code below to the view files:

$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerCssFile($baseUrl.'/css/codeblog.css');

Codeblog.css:

div.el-finder-dialog
{
    z-index: 10000000;
}

Things left to do:

  • Compressor
  • Spellchecker

Links for Yii extensions:

NewTinyMCE www.yiiframework.com/extension/newtinymce/
Elfinder www.yiiframework.com/extension/elfinder/

I'm currently running Yii version 1.1.16 

2015/05/15 Yii,MySQL

MySQL statements for table dependences 

ALTER TABLE tbl_posttag 
ADD CONSTRAINT fk_codeblog_id 
FOREIGN KEY (post_id) REFERENCES tbl_codeblog (id) ON DELETE CASCADE;
 
ALTER TABLE tbl_posttag 
ADD CONSTRAINT fk_tag_id 
FOREIGN KEY (tagId) REFERENCES tbl_tag (id) ON DELETE CASCADE;
 
However, its easy to run into issues when creating dependences. In that case run this command directly after the error for more detailed information:
SHOW ENGINE INNODB STATUS;

Print the CREATE statement for a certain table is also useful for debugging:
CREATE INDEX CODEBLOG_ID_INDEX ON tbl_codeblog (id);

You need to check that all keys are of exactly the same type (length, unsigned, character encoding etc). The key also needs to be indexed. The table also needs to be InnoDB.
I also had a problem with a table inconsistency. I had already created a mapping between a post and tag in tbl_posttag, but the tag entry had already been deleted. In this case I cannot create the dependency without first removing the incorrect posttag entry.


2015/05/07 Yii,MySQL

I unfortunately had made some mistakes in my Yii code, which meant I had to restore only certain values from an old copy of my database. Normally it would be easiest to just copy over the entire database from the backup, but my backup wasn't up-to-date will all the data.
Basically the old backup had correct "create_time" for old posts, but as I also had new posts still not in the backup, so I therefore wanted to just extract the values for the "postid" that existed in both databases and after that update the "create_time" from the backup. But the process would be the same for any other field in a table. 
 
1. Create a new temporary database
2. Import the backup
 
3. Then I had to run a SQL command to copy over the old correct values from the temporary database.
Here's what I run to restore the correct "create_time" values:
USE database1
UPDATE table1 t1 
JOIN tempdatabase1.table1 as t2 ON
   t1.id = t2.id
SET
   t1.create_time = t2.create_time

Note: The following name aliases were created:

database1.table1 = t1
tempdatabase1.table1 = t2


4. After restoring the damaged values, the temporary database can be removed.