CODEWITHSUNDEEP
jquerycssmobile
shadylane
shadylane

Reputation: 97

JQuery Mobile - dynamically changing css with Javascript

I am having a problem trying to change the css of a button in JQuery Mobile. I am not using the default page header ie. within the header I have nested a div with a logo etc. so the header height is about double the default.

The problem is with the back button. It defaults to the top left whereas I would like it to be centered vertically. To this end, I inserted the script below into the page header just below the script include for JQuery Mobile.

<script type="text/javascript">
    $(document).ready(function(){
        $(".ui-btn").css("margin","20px");
    }
</script>

The HTML looks like this:

<div data-role="page" id="main" data-theme="b"> 
<div id="myheader" data-role="header"><div id="header"><div id="logo"><img src="assets/logo.gif" alt="Acme" /></div></div></div>

I can't seem to interact with the ui css in any way. I've also tried:

$("#myheader a.ui-btn").css("margin","20px");

and

$(".ui-btn-left").css("margin","20px");

And also not nesting it within '$(document).ready(function(){' but nothing seems to be working.

I'd like to change the colours as well, but I'll move on to that once I've worked this out! Any help or pointers would be hugely appreciated.

Thanks

Greg

Upvotes: 0

Views: 5375

Answers (1)

Jon
Jon

Reputation: 1347

Are you sure that's the complete HTML, and Javascript isn't generating any other markup?

You're selecting an element with a class of .ui-btn or ui-btn-left, but those elements aren't present in the markup you've provided.

Would recommend checking it out in Firebug, as that will show you any HTML generated by Javascript.

------ EDIT AFTER INFO PROVIDED -------

Ok, I think what you're running into is your use of margin to control the position of an inline element. Unless the the <a> or the <span>s are specifically set as block elements by the CSS, margin may not affect them the way you'd expect.

I'd recommend trying to first set your target as a block element, and apply the CSS with an external stylesheet or inside some <style> tags on the page, rather than with jQuery.

Try something like this instead of that little JS snippet you referenced, and see where it gets you:

<style>
    #myheader a.ui-btn {display: block; margin: 20px;}
</style>

Sounds to me like the problem is not necessarily that you can't use CSS interact with the UI HTML, but rather that it's not behaving the way you'd expect.

Upvotes: 1

Related Questions