Testando i vecchi Conditional Comments su IE11

Dato che a partire da Internet Explorer 10 i Conditional Comments non sono più supportati, mi sono trovato un po’ in difficoltà andando a rimettere mano su alcuni vecchi lavori che li usavano.

Usando IE11, ho premuto F12 per far comparire gli scomodissimi Developer Tool, dopodichè sono andato nella tab “Emulazione” ed ho selezionato IE9. Risultato: il supporto ai Conditional Comments viene abilitato, ma viene rilevato IE11 (il browser in uso) e non IE9! Stessa cosa selezionando le versioni inferiori di IE.

L’ennesimo pasticcio di Microsoft (per di più su features proprietarie) non dovrebbe sorprendermi. Però mi rompe. Tanto.

5 aprile 2014 at 11:56 Lascia un commento

CSS: 256 classi battono un ID

Dopo il baco di getElementById() pensavo che non mi sarei stupito mai più, e invece questo baco mi ha fatto sorridere: 256 dichiarazioni CSS sono più importanti di un ID (65536 in Opera). La cosa è di poca importanza per il normale sviluppo di siti web di basso profilo, mentre potrebbe portare a problemi di sicurezza in caso di iniezione malevola di codice, ad esempio facendo cliccare all’utente un link indesiderato.

4 settembre 2012 at 13:57 Lascia un commento

Conditional Comment per il caso “qualsiasi browser tranne IE”

I Conditional Comments sono una comodissima funzionalità di Internet Explorer che permette di detrerminare la versione del browser Microsoft in uso e di conseguenza eseguire un certo codice HTML. Talvolta però i programmatori hanno l’esigenza di eseguire codice HTML nel caso l’utente NON stia usando Internet Explorer. Usando i Conditional Comments la cosa non è fattibile, visto che stiamo parlando di una funzionalità propria di IE, e che non funziona su Firefox, Chrome e compagnia bella.

Per fortuna c’è il trucco!

Sfruttando il comportamento dei parser degli altri browser è possibile ottenere una sintassi che escluda codice nel caso ci si trovi in un browser diverso da Internet Explorer:

<!--[if !IE]> -->
HTML
<!-- <![endif]-->

Approfondimenti:
http://www.impressivewebs.com/conditional-comments/
http://segfaultlabs.com/devlogs/not-only-internet-explorer-conditional-comments

22 dicembre 2011 at 15:54 Lascia un commento

Fix per Lightwindow

Lightwindow 2 è l’ennesimo clone di Lightbox. Sscritto da Stickman (Kevin Miller), poggia su Scriptaculous ed è fatto abbastanza bene, perciò l’ho usato spesso. Nel corso degli anni però mi sono imbattuto in qualche bug che ho fixato, e dato che il sito ufficiale non è più raggiungibile ho deciso di postare almeno qui i fix. Fortunatamente esiste anche un mirror del sito ufficiale, così si può consultare ancora la documentazione.

// lightwindow.js v2.0 Fixed by jure 2011/04/21
//
// Copyright (c) 2007 stickmanlabs
// Author: Kevin P Miller | http://www.stickmanlabs.com
// Fix author: jure | http://jure.wordpress.com
//
// LightWindow is freely distributable under the terms of an MIT-style license.
//
// I don't care what you think about the file size...
//   Be a pro: 
//	    http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
//      http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
//

/*-----------------------------------------------------------------------------------------------*/

if(typeof Effect == 'undefined')
  throw("lightwindow.js requires including script.aculo.us' effects.js library!");

// This will stop image flickering in IE6 when elements with images are moved
try {
	document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}

