Tag Archive for element

Implode Form Element Array

// implodeFormArray(form name : String, form element name : String, delimiter : String);
function implodeFormArray(f, e, del) {
	var form	= document.forms[f];
	if (typeof(form.elements[e].value) != "undefined") {
		if (form.elements[e].checked) return form.elements[e].value;
		else return '';
	} else {
		var output	= '';
		var len		= form.elements[e].length;
		for(var i=0;i<len;i++) {
			if (form.elements[e][i].checked) {
				output+= (output == '' ? '':del) + form.elements[e][i].value;
			}
		}
		return output;
	}
}

source

Toggle (Show/Hide) Element

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

Inline usage:
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

source

Video For Everybody

<!-- first try native HTML5 video playback -->
<video width="640" height="360" controls="controls" autoplay="true">
<source src="__MY_VIDEO__.mp4" type="video/mp4" />
<source src="__MY_VIDEO__.ogv" type="video/ogg" />
<!-- fall back to Flash *do not* include 'classid' so as to be compatible with non-IE browsers -->
<object width="640" height="380" type="application/x-shockwave-flash" data="__FLASH_PLAYER__.swf"
flashvars="autostart=true&amp;file=__MY_VIDEO__.mp4"
>	<!-- IE compatibility for the above -->
<param name="movie" value="__FLASH_PLAYER__.swf" />
<param name="flashvars" value="autostart=true&amp;file=__MY_VIDEO__.mp4" />
<!-- no Flash? fall back to a QuickTime object iPhone OSv2 will use this file. ensure your MP4 is compatible: <tinyurl.com/qmmss6> IE6 does not allow object-within-object, Flash is the only option. this object tag (with classid) is  hidden from non-IE browsers, as it causes a plugin-install prompt to occur even if the plugin is not needed because it's been superseded by HTML5 video -->
<!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="__MY_VIDEO__.mp4" />
<param name="autoplay" value="true" /><!
[endif]--><!-- the odd line-break above is *required* or QuickTime fallback fails -->
<!--[if gt IE 6]><!-->
<!-- that self-closing comment after the conditional tag is the only way to reveal the conditional comment to other browsers that is compatible with serving as XHTML (application/xhtml+xml). a normal closing comment marker would be visible in IE7, and other workarounds cause an XML parser error (comment-in-comment) -->
<!-- QuickTime height is height+15 to leave room for the controls -->
<object width="640" height="375" autoplay="true"
type="video/quicktime" data="__MY_VIDEO__.mp4"
>	<!-- params for Safari/Chrome compatibility (they ignore the attributes above) -->
<param name="src" value="__MY_VIDEO__.mp4" />
<param name="autoplay" value="true" />
<!--<![endif]-->
<!-- finally, if all else fails, fall back to a warning message: *always* tell the user *what* it is they can't see; give a title or description -->
<h3>Video: __TITLE_OF_MY_VIDEO__</h3>
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br />
<a href="__MY_VIDEO__.mp4">MPEG4 / H.264 .mp4
(Windows / Mac)</a> |
<a href="__MY_VIDEO__.ogv">Ogg Theora &amp; Vorbis .ogv
(Linux)</a>
</p>
<!-- and try to give them genuinely helpful information to rectify the problem -->
<p>
To play the video here in the webpage, please do one of the following:
</p><ul>
<li>Upgrade to the latest version of <a href="http://getfirefox.com">Firefox</a>,
or <a href="http://apple.com/safari">Safari</a></li>
<li>Install <a href="http://get.adobe.com/flashplayer/">Adobe Flash Player</a></li>
<li>Install <a href="http://apple.com/quicktime/download/">Apple QuickTime</a></li>
</ul>
<!--[if gt IE 6]><!--></object><!--<![endif]-->
<!--[if gt IE 6]></object><![endif]-->
</object>
</video>

source

Simple Hovering Element w/ Triggering Element

