Databases
StackOverflow2013
Postsdbo
POjQuery: Cross-browser problem -- Debugging Internet Explorer
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery: Cross-browser problem -- Debugging Internet Explorer
    text
    copied!<p>Update: The issue seems to be that due to the JavaScript that was written to acccomodate a problem with Firefox/flash, the program is now trying to play html5 in IE, which isn't working for IE 8 and earlier. However, if I put a javascript based html5 link in the header <a href="http://html5media.info/" rel="nofollow">http://html5media.info/</a>, the html5 players work in IE 8 but not in any workable way. All the players show at once and start playing automatically. Note, all my students are in Asia so the game sort of has to work in IE 8...</p> <p>I made a game using jQuery/JavaScript for learners of English as a Second language at <a href="http://eslangel.com/michaels-numbers-game/" rel="nofollow">game here</a>. It works in Chrome, Firefox and Safari, but not Internet Explorer. I don't know how to figure out the problem in I.E., but it seems like a pretty simple javascript problem that the cross-browser compatability of jQuery shouldn"t have a problem with, unless my code is so bad that I've screwed it up somehow (note that I am a relative newbie)</p> <p>The game uses 16 different audio recordings, so there are 16 different audio players. However, each audio player is hidden using css </p> <pre><code>display: none </code></pre> <p>and then made to reappear with </p> <pre><code>.css('display', 'block'); </code></pre> <p>but in IE it's not working</p> <p>Using JavaScript, I randomly select a number from 1 to 16 and then make one of the audio players visible based on that. It all happens when you click "start" on the game"s home page. However, in I.E., the audio player doesn"t show when I click start. This seems like a fairly basic JavaScript issue that I would have thought jQuery wouldn"t have cross-browser issues with, Note, other parts of the JavaScript appear to work in IE. For example, if you click one of the letters at the bottom of the game, it tells you whether your guess was right or wrong (based on the audio you"re supposed to hear).</p> <p>I also noticed that in I.E. the page takes a heck of a long time to load (5 minutes later, It still says 16 items remaining at the bottom). I assume those might be the audio players. In other browswers, that doesn't happen. </p> <p>It's very important for me that the game work in IE because the students I made it for are in Japan, and most of them use IE</p> <p>Can anyone help me debug this in IE or give me an idea how to debug it in IE?</p> <p>This is the code that is supposed to make the audio player appear. Depending on whether browser uses Flash or HTML5 (which is detected with the line <code>if ($('#ONE').length)</code> ), jQuery then either uses "show" or .css('display', 'block') to make the audio player appear. Assuming IE is choosing flash, then it is using </p> <pre><code>.css('display', 'block') </code></pre> <p>to make the audio player appear (unsuccessfully)</p> <p>jQuery to make audio player appear</p> <pre><code>function test() { $(".start").click(function() { ran = getRandom(myArray, true); if ($('#ONE').length) { $( '#' + ran ).show(); } else { $('#f-' + ran).css('display', 'block'); } }); </code></pre> <p>Update, this is the PHP file from the audio plugin</p> <pre><code>## WPaudio version $wpa_version = '3.1'; ## Pre-2.6 compatibility (from WP codex) if ( ! defined( 'WP_CONTENT_URL' ) ) define( 'WP_CONTENT_URL', get_option( 'siteurl' ) . '/wp-content' ); if ( ! defined( 'WP_CONTENT_DIR' ) ) define( 'WP_CONTENT_DIR', ABSPATH . 'wp-content' ); if ( ! defined( 'WP_PLUGIN_URL' ) ) define( 'WP_PLUGIN_URL', WP_CONTENT_URL. '/plugins' ); if ( ! defined( 'WP_PLUGIN_DIR' ) ) define( 'WP_PLUGIN_DIR', WP_CONTENT_DIR . '/plugins' ); if ( ! defined( 'WPAUDIO_URL' ) ) define( 'WPAUDIO_URL', WP_PLUGIN_URL . '/wpaudio-mp3-player' ); ## Get WPaudio's options from DB (or create them if not found) $wpa_options = wpaOptions(); ## WP handlers - add WPaudio processing at necessary events # If it's not an admin page, get everything for the player if ( !is_admin() ) { # Calling scripts add_action('init', 'wpaLibraries'); # Add header action to include CSS and JS vars add_action('wp_head', 'wpaHead'); # Add shortcode for WPaudio player add_shortcode('wpaudio', 'wpaShortcode'); # Add filter for shortcode in excerpt and widgets add_filter('the_excerpt', 'do_shortcode'); add_filter('widget_text', 'do_shortcode'); # Add filter for non-shortcode substitutes (including excerpts and widgets) if ($wpa_options['wpa_tag_audio']) { add_filter('the_content', 'wpaFilter'); add_filter('the_excerpt', 'wpaFilter'); add_filter('widget_text', 'wpaFilter'); } } # Add admin add_action('admin_menu', 'wpa_menu'); # Add track if ($wpa_options['wpa_track_permalink']) add_action('publish_post', 'wpaPostNew'); function wpaOptions(){ ## WPA options and defaults global $wpa_version; $wpa_options = Array( 'wpa_version' =&gt; $wpa_version, 'wpa_pref_link_mp3' =&gt; 0, 'wpa_tag_audio' =&gt; 0, 'wpa_track_permalink' =&gt; 1, 'wpa_style_text_font' =&gt; 'Sans-serif', 'wpa_style_text_size' =&gt; '18px', 'wpa_style_text_weight' =&gt; 'normal', 'wpa_style_text_letter_spacing' =&gt; 'normal', 'wpa_style_text_color' =&gt; 'inherit', 'wpa_style_link_color' =&gt; '#24f', 'wpa_style_link_hover_color' =&gt; '#02f', 'wpa_style_bar_base_bg' =&gt; '#eee', 'wpa_style_bar_load_bg' =&gt; '#ccc', 'wpa_style_bar_position_bg' =&gt; '#46f', 'wpa_style_sub_color' =&gt; '#aaa' ); if ( $wpa_options_db = get_option( 'wpaudio_options' ) ) { foreach ( $wpa_options as $key =&gt; $value ) { if ( isset($wpa_options_db[$key]) ) { $wpa_options[$key] = $wpa_options_db[$key]; } } } else { # Get legacy options and remove if they exist if ( get_option('wpa_tag_audio') ) { foreach ($wpa_options as $key =&gt; $value) { $wpa_option_old_db = get_option($key); if ( $wpa_option_old_db !== false &amp;&amp; $wpa_option_old_db !== '' ) { $wpa_options[$key] = $wpa_option_old_db; } delete_option($key); } } # Create wpaudio_options add_option('wpaudio_options', $wpa_options, '', 'no'); //update_option('wpaudio_options', $wpa_options); } return $wpa_options; } ## Built-in libraries function wpaLibraries(){ global $wpa_version; //wp_deregister_script( 'jquery' ); //wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js', '1.4.3' ); if ( version_compare( get_bloginfo( 'version' ), '2.8', '&gt;=' ) ) { if ( WP_DEBUG === false ) { wp_register_script( 'wpaudio', WPAUDIO_URL . '/wpaudio.min.js', Array('jquery'), $wpa_version, true ); } else { wp_register_script( 'wpaudio', WPAUDIO_URL . '/wpaudio.js', Array('jquery'), $wpa_version, true); } wp_enqueue_script( 'wpaudio' ); } else { wp_enqueue_script('jquery'); add_action('wp_footer', 'wpaFooterForOldVersions'); } } ## WPaudio style, jQuery, SWFObject function wpaHead(){ global $wpa_options; # Put all styles into the _wpaudio settings object $style = ''; foreach ( $wpa_options as $key =&gt; $value ) { $exploded = explode('_', $key, 3); if ( $exploded[1] == 'style' ) { $style .= $exploded[2] . ":'$value',"; } } $style = trim( $style, ',' ); $style = '{' . $style . '}'; # Common JS $wpa_pref_link_mp3 = ($wpa_options['wpa_pref_link_mp3']) ? 'true' : 'false'; $head = "&lt;script type='text/javascript'&gt;/* &lt;![CDATA[ */ var _wpaudio = {url: '" . WPAUDIO_URL . "', enc: {}, convert_mp3_links: $wpa_pref_link_mp3, style: $style}; /* ]]&gt; */&lt;/script&gt;"; echo $head; } function wpaFooterForOldVersions() { echo '&lt;script type="text/javascript" src="' . WPAUDIO_URL . '/wpaudio.min.js"&gt;&lt;/script&gt;'; } # Used only for wpaudio shortcode tags function wpaShortcode($atts){ # Convert shortcodes to WPaudio player depending on settings extract(shortcode_atts(Array( 'url' =&gt; false, 'text' =&gt; false, 'dl' =&gt; true, 'autoplay' =&gt; false ), $atts)); # If no url, return with nothing if (!$url) return; # Get player HTML and JS return wpaLink($url, $text, $dl, $autoplay); } # Make WPA link function wpaLink($url, $text = false, $dl = true, $autoplay = false) { $id = uniqid('wpaudio-'); $class = 'wpaudio'; $html = ''; # Handle dl URLs and no dl players if ($dl == '0') { $js_url = wpaUnicode($url); $href = '#'; $class .= ' wpaudio-nodl'; } elseif (is_string($dl)) { $js_url = wpaUnicode($url); $href = $dl; } else { $href = $url; } if (isset($js_url)) { $class .= ' wpaudio-enc'; $html .= "&lt;script type='text/javascript'&gt;_wpaudio.enc['$id'] = '$js_url';&lt;/script&gt;"; } # Handle blank text if (!$text) { $text = basename($url); $class .= ' wpaudio-readid3'; } # Autoplay if ($autoplay == '1') { $class .= ' wpaudio-autoplay'; } $html .= "&lt;a id='$id' class='$class' href='$href'&gt;$text&lt;/a&gt;"; return $html; } # Used for audio tags function wpaFilter($content){ ## Convert audio tags and links to WPaudio player depending on settings $tag_regex = '/\[audio:(.*?)\]/'; $tag_match = preg_match_all($tag_regex, $content, $tag_matches); # Replace audio tags with player links if ($tag_match){ foreach ($tag_matches[1] as $key =&gt; $value){ # This is one tag, first get parameters and URLs $params = explode('|', $value); $clips = Array('urls' =&gt; Array(), 'titles' =&gt; Array(), 'artists' =&gt; Array()); $clips['urls'] = explode(',', $params[0]); # Process extra parameters if they exist for ($i=1; $i&lt;count($params); $i++) { # Get the parameter name and value $param = explode('=', $params[$i]); if ($param[0] == 'titles' || $param[0] == 'artists') $clips[$param[0]] = explode(',', $param[1]); } # Get player(s) $player = ''; foreach ($clips['urls'] as $ukey =&gt; $uvalue) { $text = ''; $text .= (isset($clips['artists'][$ukey])) ? $clips['artists'][$ukey] : ''; $text .= (isset($clips['artists'][$ukey]) &amp;&amp; isset($clips['titles'][$ukey])) ? ' - ' : ''; $text .= (isset($clips['titles'][$ukey])) ? $clips['titles'][$ukey] : ''; if (!$text) $text = false; $player .= wpaLink($uvalue, $text); } $content = str_replace($tag_matches[0][$key], $player, $content); } } return $content; } # Convert string to unicode (to conceal mp3 URLs) include 'php-utf8/utf8.inc'; function wpaUnicode($str){ $uni = utf8ToUnicode(utf8_encode($str)); $output = ''; foreach ($uni as $value){ $output .= '\u' . str_pad(dechex($value), 4, '0', STR_PAD_LEFT); } return $output; } ## WP admin menu function wpa_menu() { add_options_page('WPaudio Options', 'WPaudio', 'switch_themes', __FILE__, 'wpa_menu_page'); } function wpa_menu_page() { global $wpa_options; if ($_POST) { # Checkboxes need values $wpa_checkboxes = Array( 'wpa_pref_link_mp3', 'wpa_tag_audio', 'wpa_track_permalink' ); foreach ($wpa_checkboxes as $value) { $_POST[$value] = (isset($_POST[$value]) &amp;&amp; $_POST[$value]) ? 1 : 0; } # Now process and save all options foreach ($wpa_options as $key =&gt; $value) { if (isset($_POST[$key]) &amp;&amp; !is_null($_POST[$key]) &amp;&amp; $_POST[$key] !== '') $wpa_options[$key] = $_POST[$key]; } update_option('wpaudio_options', $wpa_options); } wpaOptions(); ?&gt; &lt;!-- wpa menu begin --&gt; &lt;div class="wrap"&gt; &lt;h2&gt;WPaudio Options&lt;/h2&gt; &lt;form method="POST" action=""&gt; &lt;?php wp_nonce_field('update-options'); ?&gt; &lt;div id="poststuff" class="metabox-holder"&gt; &lt;div class="meta-box-sortables"&gt; &lt;div class="postbox"&gt; &lt;h3 class="hndle"&gt;&lt;span&gt;Links&lt;/span&gt;&lt;/h3&gt; &lt;div class="inside"&gt; &lt;ul&gt; &lt;li&gt;WPaudio will always convert links with the &lt;span style="font-family: Courier, Serif"&gt;wpaudio&lt;/span&gt; class. You optionally handle ALL mp3 links too.&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_pref_link_mp3"&gt;&lt;input name="wpa_pref_link_mp3" id="wpa_pref_link_mp3" type="checkbox" &lt;?php if ($wpa_options['wpa_pref_link_mp3']) echo ' checked="yes"'; ?&gt;&gt; Convert all mp3 links - &lt;span style="font-family: Courier, Serif"&gt;&amp;lt;a href="http://domain.com/song.mp3"&amp;gt;Link&amp;lt;/a&amp;gt;&lt;/span&gt;&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="postbox"&gt; &lt;h3 class="hndle"&gt;&lt;span&gt;Tags&lt;/span&gt;&lt;/h3&gt; &lt;div class="inside"&gt; &lt;ul&gt; &lt;li&gt;WPaudio will always convert &lt;span style="font-family: Courier, Serif"&gt;[wpaudio]&lt;/span&gt; tags, but it can also handle tags from other audio players.&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_tag_audio"&gt;&lt;input name="wpa_tag_audio" id="wpa_tag_audio" type="checkbox" &lt;?php if ($wpa_options['wpa_tag_audio']) echo ' checked="yes"'; ?&gt;&gt; Handle Audio Player tags - &lt;span style="font-family: Courier, Serif"&gt;[audio:http://domain.com/song.mp3]&lt;/span&gt;&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="postbox"&gt; &lt;h3 class="hndle"&gt;&lt;span&gt;Style&lt;/span&gt;&lt;/h3&gt; &lt;div class="inside"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" onclick="jQuery('.wpa_style_advanced').css('display', 'block');"&gt;It's not necessary to adjust these settings, but click here for advanced options.&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class="wpa_style_advanced" style="display: none;"&gt; &lt;li&gt;Optionally customize WPaudio's font&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_text_font"&gt;&lt;input type="text" name="wpa_style_text_font" id="wpa_style_text_font" value="&lt;?php echo $wpa_options['wpa_style_text_font']; ?&gt;"&gt; Font face&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_text_size"&gt;&lt;input type="text" name="wpa_style_text_size" id="wpa_style_text_size" value="&lt;?php echo $wpa_options['wpa_style_text_size']; ?&gt;"&gt; Font size&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_text_weight"&gt;&lt;select name="wpa_style_text_weight" id="wpa_style_text_weight"&gt; &lt;option value="inherit" &lt;?php if ($wpa_options['wpa_style_text_weight'] == 'inherit') echo ' selected'; ?&gt;&gt;Inherit&lt;/option&gt; &lt;option value="normal" &lt;?php if ($wpa_options['wpa_style_text_weight'] == 'normal') echo ' selected'; ?&gt;&gt;Normal&lt;/option&gt; &lt;option value="bold" &lt;?php if ($wpa_options['wpa_style_text_weight'] == 'bold') echo ' selected'; ?&gt;&gt;Bold&lt;/option&gt; &lt;/select&gt; Font weight&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_text_letter_spacing"&gt;&lt;input type="text" name="wpa_style_text_letter_spacing" id="wpa_style_text_letter_spacing" value="&lt;?php echo $wpa_options['wpa_style_text_letter_spacing']; ?&gt;"&gt; Letter spacing&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class="wpa_style_advanced" style="display: none;"&gt; &lt;li&gt;Optionally customize colors (Most commonly 3 or 6 character &lt;a href="http://en.wikipedia.org/wiki/Web_colors#Color_table" target="_blank"&gt;hex codes&lt;/a&gt;. For example: &lt;span style="font-family: Courier, Serif"&gt;#2244ff&lt;/span&gt;)&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_text_color"&gt;&lt;input type="text" name="wpa_style_text_color" id="wpa_style_text_color" value="&lt;?php echo $wpa_options['wpa_style_text_color']; ?&gt;" size="7"&gt; Text color&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_link_color"&gt;&lt;input type="text" name="wpa_style_link_color" id="wpa_style_link_color" value="&lt;?php echo $wpa_options['wpa_style_link_color']; ?&gt;" size="7"&gt; Link color&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_link_hover_color"&gt;&lt;input type="text" name="wpa_style_link_hover_color" id="wpa_style_link_hover_color" value="&lt;?php echo $wpa_options['wpa_style_link_hover_color']; ?&gt;" size="7"&gt; Link hover color&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_bar_base_bg"&gt;&lt;input type="text" name="wpa_style_bar_base_bg" id="wpa_style_bar_base_bg" value="&lt;?php echo $wpa_options['wpa_style_bar_base_bg']; ?&gt;" size="7"&gt; Bar base background&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_bar_load_bg"&gt;&lt;input type="text" name="wpa_style_bar_load_bg" id="wpa_style_bar_load_bg" value="&lt;?php echo $wpa_options['wpa_style_bar_load_bg']; ?&gt;" size="7"&gt; Bar load background&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_style_bar_position_bg"&gt;&lt;input type="text" name="wpa_style_bar_position_bg" id="wpa_style_bar_position_bg" value="&lt;?php echo $wpa_options['wpa_style_bar_position_bg']; ?&gt;" size="7"&gt; Bar position background&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="postbox"&gt; &lt;h3 class="hndle"&gt;&lt;span&gt;Notification&lt;/span&gt;&lt;/h3&gt; &lt;div class="inside"&gt; &lt;ul&gt; &lt;li&gt;I love seeing who's using my plugin! Please select this option to enable a notification when a post containing the player is published so I can come check out your site. Your blog may even be featured on WPaudio.com. Thanks!&lt;/li&gt; &lt;li&gt;&lt;label for="wpa_track_permalink"&gt;&lt;input name="wpa_track_permalink" id="wpa_track_permalink" type="checkbox" &lt;?php if ($wpa_options['wpa_track_permalink']) echo ' checked="yes"'; ?&gt;&gt; Allow WPaudio notification&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class="submit"&gt; &lt;input class="button-primary" type="submit" value="Save Changes"&gt; &lt;/p&gt; &lt;/form&gt; &lt;/div&gt; &lt;!-- wpa menu end --&gt; &lt;?php } ## WP new post - add ping if contains wpaudio function wpaPostNew($id) { $post = get_post($id); if (strpos(strtolower($post-&gt;post_content), 'wpaudio') !== false) { $permalink = rawurlencode(get_permalink($id)); if (function_exists('curl_init') &amp;&amp; function_exists('curl_setopt') &amp;&amp; function_exists('curl_exec') &amp;&amp; function_exists('curl_close')) { $ch = curl_init("http://wpaudio.com/t/?url_post=$permalink"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_HEADER, 0); curl_exec($ch); curl_close($ch); } } } ?&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload