ansaurus

Question

why is css not being applied to this jquery anchor button?

Answer 1

+1 A:

You need to actually make it a button using .button(), like this:

$(function() {
  $(".test a").button();
});

You can see the jQuery UI demos here and a demo of your markup working here.

Nick Craver 2010-05-24 23:53:13

you do not need a button to call click

Daveo 2010-05-25 00:44:46

@Daveo - I think you misunderstood the question, the question was why didn't it **look** like a button... "it's rendering as a simple underlined label, not as a rounded-corner UI button." I don't think I implied you needed this to have a `click` handler anywhere...just that you need `.button()` or to manually apply the relevant styles and elements to make it a button.

Nick Craver 2010-05-25 00:57:02

Yes- you are right I did miss read the question

Daveo 2010-05-25 03:20:14

@Nick: I was following the example page you cited almost verbatim. IF you check out the View Source link there, you will see that my code and markup are virtually identical to the example. How is that example page getting the anchor button to render with rounded corners?

Tim 2010-05-25 11:33:32

@Tim - That example calls `.button()` like my answer, it's missing from your code: `$("button, input:submit, a", ".demo").button();`

Nick Craver 2010-05-25 11:41:41

@Nick, the example does not call .button() on the anchor-button, though it does call .button() on the button-button. But you're right, calling .button() will cause the CSS to be applied.

Tim 2010-05-25 21:36:22

@Nick: the example has this: $("a", ".demo").click(function() { return false; });

Tim 2010-05-25 21:38:22

@Tim - It calls the button on `<button>`, `<input type="submit">`, and `<a>`, look at the selector: `$("button, input:submit, a", ".demo").button();` It's doing `.button()` on all 3 types of elements, then *also* attaching a click handler to the anchor.

Nick Craver 2010-05-25 22:26:24

@Nick, I completely missed the multiple selectors. I didn't even know that was possible! Thank you for pointing this out.

Tim 2010-05-27 17:58:26

Answer 2

A:

You need to add the proper class to the link, using jQuery or otherwise.

Try:

<a href="#" class="ui-button">Button</a>

Khan 2010-05-24 23:56:20

There are many more classes and a wrapped element in play here, just adding the `ui-button` class won't do it :) See here for an example of that: http://jsfiddle.net/jG5Ch/

Nick Craver 2010-05-24 23:58:02

Answer 3

A:

You do not need to make it a button you just need

  $(".test a").click(function(){showIntro();return false;});

What you are trying to do with your selector passing the second paramater is the Scope. The second paramater is not mean to be a string (selector) it should be a jQuery Object.

So if you wanted to do it your way your would have to say

var test = $('.test');

$('a',test).click...

But the 1st method is prefered over doing it this way.

Daveo 2010-05-25 00:44:07

This wasn't the question...that's why there's CSS in the title of the question, I think you should re-read the question. The `click` handling already works, even if it has extra code and an extra `document.ready` wrapper...but this answer doesn't answer the question at all. Also, it's factually incorrect, here's a demo showing a string/selector for the context works: http://jsfiddle.net/s7BAw/

Nick Craver 2010-05-25 01:06:46

I was following the example here: http://jqueryui.com/demos/button/ and it looked to me as though the second parameter was referring to the container DIV: $("a", ".demo").click(function() { return false; }); Here is the markup: <div class="demo"> <button>A button element</button> <input type="submit" value="A submit button"> <a href="#">An anchor</a> </div>Sorry if this gets wrapped and unformatted.

Tim 2010-05-25 11:29:02

@Tim yes you are right, I was wrong again

Daveo 2010-05-26 01:22:50

Answer 4

A:

Sorry to be providing an answer, if not "the" answer, to my own question, but I have discovered a clue as to what's going on, if not the ultimate cause of the behavior. Below is code cut and pasted from the Button example on the jQuery website; take it to jsFiddle and run it: it works. But if you remove this line relating to the input-button:

 $("button, input:submit, a", ".demo").button();

then the anchor-button fails to render properly. Why is the anchor-element's rendering dependent on the existence of the input-button?

<script type="text/javascript">
    $(function() {
        $("button, input:submit, a", ".demo").button();

        $("a", ".demo").click(function() { return false; });
    });
    </script>
    <style>

    </style>



<div class="demo">

    <button>A button element</button>

    <input type="submit" value="A submit button">

    <a href="#">An anchor</a>

</div><!-- End demo -->

Tim 2010-05-25 11:44:16

ansaurus

tags:

views:

answers:

why is css not being applied to this jquery anchor button?

related questions