var HoverItem = Class.create({
timeout: null,
effect: null,
open: false,
enabled: true,
initialize: function(item, trigger){
this.item = $(item);
if( !this.item ){
throw 'HoverItem: invalid item';
}
if( !Object.isArray(trigger) ){
trigger = [trigger];
}
this.triggers = trigger.map(function(e){ return $(e);}).compact();
if( this.triggers.length === 0 ){
throw 'HoverItem: no valid trigger element';
}
this.options = Object.extend({
timeout: 0.5,
align_to_trigger: true,
zIndex: 100,
effects: null
}, arguments[2] || {});
this.item.hide();
if( this.options.align_to_trigger !== false ){
var trigger_pos = this.triggers[this.options.align_to_trigger].positionedOffset();
var trigger_dims = this.triggers[this.options.align_to_trigger].getDimensions();
this.item.setStyle({position: 'absolute', top: trigger_pos.top + trigger_dims.height + 'px', left: trigger_pos.left + 'px', zIndex: this.options.zIndex});
}
[this.item].concat(this.triggers).invoke('observe', 'mouseleave', this.closeItem.bindAsEventListener(this))
.invoke('observe', 'mouseenter', this.openItem.bindAsEventListener(this));
},
/* have to be careful with these because of timing issues */
disable: function(){
this.enabled = false;
},
enable: function(){
this.enabled = true;
},
openItem: function(){
console.log('openItem! ' + this.enabled);
if( !this.enabled ){
return;
}
this.stopClose();
if (!this.open) {
this.open = true;
try {
if (this.effect) {
this.effect.cancel();
}
this.effect = new this.options.effects.open.effect(this.item, this.options.effects.open.options ||
{});
}
catch (e) {
this.item.show();
}
}
},
closeItem: function(){
if (!this.timeout) {
this.timeout = this._closeItem.bind(this).delay(this.options.timeout);
}
},
_closeItem: function(){
this.open = false;
try{
if( this.effect ){
this.effect.cancel();
}
this.effect = new this.options.effects.close.effect(this.item, this.options.effects.close.options || {});
}catch(e){
this.effect = null;
this.item.hide();
}
},
stopClose: function(){
if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = null;
}
}
});

source

Add hasJS class to HTML element

<script type="text/javascript">document.getElementsByTagName('html')[0].className = 'hasJS';</script>

source

Insert element in the middle of array

array_splice($array, floor(count($array)/2), 0, $element);

source

Truely getElementById

// cross-browser document.getElementById, should be on top of code.
if(!document.getElementById)
{
if(document.all)
document.getElementById=function()
{
if(typeof document.all[arguments[0]]!="undefined")
return document.all[arguments[0]]
else
return null
}
else if(document.layers)
document.getElementById=function()
{
if(typeof document[arguments[0]]!="undefined")
return document[arguments[0]]
else
return null
}
}

source

Backbase Property Setter

<d:property name="test">
<d:setter type="application/javascript">
<![CDATA[
this._['_test'] = value;
]]>
</d:setter>
</d:property>

source

Element Dimensions

//get current dimensions and position of an element
//usage:   var dims = new ElementDimensions(elementToMeasure);
function ElementDimensions(elem)
{
this.inner = {	//content and padding; gives 0 for inline elements (you can use scrollWidth/Height if it's inline)
width: elem.clientWidth,
height: elem.clientHeight
};
this.outer = {	//everything (content, padding, scrollbar, border)
width: elem.offsetWidth,
height: elem.offsetHeight
};
this.scroll = {
//width & height of entire content field (including padding), visible or not
//incorrect in Opera; it doesn't include the padding
width: elem.scrollWidth,
//if there are no scrollbars, IE gives the actual height of the content instead of the height of the element
height: elem.scrollHeight<elem.clientHeight ? elem.clientHeight : elem.scrollHeight,

//scroll position of content & padding
left: elem.scrollLeft,
top: elem.scrollTop
};

//position of element from the top-left corner of the document
var tmp = elem;
this.left = this.top = 0;
while(tmp.offsetParent)
{
this.left += tmp.offsetLeft;
this.top += tmp.offsetTop;
tmp = tmp.offsetParent;
}
}

source

JS スタイルシートにアクセスする

	function fitFlash(w,h){
document.getElementById('flashLoader').style.width = w;
document.getElementById('flashLoader').style.height = h;
}

source