Javascript
Create tree view in webpages using Google Visulaization Api
Today I am going to tell you about how to create a tree view or binary tree view in webpage using some apis like Google Ajax Api (Visualization Api)
Few days ago I was working with a multi level marketting (MLM) management software where users are being registered under another refereing user. Thus forming a binary tree. I badly needed to create a tree view in web page. I searched the net for a easy solution. But the searched results were getting meshed up with result like creating folder trees. I didnt too much resources on net about it. Finally I found that its Google providing an ajax api called Google Visualization API that are providing some good tools for visualizing an charts. One of them is organizational chart found in Google Visualization API Gallery.
No CommentsConfigure CKEditor with syntax highlighter in drupal
I ran an website with programming tutorials and related resources with drupal. I need to add lots of reference codes in my posts. So I use javascript SyntaxHighlighter library from http://alexgorbatchev.com/wiki/SyntaxHighlighter.
In my drupal website I have fantastic wysiwyg editor module called ckeditor with lots of reach features. But when I need to add any code in my post. I manually need to switch to source mood and then edit the html to enter the syntaxHighlighter syntax.
1 CommentDisable text selection in webpage using javascript
In many cases you may need to disable text selection in web page. Where you have drag n drop enabled, you might not want to see that your text get selected when your draggin an item. You can do this easily using this this function.
// this function disables text select on a perticular dom object
function disableSelection(target)
{
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
Now if you want to disable selection on completely on your page you can select the “document” object and disable selection
disableSelection(document)
If you want to disable selection on a particular area such div do this
var div = document.getElementById('my_div');
disableSelection(div)
1 Comment