My code currently allows any link clicked under citations to open a new page. I'm trying to exclude the "More..." links from performing this function since these are used to add more links to the current page. Is there a way to do this?
Here's the jsfiddle
Here's my javascript
$(document).ready(function ($) {
var url = 'https://www.sciencebase.gov/catalog/item/504216b6e4b04b508bfd333b?
format=jsonp&fields=relationships,title,body,contacts';
$.ajax({
type: 'GET',
url: url,
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function (json) {
var citeCount = 0;
var piCount = 0;
$('#project').append('<li><b>' + json.title + ' - </b>' + json.body + '</li>');
$('#project a').on('click', function (e) {
e.preventDefault();
if (citeCount == 1) {
return;
}
$.ajax({
type: 'GET',
url: 'https://www.sciencebase.gov/catalog/itemLink
/504216b6e4b04b508bfd333b?format=jsonp',
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function (json) {
// Loop function for each section (10 citations per section)
var loopSection = function (start, stop) {
// Http setup for all links
var linkBase = "http://www.sciencebase.gov/catalog/item/";
// Link for citation information
var link = "";
for (var j = start; j < stop; j++) {
// Create a link using the realtedItemId
link = linkBase + json[j].relatedItemId;
// Title links
var $anchor = $("<a>", {
href: link,
id: "id" + j,
text: json[j].title
});
// .parent() will get the <li> that was just created and append to
//the first citation element
$anchor.appendTo("<li>").parent().appendTo("#citations");
}
}
var itemCount = json.length;
var numSections = Math.floor((itemCount / 10));
var moreLinks = $('More...');
var loopCount = 1;
loopSection(0, 10);
$('#citations').append(moreLinks);
$(moreLinks).on('click', function (e) {
e.preventDefault();
if (numSections > 1) {
loopSection((loopCount * 10), ((loopCount + 1) * 10));
$('#citations').append(moreLinks);
numSections -= 1;
loopCount++;
} else if (numSections <= 1) {
$("#nextLink").closest('a').remove();
loopSection((loopCount * 10), json.length);
}
});
},
error: function (e) {
console.log(e.message);
}
}); // END Second .ajax call
$('#project').on('click', function (e) {
e.preventDefault();
if (piCount == 1) {
return;
}
for (var i = 1; i < json.contacts.length; i++) {
$('#piHeading').append('<ul>' + "Name: " + json.contacts[i].name + ', ' + "Email: " + json.contacts[i].email + ', ' + "Phone: " + json.contacts[i].phone + '</ul>');
}
piCount++;
});
citeCount++;
}); // END Project link click event
$('#citations').on('click', function (e) {
e.preventDefault();
window.open('CitationsInfo.html', '_self');
});
},
error: function (e) {
console.log(e.message);
}
}); // END First .ajax call
}); // END Doc.ready
and Here's my html,
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="MainPage4.js"></script>
<script src="Citations.js"></script>
</head>
<body>
<h2>Project</h2>
<div class='wrapper'>
<ul id='project'></ul>
</div>
<h3>Citations</h3>
<div class='wrapper'>
<ul id='citations'></ul>
</div>
<h3>Principal Investigators</h3>
<div class='wrapper'>
<ul id='piHeading'></ul>
</div>
</body>
</html>
Thanks for the help
If you change the part of your code that is handling the global click event for the #citations container to include logic to filter out clicks where the target is the #nextLink, it should do what you want.
$('#citations').on('click', function (e) {
e.preventDefault();
if (!$(e.target).is($('#nextLink'))) {
window.open('CitationsInfo.html', '_self');
}
});
Removing the above section entirely also allow the "More..." link to work correctly, while still maintaining functionality on the individual links. The citations click event is masking the other behaviors.
jsfiddle
Related
How I can check the dimensions of a image using this function? I just want to check before the upload...
$("#LINK_UPLOAD_PHOTO").submit(function () {
var form = $(this);
form.ajaxSubmit({
url: SITE_URL + 'functions/_app/execute/link_upload_photo.php',
dataType: 'html',
beforeSubmit: function () {
//CHECK DE IMAGE DIMENSIONS, SIZE, AND SHOW ERRORS
},
uploadProgress: function (event, position, total, complete) {
$(".j_progressbar").fadeIn();
$(".j_progressbar .bar").width(complete + "%");
},
success: function (data) {
$("#PHOTO_UPLOADED").css("background-image","url("+window.URL.createObjectURL(document.getElementById('ADD_FIGURE').files[0])+")");
$("#PHOTO_UPLOADED").css("background-size","462px");
$("#UPLOAD_STATUS").css("opacity", "0.5");
$("#UPLOAD_STATUS").css("-moz-opacity", "0.5");
$("#UPLOAD_STATUS").css("filter", "alpha(opacity=50)");
$(".j_progressbar").hide();
$(".ADD_FIGURE").attr("rel",data);
}
});
return false;
});
Thank you for everything.
Refer the docs for the use of .naturalWidth & .naturalWidth read-only properties of the HTMLImageElement.
var x = document.getElementById("myImg").naturalWidth;
function myFunc() {
var x = document.getElementById("myImg").naturalWidth;
var y = document.getElementById("myImg").naturalHeight;
alert(x + "X" + y);
}
<img id="myImg" src="http://www.w3schools.com/jsref/compman.gif" style="width:500px;height:98px;">
<button onclick=myFunc()>GET DETAILS</button>
I am trying to make animated GIFs from media streams, videos, or images using the GifShot plugin.
My problem is that the ajax part does not see webcam_image_ajax.php. isn't working. Please do not hate me so the question will be a little longer.
I have to create this ajax function for uploading image:
var pos = 0, ctx = null, saveCB, gif = [];
var createGIFButton = document.createElement("canvas");
createGIFButton.setAttribute('width', 320);
createGIFButton.setAttribute('height', 240);
if (createGIFButton.toDataURL)
{
ctx = createGIFButton.getContext("2d");
gif = ctx.getImageData(0, 0, 320, 240);
saveCB = function(data)
{
var col = data.split(";");
var img = gif;
for(var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
if (pos >= 4 * 320 * 240)
{
ctx.putImageData(img, 0, 0);
$.post("webcam_image_ajax.php", {type: "data", gif: createGIFButton.toDataURL("image/gif")},
function(data)
{
if($.trim(data) != "false")
{
var dataString = 'webcam='+ 1;
$.ajax({
type: "POST",
url: $.base_url+"webcam_imageload_ajax.php",
data: dataString,
cache: false,
success: function(html){
var values=$("#uploadvalues").val();
$("#webcam_preview").prepend(html);
var M=$('.webcam_preview').attr('id');
var T= M+','+values;
if(T!='undefinedd,')
$("#uploadvalues").val(T);
}
});
}
else
{
$("#webcam").html('<div id="camera_error"><b>Camera could not connect.</b><br/>Please be sure to make sure your camera is plugged in and in use by another application.</div>');
$("#webcam_status").html("<span style='color:#cc0000'>Camera not found please try again.</span>");
$("#webcam_takesnap").hide();
return false;
}
});
pos = 0;
}
else {
saveCB = function(data) {
gif.push(data);
pos+= 4 * 320;
if (pos >= 4 * 320 * 240)
{
$.post("webcam_image_ajax.php", {type: "pixel", gif: gif.join('|')},
function(data)
{
var dataString = 'webcam='+ 1;
$.ajax({
type: "POST",
url: "webcam_imageload_ajax.php",
data: dataString,
cache: false,
success: function(html){
var values=$("#uploadvalues").val();
$("#webcam_preview").prepend(html);
var M=$('.webcam_preview, .gifshot-image-preview-section').attr('id');
var T= M+','+values;
if(T!='undefined,')
$("#uploadvalues").val(T);
}
});
});
pos = 0;
}
};
}
};
}
$("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "js/jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function ()
{
webcam.save();
},
debug: function (type, string) {
$("#webcam_status").html(type + ": " + string);
}
});
});
/**Taking snap**/
function takeSnap(){
webcam.capture();
}
You can see this code in my ajax function:
$.post("webcam_image_ajax.php", {type: "data", gif: createGIFButton.toDataURL("image/gif")},
the webcam_image_ajax.php is created in base64 format and then it upload the gif image from the images folder.
Also when clicked Create GIF button this JavaScript will starting: CLICK.
After that my ajax code have this line webcam_imageload_ajax.php
<?php
include_once 'includes.php';
if(isSet($_POST['webcam']))
{
$newdata=$Wall->Get_Upload_Image($uid,0);
echo "<img src='uploads/".$newdata['image_path']."' class='webcam_preview gifshot-image-preview-section' id='".$newdata['id']."'/>
";
}
?>
the webcam_imageload_ajax.php working with webcam_image_ajax.php.
If webcam_image_ajax.php created image then webcam_imageload_ajax.php echoing image like:
upload/14202558.gif
But now it looks like:
data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAABE...
creat a gif button:
<button type="button" id="create-gif" class="btn btn-large btn-primary create-gif-button camclick" onclick="return takeSnap();">Create GIF</button>
<input type="hidden" id="webcam_count" />
Forget the JavaScript code in the question.
If you want to use this script then use this code from demo.js inside in gifshot plugin.
function create_gif(data){
$.post(
"webcam_image_ajax.php",
{
data: data,
dataType: 'json'
},
function(js_data)
{
var js_d = $.parseJSON(js_data);
$('#gif_preview').attr('src', js_d.path);
if(js_d.id != 'error'){
$("#uploadvalues").val(js_d.id);
$('.webcam_preview, .gifshot-image-preview-section').attr('id', js_d.id);
}
}
);
}
and you can write your own php code for webcam_image_ajax.php.
Simply do like this:
file_put_contents('filename',file_get_contents(str_replace('data:','data://','<your base64 encoded data>')));
This is simply adapting your data:... into the data:// wrapper.
There is no simpler way to do this.
Notice that this is HIGHLY UNSECURE and you should validate the data (using preg_match for example) before usage.
DESCRIPTION
On our Magento Shopping Cart when a user clicks the Add to Basket button on the Product Details page on any of the Internet Explorer browsers they get a popup in the browser with the following error message:
Exception : TypeError: Unable to get property 'tagName of undefined or null reference
At first I though this error was due to an AJAX call but after further investigation in the browser debugger I can see that it is being caused when the JavaScript is trying to modify the DOM nodes/ HTML tags and their attributes.
I set the breakpoints on all sub-tree & attribute modifications on the #mdl_ajax_confirm div, the call stack is:
ajax_cart.js:87
ajax_cart.js:89
ajax_cart.js:91
ajax_cart.js:97
ajax_cart.js:99
ajax_cart.js:104
ajax_cart.js:110
ajax_cart.js:112
ajax_cart.js:113
In IE it breaks on ajax_cart.js:104 and goes to prototype:1617 to handle the exception.
So the offending piece of code seems to be ajax_cart.js:104 which is:
$$('.block-cart').each(function (el){
el.replace(mini_cart_txt);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
In Chrome this returns it returns HTML but in IE it returns the same error in the console as the pop up: Unable to get property 'tagName' of undefined or null reference
QUESTION
I checked the IE console and the mini_cart_txt var is there before ajax_cart.js:104 is executed, the issue is I believe coming from el? I'm not sure how to fix it or what exactly is happening with that block of code?
Below is the rest of the code, thanks in advance :)
CODE
ajax_cart.js
var inCart = false;
if (window.location.toString().search('/product_compare/') != -1){
var win = window.opener;
}
else{
var win = window;
}
if (window.location.toString().search('/checkout/cart/') != -1){
inCart = true;
}
function setLocation(url){
if(!inCart && (/*(url.search('/add') != -1 ) || (url.search('/remove') != -1 ) ||*/ url.search('checkout/cart/add') != -1) ){
sendcart(url, 'url');
}else if((url.search('catalog/product_compare') != -1) ){
sendcompare(url, 'url');
}
else{
window.location.href = url;
}
}
function sendcompare(url, type){
//alert('test');
showLoading();
url = url.replace("catalog/product_compare/add","bestseller/index/compare");
url += 'isAjax/1/';
//jQuery('#ajax_loading'+id).show();
jQuery.ajax( {
url : url,
dataType : 'json',
success : function(data) {
// jQuery('#ajax_loading'+id).hide();
if(data.status == 'ERROR'){
alert(data.message);
}
else if(data.already!='')
{
$('mdl-temp-div').innerHTML = data.already;
var return_message = data.already;
$('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper"><div class="f-block"><ul class="messages"><li class="notice-msg">'+return_message + '</li></ul></div></div>';
showConfirm();
}
else{
$('mdl-temp-div').innerHTML = data.message;
var return_message = data.message;
$('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper"><div class="f-block"><ul class="messages"><li class="success-msg">'+return_message + '</li></ul></div></div>';
showConfirm();
if(jQuery('.header-compare').length){
jQuery('.header-compare').replaceWith(data.sidebar);
// Clear All
}else{
if(jQuery('.col-right').length){
jQuery('.col-right').prepend(data.sidebar);
}
}
}
}
});
}
function sendcart(url, type){
showLoading();
if (type == 'form'){
url = ($('product_addtocart_form').action).replace('checkout', 'mdlajaxcheckout/index/cart');
//url = ($('product_addtocart_form').action);
var myAjax = new Ajax.Request(
url,
{
method: 'post',
postBody: $('product_addtocart_form').serialize(),
parameters : Form.serialize("product_addtocart_form"),
onException: function (xhr, e)
{
alert('Exception : ' + e);
},
onComplete: function (xhr)
{
$('mdl-temp-div').innerHTML = xhr.responseText;
var return_message = $('mdl-temp-div').down('.mdl_ajax_message').innerHTML;
var middle_text = '<div class="mdl-cart-bts">'+$('mdl-temp-div').down('.back-ajax-add').innerHTML+'</div>';
$('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper">'+return_message + middle_text + '</div>';
var link_cart_txt = $('mdl-temp-div').down('.cart_content').innerHTML;
$$('.top-link-cart').each(function (el){
el.innerHTML = link_cart_txt;
});
var mini_cart_txt = $('mdl-temp-div').down('.cart_side_ajax').innerHTML;
$$('.mini-cart').each(function (el){
el.replace(mini_cart_txt);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
$$('.block-cart').each(function (el){
el.replace(mini_cart_txt);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
replaceDelUrls();
if (ajax_cart_show_popup){
showConfirm();
} else {
hideMdlOverlay();
}
}
});
} else if (type == 'url'){
url = url.replace('checkout', 'mdlajaxcheckout/index/cart');
//alert(url);
var myAjax = new Ajax.Request(
url,
{
method: 'post',
postBody: '',
onException: function (xhr, e)
{
alert('Exception : ' + e);
},
onComplete: function (xhr)
{
$('mdl-temp-div').innerHTML = xhr.responseText;
var return_message = $('mdl-temp-div').down('.mdl_ajax_message').innerHTML;
var middle_text = '<div class="mdl-cart-bts">'+$('mdl-temp-div').down('.back-ajax-add').innerHTML+'</div>';
var content_ajax = return_message + middle_text;
$('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper">'+content_ajax + '</div>';
var link_cart_txt = $('mdl-temp-div').down('.cart_content').innerHTML;
$$('.top-link-cart').each(function (el){
el.innerHTML = link_cart_txt;
});
var mini_cart_txt = $('mdl-temp-div').down('.cart_side_ajax').innerHTML;
//alert(mini_cart_txt);
$$('.mini-cart').each(function (el){
el.replace(mini_cart_txt);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
$$('.block-cart').each(function (el){
el.replace(mini_cart_txt);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
replaceDelUrls();
if (ajax_cart_show_popup){
showConfirm();
} else {
hideMdlOverlay();
}
}
});
}
}
function replaceDelUrls(){
//if (!inCart){
$$('a').each(function(el){
if(el.href.search('checkout/cart/delete') != -1 && el.href.search('javascript:cartdelete') == -1){
el.href = 'javascript:cartdelete(\'' + el.href +'\')';
}
});
//}
}
function replaceAddUrls(){
$$('a').each(function(link){
if(link.href.search('checkout/cart/add') != -1){
link.href = 'javascript:setLocation(\''+link.href+'\'); void(0);';
}
});
}
function cartdelete(url){
showLoading();
url = url.replace('checkout', 'mdlajaxcheckout/index/cartdelete');
var myAjax = new Ajax.Request(
url,
{
method: 'post',
postBody: '',
onException: function (xhr, e)
{
alert('Exception : ' + e);
},
onComplete: function (xhr)
{
$('mdl-temp-div').innerHTML = xhr.responseText;
//$('mdl-temp-div').insert(xhr.responseText);
var cart_content = $('mdl-temp-div').down('.cart_content').innerHTML;
//alert(cart_content);
$$('.top-link-cart').each(function (el){
el.innerHTML = cart_content;
});
var process_reload_cart = false;
var full_cart_content = $('mdl-temp-div').down('.mdl_full_cart_content').innerHTML;
$$('.cart').each(function (el){
el.replace(full_cart_content);
process_reload_cart = true;
});
if (!process_reload_cart){
$$('.checkout-cart-index .col-main').each(function (el){
el.replace(full_cart_content);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
}
var cart_side = '';
if ($('mdl-temp-div').down('.cart_side_ajax')){
cart_side = $('mdl-temp-div').down('.cart_side_ajax').innerHTML;
}
$$('.mini-cart').each(function (el){
el.replace(cart_side);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
$$('.block-cart').each(function (el){
el.replace(cart_side);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
replaceDelUrls();
//$('mdl_ajax_progress').hide();
hideMdlOverlay();
}
});
}
function showMdlOverlay(){
new Effect.Appear($('mdl-overlay'), { duration: 0.5, to: 0.8 });
}
function hideMdlOverlay(){
$('mdl-overlay').hide();
$('mdl_ajax_progress').hide();
$('mdl_ajax_confirm').hide();
}
function mdlCenterWindow(element) {
if($(element) != null) {
// retrieve required dimensions
var el = $(element);
var elDims = el.getDimensions();
var browserName=navigator.appName;
if(browserName==="Microsoft Internet Explorer") {
if(document.documentElement.clientWidth==0) {
//IE8 Quirks
//alert('In Quirks Mode!');
var y=(document.viewport.getScrollOffsets().top + (document.body.clientHeight - elDims.height) / 2);
var x=(document.viewport.getScrollOffsets().left + (document.body.clientWidth - elDims.width) / 2);
}
else {
var y=(document.viewport.getScrollOffsets().top + (document.documentElement.clientHeight - elDims.height) / 2);
var x=(document.viewport.getScrollOffsets().left + (document.documentElement.clientWidth - elDims.width) / 2);
}
}
else {
// calculate the center of the page using the browser andelement dimensions
var y = Math.round(document.viewport.getScrollOffsets().top + ((window.innerHeight - $(element).getHeight()))/2);
var x = Math.round(document.viewport.getScrollOffsets().left + ((window.innerWidth - $(element).getWidth()))/2);
}
// set the style of the element so it is centered
var styles = {
position: 'absolute',
top: y + 'px',
left : x + 'px'
};
el.setStyle(styles);
}
}
function showLoading(){
showMdlOverlay();
var progress_box = $('mdl_ajax_progress');
progress_box.show();
progress_box.style.width = loadingW + 'px';
progress_box.style.height = loadingH + 'px';
$('mdl_ajax_progress').innerHTML = $('mdl-loading-data').innerHTML;
progress_box.style.position = 'absolute';
mdlCenterWindow(progress_box);
}
function showConfirm(){
showMdlOverlay();
$('mdl_ajax_progress').hide();
var confirm_box = $('mdl_ajax_confirm');
confirm_box.show();
confirm_box.style.width = confirmW + 'px';
confirm_box.style.height = confirmH + 'px';
//mdl_ajax_confirm_wrapper
if ($('mdl_ajax_confirm_wrapper') && $('mdl-upsell-product-table')){
//alert($('mdl_ajax_confirm_wrapper').getHeight());
confirm_box.style.height = $('mdl_ajax_confirm_wrapper').getHeight() + 'px';
decorateTable('mdl-upsell-product-table');
}
$('mdl_ajax_confirm_wrapper').replace('<div id="mdl_ajax_confirm_wrapper">'+$('mdl_ajax_confirm_wrapper').innerHTML);
confirm_box.style.position = 'absolute';
mdlCenterWindow(confirm_box);
}
document.observe("dom:loaded", function() {
replaceDelUrls();
replaceAddUrls();
Event.observe($('mdl-overlay'), 'click', hideMdlOverlay);
var cartInt = setInterval(function(){
if (typeof productAddToCartForm != 'undefined'){
if ($('mdl-overlay')){
Event.observe($('mdl-overlay'), 'click', hideMdlOverlay);
}
productAddToCartForm.submit = function(url){
if(this.validator && this.validator.validate()){
sendcart('', 'form');
clearInterval(cartInt);
}
return false;
}
} else {
clearInterval(cartInt);
}
},500);
});
When I go through each line of code in the call stack before ajax_cart.js:104 both browsers react the same.
87: $('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper">'+return_message + middle_text + '</div>';
RETURNS HTML ON ALL BROWSERS
89: var link_cart_txt = $('mdl-temp-div').down('.cart_content').innerHTML;
UNDEFINED ON ALL
91:$$('.top-link-cart').each(function (el){el.innerHTML = link_cart_txt; });
RETURNS [object Array][] ON ALL
97: var mini_cart_txt = $('mdl-temp-div').down('.cart_side_ajax').innerHTML;
UNDEFINED ON ALL
99: $$('.mini-cart').each(function (el){ el.replace(mini_cart_txt); //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });});
RETURNS [object Array][] ON ALL
104: $$('.block-cart').each(function (el){ el.replace(mini_cart_txt); //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 }); });
Unable to get property 'tagName' of undefined or null reference on IE
RETURNS HTML ON ALL CHROME
Ok, so after quite a bit of trial and error I found out what the issue was and was able to solve it.
The code was breaking an line 104 of ajax_cart.js which had this block of code:
$$('.block-cart').each(function (el){
el.replace(mini_cart_txt);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
This piece of prototype.js was searching the DOM for the .block-cart div to replace it with the HTML set in it's mini_cart_txt variable. It uses the Prototype $$() Method method to search the DOM and return all elements with the .block-cart class, it then iterates over each of them and replaces their content with the mini_cart_txt variable.
The issue was that our theme's HTML was modified and now included two div's with the .block-cart div.
<div class="f-right block-cart span5">
<div class="f-left block-cart header_cart margin-left20">[OMITTED CODE FOR BREVITY]</div>
<div class="f-right checkout-button">[OMITTED CODE FOR BREVITY]</div>
</div>
Also the HTML in mini_cart_txt variable naturally also had two .block_cart classes, whereas in the original theme there was only one div with a class of .block-cart.
<div class="f-right block-cart span5">
<div class="f-left block-cart header_cart margin-left20">[CODE WITH SUB_TREE CHANGES OMMITED]</div>
<div class="f-right checkout-button"></div>
</div>
<script type="text/javascript">[OMITTED CODE FOR BREVITY]</script>
This was what was causing the exception in IE but not in Chrome. I'm not certain why Chrome skipped past this exception. Perhaps Chrome replaced the first .block-cart div and then did not continue to replace the second .block-cart div which was a child of the first one, whereas IE was running into a kind of loop which caused an exception.
Anyway I was able to fix the issue by removing the block-cart class name from the the child div of the first block-cart div.
<div class="f-right block-cart span5">
<div class="f-left header_cart margin-left20">[OMITTED CODE FOR BREVITY]</div>
<div class="f-right checkout-button">[OMITTED CODE FOR BREVITY]</div>
</div>
OK here is what your code is doing and why you might be getting an error and how to prevent.
firstly the block of code that is throwing the error
//$$ is the Prototype CSS selector, it returns an array of DOM elements that match the
//CSS selector
//.each() loops through those DOM elements, el is each DOM element
$$('.block-cart').each(function (el){
//el.replace attempts to replace the original element with the HTML of mini_cart_text
el.replace(mini_cart_txt);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
If mini_cart_txt does not exist or possibly is invalid HTML the browser might have a problem replacing the elements matching with class block-cart with mini_cart_txt. Based on the results of line 97 above it looks like its undefined so that might be the issue.
Try to wrap the replacement loop in an if statement
if(mini_cart_txt != undefined)
{
$$('.block-cart').each(function (el){
el.replace(mini_cart_txt);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
}
This might solve the error but disable a part of the code, so another troubleshooting option is
$$('.block-cart').each(function (el){
//change the replace method with
//el.replace(mini_cart_txt);
//the update method which replaces the content of the element, instead of replacing the element
el.update(mini_cart_txt);
//new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});
this might reveal more about the problem and might lead you to a solution
Please check header type will work
header('X-UA-Compatible: IE=edge,chrome=1');
the hosting company loads a script on all their sites that is allowing for the tabs to be dragged/dropped , however it is also causing the caption images within the same body_home page to be drag/drop , i have requested this be fixed but i don't think they are concerned.
I am permitted to load my own jquery, javascript , html ,css onto the site to do changes , but i can not stop the host from loading this js file , so how can i reverse this ? Here is a snippet of the portion of the js file i think that is causing this problem .
I am permitted to load my own footer and header messages , so is there anyway i can remove what they are doing here , or reverse the effect on the captions ?
i cant find a way for the listener to be removed from outside.
They have used an anonymous function on the event 'domready' .
Does javascript have a feature to remove the listener from outside the anonymous method
window.onload=function() {
if (document.getElementById("body_home")) {
set_up_double_click_events();
if (document.getElementById("homepagetabs") && document.getElementById("tab2")) {
new Sortables($('homepagetabs'), {
onComplete: function() {
var parent = this.element.parentNode;
var saveIt = false;
if (typeof currentTabOrder == "undefined") {
currentTabOrder = new Array();
for (var i = 0; i < parent.getChildren().length; i++) {
currentTabOrder[i] = i;
}
}
for (var i = 0; i < parent.getChildren().length; i++) {
var seqno = parent.getChildren()[i].id.substr("tab".length);
if (currentTabOrder[i] != seqno) {
saveIt = true;
currentTabOrder[i] = seqno;
}
}
if (saveIt) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=TABORDER&VALUE=" + currentTabOrder.join();
makeHttpRequest(url);
}
}
});
}
window.addEvent('domready', function() {
new Sortables('.homepagemodule CAPTION', {
clone: true,
revert: true,
opacity: 0.7,
onStart: function() {
dndMovingModule = this.element.parentNode.parentNode.id.toUpperCase();
},
onComplete: function() {
dndDroppedOntoModule = this.element.parentNode.parentNode.id.toUpperCase();
if (typeof dndMovingModule != "undefined" && typeof dndDroppedOntoModule != "undefined" && dndMovingModule != dndDroppedOntoModule) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=MODULE&VALUE=" + dndMovingModule + "," + dndDroppedOntoModule;
// alert("calling: " + url);
makeHttpRequest(url);
setTimeout("window.location.reload();", 250);
}
}
});
});
}
}
$(document).ready(function() {
$('#DIVID').on('mousedown', function(e) {
return false;
});
});
I would put an HTML class attribute on all of your images that are producing the problem. Obviously, jQuery uses CSS style selectors. See the following example.
$(function(){
$('.ElementClass').mousedown(function(){
return false;
});
});
When you return false; onmousedown it prevents the default behavior in most Browsers, which is to grab the image so the Client can drop and drag the image into into a new tab or window to view it with their Browser.
Has anyone worked with the bootstrap popover? I am facing a little difficulty implementing it.
I am creating movie thumbnails dynamically, and on mouseenter event, I am using the popover to display the details of the image. The problem is, the same details are displayed for all the images.
Here is some part of my code:
<script>
$(function () {
$(".get-movies").click(getEventHandler);
});
function getEventHandler() {
var name = $(".get-movie-name").val();
$.ajax({
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=my_key&q=" + name + "&page_limit=5",
dataType: "jsonp",
success: function (response) {
$(".display-movie").empty();
var ul = $(".display-movie");
for (var i = 0; i < response.movies.length; i++) {
var img = $("<img>").attr("src", response.movies[i].posters.original)
.attr("id", i)
.attr("data-placement", "right")
.attr("class", "img-popover")
.on("mouseover", response, getPopOver)
.on("mouseout", hidePopOver)
.css({
width: 200,
height: 200,
margin: 20
});
var div = $("<div>")
.append(img)
$("<li>")
.append(div)
.appendTo(ul);
}
}
});
}
function getPopOver(info) {
console.log(info);
var image = '<img src = " ' +info.data.movies[info.target.id].posters.thumbnail+ ' " />';
$(".img-popover").popover({
title: info.data.movies[info.target.id].title,
content: image,
trigger: "hover",
html: true
})
}
function hidePopOver() {
console.log("Leaving here");
$(".img-popover").popover("hide");
}
</script>
I think your:
var name = $(".get-movie-name").val();
will return the first item in the collection of items that match that class.
you might try:
var name = $('#' +this.id + ".get-movie-name").val();
but without seeing some of the html, I cannot be exact here.