JavaScript Scripts Category

Flash Embedded with Div Classes

Wednesday, April 9th, 2008

Embedding flash scripts on your website is much more search engine friendly if the the amount of script in the HTML can be cut down.

  • First create a file and call it flash.js.
  • Copy the code from below and paste it into the flash file.
var UFO = {
req: ["movie", "width", "height", "majorversion", "build"],
opt: ["play", "loop", "menu", "quality", "scale", "salign", "wmode", "bgcolor", "base", "flashvars", "devicefont", "allowscriptaccess", "seamlesstabbing", "allowfullscreen", "allownetworking"],
optAtt: ["id", "name", "align"],
optExc: ["swliveconnect"],
ximovie: “SEO.swf”,
xiwidth: “215″,
xiheight: “138″,
ua: navigator.userAgent.toLowerCase(),
pluginType: “”,
fv: [0,0],
foList: [],

create: function(FO, id) {
if (!UFO.uaHas(”w3cdom”) || UFO.uaHas(”ieMac”)) return;
UFO.getFlashVersion();
UFO.foList[id] = UFO.updateFO(FO);
UFO.createCSS(”#” + id, “visibility:hidden;”);
UFO.domLoad(id);
}, updateFO: function(FO) {
if (typeof FO.xi != “undefined” && FO.xi == “true”) {
if (typeof FO.ximovie == “undefined”) FO.ximovie = UFO.ximovie;
if (typeof FO.xiwidth == “undefined”) FO.xiwidth = UFO.xiwidth;
if (typeof FO.xiheight == “undefined”) FO.xiheight = UFO.xiheight;
}
FO.mainCalled = false;
return FO;
},

domLoad: function(id) {
var _t = setInterval(function() {
if ((document.getElementsByTagName(”body”)[0] != null || document.body != null) && document.getElementById(id) != null) {
UFO.main(id);
clearInterval(_t);
}
}, 250);
if (typeof document.addEventListener != “undefined”) {
document.addEventListener(”DOMContentLoaded”, function() { UFO.main(id); clearInterval(_t); } , null); // Gecko, Opera 9+
}
},

main: function(id) {
var _fo = UFO.foList[id];
if (_fo.mainCalled) return;
UFO.foList[id].mainCalled = true;
document.getElementById(id).style.visibility = “hidden”;
if (UFO.hasRequired(id)) {
if (UFO.hasFlashVersion(parseInt(_fo.majorversion, 10), parseInt(_fo.build, 10))) {
if (typeof _fo.setcontainercss != “undefined” && _fo.setcontainercss == “true”) UFO.setContainerCSS(id);
UFO.writeSWF(id);
}
else if (_fo.xi == “true” && UFO.hasFlashVersion(6, 65)) {
UFO.createDialog(id);
}
}
document.getElementById(id).style.visibility = “visible”;
},

createCSS: function(selector, declaration) {
var _h = document.getElementsByTagName(”head”)[0];
var _s = UFO.createElement(”style”);
if (!UFO.uaHas(”ieWin”)) _s.appendChild(document.createTextNode(selector + ” {” + declaration + “}”)); // bugs in IE/Win
_s.setAttribute(”type”, “text/css”);
_s.setAttribute(”media”, “screen”);
_h.appendChild(_s);
if (UFO.uaHas(”ieWin”) && document.styleSheets && document.styleSheets.length > 0) {
var _ls = document.styleSheets[document.styleSheets.length - 1];
if (typeof _ls.addRule == “object”) _ls.addRule(selector, declaration);
}
},

setContainerCSS: function(id) {
var _fo = UFO.foList[id];
var _w = /%/.test(_fo.width) ? “” : “px”;
var _h = /%/.test(_fo.height) ? “” : “px”;
UFO.createCSS(”#” + id, “width:” + _fo.width + _w +”; height:” + _fo.height + _h +”;”);
if (_fo.width == “100%”) {
UFO.createCSS(”body”, “margin-left:0; margin-right:0; padding-left:0; padding-right:0;”);
}
if (_fo.height == “100%”) {
UFO.createCSS(”html”, “height:100%; overflow:hidden;”);
UFO.createCSS(”body”, “margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; height:100%;”);
}
},

createElement: function(el) {
return (UFO.uaHas(”xml”) && typeof document.createElementNS != “undefined”) ? document.createElementNS(”http://www.w3.org/1999/xhtml”, el) : document.createElement(el);
},

createObjParam: function(el, aName, aValue) {
var _p = UFO.createElement(”param”);
_p.setAttribute(”name”, aName);
_p.setAttribute(”value”, aValue);
el.appendChild(_p);
},

uaHas: function(ft) {
var _u = UFO.ua;
switch(ft) {
case “w3cdom”:
return (typeof document.getElementById != “undefined” && typeof document.getElementsByTagName != “undefined” && (typeof document.createElement != “undefined” || typeof document.createElementNS != “undefined”));
case “xml”:
var _m = document.getElementsByTagName(”meta”);
var _l = _m.length;
for (var i = 0; i < _l; i++) {
if (/content-type/i.test(_m[i].getAttribute(”http-equiv”)) && /xml/i.test(_m[i].getAttribute(”content”))) return true;
}
return false;
case “ieMac”:
return /msie/.test(_u) && !/opera/.test(_u) && /mac/.test(_u);
case “ieWin”:
return /msie/.test(_u) && !/opera/.test(_u) && /win/.test(_u);
case “gecko”:
return /gecko/.test(_u) && !/applewebkit/.test(_u);
case “opera”:
return /opera/.test(_u);
case “safari”:
return /applewebkit/.test(_u);
default:
return false;
}
},

getFlashVersion: function() {
if (UFO.fv[0] != 0) return;
if (navigator.plugins && typeof navigator.plugins["Shockwave Flash"] == “object”) {
UFO.pluginType = “npapi”;
var _d = navigator.plugins["Shockwave Flash"].description;
if (typeof _d != “undefined”) {
_d = _d.replace(/^.*\s+(\S+\s+\S+$)/, “$1″);
var _m = parseInt(_d.replace(/^(.*)\..*$/, “$1″), 10);
var _r = /r/.test(_d) ? parseInt(_d.replace(/^.*r(.*)$/, “$1″), 10) : 0;
UFO.fv = [_m, _r];
}
}
else if (window.ActiveXObject) {
UFO.pluginType = “ax”;
try { // avoid fp 6 crashes
var _a = new ActiveXObject(”ShockwaveFlash.ShockwaveFlash.7″);
}
catch(e) {
try {
var _a = new ActiveXObject(”ShockwaveFlash.ShockwaveFlash.6″);
UFO.fv = [6, 0];
_a.AllowScriptAccess = “always”; // throws if fp < 6.47
}
catch(e) {
if (UFO.fv[0] == 6) return;
}
try {
var _a = new ActiveXObject(”ShockwaveFlash.ShockwaveFlash”);
}
catch(e) {}
}
if (typeof _a == “object”) {
var _d = _a.GetVariable(”$version”); // bugs in fp 6.21/6.23
if (typeof _d != “undefined”) {
_d = _d.replace(/^\S+\s+(.*)$/, “$1″).split(”,”);
UFO.fv = [parseInt(_d[0], 10), parseInt(_d[2], 10)];
}
}
}
},

hasRequired: function(id) {
var _l = UFO.req.length;
for (var i = 0; i < _l; i++) {
if (typeof UFO.foList[id][UFO.req[i]] == “undefined”) return false;
}
return true;
},

hasFlashVersion: function(major, release) {
return (UFO.fv[0] > major || (UFO.fv[0] == major && UFO.fv[1] >= release)) ? true : false;
},

writeSWF: function(id) {
var _fo = UFO.foList[id];
var _e = document.getElementById(id);
if (UFO.pluginType == “npapi”) {
if (UFO.uaHas(”gecko”) || UFO.uaHas(”xml”)) {
while(_e.hasChildNodes()) {
_e.removeChild(_e.firstChild);
}
var _obj = UFO.createElement(”object”);
_obj.setAttribute(”type”, “application/x-shockwave-flash”);
_obj.setAttribute(”data”, _fo.movie);
_obj.setAttribute(”width”, _fo.width);
_obj.setAttribute(”height”, _fo.height);
var _l = UFO.optAtt.length;
for (var i = 0; i < _l; i++) {
if (typeof _fo[UFO.optAtt[i]] != “undefined”) _obj.setAttribute(UFO.optAtt[i], _fo[UFO.optAtt[i]]);
}
var _o = UFO.opt.concat(UFO.optExc);
var _l = _o.length;
for (var i = 0; i < _l; i++) {
if (typeof _fo[_o[i]] != “undefined”) UFO.createObjParam(_obj, _o[i], _fo[_o[i]]);
}
_e.appendChild(_obj);
}
else {
var _emb = “”;
var _o = UFO.opt.concat(UFO.optAtt).concat(UFO.optExc);
var _l = _o.length;
for (var i = 0; i < _l; i++) {
if (typeof _fo[_o[i]] != “undefined”) _emb += ‘ ‘ + _o[i] + ‘=”‘ + _fo[_o[i]] + ‘”‘;
}
_e.innerHTML = ‘<embed type=”application/x-shockwave-flash” src=”‘ + _fo.movie + ‘” width=”‘ + _fo.width + ‘” height=”‘ + _fo.height + ‘” pluginspage=”http://www.macromedia.com/go/getflashplayer”‘ + _emb + ‘></embed>’;
}
}
else if (UFO.pluginType == “ax”) {
var _objAtt = “”;
var _l = UFO.optAtt.length;
for (var i = 0; i < _l; i++) {
if (typeof _fo[UFO.optAtt[i]] != “undefined”) _objAtt += ‘ ‘ + UFO.optAtt[i] + ‘=”‘ + _fo[UFO.optAtt[i]] + ‘”‘;
}
var _objPar = “”;
var _l = UFO.opt.length;
for (var i = 0; i < _l; i++) {
if (typeof _fo[UFO.opt[i]] != “undefined”) _objPar += ‘<param name=”‘ + UFO.opt[i] + ‘” value=”‘ + _fo[UFO.opt[i]] + ‘” />’;
}
var _p = window.location.protocol == “https:” ? “https:” : “http:”;
_e.innerHTML = ‘<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″‘ + _objAtt + ‘ width=”‘ + _fo.width + ‘” height=”‘ + _fo.height + ‘” codebase=”‘ + _p + ‘//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=’ + _fo.majorversion + ‘,0,’ + _fo.build + ‘,0″><param name=”movie” value=”‘ + _fo.movie + ‘” />’ + _objPar + ‘</object>’;
}
},

createDialog: function(id) {
var _fo = UFO.foList[id];
UFO.createCSS(”html”, “height:100%; overflow:hidden;”);
UFO.createCSS(”body”, “height:100%; overflow:hidden;”);
UFO.createCSS(”#xi-con”, “position:absolute; left:0; top:0; z-index:1000; width:100%; height:100%; background-color:#fff; filter:alpha(opacity:75); opacity:0.75;”);
UFO.createCSS(”#xi-dia”, “position:absolute; left:50%; top:50%; margin-left: -” + Math.round(parseInt(_fo.xiwidth, 10) / 2) + “px; margin-top: -” + Math.round(parseInt(_fo.xiheight, 10) / 2) + “px; width:” + _fo.xiwidth + “px; height:” + _fo.xiheight + “px;”);
var _b = document.getElementsByTagName(”body”)[0];
var _c = UFO.createElement(”div”);
_c.setAttribute(”id”, “xi-con”);
var _d = UFO.createElement(”div”);
_d.setAttribute(”id”, “xi-dia”);
_c.appendChild(_d);
_b.appendChild(_c);
var _mmu = window.location;
if (UFO.uaHas(”xml”) && UFO.uaHas(”safari”)) {
var _mmd = document.getElementsByTagName(”title”)[0].firstChild.nodeValue = document.getElementsByTagName(”title”)[0].firstChild.nodeValue.slice(0, 47) + ” - Flash Player Installation”;
}
else {
var _mmd = document.title = document.title.slice(0, 47) + ” - Flash Player Installation”;
}
var _mmp = UFO.pluginType == “ax” ? “ActiveX” : “PlugIn”;
var _uc = typeof _fo.xiurlcancel != “undefined” ? “&xiUrlCancel=” + _fo.xiurlcancel : “”;
var _uf = typeof _fo.xiurlfailed != “undefined” ? “&xiUrlFailed=” + _fo.xiurlfailed : “”;
UFO.foList["xi-dia"] = { movie:_fo.ximovie, width:_fo.xiwidth, height:_fo.xiheight, majorversion:”6″, build:”65″, flashvars:”MMredirectURL=” + _mmu + “&MMplayerType=” + _mmp + “&MMdoctitle=” + _mmd + _uc + _uf };
UFO.writeSWF(”xi-dia”);
},

expressInstallCallback: function() {
var _b = document.getElementsByTagName(”body”)[0];
var _c = document.getElementById(”xi-con”);
_b.removeChild(_c);
UFO.createCSS(”body”, “height:auto; overflow:auto;”);
UFO.createCSS(”html”, “height:auto; overflow:auto;”);
},

cleanupIELeaks: function() {
var _o = document.getElementsByTagName(”object”);
var _l = _o.length
for (var i = 0; i < _l; i++) {
_o[i].style.display = “none”;
for (var x in _o[i]) {
if (typeof _o[i][x] == “function”) {
_o[i][x] = null;
}
}
}
}

};

if (typeof window.attachEvent != “undefined” && UFO.uaHas(”ieWin”)) {
window.attachEvent(”onunload”, UFO.cleanupIELeaks);
}

  • Assuming you already have a flash.swf file to hand, you can fill in the details of the code below. This includes locating the file; “example.swf”, inserting the file’s height & width, and giving the instance a name; ‘example1′.
  • Make sure that wehn you locate the flash file, it’s path is relative to where the script file is. For example: ../example.swf or /flash/example.swf or http://www.example.com/flash/example.swf
  • You also need to add the following code to the top of the same .js file.
var FO = { movie:”example.swf”, width:”xxx”, height:”xxx”,

majorversion:”6″, build:”40″ };

UFO.create(FO, “example1″);

  • Once you have set up the JavaScript file, you are ready to add the flash file to your website.
  • Begin adding the following script to the <HEAD> section of the HTML. Doing this will alow you to import the behaviours specified in the JavaScript file flash.js.
  • This script MUST go above any other script that may be imported within the header for it to function correctly.
<script type=”text/javascript” src=”flash.js”></script>
  • Now find where you want to add your flash and insert the following <div> code. example1 is the instance name we gave to the script earlier.
<div id=”example1″></div>

For more Web Design resources visit Free Website Templates

JavaScript Drop-Down Menu

Wednesday, April 9th, 2008

Sometimes on a website, particularly ones with large amounts of pages, it is more beneficial in terms of space and usability to locate links to all these page in a drop-down menu, where all the options can be be kept compact and accessible. This script is a very simple method of navigating a website using links in a dropdown menu, without the requirement of a ‘Go’ button.

To begin copy this code and paste it into the <HEAD> section of the HTML on your web page.

<script type=”text/javascript” language=”javascript”>
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
</script>

Once this code has been added, you need to add a HTML form onto your site which will allow the user to navigate. The options used in this example link to external websites, but they can also link to local files on within your website folder.

<form name=”form” id=”example” style=”margin: 0px 0px 0px 0px;” action=”">
<select name=”site” style=”margin: 0px; width: 150px;” onchange=”javascript:formHandler()”>
<option value=”" selected=”selected”>Quick Navigation… </option>
<optgroup label=”Blogs”>
<option value=”http://www.adammoss.co.uk”>Web 2.0 Blog</option>
<option value=”http://www.onlineshopdesign.co.uk/news-artciles”>E-Commerce Blog</option>
</optgroup>
<optgroup label=”Websites”>
<option value=”http://www.crearedesign.co.uk”>Web Design</option>
<option value=”http://www.crearecommunications.co.uk”>SEO</option>
</optgroup>
</select>
</form>

I have also added <optgroup> tags which allow you to separate your options into categories and groups, something which is particularly useful when storing large amounts of links.

Demo:

Click here to view demo

For more Web Design resources visit Free Website Templates

JavaScript Text Resizer

Wednesday, April 9th, 2008

For a server-side solution to allowing your users to resize the text on your webpage, here’s some simple JavaScript that can be added to your site and called by simple buttons. The code uses an array complied of different text sizes allowing you to enlarge, or shrink the size of your text. You can alter these sizes into pixels if you want to be more specific.

To begin, copy this code and paste it into the <HEAD> section of the HTML on your web page.

<script type=”text/javascript” language=”javascript”>
var tgs = new Array( ‘p’ );
var szs = new Array( ‘xx-small’,'x-small’,’small’,'medium’,'large’,'x-large’ );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
</script>

Once this code has been added, you now need a means by which the user can modify the size of the text themselves whilst browsing the website. This is done by adding this code:

[<a href="javascript:ts('body',-1)">smaller</a>] [<a href="javascript:ts('body',1)">larger</a>]

Demo:

Have a go at resizing the text on this website: [smaller] [larger]

For more Web Design resources visit Free Website Templates

Home | Free Website Templates | Free Website Hosting | Free Scripts | Contact Us
© Copyright 2008 - Free Website Template Downloads - All Rights Reserved