|
JavaScript - Window.attachevent Issue
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>
Similar TutorialsHello, 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"> <!--[if IE]> <object id='videoPlayer' data='fla/player.swf' width='100%' height='100%' type='application/x-shockwave-flash'> <param name='movie' value='fla/player.swf' /> <param name='wmode' value='opaque' /> <param name='allowFullScreen' value='true' /> <param name='play' value='true' /> <param name='menu' value='true' /> <param name='quality' value='high' /> <param name='flashvars' value=''/> </object> <![endif--> <!--[if !IE]><--> <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> <!--> <![endif]--> <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> 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 This should be a simple fix. I have a basic html form with some text input fields and a couple drop down selection lists. Our employees print the form and include it with items they need our shipping department to ship for them. The form uses the following verification script to ensure the required fields have been populated before the screen prints. It works exactly as desired in Safari and Firefox. In Internet Explorer, however, the selections made in the drop down lists are reset to the default values on the printed form. Before you respond with, "don't use Internet Explorer," you have to understand that Internet Explorer is our only corporate approved web browser because it is the only browser supported by some of our other "mission critical" third party web apps and because it can be more rigorously controlled using Group Policies than Safari, Firefox, Chrome, Opera, et al, can. Any advice on how to make the form print without resetting the drop down list selections? Code: <script language="javascript">
function verify() {
var themessage = "You must provide the following information";
if (document.shipment.SenderName.value == "") {
themessage = themessage + ", Sender Name";
}
if (document.shipment.SenderEmail.value == "") {
themessage = themessage + ", Sender Email";
}
if (document.shipment.Dept.value == "") {
themessage = themessage + ", Department";
}
if (document.shipment.Contact.value == "") {
themessage = themessage + ", Ship To Contact";
}
if (document.shipment.Street1.value == "") {
themessage = themessage + ", Ship To Street 1";
}
if (document.shipment.City.value == "") {
themessage = themessage + ", Ship To City / Locale";
}
if (document.shipment.country.value == "") {
themessage = themessage + ", Ship To Country";
}
if (document.shipment.state.value == "") {
themessage = themessage + ", Ship To State / Province";
}
//alert if fields are empty and cancel form submit
if (themessage == "You must provide the following information") {
window.print();
return false;
}
else {
alert(themessage);
return false;
}
}
</script>
What did I do wrong... Code: function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}
width = pageWidth();
height = pageHeight();
var window = document.getElementById("desktop");
var menuBar = document.getElementById("menuBar");
var menuBarButton = document.getElementById("menuBarButton");
var menuBarContainer = document.getElementById("menuBarContainer");
var menuBarClock = document.getElementById("menuBarClock");
window.style.width = (pageWidth() - 5) + "px";
window.style.height = (pageHeight() - 5) + "px";
menuBar.style.width = (pageWidth() - 5) + "px";
menuBar.style.height = (pageHeight() - 5) + "px";
Dear All, I have downloaded some code from a javascript programmers website but having trouble making it work! I have some javascript: [CODE] <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> [CODE] Within the main body, my code reads: [CODE] <FORM ACTION="../cgi-bin/redirect.pl" METHOD=POST onSubmit="return dropdown(this.gourl)"> <SELECT NAME="gourl"> <OPTION VALUE="">Please select your event... <OPTION VALUE="http://www.yahoo.co.uk"> preview yahoo UK</option> <OPTION VALUE="http://www.yahoo.com"> preview yahoo US</option> <OPTION VALUE="http://www.yahoo.fr"> preview yahoo FR</option> <OPTION VALUE="http://www.expedia.co.uk"> preview Expedia</option> <OPTION VALUE="http://www.travelocity.co.uk"> preview Travelocity</option> <OPTION VALUE="http://www.onlinepictureproof.com"> preview online pics</option> </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> [CODE] On selection of "preview yahoo UK" from drop-down box, it takes me to the correct webpage (www.yahoo.co.uk), so no issue there. However, it opens this page up in a new window. I'm pretty sure this is because the javascript code is telling it to. However, I want the www.yahoo.co.uk page to be displayed in the same window from where the request came from? (i.e. I don't want it to open a new browser window)! What do I have to change in the javascript to make this happen? I tried using the TARGET functionality taught to me many many moons ago, but it still fires up a new window: <OPTION VALUE="http://www.yahoo.co.uk" TARGET="_top"> preview yahoo UK</option> I am testing this on my PC, so perhaps it could be that redirect.pl isn't held locally on my home pc, i.e. it would work once we upload the web pages to the web server?! any help/guidance would be greatly appreciated. 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� />
<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"> *</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&buttontype=ecshortcut&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. Hi all, I'm new to the forum and new to javascript. I have a main image with two thumbnails underneath. When you click on the thumbnail it makes that into the main image. I now want to be able to click on the main image to open a new window with the full size. I can do both seperatly but when I try to put them together the open window only works on the first image, when you click a thumbnail they won't open into a new page. http://www.blockdesigns.co.uk/Product1.php?Sku=20097 P.S all my data and images are recieved using php and the thumbnail is a swap connent that also uses an external php file. Any advice or a point in the right direction would be great. Thank you. i have this code i need to close the parent.html window when the child window opened, i need the code for that working well in IE and Firefox Parent.html <HTML> <SCRIPT TYPE="text/javascript"> function sendTo() { window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+''); } </SCRIPT> <BODY > <form name="form"> <input type="text" value="" name="text1" id="pdetails1"> <input type="text" value="" name="text1" id="pdetails2"> </br> <input type="submit" value="submit" onClick="sendTo()"> </BODY> </HTML> child.html <html> <body> <form> <input type=text name="text5" value=""> <input type=submit name="submit"value="submit"> </form> </body> </html> Hello all, and thank you for your coments, I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height. As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it? Code: <html><head><title>Title</title><script languaje="javascript">
const c_ra=16/9;
window.onresize = function WindowReSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
// myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
// myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
myWidth = Math.floor(myHeight*c_ra);
window.resizeTo(myWidth,myHeight); // ** CAUTION resize event in a onresize event handler !
};
</script></head><body><p>Hello World</p></body></html>
Here is the program: http://www.1728.com/newwindow.htm Basically, I want to input a number in the input box, which assigns a number to the variable numval located at document.box1.b1. When clicking on the "new window" button, an alert displays the input box value, then another window opens and displays the integers 1 through 12 and the amount squared. I would like the new window to obtain the number from the previous window so that the new window will display integers (and their squares) from 1 to the value of numval. hello everybody i need your help and experience for having code to show ( overlay / modal window ) to the user when closing or navigating away from the page ( i want put in this window facebook share to make the user to share the page in his facebook ) , bytheway i wanna use it in my wordpress in every post could it be happen ? Thanks for helping I have created and opened a child window called "checkwin" and have written some data to it. If the data is valid, I want the user to click on the 'CONFIRM' button on the child window, at which time I want the "submit()" function for the form on the parent window to be executed. If the data is invalid the user clicks on 'MODIFY' and I want focus to return to a field on the parent form. However, when I click on the "CONFIRM" or "MODIFY" buttons on the child window, nothing happens. Here is the code: Code: checkwin.document.write("</td></tr><tr><td align='right'><input type='button' value='CONFIRM'
onclick='opener.document.personnel_form.submit()'></td><td></td><td><input type='button' value='MODIFY'
onclick='opener.document.personnel_form.first_name.focus()'></td></tr></table>")
After following the instructions from the answer below: http://bytes.com/topic/javascript/an...arent-document I was able to have the child window perform the function defined in the parent window. The function was to only have an alert window pop up as the child page was loading. I easily modified this to my intention which was to have a parent function performed when the child window was clicked. Using the body tag: Code: <body onclick="parent.FUNCTION NAME HERE()"> I first change the method in which the function would be triggered, all went well there. then I tried to change which function would be triggered. (Basically use the function I wanted to happen on click of the child window rather then the function from the test). Once I did this switch, nothing happens. The site this is being used on is: http://tylerpanesar.ca/ What I want is when the menu bar is open in the parent window, the user chooses a link and the menu closes and goes to that link in the child window. This already works. However if the user opens the menu bar and then changes there mind and continues with the page the are currently on (clicks any content in the child window), the menu stays open. Currently the menu "hides" only when you choose one of the menu items, but it does not "hide" when you CLICK on child document. If you could figure out how to get it to "hide" on a "mouse out" that would be the better option. I attempted this method however i could only get it to "toggle" the menu on "mouse out". This method does however create an annoying flicker when you hover over the menu items (as it is toggling the open menu command I guess). If I had it "hide" the menu on "mouse out" it would "hide" as soon as you moved off of the main button. The viewer doesn't even have a chance to click a link. or at least that is what happens when I did it. You may have a better method to achieve this. The script that tells it to hide on click is within a jQuery function: Code: menua
.click(
function(){
menu.hide();
the code I used for the mouseout toggle was: Code: menu
.mouseout(
function(){
menu.toggle();
Here is the script that I am currently using for the menu to open and the "click" hide feature. This menu feature comes from the following help: http://www.bennadel.com/blog/1740-Bu...-FaceBook-.htm Code: <script type="text/javascript">
jQuery(function( $ ){
var menuRoot = $( "#menu-root" );
var menu = $( "#menu" );
var menua = $( "#menu a" );
// Hook up menu root click event.
menuRoot
.attr( "href", "javascript:void( 0 )" )
.click(
function(){
// Toggle the menu display.
menu.toggle();
// Blur the link to remove focus.
menuRoot.blur();
// Cancel event (and its bubbling).
return( false );
}
)
;
menua
.click(
function(){
// Toggle the menu display.
menu.hide();
}
)
;
// Hook up a click handler on the document so that
// we can hide the menu if it is not the target of
// the mouse click.
$( document ).click(
function( event ){
// Check to see if this came from the menu.
if (
menu.is( ":visible" ) &&
!$( event.target ).closest( "#menu" ).size()
){
// The click came outside the menu, so
// close the menu.
menu.hide();
}
}
);
});
</script>
I've tried adding the click to "hide" menu feature to the child document but there is now menu in that document for it to "hide". What I was trying to was have the child document execute a function from the parent document and have that function executed IN the parent document. I've tried the technique from the link in my very first post but I believe it only calls the function from the parent and executes it IN the child. Which does not work for me as the menu is not in the child. There should be a way to make the child execute a function FOR the parent. I apologize for this very wordy post, but I am extremely frustrated with this now as I have been trying to get this to work for a few weeks now. Any help would be greatly appreciated. Thanks in advance, Tyler Hi Ive found out how to force another browser window to open at a certain size when a link is clicked. Here's the whole line of code including the layer, the javascript and the image, <div id="Layer6" style="position:absolute; width:10px; height:8px; z-index:6; left: 561px; top: 310px"><a href="javascript:;" onClick="MM_openBrWindow('navigation%20instructions.htm','','width=50,height=50')"><img src="images/info.gif" width="15" height="15" border="0"></a></div> How do I adapt this so I can also specify the x&y co-ordinates of the opened window relative to the window that launched it. thanks alot Masten I am looking to have a link open a closeable window that is contained within a browser window. If you click on the "sizing charts" link on this website, this is exactly what I am looking to do: http://www.bella.com/mapper.php?pageid=40 The window is contained within the current browser window, it can be dragged around, but not outside the parameters of the browser window. Is there a title for this technique that I can research? Not looking to waste anybodys time, but if I can get steered in the right direction it would be greatly appreciated. Thanks Hi All, I need to show/focus the parent window which is in back when click a link from child window in Chrome.This problem is in Chrome browser only. We have used the below code self.blur(); Window.opener.focus(); But this is not working in Google Chrome. Please suggest me some workaround to achieve this. Thanks in Advance Reply With Quote 12-19-2014, 09:26 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Window is not defined. window is. JavaScript (and the DOM) is case sensitive. You must pay attention to upper/lower case spelling, carefully. By the way, you shouldn't need the blur() call. If you focus on some window (any window) then any other focus should be lost. I have the code below in my popup window which currently brings up a blank page in the background as the main window. Instead I want the popup to come up but the original page I left is in the background as the main window. Does anyone know how I can do that with the code I currently have. Code: <html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function poponload()
{
testwindow = window.open("", "mywindow", "location=0,status=0,scrollbars=0,width=350,height=400");
testwindow.moveTo(0, 0);
testwindow.document.write('<h1>Get outta here!</h1><a href="javascript:void(0);" onclick="window.opener.history.go(-1); self.close();">Parent back button</a>');
testwindow.focus();
}
</script>
<body onload="javascript: poponload()">
</body>
</html>
For a parent window opened a child window, how can the parnet window be notified when the child window is closed or terminated? Thank you. I am using a window.open to trigger a mailto: command. I don't want the window to stay open so I try to close it right after. The default email client launches correctly, but the window stays open and I get the following Javascript error: Unable to get value of the property 'close': object is null or undefined Code: Code: var win = window.open(mailto_link,'emailWindow'); win.close(); I am trying to pop up a window and then do stuff(set flags) when the content of the new window is done loading. For this I am trying to detect the window.onload of the pop-up child window but so far I am unsuccessful. I believe my problem is that the URL of child window is on different domain, than the one of the opener(parent) so that the window.onload is not being called. Thought this may change, at the moment I do not have access to the code for the page I'm opening up in the pop-up. Im pretty new to web development. Any help is appreciated. Heres my js code Code: //globals
var popupHandle = null;
var openingWindow = false;
function popWindow(URL){
var windowId="sameid";
if (openingWindow == true)
{
alert("Please wait, content is still loading")
return;
}
if ((popupHandle == null || popupHandle.closed)){ //is first time run or window was closed
openingWindow = true;
popupHandle = window.open(URL, '" + windowId + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=900,height=500');
popupHandle.onload = function(){
//this is the code that never executes even if I all I put in here is simple alerting
openingWindow = false;
windowHandle.focus();
};
}
else{// window still exists, reset attributes
if (popupHandle != null)
{
popupHandle.location.href = URL;
popupHandle.focus();
}
}
}
Note: The whole reason why I am doing this is because if its the first time I am clicking on the button that will open this pop up window and I click it repeatedly very quickly, a new pop up is opened for each time I clicked eventhough the window.open is supposed to reuse the window if it has the same windowId. The first call to window.open takes long enough to not have a window handle ready and this allows other clicks to get through. |
|||||||