Learn VBA & Macros in 1 Week!

JavaScript - Addeventlistener And Attachevent Help

Full Excel VBA Course - Beginner to Expert

Addeventlistener And Attachevent Help	View Content

Okay, I'm really am not getting this. So I came here hopefully for some help. I'm just trying to register a simple click event onto a input element with addEventListener and attachEvent... My code:

Code:

 function addEvent(type, func, elem) {
	var netscape = document.getElementById && !document.all;
	var ie = document.all;
		
		if(netscape) {
			elem.addEventListener(type, func, true);
		}
		else if(ie) {
			elem.attachEvent('on'+type, func);
		}
 }

//Which is then call by

addEvent('click', someFunction, theElementObject);

So say I had the following code like so:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="./css/global.css" />

<script type="text/javascript">

 function addEvent(type, func, elem) {
	var netscape = document.getElementById && !document.all;
	var ie = document.all;
		
		if(netscape) {
			elem.addEventListener(type, func, true);
		}
		else if(ie) {
			elem.attachEvent('on'+type, func);
		}
 }
 
 function clearTxt() {
	var username = document.getElementById('username');
	
	if(username.value == 'Screen Name') {
		username.value = '';
	}
 }
 
 addEvent('click', clearTxt, document.getElementById('username'));
	
</script>
</head>
	<body>	

		
			<label for="username">Username:</label> <input name="username" type="text" value="Screen Name" id="username" maxlength="20" />
		
		
	</body>
</html>

From what I can see and what I understand it should just on event of a click on the username input it should clear the username field. But instead I get a error message from IE saying, "null is null or not a object"???? Like that was any help.

So could someone please help me figure out my misunderstanding of this method?

Thanks,
Jon W

Full Excel VBA Course - Beginner to Expert

Ie Attachevent Issue...

Similar Tutorials

View Content

Hello,

The event added to the flash object (videoPlayer) or to its container (player) responds as expected in all browsers except ie. I trtied everything I could possibly think of and still can't get it work in ie. The only event that works in ie is "onactivate".

--> tested with ie8 compat view / ie7 standards

Any help is greatly appreciated,

Niusaul

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Player testing...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
margin:0;
padding:0;
}
object{
outline:none;
}
#container-player{
float:left;
width:100%;
background-color:#eee;
padding-top:15px;
}
#dim-bg{
width:100%;
height:100%;
background-color:#000;
opacity:0.5;
filter:alpha(opacity=50);
z-index:1;
position:fixed;
top:0;
left:0;
display:none;
}
#player{
width:432px;
height:315px;
background-color:#ddd;
margin:50px auto;
position:relative;
/*z-index:3;
top:0;
left:0;*/
}
#test{
width:200px;
height:200px;
background-color:#FFCC00;
z-index:4;
position:absolute;
top:30px;
left:0px;
}
#content{
background-color:#DD0000;
z-index:3;
}
</style>
</head>
<body>
<div id="container-player">
<div id="test">z-index 4</div>
<div id="dim-bg">z-index 1</div>
<div id="player">


<embed
id='videoPlayer'
name='videoPlayer'
src='fla/player.swf'
wmode='opaque'
allowFullScreen='true'
play='true'
mennu='true'
quality='high'
flashvars=''
width='100%'
height='100%'
type='application/x-shockwave-flash'
pluginspage='http://www.macromedia.com/go/getflashplayer'>
</embed>

<div id="forClick"></div>
</div>

<script type="text/javascript">

var theObj = document.getElementById("player");
//var theObj = window.videoPlayer || document.videoPlayer;

if(window.addEventListener)
theObj.addEventListener("click", function(){alert("addEventListener");}, false);
else if(window.attachEvent)
{
//theObj.attachEvent("onactivate", function(){alert("attachEvent - onactivate");return false;});
theObj.attachEvent("onclick", function(){alert("attachEvent - onclick");return false;});
theObj.attachEvent("onMouseDown", function(){alert("attachEvent - onMouseDown");return false;});
theObj.attachEvent("onMouseUp", function(){alert("attachEvent - onMouseUp");return false;});
}
else
theObj.onclick = function(){alert("other");};
</script>
</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

</div>

</body>

</html>

Window.attachevent Issue

Similar Tutorials

View Content

