‘Add to Favourites’ button javascript


Here is a simple code, that i found useful from dynamicdrive. You can use for ‘Add to Favourites’ button in HTML. Add them in your head tag:

<script type=”text/javascript”>

/***********************************************
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function bookmarksite(title, url){
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, “”)
}

</script>

You can then call this javascript in your button ‘onclick’ event like this:

javascript:bookmarksite(‘site_title’, ‘site_URL’)

Demo

How to get the javascript version?


Javascript is evolving. With newer version, more commands, new functionalities gets added. To get to know the version of javascript your browser supports, just save the following code as html and load it in your browser:

<script type=”text/javascript”>
var jsver = 1.0;
</script>
<script language=”Javascript1.1″>
jsver = 1.1;
</script>
<script language=”Javascript1.2″>
jsver = 1.2;
</script>
<script language=”Javascript1.3″>
jsver = 1.3;
</script>
<script language=”Javascript1.4″>
jsver = 1.4;
</script>
<script language=”Javascript1.5″>
jsver = 1.5;
</script>
<script language=”Javascript1.6″>
jsver = 1.6;
</script>
<script type=”text/javascript”>
document.write(‘<p><b>Javascript version ‘ + jsver
+ ‘ supported<\/b><\/p>’);
</script>

Most of the times, you can expect the following results:

Javascript version 1.6 supported

Browser and javascript version supported are as below:

Firefox, Netscape 7/8, Mozilla, and Opera 7+ all support version 1.6

Netscape 6 supports version 1.5

Opera 6 supports version 1.4

Netscape 4.5, Opera 5, and Internet Explorer 6 support version 1.3

Netscape 4 supports version 1.2

Javascript pause method: To create delays in javascripts


Creating delays in javascript can be very essential under certain specific scenarios, though i would recommend you to avoid it in most cases.

The right way to create a delay would be by using setTimeOut method in javascript, as below:

setTimeout(“alert(‘hello world’)”,1500); // shows alertbox after 1500 milliseconds

The lazy way or to be precise – the naughty way, can be obtained from the below function:

<html>
<head>
<title>Javascript Pause</title>

<script language=”javascript”>
function pausejs(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
</script>

</head>
<body>

<form>
               <input type=”button” value=”Push this button to pause the page scripts by 1500 milliseconds” onClick=”pausejs(1500);“>
</form>

</body>
</html>

Of course, this is a naughty equivalent to the pause method. But after all you can have a pause method in your javascript.

ASP .Net Menu using ordered list – ul, li concept


I give a different approach to menu creation, in my ASP .Net project. The main wins being the performance and ease of use. Asp menu is pretty messy when you look at the code behind and the page size it adds. But use this concept only if performance is a critical factor.
Concept:
•    Use of ordered list (ul and li) and css smartly to construct the menu’s. Check any standard sites (www.apple.com) They use this concept.
•    Aspx design with divs only. ASP menu create Tables that are pretty messy and affects the page performance.

Screenshot:


Advantage:
•    Page is light weight
•    No table structure, only divs
•    The page menu loads like a normal html and is pretty cool and fast. It does not have any server tags also… eh except for the one div into which I have to add the codebehind menu result.

Codebehind:
•    Setup a usercontrol for this. Add it to master page.
•    Basic concept is to create the <ul> <li> <a> sections through codebehind. Use template concept, as defined below:

•    Use string.Format : string liSbTemp = string.Format(liTemplate, “link1”, “’active’”, “|”));
•    Use stringbuilder.append and so on…
•    Use for-loops effectively along with the above template(string.format({0}{1})), stringbuilder, LINQ(for querying through the list returned by the db) and structure a menu as below:

•    ‘ctl100_nvgMenu_divNavigator’ is the div with runat=server, into which I add my stringbuilder result.
•    ‘GlobalNav’ div is a wrapper to the full menu.
•    ‘mainNav’ <ul> has the main navigation tab anchor tags(<a>), with its own <li>
•    ‘subNav’ <ul> has the sub menu sections, with its own <li>
•    At the end, add the stringbuilder result to a div-divNavigator(which has a runat server attribute… only 1 runat server or do findcontrol and add it to a div on the page)
•    Use innerHtml (ctl100_nvgMenu_divNavigator.innerHtml ) to add it to the ‘divNavigator’ or else you will have some issue with the EnableEventValidation attribute in the page directive, during navigation.

Css: I am sharing the full css selector list here
#header #globalNav
{
padding-left: 8px;
padding-right: 8px;
}

#header #globalNav ul
{
padding: 1px 0px 0px 0px;
margin: 0;
list-style: none;
}

#header #globalNav ul li
{
float: left;
}

/* Start – Main Nav */

