Working with Javascript sting, We often needs to check if a string starts with http, https or ftp. If it doesn’t start with one of those We have to prepend the sting with http://. Here is a running Javascript function to add http, https or ftp to sting.
Now Google started hosting of most popular libraries in large scale such a JQuery, Dojo, Moo Tools, Prototype, SWFObject, WebFont Loader, script.aculo.us, jQuery UI, AngularJS and open-source JavaScript libraries. The hosted libraries provide access to a growing list of the most popular, open-source JavaScript libraries. You can simply load library to your site by using <script src=”….”></script> tag.
Sometimes we need to check of function existence in Javascript/JQuery before calling it. This is very simple, just use Javascript window object to check for function. if you are using JQuery, use jQuery.isFunction to check function existence. Here in this I have explained how to test function exists before calling it.
Recently I had a requirement to add text and images at the cursor position in tiny editor. Actaully I had to impliment multple images attachment with “add to post” button with each uploaded images and when user clicked the button “add to post”, the image will be get inserted at cursor position in Tiny mce editor. The scenario was like below screen:
Recently I have needed to load JQuery dynamically. The requirement was to load JQuery properly within script tag with its attributes; and finally within HEAD tag. Actually its very simple to include JQuery dynamically. it require a little knowledge of JavaScript to create html DOM elements and attributes dynamically.
TinyMCE is a open-source web based Javascript HTML WYSIWYG editor, which allows users to add custom HTML and CSS without having to remember any code. You can simply select the element or text and apply the relevant format using the style dropdown, font dropdown, font size available in the visual editor.
As a web designer or developer, you may need to customize tinymce editor design or its functionality. Actually yesterday I got a ticket assigned to add a css class to img tag automatically when user upload a image url in tinymce editor and also to add lightbox. However, I find it very easy to customize editor’s functionality. So here in this post, I am going to share my experience about customizing editor’s existing functionality.
Lightbox is a popular, simple, unobtrusive script used to overlay images on top of the current page. It’s a snap to setup and works on all modern browsers. This lightbox plugin can give your gallery something extra you may wish to add the Lightbox effect. The Lightbox plugin is originally developed by Lokeshdhaker.com. Lightbox plugin has gained widespread popularity because it is easy to use and it gives a professional and stylish finish to your images.
Lightbox2 is latest update which allows you to present images in a slick window, while darkening the rest of the page. It gives your site a professional feel and adds very little to page load times. Lightbox2 works on almost every web browser out there, if a browser doesn’t support javascript, the code fails gracefully. This is the simplest and easiest plugin to use, if its an easy image gallery you want, this is for you.
What’s New in Version 2
In this post I have explained how to create a hidden Div and display it with the click of a button. Actually there is a many reasons you may want to hide a Div in a website design. Sometimes you may want to create a drop down type menu or a box that will show more information when you click a link.
Here I have created a javascript function named as divHideShow that will be called on button click event to hide and show div content.
Below is javascript method to hide and show div.
Now call above method in your file.
It’s very interesting to know statistic of your site visitor like which web browser they are using. you can easily detect user’s web browser by using javascript. Actaully javascript provides easy functions for disable right click on html page, checking browsers details etc.
You can detect web browsers by using the following JavaScript code:
Check for Firefox Web Browser
In this post, I would like to share a simple way to disable right click menu of the website. this is just few lines of JavaScript code to disable the menu that appears on the right click on the browser.
Below the code which you can use in the body tag of the document.
<div><div><div><a href=”#” onclick=”dp.sh.Toolbar.Command(‘ViewSource’,this);return false;”>view plain</a><a href=”#” onclick=”dp.sh.Toolbar.Command(‘CopyToClipboard’,this);return false;”>copy to clipboard</a><a href=”#” onclick=”dp.sh.Toolbar.Command(‘PrintSource’,this);return false;”>print</a><a href=”#” onclick=”dp.sh.Toolbar.Command(‘About’,this);return false;”>?</a></div></div><ol start=”1″><li><span><span><body oncontextmenu=</span><span>”return false;”</span><span>> </span></span></li></ol><textarea style=”display:none;”><body oncontextmenu=”return false;”></textarea></div>
This is a tested code with major browsers like IE. Firefox, Opera and Safari. It worked fine in all three browsers except Opera.