I have a cross domain iframe resizing script (using postMessage) that works perfectly in Chrome, FF, Safari and IE9 - browsers that use addEventListener
I'm trying to get it to work in IE8 by adding what I thought was the right language for attachEvent, but it's not working in IE8 - I just get 'Object doesn't support this property or method' - again just in IE8.
Here's the js in the page with the iframe - What am I doing wrong ? Thanks.

Code:

<script type="text/javascript">
  function resize(id, other_domain) {
    var iframe = document.getElementById(id);

if (window.addEventListener) 
{
    window.addEventListener('message', function(event) {
      var howtall = parseInt(event.data); 
      iframe.height = howtall + "px";
    }, false);
}
else if (window.attachEvent) 
{
    window.attachEvent('onmessage', function(event) {
      var howtall = parseInt(event.data); 
      iframe.height = howtall + "px";
    });
}
          
else {  alert('old browser');     }

  }
window.onload = function(){resize('my_iframe', '*')}; 
</script>

Addeventlistener Issue

Similar Tutorials

View Content

I'm trying to add an event handler for to my body, and for some reason which I can't figure out, it only works on Google Chrome. I wouldn't expect it to work in IE, but am wondering why it's not working in Firefox.

Here's the relevant parts of the code:

Javascript (in an external file)
Code:

var body = document.body;
body.addEventListener("load", Foo(), false);
	
function Foo(){	
	addEventListener(document.getElementsByName("start"),"click", alert("hello"), false);
}

HTML

Code:

<html>
	<head>
		<title>BREAKOUT!</title>
		<script src="breakout.js" type="text/Javascript" >
		</script>
		<LINK REL="stylesheet" HREF="breakout.css" TYPE="text/css">
	</head>
	
	<body id="body">
<!-- etc.... -->

Addeventlistener For Radio Buttons With Same Id

Similar Tutorials

View Content

Is it possible to add events using addEventListener to multiple radio buttons with same id ?

<input id="radId" type="radio" value="0" name="radioname">No
<input id="radId" type="radio" value="1" name="radioname">Yes

I tried to attach event using document.getelementByID BUT it always picks the first radio button.

Is there a way around this, any help would be highly appreciated.

Thanks

Addeventlistener And Member Functions

Similar Tutorials

View Content

Hi folks,

I'm having problem setting up event handling using member functions. Consider the following code snippet:

Code:

function Widget()
{
    ...
    this.register = function()
    {
        ...
        document.getElementById(this.id).addEventListener('click', this.default_click_handler, false);
    }

    this.default_click_handler = function(event)
    {
         this.do_something_useful(); //<--???
    }

    this.do_something_useful = function()
    {...}
}

However I don't manage to call do_something_useful(), I get a this.do_something_useful() is not a function error.

What am I doing wrong?

Any help is appreciated,
Thanks,
A.

Getelementbyid.addeventlistener Loop Help

Similar Tutorials

View Content

I have created this statement and it does its job but not very efficient.

How can I put this in a loop and populate the information that I want anonymously? I do not want to copy and paste this for every (id) there is on this page.

Locate id get value and use same value to change the bgColor of the page
Code:

<input id="red" value="red">red
<input id="green" value="green">green

<script>
document.getElementById('red').addEventListener('click', function (e) { 
inputColor = e.target.getAttribute('value'); document.bgColor = inputColor; }, true);
<script>

Your help will be much appreciated! Thanks!

Addeventlistener In Custom Object

Similar Tutorials

View Content

I'm trying to understand how a custom object can call a function within itself. Say I have something like this:

Code:

function functiontest()
{
    
    this.prop1 = '',
    this.prop2 = '',
    this.options = {initiallevels:0},
    this.prop3 = '/blah',
    this.prop4 = true,

    this.function4 = function(x)
    {
        console.log(x)
    },
    
    this.init = function(options)
    {
        this.uid=options.uid
        this.t=options.target
        
        document.getElementById(this.t).addEventListener('click',function(){this.uid.function4(this.t)},false)
        
    }
}

myfun1=new functiontest
myfun1.init({uid:'myfun1',target:'target1'})

myfun2=new functiontest
myfun2.init({uid:'myfun2',target:'target2'})

And the html:

Code:

<html>
<head></head>
<body>

<div id="target1">T1</div>
<br>
<div id="target2">T2</div>

</body>
</html>

