javascript - Why is my code fully compatible in Chrome/Safari, somewhat in FireFox, but hardly at all in Internet Explorer 8? -
i wrote jquery code works in chrome/safari, in firefox, , hardly @ in ie8.
why , how can fix it?
here's code in case you're curious see might cause problems in ie or firefox (you can see code in action on @ http://keepskatinbro.com/):
jquery(".wrap").append("<img src='" + base + "/wp-content/themes/shaken-grid/images/ajax-loader.gif' id='ajax-loader' style='position: fixed; margin-left: 50%; left:-154px; top: 30%; display: none;' />", function() { jquery("#ajax-loader").hide(); }); var $maincontent = jquery("#grid"), $ajaxspinner = jquery("#ajax-loader"), $clicked_item, $target_open, $target_close, $element; jquery('a.ajax_trigger_title, a.more-link, a.ajax_trigger_thumbnail').live('click', function(event) { var $element = jquery(this); if ( $element.hasclass('ajax_trigger_title') ) { var $post_box = $element.parent().parent(); $clicked_item = jquery( '#' + $post_box.attr('id') + ' .ajax_trigger_title' ); } if ( $element.hasclass('ajax_trigger_thumbnail') ) { var $post_box = $element.parent().parent(); $clicked_item = jquery( '#' + $post_box.attr('id') + ' .ajax_trigger_thumbnail' ); } if ( $element.hasclass('more-link') ) { var $post_box = $element.parent().parent().parent().parent(); $clicked_item = jquery( '#' + $post_box.attr('id') + ' .more-link' ); } $target_open = jquery( '#' + $post_box.attr('id') ); var path = jquery(this).attr('href').replace(base, ''); jquery.address.value(path); // changes address deep link (the part after /#/) // default action (go link) prevented comment-related links (which use onclick attributes) event.preventdefault(); return false; }); jquery('a.ajax_trigger_close').live('click', function(event) { var $element = jquery(this); var $post_box = $element.parent(); $clicked_item = jquery( '#' + $element.attr('id') ); $target_close = jquery( '#' + $post_box.attr('id') ); var path = jquery(this).attr('href').replace(base, ''); jquery.address.value(path); // changes address deep link (the part after /#/) // default action (go link) prevented comment-related links (which use onclick attributes) event.preventdefault(); return false; }); /*jquery('a#home_link').live('click', function(event) { var $element = jquery(this); var $post_box = $element.parent(); $clicked_item = jquery( '#' + $element.attr('id') ); var path = jquery(this).attr('href').replace(base, ''); jquery.address.value(path); // changes address deep link (the part after /#/) // default action (go link) prevented comment-related links (which use onclick attributes) event.preventdefault(); return false; });*/ function dim_box($target_box, callback) { $target_box.animate({ opacity: "0.1" }, function() { if (callback) callback(); }); } function undim_box($target_box, callback) { $target_box.animate({ opacity: "1" }, function() { if (callback) callback(); }); } function show_loader(position, callback) { $ajaxspinner.fadein(function() { if (callback) callback(); }); } function hide_loader(callback) { $ajaxspinner.fadeout(function() { if (callback) callback(); }); } function open_box($target_box, $target_path, $target_content, masonize_on_open, callback) { $target_box.find('.opened_view') .load(base + $target_path + ' ' + $target_content, function() { $target_box.find('.closed_view').addclass('hidden'); $target_box.find('.thumbnail_wrapper').addclass('hidden'); $target_box.find('.ajax_trigger_title').addclass('opened_post_title'); $target_box.width(660); $target_box.append('<a class="ajax_trigger_close" id="close_' + $target_box.attr('id') + '" href="' + base + '/">close</a>'); if (masonize_on_open) masonize(); if (callback) callback(); }); } function close_box($target_box, masonize_on_close, callback) { $target_box.find('.opened_view').html(''); $target_box.width(310); $target_box.find('.closed_view').removeclass('hidden'); $target_box.find('.thumbnail_wrapper').removeclass('hidden'); $target_box.find('.ajax_trigger_title').removeclass('opened_post_title'); $target_box.find('a.ajax_trigger_close').remove(); if (masonize_on_close) masonize(); if (callback) callback(); } function scroll_to_content($target, duration, top_margin, callback) { //scrolls page $target. $target can jquery object or number of pixels scroll top. if ($target instanceof jquery) { jquery('body').animate({ scrolltop: $target.offset().top - top_margin }, duration, function() { if (callback) callback(); }); } //three ways check integer below: else if ($target === parseint($target,10)) { //else if integer //else if ( (typeof($target) == 'number') && ($target.tostring().indexof('.') == -1) ) { //else if integer //else if ( !isnan(parseint($target)) ) { //else if integer jquery('body').animate({ scrolltop: $target }, duration, function() { if (callback) callback(); }); } } jquery.address.change(function(event) { if (event.value != '/' && $clicked_item) { if ($target_close) { //if not first item opened close opened item. show_loader(0, function() { open_box($target_open, event.value, '.entry-content', false, function() { close_box($target_close, true); hide_loader(function() { scroll_to_content($target_open, 360, 20); }); $target_close = $target_open; }); }); } else { //otherwise open target item since first item opened. show_loader(0, function() { open_box($target_open, event.value, '.entry-content', true, function() { hide_loader(function() { scroll_to_content($target_open, 360, 20); }); $target_close = $target_open; }); }); } } else if ( event.value == '/' && $clicked_item ) { if ( $clicked_item.hasclass('ajax_trigger_close') && $clicked_item.attr('id') != 'home_link' ) { close_box($target_close, true); scroll_to_content(0, 360); } } });
also, pasted above code in jslint , got following, i'm not sure results. of results bogus results don't encompass of javascript on page in it's entirety. results:
error: problem @ line 21 character 23: '$post_box' defined. var $post_box = $element.parent().parent(); problem @ line 25 character 23: '$post_box' defined. var $post_box = $element.parent().parent().parent().parent(); problem @ line 28 character 34: '$post_box' used out of scope. $target_open = jquery( '#' + $post_box.attr('id') ); problem @ line 72 character 23: expected '{' , instead saw 'callback'. if (callback) callback(); problem @ line 78 character 23: expected '{' , instead saw 'callback'. if (callback) callback(); problem @ line 84 character 23: expected '{' , instead saw 'callback'. if (callback) callback(); problem @ line 90 character 23: expected '{' , instead saw 'callback'. if (callback) callback(); problem @ line 102 character 35: expected '{' , instead saw 'masonize'. if (masonize_on_open) masonize(); problem @ line 103 character 27: expected '{' , instead saw 'callback'. if (callback) callback(); problem @ line 114 character 28: expected '{' , instead saw 'masonize'. if (masonize_on_close) masonize(); problem @ line 115 character 19: expected '{' , instead saw 'callback'. if (callback) callback(); problem @ line 123 character 27: expected '{' , instead saw 'callback'. if (callback) callback(); problem @ line 133 character 27: expected '{' , instead saw 'callback'. if (callback) callback(); problem @ line 139 character 21: expected '!==' , instead saw '!='. if (event.value != '/' && $clicked_item) { problem @ line 162 character 27: expected '===' , instead saw '=='. else if ( event.value == '/' && $clicked_item ) { problem @ line 163 character 87: expected '!==' , instead saw '!='. if ( $clicked_item.hasclass('ajax_trigger_close') && $clicked_item.attr('id... implied global: jquery 2,3,6,7,13,15,39,41,119,138, base 2,30,46,96,101, masonize 102,114
i understand things wanting me add {}
around callback, why want !==
instead of !=
in cases, etc?
i solved 2 of 3 problems:
when animating entire page (like scrolling content), must target both html , body tags so: $('html, body')
. had $('body') code didn't work in ie. chrome needs 'body' while ie needs 'html' in total need include both.
also, comments stripped ajax calls flash embed, uses special conditiontionals html comments ie, comes wrong tags ie. why no video played in ie.
the last problem still persists: firefox fails re-organize boxes on site after opening box. knows why!
Comments
Post a Comment