Wow. I completely understand. You've opened my eyes in more ways than one. I
hope my newbie question has resulted in an education for all of us.
Incredible insight Klaus. YOU ARE THE MAN!
Klaus Hartl wrote:
>
> 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() {
> $(' # Toggle ')
> .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:
>
> #content Content
> ...
> <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:
>
> #content Content
> <div id="content"> ... </div>
>
> In these cases I add the link dynamically.
>
>
> -- Klaus
>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
>
--
View this message in context:
http://www.nabble.com/--or-javascript%3A--tf3241319.html#a9020737
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