I don't know what to put in the part in bold to set the click event listener and have it call function4 within the functiontest object. I've tried a bunch of different things and nothing worked. Please help, thanks!

Using Addeventlistener To Attatch Dynamic Functions

Similar Tutorials

View Content

Hi, I have the following code:
Code:

function addHandlers()
{
	var elementList = new Array();
	elementList.push(new Element("newhomesdiv", "images/newhomes.png", "images/newhomes-over.png"));
	elementList.push(new Element("additionsdiv", "images/additions.png", "images/additions-over.png"));
	elementList.push(new Element("homeimprovdiv", "images/homeimprove.png", "images/homeimprove-over.png"));
	elementList.push(new Element("aboutusdiv", "images/aboutus1.png", "images/aboutus-over1.png"));
	for(var i = 0; i < elementList.length; i++)
	{
		var curNode = document.getElementById(elementList[i].parentId).firstChild;
		var item = elementList[i];
		
		if(curNode)
		{
			/*if(curNode.addEventListener)
			{
				curNode.addEventListener("mouseover", function(){makeCallback(item.parentId, item.hoverImage)}, false);
				curNode.addEventListener("mouseout", function(){makeCallback(item.parentId, item.regImage)}, false);
			}
			else if(curNode.attchEvent)
			{
				curNode.attachEvent("onmouseover", function(){makeCallback(item.parentId, item.hoverImage)});
				curNode.attachEvent("onmouseout", function(){makeCallback(item.parentId, item.regImage)});
			}
			else
			{
				curNode["onmouseover"] = makeCallback(item.parentId, item.hoverImage);
				curNode["onmouseout"] = makeCallback(item.parentId, item.regImage);
			}*/
			curNode.onmouseover = makeCallback(item.parentId, item.hoverImage);
			curNode.onmouseout = makeCallback(item.parentId, item.regImage);
		}
	}
}

function makeCallback(parId, image)
{
	return function() {
		changeImage(parId, image);
	};
}

function changeImage(parId, image)
{
	document.getElementById(parId).firstChild.src = image;
}

The curNode.onmouseover = makeCallback(item.parentId, item.hoverImage); works, but I want to use addEventListener and fallback to the other methods. I don't understand why the addEventListener and attachEvent parts doesn't work. Any ideas?

Element.addeventlistener In Nested Div Problem

Similar Tutorials

View Content

Code:

function offPar(){
   alert(this.offsetParent.id);
}

function init(){
var mine = document.getElementById("mid");
var other = document.getElementById("inner");

mine.addEventListener("click", offPar, false);
other.addEventlistener("click", offPar, false);

}

window.addEventListener('load', init, false);

HTML :
<div id = "content"> 

 <div id = "mid"> 
    <div id = "inner">
       <p class = "par">
       </p>
    </div>
 </div>

</div>

I can add an event listener to the #mid div but I can't to the #inner div.
Anyone now why this is? Sorry I can't provide more info. That's all I Know!

TTFN
John

Problem With Prototype (?) - " Object Has No Method 'attachevent' "

Similar Tutorials

View Content

I am running on Magento eCommerce, however please don't turn away if you have no experience with it.

Problem is with JavaScript.

When one clicks on the button, nothing happens, when the page loads browsers in general display error message, that

'productAddtoCartForm' is null or not an object

Here's the piece of code around the Add button:

Code:

<div class="product-view">
    <div class="product-essential">
    <form action="http://myhairpalace.com/index.php/default/checkout/cart/add/uenc/aHR0cDovL215aGFpcnBhbGFjZS5jb20vaW5kZXgucGhwL2RlZmF1bHQvaW5kaWFuLXJlbXktZnJvbnQvMTAwLWh1bWFuLWhhaXItbGFjZS1mcm9udC13aWctc3V6aWUuaHRtbD9fX19TSUQ9VQ,,/product/57/" method="post" id="product_addtocart_form" enctype="multipart/form-data">
		<div class="no-display"> 
			<input type="hidden" name="product" value="57� /&gt; 
			&lt;input type=" hidden"="" id="related-products-field" product-shop"="">
            <div class="product-name">
                <h1>100% Human Hair Lace Front Wig-Suzie</h1>
            </div>

                            <p class="email-friend"><a href="http://myhairpalace.com/index.php/default/sendfriend/product/send/id/57/cat_id/11/">Email to a Friend</a></p>
            
                <p class="no-rating"><a href="http://myhairpalace.com/index.php/default/review/product/list/id/57/category/11/#review-form">Be the first to review this product</a></p>
                        
    <p class="availability in-stock">Availability: <span>In stock</span></p>


        
    <div class="price-box">
                                                            <span class="regular-price" id="product-price-57">
                    <span class="price">$75.00</span>                </span>
                        
        </div>

            
            
                            
