Post navigation

code snippets

jQuery set this page as your home page

Useful bit of code if you want a link to get the visitor to your website to set the page as their homepage.

For Internet Explorer versions below 8, there’s a bit of ancient code that will do the job – which this script implements – but newer versions of IE and other modern don’t support this – quite rightly as it could be (and has been) used to set the user’s homepage without their knowledge!

So for the newer browsers, when it’s called, this script does a bit of browser detection and gives the user the appropriate instructions for their browser (in a nice jQuery popup/modal dialog) on how to set a page as their default homepage.

As usual – please let me know if you have a better way of doing this, or have any improvements to suggest.

The HTML

<div id="homepage-link">
	<a href="javascript:addashomepage()">
		<img src="images/yourhomebuttonimage.png" alt="Make this your homepage" width="16" height="16">
	</a>
	<span id="homepagePopup">
 		<section class="text">
		</section>
		<a href="javascript:void(0);" class="close">close</a>
	</span>
		Set as your home page
</div>

The jQuery

<script type="text/javascript">

/* Add as home page script - Dave Goodman goodmangraphics.co.uk */
function addashomepage(){

	// makes jQuery differentiate between Chrome and Safari - thanks to Vikrant Chaudhary
	$.browser.chrome = $.browser.webkit && !!window.chrome;
	$.browser.safari = $.browser.webkit && !window.chrome;

	if ($.browser.msie) { // IE 
		if ($.browser.msie  && parseInt($.browser.version, 10) < 8) { // IE is v7 or lower - use ye olde homepage code
			document.body.style.behavior='url(#default#homepage)';
		    document.body.setHomePage(window.location.href);
	    } else { // IE v8 or higher
		    var homesettext = "<p><strong>Internet Explorer</strong><br /><br />To set your homepage in Internet Explorer 6 or later on Microsoft Windows:</p><ol><li>Select <strong>Tools |&nbsp;Internet Options</strong>.</li><li>On the &quot;General&quot; tab, in the &quot;Home page&quot; text box, type: <em>http://www.garagewire.co.uk/&nbsp; </em></li></ol><p><strong>Note: </strong>The &quot;Home page&quot; box can contain multiple URLs. If you want Garage Wire to be the first tab when your browser opens, make sure<em> http://garagewire.co.uk/ </em>is the first URL in this box.</p><ol start='3'><li>Click <strong>Apply</strong></li><li>Click<strong> OK</strong>.</li></ol>";
	    };

	} else if ($.browser.safari) { // safari
		var homesettext = "<p><strong>Safari</strong><br /><br />To set your homepage in Safari 1 or later for Mac OS X or Microsoft Windows:</p><ol><li>Select <strong>Edit | </strong> <strong>Preferences</strong> or click the cog icon in the upper-right and select <strong>Preferences</strong>. The &quot;Preferences&quot; window appears.</li><li>Select the <strong>General</strong> tab.</li><li>Enter <em>http://www.garagewire.co.uk/ </em>in the&quot;Homepage&quot; text box.<em> </em></li><li>Click <strong>Close</strong>.</li></ol>";		

	} else if ($.browser.webkit) { // chrome
		var homesettext = "<p><strong>Chrome</strong><br /><br />To set your homepage in Chrome 18 or later for Mac OS X or Microsoft Windows:</p><ol><li>Sign in to Chrome if you have not already done so.</li><li>Select the&nbsp;Customize and control Google Chrome icon (the icon with three bars to the right of the URL&nbsp;box).</li><li>Select <strong>Settings</strong>.</li><li>Under &quot;On startup&quot;, select the <strong>Open a specific page or set of pages</strong> button.</li><li>Click <strong>Set Pages</strong>.</li><li>Enter <em>http://www.garagewire.co.uk/ </em>in the field provided.<em> </em></li><li>Click <strong>OK</strong> to save your settings.</li></ol>";		

	} else if ($.browser.mozilla) { // firefox
		var homesettext = "<p><strong>Mozilla Firefox</strong><br /><br />To set your homepage in Mozilla Firefox 16 or later on Microsoft Windows or Mac OS X:</p><ol><li>Select <strong>Firefox |</strong> <strong>Options</strong>. The <strong>Options</strong> dialog box appears.</li><li>Click the <strong>General</strong><em> </em>tab if not already selected.</li><li>Choose <strong>Show my home page</strong> in the drop-down to the right of &quot;When Firefox starts:&quot;.</li><li>Enter <em>http://www.garagewire.co.uk/</em> in the &quot;Home Page&quot; text box.</li><li>Click <strong>OK</strong>.</li></ol>";		

	} else if ($.browser.opera) { // opera
		var homesettext = "<p><strong>Opera</strong><br /><br />To set your homepage in Opera on Microsoft Windows:</p><ol><li>Navigate to and click on the 'Preferences' link from the drop-down menu at the top of the Opera browser. The Preferences box will open. Select the 'General' tab.</li><li>Click on 'Set current page as home page'.</li><li>Click <strong>OK</strong>.</li></ol>To set your homepage in Opera on Mac OS X:</p><ol><li>Click on the top menu option 'Opera,' and then click on the 'Preferences' option. The Preferences box will open with the General tab already selected.</li><li>click 'Use Current.' Then utilize the drop-down menu to choose the desired navigation option.</li><li>Click <strong>OK</strong>.</li></ol>";		

	} else { // unknown browser
		var homesettext = "<p><strong>Unknown browser type</strong><br /><br />To set your homepage please refer to your browser's help</a>";		
	};

	if (homesettext){
		$("#homepagePopup .text").html(homesettext);
		$("#homepagePopup").fadeIn();
	};

};

jQuery(document).ready(function($) {

    $("#homepagePopup .close").click(function(event) {
    	$("#homepagePopup").fadeOut();
    });

    $("#bookmarkPopup .close").click(function(event) {
    	$("#bookmarkPopup").fadeOut();
    });

});

</script>

and the CSS for the pop up…

#homepagePopup {
	position: absolute;
	float: left;
	text-align: left;
	padding: 15px;
	background: #000;
	color: #fff;
	font-size: 1.2em;
	line-height: 1.2em;
	border: #ccc 2px solid;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	top:0;
	left:20px;
	z-index: 100;
	-moz-box-shadow: 0 0 15px #888;
	-webkit-box-shadow: 0 0 15px#888;
	box-shadow: 0 0 15px #888;
	display: none;
}

#homepagePopup ol li {
	list-style: decimal;
	padding: 4px 0 4px 0px;
	margin-left: 20px;
}

About David Goodman

Leave a Reply

Your email address will not be published. Required fields are marked *

Please enable javascript to post a comment !