var lightwindow = Class.create();	
lightwindow.prototype = {
	//
	//	Setup Variables
	//
	element : null,
	contentToFetch : null,
	windowActive : false,
	dataEffects : [],
	dimensions : {
		cruft : null,
		container : null,
		viewport : {
			height : null,
			width : null,
			offsetTop : null,
			offsetLeft : null
		}
	},
	pagePosition : {
		x : 0,
		y : 0
	},
	pageDimensions : {
		width : null,
		height : null
	},
	preloadImage : [],
	preloadedImage : [],
	galleries : [],
	resizeTo : {
		height : null,
		heightPercent : null,
		width : null,
		widthPercent : null,
		fixedTop : null,
		fixedLeft : null
	},
	scrollbarOffset : 18,
	navigationObservers : {
		previous : null,
		next : null
	},
	containerChange : {
		height : 0,
		width : 0
	},
	activeGallery : false,
	galleryLocation : {
		current : 0,
		total : 0
	},
	//
	//	Initialize the lightwindow.
	//
	initialize : function(options) {
		this.options = Object.extend({
			resizeSpeed : 8,
			contentOffset : {
				height : 20,
				width : 20
			},
			dimensions : {
				image : {height : 250, width : 250},
				page : {height : 250, width : 250},
				inline : {height : 250, width : 250},
				media : {height : 250, width : 250},
				external : {height : 250, width : 250},
				titleHeight : 25
			},
			classNames : {	
				standard : 'lightwindow',
				action : 'lightwindow_action'
			},
			fileTypes : {
				page : ['asp', 'aspx', 'cgi', 'cfm', 'htm', 'html', 'pl', 'php4', 'php3', 'php', 'php5', 'phtml', 'rhtml', 'shtml', 'txt', 'vbs', 'rb'],
				media : ['aif', 'aiff', 'asf', 'avi', 'divx', 'm1v', 'm2a', 'm2v', 'm3u', 'mid', 'midi', 'mov', 'moov', 'movie', 'mp2', 'mp3', 'mpa', 'mpa', 'mpe', 'mpeg', 'mpg', 'mpg', 'mpga', 'pps', 'qt', 'rm', 'ram', 'swf', 'viv', 'vivo', 'wav'],
				image : ['bmp', 'gif', 'jpg', 'png', 'tiff']
			},
			mimeTypes : {
				avi : 'video/avi',
				aif : 'audio/aiff',
				aiff : 'audio/aiff',
				gif : 'image/gif',
				bmp : 'image/bmp',
				jpeg : 'image/jpeg',
				m1v : 'video/mpeg',
				m2a : 'audio/mpeg',
				m2v : 'video/mpeg',
				m3u : 'audio/x-mpequrl',
				mid : 'audio/x-midi',
				midi : 'audio/x-midi',
				mjpg : 'video/x-motion-jpeg',
				moov : 'video/quicktime',
				mov : 'video/quicktime',
				movie : 'video/x-sgi-movie',
				mp2 : 'audio/mpeg',
				mp3 : 'audio/mpeg3',
				mpa : 'audio/mpeg',
				mpa : 'video/mpeg',
				mpe : 'video/mpeg',
				mpeg : 'video/mpeg',
				mpg : 'audio/mpeg',
				mpg : 'video/mpeg',
				mpga : 'audio/mpeg',
				pdf : 'application/pdf',
				png : 'image/png',
				pps : 'application/mspowerpoint',
				qt : 'video/quicktime',
				ram : 'audio/x-pn-realaudio-plugin',
				rm : 'application/vnd.rn-realmedia',
				swf	: 'application/x-shockwave-flash',
				tiff : 'image/tiff',
				viv : 'video/vivo',
				vivo : 'video/vivo',
				wav : 'audio/wav',
				wmv : 'application/x-mplayer2'			
			},	
			classids : {
				mov : 'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',
				swf : 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000',
				wmv : 'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6'
			},
			codebases : {
				mov : 'http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0',
				swf : 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
				wmv : 'http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715'
			},	
			viewportPadding : 10,
			EOLASFix : 'swf,wmv,fla,flv',
			overlay : {
				opacity : 0.7,
				image : '/shared/images/black.png',
				presetImage : '/shared/images/black-70.png'
			},
			skin : 	{
				main : 	'
'+ '
'+ '
'+ ''+ 'close'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '
'+ '
'+ ''+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ ''+ '
'+ 'by '+ '
'+ '
'+ '
'+ '
'+ '
'+ '
'+ '
', loading : '
'+ 'loading'+ 'Loading or Cancel'+ ''+ '
', iframe : ''+ ''+ ''+ '{body_replace}'+ ''+ '', gallery : { top : '
'+ '

{gallery_title_replace}

'+ '
    ', middle : '
  • '+ '{gallery_link_replace}'+ '
  • ', bottom : '
'+ '
' } }, formMethod : 'get', hideFlash : false, hideGalleryTab : false, showTitleBar : true, animationHandler : false, navigationHandler : false, transitionHandler : false, finalAnimationHandler : false, formHandler : false, galleryAnimationHandler : false, showGalleryCount : true }, options || {}); this.duration = ((11-this.options.resizeSpeed)*0.15); this._setupLinks(); this._getScroll(); this._getPageDimensions(); this._browserDimensions(); this._addLightWindowMarkup(false); this._setupDimensions(); this.buildGalleryList(); }, // // Activate the lightwindow. // activate : function(e, link){ // Clear out the window Contents this._clearWindowContents(true); // Add back in out loading panel this._addLoadingWindowMarkup(); // Setup the element properties this._setupWindowElements(link); // Setup everything this._getScroll(); this._browserDimensions(); this._setupDimensions(); this._toggleTroubleElements('hidden', false); this._displayLightWindow('block', 'hidden'); this._setStatus(true); this._monitorKeyboard(true); this._prepareIE(true); this._loadWindow(); }, // // Turn off the window // deactivate : function(){ // The window is not active this.windowActive = false; // There is no longer a gallery active this.activeGallery = false; if (!this.options.hideGalleryTab) { this._handleGalleryAnimation(false); } // Kill the animation this.animating = false; // Clear our element this.element = null; // hide the window. this._displayLightWindow('none', 'visible'); // Clear out the window Contents this._clearWindowContents(false); // Stop all animation var queue = Effect.Queues.get('lightwindowAnimation').each(function(e){e.cancel();}); // Undo the setup this._prepareIE(false); this._setupDimensions(); this._toggleTroubleElements('visible', false); this._monitorKeyboard(false); }, // // Initialize specific window // createWindow : function(element, attributes) { this._processLink($(element)); }, // // Open a Window from a hash of attributes // activateWindow : function(options) { this.element = Object.extend({ href : null, title : null, author : null, caption : null, rel : null, top : null, left : null, type : null, showImages : null, height : null, width : null, loadingAnimation : null, iframeEmbed : null, form : null }, options || {}); // Set the window type this.contentToFetch = this.element.href; this.windowType = this.element.type ? this.element.type : this._fileType(this.element.href); // Clear out the window Contents this._clearWindowContents(true); // Add back in out loading panel this._addLoadingWindowMarkup(); // Setup everything this._getScroll(); this._browserDimensions(); this._setupDimensions(); this._toggleTroubleElements('hidden', false); this._displayLightWindow('block', 'hidden'); this._setStatus(true); this._monitorKeyboard(true); this._prepareIE(true); this._loadWindow(); }, // // Fire off our Form handler // submitForm : function(e) { if (this.options.formHandler) { this.options.formHandler(e); } else { this._defaultFormHandler(e); } }, // // Reload the window with another location // openWindow : function(element) { var element = $(element); // The window is active this.windowActive = true; // Clear out the window Contents this._clearWindowContents(true); // Add back in out loading panel this._addLoadingWindowMarkup(); // Setup the element properties this._setupWindowElements(element); this._setStatus(true); this._handleTransition(); }, // // Navigate the window // navigateWindow : function(direction) { this._handleNavigation(false); if (direction == 'previous') { this.openWindow(this.navigationObservers.previous); } else if (direction == 'next'){ this.openWindow(this.navigationObservers.next); } }, // // Build the Gallery List and Load it // buildGalleryList : function() { var output = ''; var galleryLink; for (i in this.galleries) { if (typeof this.galleries[i] == 'object') { output += (this.options.skin.gallery.top).replace('{gallery_title_replace}', unescape(i)); for (j in this.galleries[i]) { if (typeof this.galleries[i][j] == 'object') { galleryLink = ''+unescape(j)+''; output += (this.options.skin.gallery.middle).replace('{gallery_link_replace}', galleryLink); } } output += this.options.skin.gallery.bottom; } } new Insertion.Top('lightwindow_galleries_list', output); // Attach Events for (i in this.galleries) { if (typeof this.galleries[i] == 'object') { for (j in this.galleries[i]) { if (typeof this.galleries[i][j] == 'object') { Event.observe($('lightwindow_gallery_'+i+'_'+j), 'click', this.openWindow.bind(this, this.galleries[i][j][0]), false); $('lightwindow_gallery_'+i+'_'+j).onclick = function() {return false;}; } } } } }, // // Set Links Up // _setupLinks : function() { var links = $$('.'+this.options.classNames.standard); links.each(function(link) { this._processLink(link); }.bind(this)); }, // // Process a Link // _processLink : function(link) { if ((this._fileType(link.getAttribute('href')) == 'image' || this._fileType(link.getAttribute('href')) == 'media')) { if (gallery = this._getGalleryInfo(link.rel)) { if (!this.galleries]) { this.galleries] = new Array(); } if (!this.galleries]]) { this.galleries]] = new Array(); } this.galleries]].push(link); } } // Take care of our inline content var url = link.getAttribute('href'); if (url.indexOf('?') > -1) { url = url.substring(0, url.indexOf('?')); } var container = url.substring(url.indexOf('#')+1); if($(container)) { $(container).setStyle({ display : 'none' }); } Event.observe(link, 'click', this.activate.bindAsEventListener(this, link), false); link.onclick = function() {return false;}; }, // // Setup our actions // _setupActions : function() { var links = $$('#lightwindow_container .'+this.options.classNames.action); links.each(function(link) { Event.observe(link, 'click', this[link.getAttribute('rel')].bindAsEventListener(this, link), false); link.onclick = function() {return false;}; }.bind(this)); }, // // Add the markup to the page. // _addLightWindowMarkup : function(rebuild) { var overlay = Element.extend(document.createElement('div')); overlay.setAttribute('id', 'lightwindow_overlay'); // FF Mac has a problem with putting Flash above a layer without a 100% opacity background, so we need to use a pre-made if (Prototype.Browser.Gecko) { overlay.setStyle({ backgroundImage: 'url('+this.options.overlay.presetImage+')', backgroundRepeat: 'repeat', //jure: height:'100%' //height: this.pageDimensions.height+'px' }); } else { overlay.setStyle({ opacity: this.options.overlay.opacity, backgroundImage: 'url('+this.options.overlay.image+')', backgroundRepeat: 'repeat', //jure: height:'100%' //height: this.pageDimensions.height+'px' }); } var lw = document.createElement('div'); lw.setAttribute('id', 'lightwindow'); lw.innerHTML = this.options.skin.main; var body = document.getElementsByTagName('body')[0]; body.appendChild(overlay); body.appendChild(lw); if ($('lightwindow_title_bar_close_link')) { Event.observe('lightwindow_title_bar_close_link', 'click', this.deactivate.bindAsEventListener(this)); $('lightwindow_title_bar_close_link').onclick = function() {return false;}; } Event.observe($('lightwindow_previous'), 'click', this.navigateWindow.bind(this, 'previous'), false); $('lightwindow_previous').onclick = function() {return false;}; Event.observe($('lightwindow_next'), 'click', this.navigateWindow.bind(this, 'next'), false); $('lightwindow_next').onclick = function() {return false;}; if (!this.options.hideGalleryTab) { Event.observe($('lightwindow_galleries_tab'), 'click', this._handleGalleryAnimation.bind(this, true), false); $('lightwindow_galleries_tab').onclick = function() {return false;}; } // Because we use position absolute, kill the scroll Wheel on animations if (Prototype.Browser.IE) { Event.observe(document, 'mousewheel', this._stopScrolling.bindAsEventListener(this), false); } else { Event.observe(window, 'DOMMouseScroll', this._stopScrolling.bindAsEventListener(this), false); } Event.observe(overlay, 'click', this.deactivate.bindAsEventListener(this), false); overlay.onclick = function() {return false;}; }, // // Add loading window markup // _addLoadingWindowMarkup : function() { $('lightwindow_contents').innerHTML += this.options.skin.loading; }, // // Setup the window elements // _setupWindowElements : function(link) { this.element = link; this.element.title = null ? '' : link.getAttribute('title'); this.element.author = null ? '' : link.getAttribute('author'); this.element.caption = null ? '' : link.getAttribute('caption'); this.element.rel = null ? '' : link.getAttribute('rel'); this.element.params = null ? '' : link.getAttribute('params'); // Set the window type this.contentToFetch = this.element.href; this.windowType = this._getParameter('lightwindow_type') ? this._getParameter('lightwindow_type') : this._fileType(this.contentToFetch); }, // // Clear the window contents out // _clearWindowContents : function(contents) { // If there is an iframe, its got to go if ($('lightwindow_iframe')) { Element.remove($('lightwindow_iframe')); } // Stop playing an object if its still around if ($('lightwindow_media_primary')) { try { $('lightwindow_media_primary').Stop(); } catch(e) {} Element.remove($('lightwindow_media_primary')); } // Stop playing an object if its still around if ($('lightwindow_media_secondary')) { try { $('lightwindow_media_secondary').Stop(); } catch(e) {} Element.remove($('lightwindow_media_secondary')); } this.activeGallery = false; this._handleNavigation(this.activeGallery); if (contents) { // Empty the contents $('lightwindow_contents').innerHTML = ''; // Reset the scroll bars $('lightwindow_contents').setStyle({ overflow: 'hidden' }); if (!this.windowActive) { $('lightwindow_data_slide_inner').setStyle({ display: 'none' }); $('lightwindow_title_bar_title').innerHTML = ''; } // Because of browser differences and to maintain flexible captions we need to reset this height at close $('lightwindow_data_slide').setStyle({ height: 'auto' }); } this.resizeTo.height = null; this.resizeTo.width = null; }, // // Set the status of our animation to keep things from getting clunky // _setStatus : function(status) { this.animating = status; if (status) { Element.show('lightwindow_loading'); } if (!(/MSIE 6./i.test(navigator.userAgent))) { this._fixedWindow(status); } }, // // Make this window Fixed // _fixedWindow : function(status) { if (status) { if (this.windowActive) { this._getScroll(); $('lightwindow').setStyle({ position: 'absolute', top: parseFloat($('lightwindow').getStyle('top'))+this.pagePosition.y+'px', left: parseFloat($('lightwindow').getStyle('left'))+this.pagePosition.x+'px' }); } else { $('lightwindow').setStyle({ position: 'absolute' }); } } else { if (this.windowActive) { this._getScroll(); $('lightwindow').setStyle({ position: 'fixed', top: parseFloat($('lightwindow').getStyle('top'))-this.pagePosition.y+'px', left: parseFloat($('lightwindow').getStyle('left'))-this.pagePosition.x+'px' }); } else { if ($('lightwindow_iframe')) { // Ideally here we would set a 50% value for top and left, but Safari rears it ugly head again and we need to do it by pixels this._browserDimensions(); } $('lightwindow').setStyle({ position: 'fixed', top: (parseFloat(this._getParameter('lightwindow_top')) ? parseFloat(this._getParameter('lightwindow_top'))+'px' : this.dimensions.viewport.height/2+'px'), left: (parseFloat(this._getParameter('lightwindow_left')) ? parseFloat(this._getParameter('lightwindow_left'))+'px' : this.dimensions.viewport.width/2+'px') }); } } }, // // Prepare the window for IE. // _prepareIE : function(setup) { if (Prototype.Browser.IE) { var height, overflowX, overflowY; if (setup) { var height = '100%'; } else { var height = 'auto'; } var body = document.getElementsByTagName('body')[0]; var html = document.getElementsByTagName('html')[0]; html.style.height = body.style.height = height; } }, _stopScrolling : function(e) { if (this.animating) { if (e.preventDefault) { e.preventDefault(); } e.returnValue = false; } }, // // Get the scroll for the page. // _getScroll : function(){ if(typeof(window.pageYOffset) == 'number') { this.pagePosition.x = window.pageXOffset; this.pagePosition.y = window.pageYOffset; } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { this.pagePosition.x = document.body.scrollLeft; this.pagePosition.y = document.body.scrollTop; } else if(document.documentElement) { this.pagePosition.x = document.documentElement.scrollLeft; this.pagePosition.y = document.documentElement.scrollTop; } }, // // Reset the scroll. // _setScroll : function(x, y) { document.documentElement.scrollLeft = x; document.documentElement.scrollTop = y; }, // // Hide Selects from the page because of IE. // We could use iframe shims instead here but why add all the extra markup for one browser when this is much easier and cleaner // _toggleTroubleElements : function(visibility, content){ if (content) { var selects = $('lightwindow_contents').getElementsByTagName('select'); } else { var selects = document.getElementsByTagName('select'); } for(var i = 0; i document.body.offsetHeight){ xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } if(yScroll < windowHeight){ this.pageDimensions.height = windowHeight; } else { this.pageDimensions.height = yScroll; } if(xScroll -1 && (document.domain == this._getDomain(url))) return 'inline'; if (url.indexOf('?') > -1) url = url.substring(0, url.indexOf('?')); var type = 'unknown'; var page = new RegExp("[^\.]\.("+this.options.fileTypes.page.join('|')+")\s*$", "i"); var media = new RegExp("[^\.]\.("+this.options.fileTypes.media.join('|')+")\s*$", "i"); if (document.domain != this._getDomain(url)) type = 'external'; if (media.test(url)) type = 'media'; if (type == 'external' || type == 'media') return type; if (page.test(url) || url.substr((url.length-1), url.length) == '/') type = 'page'; return type; }, // // Get file Extension // _fileExtension : function(url) { if (url.indexOf('?') > -1) { url = url.substring(0, url.indexOf('?')); } var extenstion = ''; for (var x = (url.length-1); x > -1; x--) { if (url.charAt(x) == '.') { return extenstion; } extenstion = url.charAt(x)+extenstion; } }, // // Monitor the keyboard while this lightwindow is up // _monitorKeyboard : function(status) { if (status) document.onkeydown = this._eventKeypress.bind(this); else document.onkeydown = ''; }, // // Perform keyboard actions // _eventKeypress : function(e) { if (e == null) { var keycode = event.keyCode; } else { var keycode = e.which; } switch (keycode) { case 27: this.deactivate(); break; case 13: return; default: break; } // Gotta stop those quick fingers if (this.animating) { return false; } switch (String.fromCharCode(keycode).toLowerCase()) { case 'p': if (this.navigationObservers.previous) { this.navigateWindow('previous'); } break; case 'n': if (this.navigationObservers.next) { this.navigateWindow('next'); } break; default: break; } }, // // Get Gallery Information // _getGalleryInfo : function(rel) { if (!rel) return false; if (rel.indexOf('[') > -1) { return new Array(escape(rel.substring(0, rel.indexOf('['))), escape(rel.substring(rel.indexOf('[')+1, rel.indexOf(']')))); } else { return false; } }, // // Get the domain from a string. // _getDomain : function(url) { var leadSlashes = url.indexOf('//'); var domainStart = leadSlashes+2; var withoutResource = url.substring(domainStart, url.length); var nextSlash = withoutResource.indexOf('/'); var domain = withoutResource.substring(0, nextSlash); if (domain.indexOf(':') > -1){ var portColon = domain.indexOf(':'); domain = domain.substring(0, portColon); } return domain; }, // // Get the value from the params attribute string. // _getParameter : function(parameter, parameters) { if (!this.element) return false; if (parameter == 'lightwindow_top' && this.element.top) { return unescape(this.element.top); } else if (parameter == 'lightwindow_left' && this.element.left) { return unescape(this.element.left); } else if (parameter == 'lightwindow_type' && this.element.type) { return unescape(this.element.type); } else if (parameter == 'lightwindow_show_images' && this.element.showImages) { return unescape(this.element.showImages); } else if (parameter == 'lightwindow_height' && this.element.height) { return unescape(this.element.height); } else if (parameter == 'lightwindow_width' && this.element.width) { return unescape(this.element.width); } else if (parameter == 'lightwindow_loading_animation' && this.element.loadingAnimation) { return unescape(this.element.loadingAnimation); } else if (parameter == 'lightwindow_iframe_embed' && this.element.iframeEmbed) { return unescape(this.element.iframeEmbed); } else if (parameter == 'lightwindow_form' && this.element.form) { return unescape(this.element.form); } else { if (!parameters) { if (this.element.params) parameters = this.element.params; else return; } var value; var parameterArray = parameters.split(','); var compareString = parameter+'='; var compareLength = compareString.length; for (var i = 0; i < parameterArray.length; i++) { if (parameterArray[i].substr(0, compareLength) == compareString) { var currentParameter = parameterArray[i].split('='); value = currentParameter[1]; break; } } if (!value) return false; else return unescape(value); } }, // // Get the Browser Viewport Dimensions // _browserDimensions : function() { if (Prototype.Browser.IE) { this.dimensions.viewport.height = document.documentElement.clientHeight; this.dimensions.viewport.width = document.documentElement.clientWidth; } else { this.dimensions.viewport.height = window.innerHeight; this.dimensions.viewport.width = document.width || document.body.offsetWidth; } }, // // Get the scrollbar offset, I don't like this method but there is really no other way I can find. // _getScrollerWidth : function() { var scrollDiv = Element.extend(document.createElement('div')); scrollDiv.setAttribute('id', 'lightwindow_scroll_div'); scrollDiv.setStyle({ position: 'absolute', top: '-10000px', left: '-10000px', width: '100px', height: '100px', overflow: 'hidden' }); var contentDiv = Element.extend(document.createElement('div')); contentDiv.setAttribute('id', 'lightwindow_content_scroll_div'); contentDiv.setStyle({ width: '100%', height: '200px' }); scrollDiv.appendChild(contentDiv); var body = document.getElementsByTagName('body')[0]; body.appendChild(scrollDiv); var noScroll = $('lightwindow_content_scroll_div').offsetWidth; scrollDiv.style.overflow = 'auto'; var withScroll = $('lightwindow_content_scroll_div').offsetWidth; Element.remove($('lightwindow_scroll_div')); this.scrollbarOffset = noScroll-withScroll; }, // // Add a param to an object dynamically created // _addParamToObject : function(name, value, object, id) { var param = document.createElement('param'); param.setAttribute('value', value); param.setAttribute('name', name); if (id) { param.setAttribute('id', id); } object.appendChild(param); return object; }, // // Get the outer HTML of an object CROSS BROWSER // _outerHTML : function(object) { if (Prototype.Browser.IE) { return object.outerHTML; } else { var clone = object.cloneNode(true); var cloneDiv = document.createElement('div'); cloneDiv.appendChild(clone); return cloneDiv.innerHTML; } }, // // Convert an object to markup // _convertToMarkup : function(object, closeTag) { var markup = this._outerHTML(object).replace('', ''); if (Prototype.Browser.IE) { for (var i = 0; i < object.childNodes.length; i++){ markup += this._outerHTML(object.childNodes[i]); } markup += ''; } return markup; }, // // Depending what type of browser it is we have to append the object differently... DAMN YOU IE!! // _appendObject : function(object, closeTag, appendTo) { if (Prototype.Browser.IE) { appendTo.innerHTML += this._convertToMarkup(object, closeTag); // Fix the Eolas activate thing but only for specified media, for example doing this to a quicktime film breaks it. if (this.options.EOLASFix.indexOf(this._fileType(this.element.href)) > -1) { var objectElements = document.getElementsByTagName('object'); for (var i = 0; i < objectElements.length; i++) { if (objectElements[i].getAttribute("data")) objectElements[i].removeAttribute('data'); objectElements[i].outerHTML = objectElements[i].outerHTML; objectElements[i].style.visibility = "visible"; } } } else { appendTo.appendChild(object); } }, // // Add in iframe // _appendIframe : function(scroll) { var iframe = document.createElement('iframe'); iframe.setAttribute('id', 'lightwindow_iframe'); iframe.setAttribute('name', 'lightwindow_iframe'); iframe.setAttribute('src', 'about:blank'); iframe.setAttribute('height', '100%'); iframe.setAttribute('width', '100%'); iframe.setAttribute('frameborder', '0'); iframe.setAttribute('marginwidth', '0'); iframe.setAttribute('marginheight', '0'); iframe.setAttribute('scrolling', scroll); this._appendObject(iframe, 'iframe', $('lightwindow_contents')); }, // // Write Content to the iframe using the skin // _writeToIframe : function(content) { var template = this.options.skin.iframe; template = template.replace('{body_replace}', content); if ($('lightwindow_iframe').contentWindow){ $('lightwindow_iframe').contentWindow.document.open(); $('lightwindow_iframe').contentWindow.document.write(template); $('lightwindow_iframe').contentWindow.document.close(); } else { $('lightwindow_iframe').contentDocument.open(); $('lightwindow_iframe').contentDocument.write(template); $('lightwindow_iframe').contentDocument.close(); } }, // // Load the window Information // _loadWindow : function() { switch (this.windowType) { case 'image' : var current = 0; var images = []; this.checkImage = []; this.resizeTo.height = this.resizeTo.width = 0; this.imageCount = this._getParameter('lightwindow_show_images') ? parseInt(this._getParameter('lightwindow_show_images')) : 1; // If there is a gallery get it if (gallery = this._getGalleryInfo(this.element.rel)) { for (current = 0; current -1) { break; } } if (this.galleries]][current-this.imageCount]) { this.navigationObservers.previous = this.galleries]][current-this.imageCount]; } else { this.navigationObservers.previous = false; } if (this.galleries]][current+this.imageCount]) { this.navigationObservers.next = this.galleries]][current+this.imageCount]; } else { this.navigationObservers.next = false; } this.activeGallery = true; } else { this.navigationObservers.previous = false; this.navigationObservers.next = false; this.activeGallery = false; } for (var i = current; i this.resizeTo.height) { this.resizeTo.height = imageHeight; } this.resizeTo.width += $('lightwindow_image_'+i).getWidth(); this.imageCount--; $('lightwindow_image_'+i).setStyle({ height: '100%'/*jure:*/, width: 'auto'/*:jure*/ }); if (this.imageCount == 0) { this._processWindow(); } } }.bind(this, i), 1); } break; case 'media' : var current = 0; this.resizeTo.height = this.resizeTo.width = 0; // If there is a gallery get it if (gallery = this._getGalleryInfo(this.element.rel)) { for (current = 0; current -1) { break; } } if (this.galleries]][current-1]) { this.navigationObservers.previous = this.galleries]][current-1]; } else { this.navigationObservers.previous = false; } if (this.galleries]][current+1]) { this.navigationObservers.next = this.galleries]][current+1]; } else { this.navigationObservers.next = false; } this.activeGallery = true; } else { this.navigationObservers.previous = false; this.navigationObservers.next = false; this.activeGallery = false; } if (gallery && this.galleries]][current]) { this.contentToFetch = this.galleries]][current].href; this.galleryLocation = {current: current+1, total: this.galleries]].length}; if (!this.galleries]][current+1]) { $('lightwindow_next').setStyle({ display: 'none' }); } else { $('lightwindow_next').setStyle({ display: 'block' }); $('lightwindow_next_title').innerHTML = this.galleries]][current+1].title; } if (!this.galleries]][current-1]) { $('lightwindow_previous').setStyle({ display: 'none' }); } else { $('lightwindow_previous').setStyle({ display: 'block' }); $('lightwindow_previous_title').innerHTML = this.galleries]][current-1].title; } } if (this._getParameter('lightwindow_iframe_embed')) { this.resizeTo.height = this.dimensions.viewport.height; this.resizeTo.width = this.dimensions.viewport.width; } else { this.resizeTo.height = this._getParameter('lightwindow_height'); this.resizeTo.width = this._getParameter('lightwindow_width'); } this._processWindow(); break; case 'external' : this._appendIframe('auto'); this.resizeTo.height = this.dimensions.viewport.height; this.resizeTo.width = this.dimensions.viewport.width; this._processWindow(); break; case 'page' : var newAJAX = new Ajax.Request( this.contentToFetch, { method: 'get', parameters: '', onComplete: function(response) { $('lightwindow_contents').innerHTML += response.responseText; this.resizeTo.height = $('lightwindow_contents').scrollHeight+(this.options.contentOffset.height); this.resizeTo.width = $('lightwindow_contents').scrollWidth+(this.options.contentOffset.width); this._processWindow(); }.bind(this) } ); break; case 'inline' : var content = this.contentToFetch; if (content.indexOf('?') > -1) { content = content.substring(0, content.indexOf('?')); } content = content.substring(content.indexOf('#')+1); new Insertion.Top($('lightwindow_contents'), $(content).innerHTML); this.resizeTo.height = $('lightwindow_contents').scrollHeight+(this.options.contentOffset.height); this.resizeTo.width = $('lightwindow_contents').scrollWidth+(this.options.contentOffset.width); this._toggleTroubleElements('hidden', true); this._processWindow(); break; default : throw("Page Type could not be determined, please amend this lightwindow URL "+this.contentToFetch); break; } }, // // Resize the Window to fit the viewport if necessary // _resizeWindowToFit : function() { if (this.resizeTo.height+this.dimensions.cruft.height > this.dimensions.viewport.height) { var heightRatio = this.resizeTo.height/this.resizeTo.width; this.resizeTo.height = this.dimensions.viewport.height-this.dimensions.cruft.height-(2*this.options.viewportPadding); // We only care about ratio's with this window type if (this.windowType == 'image' || (this.windowType == 'media' && !this._getParameter('lightwindow_iframe_embed'))) { this.resizeTo.width = this.resizeTo.height/heightRatio; $('lightwindow_data_slide_inner').setStyle({ width: this.resizeTo.width+'px' }); } } if (this.resizeTo.width+this.dimensions.cruft.width > this.dimensions.viewport.width) { var widthRatio = this.resizeTo.width/this.resizeTo.height; this.resizeTo.width = this.dimensions.viewport.width-2*this.dimensions.cruft.width-(2*this.options.viewportPadding); // We only care about ratio's with this window type if (this.windowType == 'image' || (this.windowType == 'media' && !this._getParameter('lightwindow_iframe_embed'))) { this.resizeTo.height = this.resizeTo.width/widthRatio; $('lightwindow_data_slide_inner').setStyle({ height: this.resizeTo.height+'px' }); } } }, // // Set the Window to a preset size // _presetWindowSize : function() { if (this._getParameter('lightwindow_height')) { this.resizeTo.height = parseFloat(this._getParameter('lightwindow_height')); } if (this._getParameter('lightwindow_width')) { this.resizeTo.width = parseFloat(this._getParameter('lightwindow_width')); } }, // // Process the Window // _processWindow : function() { // Clean out our effects this.dimensions.dataEffects = []; // Set up the data-slide if we have caption information if (this.element.caption || this.element.author || (this.activeGallery && this.options.showGalleryCount)) { if (this.element.caption) { $('lightwindow_data_caption').innerHTML = this.element.caption; $('lightwindow_data_caption').setStyle({ display: 'block' }); } else { $('lightwindow_data_caption').setStyle({ display: 'none' }); } if (this.element.author) { $('lightwindow_data_author').innerHTML = this.element.author; $('lightwindow_data_author_container').setStyle({ display: 'block' }); } else { $('lightwindow_data_author_container').setStyle({ display: 'none' }); } if (this.activeGallery && this.options.showGalleryCount) { $('lightwindow_data_gallery_current').innerHTML = this.galleryLocation.current; $('lightwindow_data_gallery_total').innerHTML = this.galleryLocation.total; $('lightwindow_data_gallery_container').setStyle({ display: 'block' }); } else { $('lightwindow_data_gallery_container').setStyle({ display: 'none' }); } $('lightwindow_data_slide_inner').setStyle({ width: this.resizeTo.width+'px', height: 'auto', visibility: 'visible', display: 'block' }); $('lightwindow_data_slide').setStyle({ height: $('lightwindow_data_slide').getHeight()+'px', width: '1px', overflow: 'hidden', display: 'block' }); } else { $('lightwindow_data_slide').setStyle({ display: 'none', width: 'auto' }); $('lightwindow_data_slide_inner').setStyle({ display: 'none', visibility: 'hidden', width: this.resizeTo.width+'px', height: '0px' }); } if (this.element.title != 'null') { $('lightwindow_title_bar_title').innerHTML = this.element.title; } else { $('lightwindow_title_bar_title').innerHTML = ''; } var originalContainerDimensions = {height: $('lightwindow_container').getHeight(), width: $('lightwindow_container').getWidth()}; // Position the window $('lightwindow_container').setStyle({ height: 'auto', // We need to set the width to a px not auto as opera has problems with it width: $('lightwindow_container').getWidth()+this.options.contentOffset.width-(this.windowActive ? this.options.contentOffset.width : 0)+'px' }); var newContainerDimensions = {height: $('lightwindow_container').getHeight(), width: $('lightwindow_container').getWidth()}; // We need to record the container dimension changes this.containerChange = {height: originalContainerDimensions.height-newContainerDimensions.height, width: originalContainerDimensions.width-newContainerDimensions.width}; // Get out general dimensions this.dimensions.container = {height: $('lightwindow_container').getHeight(), width: $('lightwindow_container').getWidth()}; this.dimensions.cruft = {height: this.dimensions.container.height-$('lightwindow_contents').getHeight()+this.options.contentOffset.height, width: this.dimensions.container.width-$('lightwindow_contents').getWidth()+this.options.contentOffset.width}; // Set Sizes if we need too this._presetWindowSize(); this._resizeWindowToFit(); // Even if the window is preset we still don't want it to go outside of the viewport if (!this.windowActive) { // Position the window $('lightwindow_container').setStyle({ left: -(this.dimensions.container.width/2)+'px', top: -(this.dimensions.container.height/2)+'px' }); } $('lightwindow_container').setStyle({ height: this.dimensions.container.height+'px', width: this.dimensions.container.width+'px' }); // We are ready, lets show this puppy off! this._displayLightWindow('block', 'visible'); this._animateLightWindow(); }, // // Fire off our animation handler // _animateLightWindow : function() { if (this.options.animationHandler) { this.options.animationHandler().bind(this); } else { this._defaultAnimationHandler(); } }, // // Fire off our transition handler // _handleNavigation : function(display) { if (this.options.navigationHandler) { this.options.navigationHandler().bind(this, display); } else { this._defaultDisplayNavigation(display); } }, // // Fire off our transition handler // _handleTransition : function() { if (this.options.transitionHandler) { this.options.transitionHandler().bind(this); } else { this._defaultTransitionHandler(); } }, // // Handle the finish of the window animation // _handleFinalWindowAnimation : function(delay) { if (this.options.finalAnimationHandler) { this.options.finalAnimationHandler().bind(this, delay); } else { this._defaultfinalWindowAnimationHandler(delay); } }, // // Handle the gallery Animation // _handleGalleryAnimation : function(list) { if (this.options.galleryAnimationHandler) { this.options.galleryAnimationHandler().bind(this, list); } else { this._defaultGalleryAnimationHandler(list); } }, // // Display the navigation // _defaultDisplayNavigation : function(display) { if (display) { $('lightwindow_navigation').setStyle({ display: 'block', height: $('lightwindow_contents').getHeight()+'px', width: '100%', marginTop: this.options.dimensions.titleHeight+'px' }); } else { $('lightwindow_navigation').setStyle({ display: 'none', height: 'auto', width: 'auto' }); } }, // // This is the default animation handler for LightWindow // _defaultAnimationHandler : function() { // Now that we have figures out the cruft lets make the caption go away and add its effects if (this.element.caption || this.element.author || (this.activeGallery && this.options.showGalleryCount)) { $('lightwindow_data_slide').setStyle({ display: 'none', width: 'auto' }); this.dimensions.dataEffects.push( new Effect.SlideDown('lightwindow_data_slide', {sync: true}), new Effect.Appear('lightwindow_data_slide', {sync: true, from: 0.0, to: 1.0}) ); } // Set up the Title if we have one $('lightwindow_title_bar_inner').setStyle({ height: '0px', marginTop: this.options.dimensions.titleHeight+'px' }); // We always want the title bar as well this.dimensions.dataEffects.push( new Effect.Morph('lightwindow_title_bar_inner', {sync: true, style: {height: this.options.dimensions.titleHeight+'px', marginTop: '0px'}}), new Effect.Appear('lightwindow_title_bar_inner', {sync: true, from: 0.0, to: 1.0}) ); if (!this.options.hideGalleryTab) { this._handleGalleryAnimation(false); if ($('lightwindow_galleries_tab_container').getHeight() == 0) { this.dimensions.dataEffects.push( new Effect.Morph('lightwindow_galleries_tab_container', {sync: true, style: {height: '20px', marginTop: '0px'}}) ); $('lightwindow_galleries').setStyle({ width: '0px' }); } } var resized = false; var ratio = this.dimensions.container.width-$('lightwindow_contents').getWidth()+this.resizeTo.width+this.options.contentOffset.width; if (ratio != $('lightwindow_container').getWidth()) { new Effect.Parallel([ new Effect.Scale('lightwindow_contents', 100*(this.resizeTo.width/$('lightwindow_contents').getWidth()), {scaleFrom: 100*($('lightwindow_contents').getWidth()/($('lightwindow_contents').getWidth()+(this.options.contentOffset.width))), sync: true, scaleY: false, scaleContent: false}), new Effect.Scale('lightwindow_container', 100*(ratio/(this.dimensions.container.width)), {sync: true, scaleY: false, scaleFromCenter: true, scaleContent: false}) ], { duration: this.duration, delay: 0.25, queue: {position: 'end', scope: 'lightwindowAnimation'} } ); } ratio = this.dimensions.container.height-$('lightwindow_contents').getHeight()+this.resizeTo.height+this.options.contentOffset.height; if (ratio != $('lightwindow_container').getHeight()) { new Effect.Parallel([ new Effect.Scale('lightwindow_contents', 100*(this.resizeTo.height/$('lightwindow_contents').getHeight()), {scaleFrom: 100*($('lightwindow_contents').getHeight()/($('lightwindow_contents').getHeight()+(this.options.contentOffset.height))), sync: true, scaleX: false, scaleContent: false}), new Effect.Scale('lightwindow_container', 100*(ratio/(this.dimensions.container.height)), {sync: true, scaleX: false, scaleFromCenter: true, scaleContent: false}) ], { duration: this.duration, afterFinish: function() { if (this.dimensions.dataEffects.length > 0) { if (!this.options.hideGalleryTab) { $('lightwindow_galleries').setStyle({ width: this.resizeTo.width+'px' }); } new Effect.Parallel(this.dimensions.dataEffects, { duration: this.duration, afterFinish: function() { this._finishWindow(); }.bind(this), queue: {position: 'end', scope: 'lightwindowAnimation'} } ); } }.bind(this), queue: {position: 'end', scope: 'lightwindowAnimation'} } ); resized = true; } // We need to do our data effect since there was no resizing if (!resized && this.dimensions.dataEffects.length > 0) { new Effect.Parallel(this.dimensions.dataEffects, { duration: this.duration, beforeStart: function() { if (!this.options.hideGalleryTab) { $('lightwindow_galleries').setStyle({ width: this.resizeTo.width+'px' }); } if (this.containerChange.height != 0 || this.containerChange.width != 0) { new Effect.MoveBy('lightwindow_container', this.containerChange.height, this.containerChange.width, {transition: Effect.Transitions.sinoidal}); } }.bind(this), afterFinish: function() { this._finishWindow(); }.bind(this), queue: {position: 'end', scope: 'lightwindowAnimation'} } ); } }, // // Finish up Window Animation // _defaultfinalWindowAnimationHandler : function(delay) { if (this.windowType == 'media' || this._getParameter('lightwindow_loading_animation')) { // Because of major flickering with the overlay we just hide it in this case Element.hide('lightwindow_loading'); this._handleNavigation(this.activeGallery); this._setStatus(false); } else { Effect.Fade('lightwindow_loading', { duration: 0.75, delay: 1.0, afterFinish: function() { // Just in case we need some scroll goodness (this also avoids the swiss cheese effect) if (this.windowType != 'image' && this.windowType != 'media' && this.windowType != 'external') { $('lightwindow_contents').setStyle({ overflow: 'auto' }); } this._handleNavigation(this.activeGallery); this._defaultGalleryAnimationHandler(); this._setStatus(false); }.bind(this), queue: {position: 'end', scope: 'lightwindowAnimation'} }); } }, // // Handle the gallery Animation // _defaultGalleryAnimationHandler : function(list) { if (this.activeGallery) { $('lightwindow_galleries').setStyle({ display: 'block', marginBottom: $('lightwindow_data_slide').getHeight()+this.options.contentOffset.height/2+'px' }); $('lightwindow_navigation').setStyle({ height: $('lightwindow_contents').getHeight()-20+'px' }); } else { $('lightwindow_galleries').setStyle({ display: 'none' }); $('lightwindow_galleries_tab_container').setStyle({ height: '0px', marginTop: '20px' }); $('lightwindow_galleries_list').setStyle({ height: '0px' }); return false; } if (list) { if ($('lightwindow_galleries_list').getHeight() == 0) { var height = $('lightwindow_contents').getHeight()*0.80; $('lightwindow_galleries_tab_span').className = 'down'; } else { var height = 0; $('lightwindow_galleries_tab_span').className = 'up'; } new Effect.Morph('lightwindow_galleries_list', { duration: this.duration, transition: Effect.Transitions.sinoidal, style: {height: height+'px'}, beforeStart: function() { $('lightwindow_galleries_list').setStyle({ overflow: 'hidden' }); }, afterFinish: function() { $('lightwindow_galleries_list').setStyle({ overflow: 'auto' }); }, queue: {position: 'end', scope: 'lightwindowAnimation'} }); } }, // // Default Transition Handler // _defaultTransitionHandler : function() { // Clean out our effects this.dimensions.dataEffects = []; // Now that we have figures out the cruft lets make the caption go away and add its effects if ($('lightwindow_data_slide').getStyle('display') != 'none') { this.dimensions.dataEffects.push( new Effect.SlideUp('lightwindow_data_slide', {sync: true}), new Effect.Fade('lightwindow_data_slide', {sync: true, from: 1.0, to: 0.0}) ); } if (!this.options.hideGalleryTab) { if ($('lightwindow_galleries').getHeight() != 0 && !this.options.hideGalleryTab) { this.dimensions.dataEffects.push( new Effect.Morph('lightwindow_galleries_tab_container', {sync: true, style: {height: '0px', marginTop: '20px'}}) ); } if ($('lightwindow_galleries_list').getHeight() != 0) { $('lightwindow_galleries_tab_span').className = 'up'; this.dimensions.dataEffects.push( new Effect.Morph('lightwindow_galleries_list', { sync: true, style: {height: '0px'}, transition: Effect.Transitions.sinoidal, beforeStart: function() { $('lightwindow_galleries_list').setStyle({ overflow: 'hidden' }); }, afterFinish: function() { $('lightwindow_galleries_list').setStyle({ overflow: 'auto' }); } }) ); } } // We always want the title bar as well this.dimensions.dataEffects.push( new Effect.Morph('lightwindow_title_bar_inner', {sync: true, style: {height: '0px', marginTop: this.options.dimensions.titleHeight+'px'}}), new Effect.Fade('lightwindow_title_bar_inner', {sync: true, from: 1.0, to: 0.0}) ); new Effect.Parallel(this.dimensions.dataEffects, { duration: this.duration, afterFinish: function() { this._loadWindow(); }.bind(this), queue: {position: 'end', scope: 'lightwindowAnimation'} } ); }, // // Default Form handler for LightWindow // _defaultFormHandler : function(e) { var element = Event.element(e).parentNode; var parameterString = Form.serialize(this._getParameter('lightwindow_form', element.getAttribute('params'))); if (this.options.formMethod == 'post') { var newAJAX = new Ajax.Request(element.href, { method: 'post', postBody: parameterString, onComplete: this.openWindow.bind(this, element) }); } else if (this.options.formMethod == 'get') { var newAJAX = new Ajax.Request(element.href, { method: 'get', parameters: parameterString, onComplete: this.openWindow.bind(this, element) }); } }, // // Wrap everything up // _finishWindow : function() { if (this.windowType == 'external') { // We set the externals source here because it allows for a much smoother animation $('lightwindow_iframe').setAttribute('src', this.element.href); this._handleFinalWindowAnimation(1); } else if (this.windowType == 'media') { var outerObject = document.createElement('object'); outerObject.setAttribute('classid', this.options.classids[this._fileExtension(this.contentToFetch)]); outerObject.setAttribute('codebase', this.options.codebases[this._fileExtension(this.contentToFetch)]); outerObject.setAttribute('id', 'lightwindow_media_primary'); outerObject.setAttribute('name', 'lightwindow_media_primary'); outerObject.setAttribute('width', this.resizeTo.width); outerObject.setAttribute('height', this.resizeTo.height); outerObject = this._addParamToObject('movie', this.contentToFetch, outerObject); outerObject = this._addParamToObject('src', this.contentToFetch, outerObject); outerObject = this._addParamToObject('controller', 'true', outerObject); outerObject = this._addParamToObject('wmode', 'transparent', outerObject); outerObject = this._addParamToObject('cache', 'false', outerObject); outerObject = this._addParamToObject('quality', 'high', outerObject); if (!Prototype.Browser.IE) { var innerObject = document.createElement('object'); innerObject.setAttribute('type', this.options.mimeTypes[this._fileExtension(this.contentToFetch)]); innerObject.setAttribute('data', this.contentToFetch); innerObject.setAttribute('id', 'lightwindow_media_secondary'); innerObject.setAttribute('name', 'lightwindow_media_secondary'); innerObject.setAttribute('width', this.resizeTo.width); innerObject.setAttribute('height', this.resizeTo.height); innerObject = this._addParamToObject('controller', 'true', innerObject); innerObject = this._addParamToObject('wmode', 'transparent', innerObject); innerObject = this._addParamToObject('cache', 'false', innerObject); innerObject = this._addParamToObject('quality', 'high', innerObject); outerObject.appendChild(innerObject); } if (this._getParameter('lightwindow_iframe_embed')) { this._appendIframe('no'); this._writeToIframe(this._convertToMarkup(outerObject, 'object')); } else { this._appendObject(outerObject, 'object', $('lightwindow_contents')); } this._handleFinalWindowAnimation(0); } else { this._handleFinalWindowAnimation(0); } // Initialize any actions this._setupActions(); } } /*-----------------------------------------------------------------------------------------------*/ //jure: //Event.observe(window, 'load', lightwindowInit, false); document.observe('dom:loaded', lightwindowInit, false); //:jure // // Set up all of our links // var myLightWindow = null; function lightwindowInit() { myLightWindow = new lightwindow(); }

22 aprile 2011 at 11:15 Lascia un commento

Stringhe ed entità

Non c’è limite alle stranezze di javascript:

<a id="band-16">Guns &#038; Roses</a>
<script>
alert(document.getElementById("band-16").innerHTML);
// -> Guns &amp; Roses
alert(document.getElementById("band-16").firstChild.nodeValue);
// -> Guns & Roses
</script>

Come potete vedere, ho usato l’entità in formato decimale, ma se provo ad accedere al testo tramite JavaScript essa viene convertita! A volte torna utile, ma cosa potrei fare nel caso in cui mi servisse recuperare esattamente ciò che ho scritto? Per fortuna esiste il tag XMP:

<xmp id="xmp-16">Guns &#38; Roses</xmp>
<script>
alert(document.getElementById("xmp-16").innerHTML);
// -> Guns &#38; Roses
alert(document.getElementById("xmp-16").firstChild.nodeValue);
// -> Guns &#38; Roses
</script>

7 settembre 2010 at 14:23 Lascia un commento

Attivare il metodo di un’istanza in maniera anonima

Quante volte vi siete trovati a dover attivare da un click il metodo dell’istanza di una classe? La prima difficoltà che si incontra è individuare esattamente l’istanza che ci serve. La soluzione più frequente è passare il nome dell’istanza o un qualsiasi riferimento come parametro.

Ma non si può proprio fare a meno di passare il riferimento all’istanza? Ebbene sì, e Prototype ci propone l’uso di “bindAsEventListener()”.

Facciamo un esempio. Ci sono x campi di testo. Ad ognuno è associato un bottone. Cliccando su un bottone parte l’alert del valore del campo di testo corrispondente.

Ecco il codice di come si risolve il problema “alla vecchia maniera”:

<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script>
<script>
// creo la classe
var saluto = Class.create({
	initialize:function(buttonField,textField,instance_id){
		this.buttonField=buttonField;
		this.textField=textField;
		this.instance_id=instance_id;

		this.buttonField.observe("click",
			function(){saluti[instance_id].hi()}
		);
	},
	hi:function(){
		alert(this.textField.value);
	}
});
// creo le istanze
var saluti=[];
document.observe("dom:loaded",function(){
	$$(".btn").each(function(BUTTON){
		var TEXTFIELD=$$(".msg")[saluti.length];
		saluti.push(new saluto(
			BUTTON,TEXTFIELD,saluti.length
		));
	});
});
</script></head><body>

<form>
<input class="msg" value="Hello World!"><input type="button" class="btn" value="Alert"><br>
<input class="msg" value="Good morning America!"><input type="button" class="btn" value="Alert"><br>
</form>

</body></html>

A differenza dalla vecchia, la “nuova maniera” non ha bisogno di alcun riferimento, per cui si può addirittura eliminare l’array con le istanze!

<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script>
<script>
// creo la classe
var saluto = Class.create({
	initialize:function(buttonField,textField){
		this.buttonField=buttonField;
		this.textField=textField;

		this.buttonField.observe("click",
			this.hi.bindAsEventListener(this)
		);
	},
	hi:function(){
		// in caso vogliate usare argomenti,
		// ricordate che il primo è sempre l'evento
		alert(this.textField.value);
	}
});
// creo le istanze
document.observe("dom:loaded",function(){
	$$(".btn").each(function(BUTTON,i){
		var TEXTFIELD=$$(".msg")[i];
		new saluto(
			BUTTON,TEXTFIELD
		);
	});
});
</script></head><body>

<form>
<input class="msg" value="Hello World!"><input type="button" class="btn" value="Alert"><br>
<input class="msg" value="Good morning America!"><input type="button" class="btn" value="Alert"><br>
</form>

</body></html>

C’est très chic ^_^

22 ottobre 2009 at 09:48 Lascia un commento

IE6 vs PNG, come cambiare lo sfondo grigio col colore di background preferito

Un HTMLista skillato sa bene come attivare la trasparenza delle PNG in IE6, conoscono i conditional comments, sanno che non c’è modo di usare PNG come background (in IE6), eccetera. Stavolta vi propongo una chicca che vi servirà 1 volta su 1 milione, ma sarà proprio quella volta in cui vi salverà il… lavoro.

Avete presente che inserendo una PNG con trasparenza Alpha in IE6 compare uno sfondo grigio, no? tanto che alcuni arrivano a cambiare la grafica del sito e ad usare lo stesso grigio… Ebbene, da oggi potrete ottenere esattamente il colore che vi serve!

TweakPNG vi permette infatti di smanettare con i vari parametri dei quali dispone una PNG, tra i quali appunto il Background. Basta aprire l’immagine e customizzare il parametro bKGD! (se non c’è, selezionare Insert > bKGD)

27 luglio 2009 at 13:25 2 commenti

Post più vecchi


Giorgio Beggiora

LinkedIn
jure.it




Categorie

JavaScript String .replace

Archivi


Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.