<ul class="add-to-links">
    <li><a href="http://myhairpalace.com/index.php/default/wishlist/index/add/product/57/" class="link-wishlist">Add to Wishlist</a></li>
    <li><span class="separator">|</span> <a href="http://myhairpalace.com/index.php/default/catalog/product_compare/add/product/57/uenc/aHR0cDovL215aGFpcnBhbGFjZS5jb20vaW5kZXgucGhwL2RlZmF1bHQvaW5kaWFuLXJlbXktZnJvbnQvMTAwLWh1bWFuLWhhaXItbGFjZS1mcm9udC13aWctc3V6aWUuaHRtbD9fX19TSUQ9VQ,,/" class="link-compare">Add to Compare</a></li>
</ul>
            
                            <div class="short-description">
                    <h2>Quick Overview</h2>
                    <div class="std">Suzie</div>
                </div>
            
            
                                        
        </div>

        <div class="product-img-box">
            <p class="product-image product-image-zoom">
    <img id="image" src="http://myhairpalace.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/l/a/lace_front-shan.jpg" alt="100% Human Hair Lace Front Wig-Suzie" title="100% Human Hair Lace Front Wig-Suzie"></p>
<p class="zoom-notice" id="track_hint">Double click on above image to view full picture</p>
<div class="zoom">
    <img id="zoom_out" src="http://myhairpalace.com/skin/frontend/default/default/images/slider_btn_zoom_out.gif" alt="Zoom Out" title="Zoom Out" class="btn-zoom-out">
    <div id="track">
        <div id="handle"></div>
    </div>
    <img id="zoom_in" src="http://myhairpalace.com/skin/frontend/default/default/images/slider_btn_zoom_in.gif" alt="Zoom In" title="Zoom In" class="btn-zoom-in">
</div>
<script type="text/javascript">
//<![CDATA[
    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    });
//]]>
</script>
<div class="more-views">
    <h2>More Views</h2>
    <ul>
            <li>
            <a href="#" onclick="popWin('http://myhairpalace.com/index.php/default/catalog/product/gallery/id/57/image/56/', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title=""><img src="http://myhairpalace.com/media/catalog/product/cache/1/thumbnail/56x/9df78eab33525d08d6e5fb8d27136e95/l/a/lace_front-shan.jpg" width="56" height="56" alt=""></a>
        </li>
        </ul>
</div>
        </div>

        <div class="clearer"></div>
                    <div class="product-options" id="product-options-wrapper">
    <script type="text/javascript">
