Develop Reference

setInterval not working in Opera

I am trying to make an element blink (by toggeling visibility of the element) but its not working in Opera for whatever reason. Works fine in Firefox and Chrome.
Here's a fiddle with a working sample: http://jsfiddle.net/UDWkK/2/
I don't think I have made any obvious errors.
Tested in Opera 12
Code:
var blinker;
function blink(elem) {
clearInterval(blinker);
blinker = setInterval(function() {
if ($(elem).css('visibility') === 'hidden'){
$(elem).css('visibility', 'visible');
} else {
$(elem).css('visibility', 'hidden');
}
}, 500);
}

As #nevermind noted in the comments above the problem is not with Opera. The problem is with the jsFiddle iframes. Note that jsFiddle is still in alpha stage. Hence there are bound to be some quirks. Hopefully the developers will fix it soon.
Nevertheless the code you provided doesn't really need jQuery, and setInterval works perfectly fine in Opera 12. For example this is what I did, and it blinks away nicely: http://jsfiddle.net/XwEhj/

I think you are in a corner buggy case.
When it's comes to user interface, it's not a good practice to rely on the state of the graphic objects to find out the state of the view. In other terms, you don't want to "read" the state of the view in the HTML elements, but rather in a variable or a set of variables called a view model.
I suggest that you rewrite your code this way, and I think there's a good chance to work around the bug:
var blinker;
function blink(elem) {
clearInterval(blinker);
var visible = false;
blinker = setInterval(function() {
visible = !visible;
$(elem).css('visibility', visible ? 'visible' : 'hidden');
}, 500);
}

IE not taking my onClick, any suggestions?

