Let me start this with this has nothing at all to do with the guide website. This is a completely different issue which is why I made a completely different thread for it. Basically what I'm doing is trying to follow this guide and make it work. The jQuery documentation for the function I'm using is here. The running environment is IE8, but that is a requirement for this so I can't get around it. However I do know that however that tutorial site did their code is working when I try to look at through ie8 so it's something I'm doing wrong... Here's a skeleton of my markup: Code: <html> <head> <title></title> <link rel="stylesheet" href="css/style.css"> <!-- jquery library --> <script type="text/javascript" src="js/libs/jquery-min.js"></script> <script type="text/javascript" src="js/libs/jquery-ui-1.8.21.custom.min"></script> <script type="text/javascript" src="js/scripts.js"></script> </head> <body> <div class="body_wrapper"> <div id="content_wrapper" class="widget"> <ul class="tabnav"> <li><a href="#content1" id="tab1">Content 1</a></li> <li><a href="#content2" id="tab2">Content 2</a></li> <li><a href="#content3" id="tab3">content 3</a></li> </ul> <div class="tabdiv" id="content1"> <p>Some stuff</p> </div> <!-- content1 --> <div class="tabdiv" id="content2"> <p>Some stuff</p> <p>Some more stuff</p> </div> <!-- content2 --> <div class="tabdiv" id="content3"> <p>Some stuff</p> <p>Some more stuff</p> <p>How much stuff can there be?</p> </div> <!-- content3 --> </div> <!-- content_wrapper --> </div> <!-- body_wrapper --> </body> </html> Styling is this (stripped down again): Code: /* Just some defaults I'm setting up */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222222; } body { margin: 2px; line-height: 1.4; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } /* now some styling */ .body_wrapper { font-size: 12px; text-align: center; } .body_wrapper a { color: #0000ee; text-decoration: none; } .body_wrapper a:hover { color: #0066ee; text-decoration: underline; } .body_wrapper a:visited { color: #551a8b; } .body_wrapper a:focus { outline: thin dotted; } .body_wrapper a:hover, .body_wrapper a:active { outline: 0; } .body_wrapper p { font-size: 12px; } .widget { width: 478px; text-align: left; } .widget ul li { list-style-type: none; margin-bottom: 1em; } .widget ul li a { font-weight: bold; } .tabdiv { margin-top: 2px; width: 478px; padding: 5px; border: 1px solid #dedbd1; background: #FFF; } .tabnav { margin-top: 0px; margin-bottom: 0px; padding: 0px; padding-top: 5px; } .tabnav li { display: inline; font-size: 1.1em; } .tabnav li a { color: #222222; text-decoration: none; font-weight: bold; padding: 5px 5px; } .tabnav li a:hover, .tabnav li a:active { color: #222222; text-decoration: none; background-color: #acc5f2; } .tabnav li a:visited { color: #222222; } .tabnav li.ui-tabs-selected a { color: #222222; text-decoration: none; } .ui-tabs-hide { display: none; } #content_wrapper { width: 478px; padding: 5px; background: #8393ca; } Finally the javascript (this isn't edited at all): Code: $(document).ready(function() { $('#content_wrapper > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); }); When I run the page it returns an error to me: "Object doesn't support this property or method". The error points at the line of jQuery I have. I'm fairly sure that my markup is correct, and I copied that jQuery bit right out of the tutorial. So I can only conclude that I did something to my CSS that's causing it to break, but I have no idea what it is =/. If nobody can help me here I'll go to a more software focused forum and ask again. Thanks
don't have the time to recreate it now, but have you tried different browsers? The issue is likely that it can't find the element you're trying to work with.
I am pretty sure the issue lies in : Code: #content_wrapper > ul AFAIK IE doesn't support the child selector (>). http://www.webdevout.net/browser-support-css So give your ul an id and use that instead in your jQuery code. In other words, change : Code: <ul class="tabnav"> to : Code: <ul class="tabnav" id="myTabs"> And : Code: $('#content_wrapper > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); }); to: Code: $('#myTabs').tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); }); Edit: Child selector would work it seems, but only if your HTML is correct (with doctypes) http://stackoverflow.com/a/2818326 :
Trying it in different browsers is not something I tried, but I don't think that's going to help me. The website will be used EXCLUSIVELY with IE8, so even if I get it working in another environment it's not going to make a difference. It needs to work in IE8. As for the child selectors, I can try changing it, however I think that's not where the issue lies. I preface this with I'm not a jQuery expert so feel free to correct me if I'm wrong. As I understand it, jQuery simply immitates CSS syntax in the query syntax. I don't think it's using the browser's CSS interpretation engine to query the DOM. I THINK the jQuery library has its own methods to interpret the selectors you put in there. If that's the case then I can use whatever selectors are supported by the jQuery selector interpreter.
This worked for me. And according to the documentation that "> ul" part has nothing to do there either Code: <html> <head> <title></title> <link rel="stylesheet" href="style.css"> <!-- jquery library --> <script type="text/javascript" src="jquery-min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#content_wrapper').tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); }); </script> </head> <body> <div class="body_wrapper"> <div id="content_wrapper" class="widget"> <ul class="tabnav"> <li><a href="#content1" id="tab1">Content 1</a></li> <li><a href="#content2" id="tab2">Content 2</a></li> <li><a href="#content3" id="tab3">content 3</a></li> </ul> <div class="tabdiv" id="content1"> <p>Some stuff</p> </div> <!-- content1 --> <div class="tabdiv" id="content2"> <p>Some stuff</p> <p>Some more stuff</p> </div> <!-- content2 --> <div class="tabdiv" id="content3"> <p>Some stuff</p> <p>Some more stuff</p> <p>How much stuff can there be?</p> </div> <!-- content3 --> </div> <!-- content_wrapper --> </div> <!-- body_wrapper --> </body> </html> PS: Your original code didn't work anywhere.
Hmm. I think that would work for me if it weren't getting blocked by activeX verification. However, that got me thinking. "The tutorial's tabs work probably because they're using a different version of the library," is the idea that dawned on me. Perhaps when it was written query ui tabs worked a little differently. I did a bit of digging and came out with the tutorial site's jquery ui library and tried theirs. Worked, and I didn't get an activex notification. Thanks for your help faugusztin.
The activex block is because you are looking at local file. Put it on webserver, and it won't show the warning. Local filesystem belongs to high security setting, where activex is disabled by default.