//<![CDATA[
var DateOption = Class.create({

    getDaysInMonth: function(month, year)
    {
        var curDate = new Date();
        if (!month) {
            month = curDate.getMonth();
        }
        if (2 == month && !year) { // leap year assumption for unknown year
            return 29;
        }
        if (!year) {
            year = curDate.getFullYear();
        }
        return 32 - new Date(year, month - 1, 32).getDate();
    },

    reloadMonth: function(event)
    {
        var selectEl = event.findElement();
        var idParts = selectEl.id.split("_");
        if (idParts.length != 3) {
            return false;
        }
        var optionIdPrefix = idParts[0] + "_" + idParts[1];
        var month = parseInt($(optionIdPrefix + "_month").value);
        var year = parseInt($(optionIdPrefix + "_year").value);
        var dayEl = $(optionIdPrefix + "_day");

        var days = this.getDaysInMonth(month, year);

        //remove days
        for (var i = dayEl.options.length - 1; i >= 0; i--) {
            if (dayEl.options[i].value > days) {
                dayEl.remove(dayEl.options[i].index);
            }
        }

        // add days
        var lastDay = parseInt(dayEl.options[dayEl.options.length-1].value);
        for (i = lastDay + 1; i <= days; i++) {
            this.addOption(dayEl, i, i);
        }
    },

    addOption: function(select, text, value)
    {
        var option = document.createElement('OPTION');
        option.value = value;
        option.text = text;

        if (select.options.add) {
            select.options.add(option);
        } else {
            select.appendChild(option);
        }
    }
});
var dateOption = new DateOption();
//]]>
</script>

    <script type="text/javascript">
    //<![CDATA[
    var optionFileUpload = {
        productForm : $('product_addtocart_form'),
        formAction : '',
        formElements : {},
        upload : function(element){
            this.formElements = this.productForm.select('input', 'select', 'textarea', 'button');
            this.removeRequire(element.readAttribute('id').sub('option_', ''));

            template = '<iframe id="upload_target" name="upload_target" style="width:0; height:0; border:0;"><\/iframe>';

            Element.insert($('option_'+element.readAttribute('id').sub('option_', '')+'_uploaded_file'), {after: template});

            this.formAction = this.productForm.action;

            var baseUrl = 'http://myhairpalace.com/index.php/default/catalog/product/upload/';
            var urlExt = 'option_id/'+element.readAttribute('id').sub('option_', '');

            this.productForm.action = parseSidUrl(baseUrl, urlExt);
            this.productForm.target = 'upload_target';
            this.productForm.submit();
            this.productForm.target = '';
            this.productForm.action = this.formAction;
        },
        removeRequire : function(skipElementId){
            for(var i=0; i<this.formElements.length; i++){
                if (this.formElements[i].readAttribute('id') != 'option_'+skipElementId+'_file' && this.formElements[i].type != 'button') {
                    this.formElements[i].disabled='disabled';
                }
            }
        },
        addRequire : function(skipElementId){
            for(var i=0; i<this.formElements.length; i++){
                if (this.formElements[i].readAttribute('name') != 'options_'+skipElementId+'_file' && this.formElements[i].type != 'button') {
                    this.formElements[i].disabled='';
                }
            }
        },
        uploadCallback : function(data){
            this.addRequire(data.optionId);
            $('upload_target').remove();

            if (data.error) {

            } else {
                $('option_'+data.optionId+'_uploaded_file').value = data.fileName;
                $('option_'+data.optionId+'_file').value = '';
                $('option_'+data.optionId+'_file').hide();
                $('option_'+data.optionId+'').hide();
                template = '<div id="option_'+data.optionId+'_file_box"><a href="#"><img src="var/options/'+data.fileName+'" alt=""><\/a><a href="#" onclick="optionFileUpload.removeFile('+data.optionId+')" title="Remove file" \/>Remove file<\/a>';

                Element.insert($('option_'+data.optionId+'_uploaded_file'), {after: template});
            }
        },
        removeFile : function(optionId)
        {
            $('option_'+optionId+'_uploaded_file').value= '';
            $('option_'+optionId+'_file').show();
            $('option_'+optionId+'').show();

            $('option_'+optionId+'_file_box').remove();
        }
    }
    var optionTextCounter = {
        count : function(field,cntfield,maxlimit){
            if (field.value.length > maxlimit){
                field.value = field.value.substring(0, maxlimit);
            } else {
                cntfield.innerHTML = maxlimit - field.value.length;
            }
        }
    }

    Product.Options = Class.create();
    Product.Options.prototype = {
        initialize : function(config){
            this.config = config;
            this.reloadPrice();
        },
        reloadPrice : function(){
            price = new Number();
            config = this.config;
            skipIds = [];
            $$('.product-custom-option').each(function(element){
                var optionId = 0;
                element.name.sub(/[0-9]+/, function(match){
                    optionId = match[0];
                });
                if (this.config[optionId]) {
                    if (element.type == 'checkbox' || element.type == 'radio') {
                        if (element.checked) {
                            if (config[optionId][element.getValue()]) {
                                price += parseFloat(config[optionId][element.getValue()]);
                            }
                        }
                    } else if(element.hasClassName('datetime-picker') && !skipIds.include(optionId)) {
                        dateSelected = true;
                        $$('.product-custom-option[id^="options_' + optionId + '"]').each(function(dt){
                            if (dt.getValue() == '') {
                                dateSelected = false;
                            }
                        });
                        if (dateSelected) {
                            price += parseFloat(this.config[optionId]);
                            skipIds[optionId] = optionId;
                        }
                    } else if(element.type == 'select-one' || element.type == 'select-multiple') {
                        if (element.options) {
                            $A(element.options).each(function(selectOption){
                                if (selectOption.selected) {
                                    if (this.config[optionId][selectOption.value]) {
                                        price += parseFloat(this.config[optionId][selectOption.value]);
                                    }
                                }
                            });
                        }
                    } else {
                        if (element.getValue().strip() != '') {
                            price += parseFloat(this.config[optionId]);
                        }
                    }
                }
            });
            try {
                optionsPrice.changePrice('options', price);
                optionsPrice.reload();
            } catch (e) {

            }
        }
    }
    function validateOptionsCallback(elmId, result){
        var container = $(elmId).up('ul.options-list');
        if (result == 'failed') {
            container.removeClassName('validation-passed');
            container.addClassName('validation-failed');
        } else {
            container.removeClassName('validation-failed');
            container.addClassName('validation-passed');
        }
    }
    var opConfig = new Product.Options({"80":{"447":0,"448":0,"451":0,"452":0,"449":0,"450":0,"454":0,"453":0}});
    //]]>
    </script>
    <dl>
            <dt><label>Color<span class="required">&nbsp;*</span></label></dt>
