hcabbos schrieb: > Understood. But all this started with me asking whether to use inline # or > javascript:; for activating a toggle. So my conclusion is if Progressive > Enhancement is what I'm after, I'll use this method: > > <script type="text/javascript"> > $(document).ready(function(){ > $("a#sliderExec").bind('click', function() { > $("div#myElement").toggle("slow"); > return false; > }); > }); > </script> > > <a id="sliderExec" href="toggledDivContent.html">my text</a>
This is a little over the top and would apply to a situation where you want a link to load content via Ajax. In your example the enhancement to the page is that there is a link that toggles the visibility of content that is *already* on the page, thus without JavaScript that content will be accessible. But without JavaScript that link to toggle would be confusing and had no functionality. Progressive Enhancement/Unobtrusive JavaScript here means to add the link that has solely JavaScript functionality on the fly. For example like: $(function() { $('<a href="#">Toggle</a>') .before('#toggle-me') .bind('click', function() { $('#toggle-me').toggle(); return false; }); }); Here you can put in a '#' or whatever into the href attribute, because you added the link via JavaScript in the first place. There's another approach which makes sense sometimes, but not always. If you don't want to add the link via JavaScript you can have a link that points to a certain fragment (the element with the corresponding id) on the page it should work with. Consider this: <a id="exec" href="#content">Content</a> ... <div id="content"> ... </div> If JavaScript is disabled you still have a functional link that takes the user to the appropiate section. This is also handy for your scripts because you don't need to hardcode some of the ids: $(function() { $('#exec').bind('click', function() { $(this.hash).toggle(); return false; }); }); This results in better reusability. If you want to have another link with the same functionality you just need to add the id: $(function() { $('#exec, #another-exec').bind('click', function() { $(this.hash).toggle(); return false; }); }); It's probably better to classify these kind of links then: $(function() { $('a.exec').bind('click', function() { $(this.hash).toggle(); return false; }); }); That also means improved maintainability. If you need to change the ids, you just have to change them in your HTML and your script is still intact. I mentioned that this is not always reasonable. To me if both link and target are next to each other I don't think that this construct is very reasonable, because the anchor doesn't make much sense in plain HTML: <a id="exec" href="#content">Content</a> <div id="content"> ... </div> In these cases I add the link dynamically. -- Klaus _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/