I have a pretty simple function that seems to work fine in Chrome, Firefox, and Safari, but in IE it's breaking. I'm actually trying to load this as a Windows 8 Web App, but from what I've read, that uses a more forgiving version of IE10 to output.
Say I have a <div> (or an <a> with an href...I've tried this as well) like so:
<div onClick="showSection('myTemplate.html');"></div>
This is my function:
function showSection(loca) {
$("#optionView").show();
$("#bookMenu").hide();
$("#optionView").load('settings/'+loca);
$("#settingsButton").attr("onClick","showSettingsMain();");
}
Why wouldn't this work specifically in IE?

A better option, especially since you are using jQuery, is to not use inline event handlers.
Instead, use this HTML:
<div id="main_div"></div>
And use this Javascript:
$(document).ready(function () {
$("#main_div").on("click", function () {
showSection("myTemplate.html");
});
});
This may not solve your problem with IE10, but it's considered better practice...and should work consistently with all browsers.
A few other suggestions:
Instead of using .attr to set the onclick attribute of #settingsButton, you might as well use on again:
$("#settingsButton").on("click", function () {
showSettingsMain();
});
Although I'm not exactly sure if that would have any effect on what the problem is.
Nonetheless, here's an explanation on the difference between attr and prop - .prop() vs .attr()
Also, if you need to specify exactly what URL to use, even on a per-<div> basis, you could use a data-* attribute. Say this is your HTML:
<div class="trigger-div" data-target-url="myTemplate.html"></div>
<div class="trigger-div" data-target-url="myTemplate2.html"></div>
Then you could use:
$(document).ready(function () {
$(".trigger-div").on("click", function () {
var $this = $(this);
var target_url = $this.attr("data-target-url"); // or $this.data("target-url")
showSection(target_url);
});
});
Clicking the first div will use "myTemplate.html", while clicking the second will use "myTemplate2.html".
This way, your data is embedded in your HTML, but your Javascript is unobtrusive.

You are using jQuery wrong, here:
First, bind the event to the div, you'll need to add a class or id for that:
<div id="myEvent"></div>
Then, bind the event:
$('#myEvent').on('click', showSection( 'myTemplate.html') );
And your function:
function showSection(loca) {
$("#optionView").show();
$("#bookMenu").hide();
$("#optionView").load('settings/'+loca);
}
Try that way.

Javascript hide/show toggle works both ways in Opera, but only one way in other browsers

I have a customized show/hide toggle script that I'm using along with CSS3 transitions for the effects.
The script shows the content when clicked, and hides it when the 'HideLink' link is clicked, complete with CSS3 transistions - but only in Opera.
In other browsers the script only works for showing the content, clicking the hide link doesn't work.
See this JSfiddle: http://jsfiddle.net/xte63/

These days with show / hide javascript, I prefer to use HTML5's data-* attributes.
This can already be used in non-HTML5 browsers via the getAttribute and setAttribute function.
I've quickly tried it against IE7, Chrome and Opera and it seems to work.
http://jsfiddle.net/ThJcb/
function showHide(shID) {
var exDiv = document.getElementById(shID);
if(exDiv.getAttribute("data-visible") != 'false'){
document.getElementById(shID+'-show').style.cssText = ';height:auto;opacity:1;visibility:visible;';
document.getElementById(shID).style.cssText = ';height:0;opacity:0;visibility:hidden;';
exDiv.setAttribute("data-visible" , 'false');
} else {
document.getElementById(shID+'-show').style.cssText = ';height:;opacity:0;visibility:hidden;';
document.getElementById(shID).style.cssText = ';height:auto;opacity:1;visibility: visible ;';
exDiv.setAttribute("data-visible" , 'true');
}
}
This allows you to determine the state of the div without having to check for CSS values.
EDIT: As pointed out in the comments, a typo was on the hide link (onlick instead of onclick) which made it appear the above jsfiddle worked whereas it didn't. At least not exactly as I made an error in the logic, setting the "data-visible" to false instead of true.
Here's an updated jsfiddle: http://jsfiddle.net/ThJcb/4/
(javascript snippet above updated also)

Small jQuery script not working in IE8

I wrote a small script for an eCommerce site that errors an order if certain conditions aren't met. Now I'm trying to write something so the continue button returns the user to their cart. I can't change the button to add a class.
The problem is that this script doesn't work in IE. I'm not overly familiar with the differences in how browsers handle JavaScript. Does anyone have any ideas?
<script type="text/javascript">
jQuery("#shipping-method-buttons-container .button").wrap(function() {
var link = jQuery('<a/>');
link.attr('href', 'http://mywebsite.com/checkout/cart/');
return link;
});
</script>
Update: I have since tested this in IE9 and IE10. I'm getting this problem in all IE browsers.

you can try this:
$("#shipping-method-buttons-container .button").click(function(){
window.location = "http://mywebsite.com/checkout/cart/"
})

This is working in IE and others
jQuery(function(){
jQuery("#shipping-method-buttons-container .button").wrap(function() {
var link = jQuery('<a></a>').attr('href', 'http://mywebsite.com/checkout/cart/');
return link;
});
});
Example.

Setting pretty print tags through javascript

Im trying to get pretty.js to prettify code in CODE tags, using this js:
onload_functions.push(function() {
var node_list=document.getElementsByTagName('code');
for (i=0; i < node_list.length; i++) {
node_list[i].setAttribute('class','prettyprint');
}
prettyPrint();
});
This works fine for Firefox :) but IE's having none of it.
What am i doing wrong?
You can see it (non)working at http://sam.xnet.tk

This would be far simple and work in all browsers with jQuery.
$(function() {
$('code').addClass('prettyprint');
prettyPrint();
});
EDIT: The reason it's not working in IE is because IE uses 'className' instead of 'class' just to make life miserable.

If the code element has any other class names, this will yield chaos in IE. Using the (IE-specific) JavaScript property className will likely work.
I commented on the onload function on your website.
Btw, the way you embed the JavaScript it will break future standard-compatible browsers, see the W3C validator's output for your site. The easiest solution is to move the code to an external file.