<dd class="last">
    <select name="options[80]" id="select_80" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"><option value="">-- Please Select --</option><option value="447">1 </option><option value="448">1B </option><option value="451">1B/30 </option><option value="452">1B/33 </option><option value="449">2 </option><option value="450">4 </option><option value="454">4/27 </option><option value="453">4/30 </option></select>            </dd>
        </dl>

<script type="text/javascript">
//<![CDATA[
enUS = {"m":{"wide":["January","February","March","April","May","June","July","August","September","October","November","December"],"abbr":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}}; // en_US locale reference
Calendar._DN = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; // full day names
Calendar._SDN = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; // short day names
Calendar._FD = 0; // First day of the week. "0" means display Sunday first, "1" means display Monday first, etc.
Calendar._MN = ["January","February","March","April","May","June","July","August","September","October","November","December"]; // full month names
Calendar._SMN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; // short month names
Calendar._am = "AM"; // am/pm
Calendar._pm = "PM";

// tooltips
Calendar._TT = {};
Calendar._TT["INFO"] = "About the calendar";

Calendar._TT["ABOUT"] =
"DHTML Date/Time Selector\n" +
"(c) dynarch.com 2002-2005 / Author: Mihai Bazon\n" +
"For latest version visit: http://www.dynarch.com/projects/calendar/\n" +
"Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." +
"\n\n" +
"Date selection:\n" +
"- Use the \xab, \xbb buttons to select year\n" +
"- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" +
"- Hold mouse button on any of the above buttons for faster selection.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Time selection:\n" +
"- Click on any of the time parts to increase it\n" +
"- or Shift-click to decrease it\n" +
"- or click and drag for faster selection.";

Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)";
Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)";
Calendar._TT["GO_TODAY"] = "Go Today";
Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)";
Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)";
Calendar._TT["SEL_DATE"] = "Select date";
Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";
Calendar._TT["PART_TODAY"] = ' (' + "Today" + ')';

// the following is to inform that "%s" is to be the first day of week
Calendar._TT["DAY_FIRST"] = "Display %s first";

// This may be locale-dependent. It specifies the week-end days, as an array
// of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1
// means Monday, etc.
Calendar._TT["WEEKEND"] = "0,6";

Calendar._TT["CLOSE"] = "Close";
Calendar._TT["TODAY"] = "Today";
Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value";

// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "%b %e, %Y";
Calendar._TT["TT_DATE_FORMAT"] = "%B %e, %Y";

Calendar._TT["WK"] = "Week";
Calendar._TT["TIME"] = "Time:";
//]]>
</script>
            <p class="required">* Required Fields</p>
    </div>
<script type="text/javascript">decorateGeneric($$('#product-options-wrapper dl'), ['last']);</script>
<div class="product-options-bottom">
    

        
    <div class="price-box">
                                                            <span class="regular-price" id="product-price-57_clone">
                    <span class="price">$75.00</span>                </span>
                        
        </div>



    <div class="add-to-cart">
                <label for="qty">Qty:</label>
        <input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit()"><span><span>Add to Cart</span></span></button>
        <p class="paypal-logo"><a id="ec_shortcut_c2e3fb1be4b9e9d53800cbc4d5f1e274" href="http://myhairpalace.com/index.php/default/paypal/express/start/">
    <img src="https://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&amp;buttontype=ecshortcut&amp;locale=en_US" alt="Checkout with PayPal">
</a>
    <input type="hidden" id="pp_checkout_url" name="return_url" value="">
<script type="text/javascript">
//<![CDATA[
    Event.observe('ec_shortcut_c2e3fb1be4b9e9d53800cbc4d5f1e274', 'click', function(event) {
                            $('pp_checkout_url').value = this.href;
            productAddToCartForm.submit();
            event.stop();
            });
//]]>
</script></p>    </div>
</div>
            </form>
    <script type="text/javascript">
    //<![CDATA[
            var productAddToCartForm = new VarienForm('product_addtocart_form');
            productAddToCartForm.submit = function(){
                    if (this.validator.validate()) {
                            this.form.submit();
                    }
            }.bind(productAddToCartForm);
    //]]>
    </script>
    </div>

    <div class="product-collateral">
        <div class="box-collateral box-description">
                            <h2>Details</h2>
    <div class="std">
        Nautral Hairline 100% Human Hair Lace Front wig.     </div>
        </div>
                    <div class="box-collateral box-tags">
    <h2>Product Tags</h2>
            <form id="addTagForm" action="http://myhairpalace.com/index.php/default/tag/index/save/product/57/uenc/aHR0cDovL215aGFpcnBhbGFjZS5jb20vaW5kZXgucGhwL2RlZmF1bHQvaW5kaWFuLXJlbXktZnJvbnQvMTAwLWh1bWFuLWhhaXItbGFjZS1mcm9udC13aWctc3V6aWUuaHRtbD9fX19TSUQ9VQ,,/" method="get">
        <div class="form-add">
            <label for="productTagName">Add Your Tags:</label>
            <div class="input-box">
                <input type="text" class="input-text required-entry" name="productTagName" id="productTagName">
            </div>
            <button type="button" title="Add Tags" class="button" onclick="submitTagForm()">
                <span>
                    <span>Add Tags</span>
                </span>
            </button>
        </div>
    </form>
    <p class="note">Use spaces to separate tags. Use single quotes (') for phrases.</p>
    <script type="text/javascript">
    //<![CDATA[
        var addTagFormJs = new VarienForm('addTagForm');
        function submitTagForm(){
            if(addTagFormJs.validator.validate()) {
                addTagFormJs.form.submit();
            }
        }
    //]]>
    </script>
</div>
    </div>
</div>

Magento uses Prototype framework and the problem has something to do with prototype.js file and indeed, when I debugged in Chrome, here's what came up:

Now, the crux is that the error shows up only pages featuring products w/ options in dropdown menus:

http://myhairpalace.com/index.php/de...inkerbell.html

You are able to add Simple Products to cart just fine:

http://myhairpalace.com/index.php/de...o-measure.html

I would be incredibly grateful for ANY suggestions.

Chrome Not Firing Window.addeventlistener Keypress

Similar Tutorials

View Content

On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this:

igevt=function(evt){checkclosegal(evt)}
window.addEventListener('keypress',igevt, false)

and checkclosegal:

function checkclosegal(evt)
{

if(evt.keyCode==27)
{
closebgeagal()
window.removeEventListener('keypress',igevt, false)
}

}

This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index? Please help, thanks!

Addeventlistener Not Passing Function Variable Correctly

Similar Tutorials

View Content

Every time i click on one of the said elements, it puts "undefined" into the textbox each time i click on an element.

it seems to me that the Key_Table[x] is not getting passed correctly. How do i make sure that this is getting passed correctly?

Here's my Code:

Code:

<script type='text/javascript'>
// Startup Script
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", LoadEventListeners, false);
}

function LoadEventListeners()
{
 var Key_Table = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
 
 // Create event Listeners for the alphabetic keys
 for(var x = 0; x < Key_Table.length; x++)
    {
     Key_Table[x] = document.getElementById(Key_Table[x]);
	 
	 Key_Table[x].addEventListener("click",
                         function(){
                          InsertChar(Key_Table[x]);
                         },
                         false);
    }
}

function InsertChar(Char)
{
 alert("Char is:" + Char);
 // Textbox data
 document.getElementById('TextData').value = document.getElementById('TextData').value + Char;
}
</script>