#globalNav ul#mainNav
{
font-size: 14px;
height: 27px;
}

ul#mainNav li a
{
color: #ffffff;
text-decoration: none;
line-height: 27px;
padding: 0 10px 0 9px;
}

ul#mainNav li.active
{
background: url(../../Resources/images/mainNav_left.gif) no-repeat;
}

ul#mainNav li.active a
{
background: url(../../Resources/images/mainNav_rt.gif) no-repeat right;
display: block;
color: #0D8695;
cursor: default;
}

/* End – Main Nav */

/* Start – Sub Nav */

#globalNav ul.subNav
{
border-bottom: 1px solid #C2CEDA;
height: 23px;
}
ul.subNav li
{
padding-right: 10px;
}
ul.subNav li a
{
color: #666666;
text-decoration: none;
line-height: 23px;
margin: 0 10px 0 0;
}

ul.subNav li a:hover
{
color: #0D8695;
}

ul.subNav li.active a
{
color: #0D8695;
cursor: default;
}

ul.subNav li.active a:hover
{
color: #0D8695;
text-decoration: none;
}

Voila… you have a light weight and powerful menu to boast off…

I totally respect the asp:Menu’s, but I am totally against using tables in any site… they are really primitive…  Hope Microsoft introduce div designs for the asp:Menu…

NB: To get a good head start, check the html source of apple site menu…..

How to determine whether Javascript is enabled?


There are a lot of approaches to this. Lets take them one at a time:

  • Using NOSCRIPT tag: You can write a noscript tag just before your script tag to display the user a warning message. Check the code below, wherein the user will be redirected to another page if javascript is disabled:

<html>
<head>
<title>Untitled</title>

<noscript><meta http-equiv=”refresh” content=”0; url=whatyouwant.html”></noscript>

</head>
<body>
<form>
<!–this javascript ensures that anybody that doesnt use javascript wont see the menu–>
<script type=”text/javascript”>
<!–hide script from older browsers
document.write(‘<select name=”whatever”><option>1</option><option>2</option></select>’);
–>
</script>
</form>
</body>
</html>

  • Check out this interesting article on 15 seconds,  Creating a Server Control for JavaScript Testing by George Masselli. It explains how to create a control that verifies whether Javascript is supported and enabled. Apparently it is not easy to determine if a user disabled Javascript support for security reasons.
  • A simple concept of hiding the always visible warning message through javascript. In this case, if your browser has javascript enabled, the script will hide the message. However, if it has javascript disabled, the message will be visible always. Check the snippet below:

<body onload=”valid()”>
<form id=”form1″ runat=”server”>
<label Id=”lblWarning”>Your Browser has Disabled Scripting</label>
</form>
<script type=”text/jscript”>
function valid()
{
var lbl=document.getElementById(‘lblWarning’);
lbl.style.display = ‘none’;
}
</script>

</body>

Hope this was useful. Feel free to add on more options.

Javascript to check any redirection to another page


When the user had made some changes in the page and accidentally clicks some links on the page, you might want to warn the user about the redirection and ask his permission for the operation.

Javascript makes it quite simple to do this operation, with the help of window.onbeforeunload():

window.onbeforeunload = checkRedirection;

function checkRedirection (evt) {
var message = ‘Are you sure you want to leave?‘;
if (typeof evt == ‘undefined’) {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}

In case of jQuery you can use the code snippet below:

$(window).beforeunload(function() {
confirm(‘new message: ‘ + this.href + ‘ !’, this.href);
return false;
});

/* The following code also works at times – But only in jquery */

$(window).unload(function(){ alert(‘blubb’): }); //Use of unload won’t work in normal javascript in this scenario

This would fire a popup, with the message (Are you sure you want to leave?), in case user clicks on any other links or buttons in the page.

Javascript to maximise window on load


Well this is simple script to get your browser maximised onload:

<html>

<head>
<script language=”JavaScript”>
window.onload = maxWindow;
function maxWindow()
{
window.moveTo(0,0);
if (document.all)
{
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById)
{
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth)
{
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;

}
}
}
</script>
</head>
<body>Testing</body>

</html>

I just tested it it IE. Hope this works fine in other browsers.

You can also open up a new window as maximised. Check the script snippet below:

function fullScreen(theURL) {
window.open(‘testwindow.html’, ”, ‘fullscreen=yes, scrollbars=auto’);
}

If you would like to use jQuery here, you can use the following jQuery methods:

var height = $(window).height();
var width  = $(window).width();

Hope this helps.