Uncaught Typeerror: Cannot Read Property 'addeventlistener' Of Undefined

Similar Tutorials

View Content

Good day!
Here is the problem, setting the slider to the site, here's an example:
http://wowslider.com/best-jquery-sli...near-demo.html
and do not connect different effects on this slider, such as buttons on the sides and smooth shifting slides.
When you see the code generates this error:
Uncaught TypeError: Cannot read property addEventListener' of undefined
I do not know what this error, help, error on this site:
http://uh219381.ukrdomen.com/
Or here's the code:
http://uh219381.ukrdomen.com/themes/...1/wowslider.js

sorry for my English

Retaining Objects Instance Whilst Adding An Addeventlistener

Similar Tutorials

View Content

Hi there

Im trying to create a function where i pass two element id's and my script populates it with events and anything else it may need to run but what i am finding is that i cant use this so that the instance of the object is kept what ends up happening is nothing at all what i would like to have happen is the code to work somthing like this...

Code:

<div id="iAmTheTargetId">
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
	var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

and simply running that would then create the equivalent of doing

Code:

<div id="iAmTheTargetId" onmouseover="element.activate()" onmouseout="element.deactivate()" onmousemove="element.update(event)>
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
	var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

But of course the code above won't actual add onmouseover and etc it just so you can see what i'm trying to achieve

Code:

/*
 * triggerId
 * the element in which the attributes will be applied to
 * 
 * hoverBoxid
 * the element in which will hover around the triggerId
 */
function hoverBox(triggerId,hoverBoxid){
	this.triggerElement = document.getElementById(triggerId);
	this.hoverBoxElement = document.getElementById(hoverBoxid);
	 
	if(this.triggerElement == null || this.hoverBoxElement){
		return null;
	}
	
	self = this;
	alert(this.triggerElement);
	this.triggerElement.addEventListener('mouseover',function(){self.activate();},false);
	this.triggerElement.addEventListener('mouseout',function(){self.deactivate();},false);
	this.triggerElement.addEventListener('mousemove',function(){self.update(event);},false);
}

hoverBox.prototype = {
		triggerElement : null,
		hoverBoxElement : null,
		state	: false
};

hoverBox.prototype.activate = function(){
	this.state = true;
};

hoverBox.prototype.deactivate = function(){
	if(this.state != false){
		this.hoverBoxElement.style.display = "none";
		this.state = false;
	}
};

hoverBox.prototype.update = function(evt){
	if(this.state != false){
	  	this.hoverBoxElement.style.display = "block";
	  	this.hoverBoxElement.style.position = "absolute";
	  	this.hoverBoxElement.style.top = (evt.clientY + 5)+ "px";
	  	this.hoverBoxElement.style.left = (evt.clientX + 10)+ "px";
	}
};

A quick note theses function will work by them selfs if you just do
Code:

<div id="target" onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)">
</div>
<div id="hover">
</div>

<script type="text/javascript">
	var aHoverBox = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

But not quite what I'm after i would like not to have to enter in
Code:

onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)"

and have that done by the JavaScript

Well i hope every thing makes scene sorry if i repeated my self just making sure you understand me

Addeventlistener With "this"

Similar Tutorials

View Content

In my discovering more about OOP with javascript, I ran into the following oddity:

The following doesn't work as expected inside an object constructor:

Code:

var MyClass = function() {
  this.myvalue = "abc";
  document.getElementById('clickable').addEventListener('click', this.clickHandler, false);
}

MyClass.prototype.clickHandler = function(evt) {
   alert(this.myvalue);  // "undefined" - even though I set it to "abc" in the constructor??!!!???!!!!
}

But this works as I would expect:

Code:

var MyClass = function() {
  this.myvalue = "abc";

  var self = this;
  document.getElementById('clickable').addEventListener('click', function(evt) { self.clickHandler(evt); }, false);  //Lamda function.
}

MyClass.prototype.clickHandler = function(evt) {
   alert(this.myvalue);  // "abc" - as expected.
}

So, why does the second example work as expected and the first does not? My (assumed) logic tells me that the object pointed to by "this" in the first example already exists at the point where addEventListener is called, therefore this.clickHandler is a valid reference ... but it doesn't seem to work unless I use the intermediate lamda function, as per the second example. I don't get it.